Deploying to asf-site from @ apache/echarts-website@005a07b314bcf1f7ea985ac84345dc6d4cccdab2 🚀
diff --git a/components/builder.html b/components/builder.html
index e9feb17..3ce4e63 100644
--- a/components/builder.html
+++ b/components/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>ECharts 在线构建</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载。</p><p>注意:打包的源文件来自 jsdelivr CDN,非 Apache 官方源代码和编译产物</p><div class="download-version"><span>选择版本</span><select id="versions"></select></div></div></div><div class="page-content"><div id="configuration" class="container"><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/compare-versions@3.6.0/index.min.js"></script><script>var $versionsDom = document.querySelector('#versions');
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载。</p><p>注意:打包的源文件来自 jsdelivr CDN,非 Apache 官方源代码和编译产物</p><div class="download-version"><span>选择版本</span><select id="versions"></select></div></div></div><div class="page-content"><div id="configuration" class="container"><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://echarts.apache.org/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://echarts.apache.org/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/compare-versions@3.6.0/index.min.js"></script><script>var $versionsDom = document.querySelector('#versions');
fetch('https://data.jsdelivr.com/v1/package/npm/echarts', {
mode: 'cors'
diff --git a/components/download.html b/components/download.html
index 0fb1e98..f83076b 100644
--- a/components/download.html
+++ b/components/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>下载 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-src.zip</li></ol><h4>License</h4><p>Apache ECharts 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder3.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下一步</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://echarts.apache.org/zh/js/download.js?_v_=a291df3a02"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-src.zip</li></ol><h4>License</h4><p>Apache ECharts 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder3.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下一步</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://echarts.apache.org/zh/js/download.js?_v_=13b5fd7540"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
//- $('.download-echarts').click(function (e) {
//- var el = document.createElement('div');
diff --git a/components/nav.html b/components/nav.html
index 4607fee..03e76e7 100644
--- a/components/nav.html
+++ b/components/nav.html
@@ -1 +1 @@
-<div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"/></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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>
\ No newline at end of file
+<div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"/></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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>
\ No newline at end of file
diff --git a/en/404.html b/en/404.html
index dd94894..ab7aba9 100644
--- a/en/404.html
+++ b/en/404.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div class="page-main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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="not-found"><img src="https://echarts.apache.org/zh/images/404.png?_v_=20200710_1" alt="404"><div class="text">This is not the web page you are looking for.<a href="./index.html" class="link">Back to home</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div class="page-main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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="not-found"><img src="https://echarts.apache.org/zh/images/404.png?_v_=20200710_1" alt="404"><div class="text">This is not the web page you are looking for.<a href="./index.html" class="link">Back to home</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/api.html b/en/api.html
index b92ab41..474e39e 100644
--- a/en/api.html
+++ b/en/api.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/en/option.html">V4 Documentation</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/en/option.html">V4 Documentation</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/api-parts',
@@ -19,7 +19,7 @@
};
if (window.EC_WWW_CDN_PAY_ROOT) {
window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/en/' + window.globalArgsExtra.baseUrl
-}</script><script type="text/javascript">window.globalArgsExtra.version = '55907f28e6';
+}</script><script type="text/javascript">window.globalArgsExtra.version = 'dbf1fef9db';
echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/builder.html b/en/builder.html
index 25f64ac..f184bb9 100644
--- a/en/builder.html
+++ b/en/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>ECharts Online Builder</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="builder"><div class="page-info"><div id="title" class="container"><h1>Online Builder</h1><p>Bundle and download the needed charts and components.</p><p>NOTE: The bundler downloads sources from jsdelivr CDN, It's not an official apache source release or distribution.</p><div class="download-version"><span>Select a version</span><select id="versions"></select></div></div></div><div class="page-content"><div id="configuration" class="container"><section id="charts"><h3>Chart<span></span></h3><p class="desc">Select the charts needed to be packed<br><span class="warn">(The warnings and hints will not be printed on the browser console if using "Code Compression")</span></p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5> <div>Bar</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5> <div>Line</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5> <div>Pie</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5> <div>Scatter</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5> <div>EffectScatter</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5> <div>Candlestick</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5> <div>Radar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5> <div>Heatmap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5> <div>Tree</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5> <div>Treemap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5> <div>Sunburst</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5> <div>Map</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5> <div>Lines</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5> <div>Graph</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5> <div>Boxplot</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5> <div>Parallel</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5> <div>Gauge</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5> <div>Funnel</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5> <div>Sankey</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5> <div>ThemeRiver</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5> <div>PictorialBar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5> <div>Custom</div></h5></li></ul></section><section id="coords"><h3>Coordinate Systems<span></span></h3><p class="desc">Select coordinate systems needed to be packed. Some of the charts like "scatter", "line", "graph", "custom" can layout on multiple coordiante systems.</p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5> <div>Grid</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5> <div>Polar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5> <div>Geo</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5> <div>SingleAxis</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5> <div>Calendar</div></h5></li></ul></section><section id="components"><h3>Component<span></span></h3><p class="desc">Select components needed to be packed.</p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5> <div>Title</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5> <div>Legend</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5> <div>Tooltip</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5> <div>MarkPoint</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5> <div>MarkLine</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5> <div>MarkArea</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5> <div>Timeline</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5> <div>DataZoom</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5> <div>Brush</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5> <div>VisualMap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5> <div>Toolbox</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5> <div>Graphic</div></h5></li></ul></section><section id="other"><h3>Others<span></span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG Renderer</label><p class="desc">Whether to include the SVG Renderer, which enables rendering based on SVG.</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">Available on IE8 (VML Renderer)</label><p class="desc">Whether to include the VML Renderer to support rendering on IE8.</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">Utilities</label><p class="desc">Whether to mount utilities on the echarts namespace. Utilities are usually included, unless requiring minimum bundle size and not need them.</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">Code Compression</label><p class="desc">Whether to Compress code. It is recommended not to compress code in the development environment, because warnings and hints will be removed after compressing.</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">Download</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/compare-versions@3.6.0/index.min.js"></script><script>var $versionsDom = document.querySelector('#versions');
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="builder"><div class="page-info"><div id="title" class="container"><h1>Online Builder</h1><p>Bundle and download the needed charts and components.</p><p>NOTE: The bundler downloads sources from jsdelivr CDN, It's not an official apache source release or distribution.</p><div class="download-version"><span>Select a version</span><select id="versions"></select></div></div></div><div class="page-content"><div id="configuration" class="container"><section id="charts"><h3>Chart<span></span></h3><p class="desc">Select the charts needed to be packed<br><span class="warn">(The warnings and hints will not be printed on the browser console if using "Code Compression")</span></p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5> <div>Bar</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5> <div>Line</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5> <div>Pie</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5> <div>Scatter</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5> <div>EffectScatter</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5> <div>Candlestick</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5> <div>Radar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5> <div>Heatmap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5> <div>Tree</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5> <div>Treemap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5> <div>Sunburst</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5> <div>Map</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5> <div>Lines</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5> <div>Graph</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5> <div>Boxplot</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5> <div>Parallel</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5> <div>Gauge</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5> <div>Funnel</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5> <div>Sankey</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5> <div>ThemeRiver</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5> <div>PictorialBar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5> <div>Custom</div></h5></li></ul></section><section id="coords"><h3>Coordinate Systems<span></span></h3><p class="desc">Select coordinate systems needed to be packed. Some of the charts like "scatter", "line", "graph", "custom" can layout on multiple coordiante systems.</p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5> <div>Grid</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5> <div>Polar</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5> <div>Geo</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5> <div>SingleAxis</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5> <div>Calendar</div></h5></li></ul></section><section id="components"><h3>Component<span></span></h3><p class="desc">Select components needed to be packed.</p><ul><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5> <div>Title</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5> <div>Legend</div></h5></li><li class="checked"><img src="https://echarts.apache.org/en/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5> <div>Tooltip</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5> <div>MarkPoint</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5> <div>MarkLine</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5> <div>MarkArea</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5> <div>Timeline</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5> <div>DataZoom</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5> <div>Brush</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5> <div>VisualMap</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5> <div>Toolbox</div></h5></li><li><img src="https://echarts.apache.org/en/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5> <div>Graphic</div></h5></li></ul></section><section id="other"><h3>Others<span></span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG Renderer</label><p class="desc">Whether to include the SVG Renderer, which enables rendering based on SVG.</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">Available on IE8 (VML Renderer)</label><p class="desc">Whether to include the VML Renderer to support rendering on IE8.</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">Utilities</label><p class="desc">Whether to mount utilities on the echarts namespace. Utilities are usually included, unless requiring minimum bundle size and not need them.</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">Code Compression</label><p class="desc">Whether to Compress code. It is recommended not to compress code in the development environment, because warnings and hints will be removed after compressing.</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">Download</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/compare-versions@3.6.0/index.min.js"></script><script>var $versionsDom = document.querySelector('#versions');
fetch('https://data.jsdelivr.com/v1/package/npm/echarts', {
mode: 'cors'
diff --git a/en/builder/echarts.html b/en/builder/echarts.html
index 5d8bff5..5587ab3 100644
--- a/en/builder/echarts.html
+++ b/en/builder/echarts.html
@@ -54,7 +54,7 @@
'rollup': 'lib/rollup.browser',
'transformDev': 'lib/transform-dev-bundle'
},
- urlArgs: 'v=1630485133448'
+ urlArgs: 'v=1630499963508'
});
require(['build']);
diff --git a/en/changelog.html b/en/changelog.html
index 0d403d5..dc5165d 100644
--- a/en/changelog.html
+++ b/en/changelog.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Changelog - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Changelog</h1><p>[+]Add [-]Remove [^]Update [#]Fix</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content single-page"><div class="page-nav"><a class="slide-btn">Collapse</a><h4>Versions</h4><ul></ul></div><div class="page-detail changelog"><h2 id="v5-2-0">v5.2.0</h2>
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Changelog</h1><p>[+]Add [-]Remove [^]Update [#]Fix</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content single-page"><div class="page-nav"><a class="slide-btn">Collapse</a><h4>Versions</h4><ul></ul></div><div class="page-detail changelog"><h2 id="v5-2-0">v5.2.0</h2>
<div class="time">2021-09-01</div>
<h4 id="break-changes">Break Changes</h4>
@@ -1801,7 +1801,7 @@
<ul>
<li>The new echarts</li>
</ul>
-<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
// Fix scroll position covered by nav
window.addEventListener('hashchange', function() {
diff --git a/en/cheat-sheet.html b/en/cheat-sheet.html
index 98becdc..4c76334 100644
--- a/en/cheat-sheet.html
+++ b/en/cheat-sheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,8 +7,8 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Cheat Sheet - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Cheat Sheet</h1><p>Learn the component names quickly.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content container page-cheatsheet"><h2>Frequently-used Components</h2><div id="cheat-chart-container"><div class="row"><div class="col-lg-9"><div id="cheat-chart"></div></div><div class="col-lg-3"><div id="cheat-detail"></div></div></div></div><h2>Series</h2><ul><li class="cheat-chart-item"><a href="option.html#series-bar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><h5><div>Bar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/line.svg?_v_=20200710_1" alt=""><h5><div>Line</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pie" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><h5><div>Pie</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-scatter" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><h5><div>Scatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-effectScatter" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><h5><div>EffectScatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-candlestick" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><h5><div>Candlestick</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-radar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><h5><div>Radar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-heatmap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><h5><div>Heatmap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-tree" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><h5><div>Tree</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-treemap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><h5><div>Treemap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sunburst" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><h5><div>Sunburst</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-map" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/map.svg?_v_=20200710_1" alt=""><h5><div>Map</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-lines" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><h5><div>Lines</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-graph" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><h5><div>Graph</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-boxplot" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><h5><div>Boxplot</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-parallel" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><h5><div>Parallel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-gauge" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><h5><div>Gauge</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-funnel" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><h5><div>Funnel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sankey" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><h5><div>Sankey</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-themeRiver" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><h5><div>ThemeRiver</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pictorialBar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><h5><div>PictorialBar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-custom" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><h5><div>Custom</div></h5></a></li></ul><h2>Coordinates</h2><ul><li class="cheat-chart-item"><a href="option.html#grid" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><h5><div>Grid</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#polar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/polar.svg?_v_=20200710_1" alt=""><h5><div>Polar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#geo" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/geo.svg?_v_=20200710_1" alt=""><h5><div>Geo</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#singleAxis" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><h5><div>SingleAxis</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#calendar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><h5><div>Calendar</div></h5></a></li></ul><h2>Components</h2><ul><li class="cheat-chart-item"><a href="option.html#title" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/title.svg?_v_=20200710_1" alt=""><h5><div>Title</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#legend" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/legend.svg?_v_=20200710_1" alt=""><h5><div>Legend</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#tooltip" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><h5><div>Tooltip</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markPoint" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><h5><div>MarkPoint</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markLine" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><h5><div>MarkLine</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markArea" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><h5><div>MarkArea</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#timeline" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><h5><div>Timeline</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#dataZoom" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><h5><div>DataZoom</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#brush" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/brush.svg?_v_=20200710_1" alt=""><h5><div>Brush</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#visualMap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><h5><div>VisualMap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#toolbox" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><h5><div>Toolbox</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#graphic" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><h5><div>Graphic</div></h5></a></li></ul></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
-</script><script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script><script src="https://echarts.apache.org/en/js/cheat-sheet-en.js?_v_=256d57f274"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Cheat Sheet</h1><p>Learn the component names quickly.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content container page-cheatsheet"><h2>Frequently-used Components</h2><div id="cheat-chart-container"><div class="row"><div class="col-lg-9"><div id="cheat-chart"></div></div><div class="col-lg-3"><div id="cheat-detail"></div></div></div></div><h2>Series</h2><ul><li class="cheat-chart-item"><a href="option.html#series-bar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><h5><div>Bar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/line.svg?_v_=20200710_1" alt=""><h5><div>Line</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pie" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><h5><div>Pie</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-scatter" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><h5><div>Scatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-effectScatter" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><h5><div>EffectScatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-candlestick" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><h5><div>Candlestick</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-radar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><h5><div>Radar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-heatmap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><h5><div>Heatmap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-tree" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><h5><div>Tree</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-treemap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><h5><div>Treemap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sunburst" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><h5><div>Sunburst</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-map" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/map.svg?_v_=20200710_1" alt=""><h5><div>Map</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-lines" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><h5><div>Lines</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-graph" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><h5><div>Graph</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-boxplot" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><h5><div>Boxplot</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-parallel" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><h5><div>Parallel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-gauge" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><h5><div>Gauge</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-funnel" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><h5><div>Funnel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sankey" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><h5><div>Sankey</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-themeRiver" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><h5><div>ThemeRiver</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pictorialBar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><h5><div>PictorialBar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-custom" target="_blank"><img src="https://echarts.apache.org/en/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><h5><div>Custom</div></h5></a></li></ul><h2>Coordinates</h2><ul><li class="cheat-chart-item"><a href="option.html#grid" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><h5><div>Grid</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#polar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/polar.svg?_v_=20200710_1" alt=""><h5><div>Polar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#geo" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/geo.svg?_v_=20200710_1" alt=""><h5><div>Geo</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#singleAxis" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><h5><div>SingleAxis</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#calendar" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><h5><div>Calendar</div></h5></a></li></ul><h2>Components</h2><ul><li class="cheat-chart-item"><a href="option.html#title" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/title.svg?_v_=20200710_1" alt=""><h5><div>Title</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#legend" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/legend.svg?_v_=20200710_1" alt=""><h5><div>Legend</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#tooltip" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><h5><div>Tooltip</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markPoint" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><h5><div>MarkPoint</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markLine" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><h5><div>MarkLine</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markArea" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><h5><div>MarkArea</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#timeline" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><h5><div>Timeline</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#dataZoom" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><h5><div>DataZoom</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#brush" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/brush.svg?_v_=20200710_1" alt=""><h5><div>Brush</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#visualMap" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><h5><div>VisualMap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#toolbox" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><h5><div>Toolbox</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#graphic" target="_blank"><img src="https://echarts.apache.org/en/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><h5><div>Graphic</div></h5></a></li></ul></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
+</script><script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script><script src="https://echarts.apache.org/en/js/cheat-sheet-en.js?_v_=f31f64abe3"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/coding-standard.html b/en/coding-standard.html
index a73f066..6613b36 100644
--- a/en/coding-standard.html
+++ b/en/coding-standard.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Coding Standard - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/vendors/prettify/prettify.css?_v_=20200710_1"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Coding Standard</h1><p>Please follow this standard when contribute to ECharts project.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content single-page"><div class="page-nav"><ul id="standard-nav"></ul></div><div class="page-detail"><h2 id="code-style">Code Style</h2>
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Coding Standard</h1><p>Please follow this standard when contribute to ECharts project.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content single-page"><div class="page-nav"><ul id="standard-nav"></ul></div><div class="page-detail"><h2 id="code-style">Code Style</h2>
<h3 id="file">File</h3>
<p><strong>[MUST]</strong> JavaScript Source files must be encoded in UTF-8 without BOM.</p>
<h3 id="indentation">Indentation</h3>
@@ -572,7 +572,7 @@
<p><strong>[MUST]</strong> Do not use <code>for in</code> in array traverse.</p>
<h3 id="others">Others</h3>
<p><strong>[MUST]</strong> Do not use <code>eval</code> and <code>with</code>. <code>new Function</code> can be used.</p>
-<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
+<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
var $list = $('#standard-nav');
$('.page-detail h2, .page-detail h3, .page-detail h4')
diff --git a/en/committers.html b/en/committers.html
index 3747745..981a786 100644
--- a/en/committers.html
+++ b/en/committers.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Committers - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Thanks for Helping</h1><p>The development of ECharts is associated with the outstanding contributions from the people in the community,<br>who have different skills and come from different backgrounds.</p><p>Thank you all your help!</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="about-page"><section class="container contributor"><h4 class="group pmc">PMC</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/pissang" target="_blank"><img src="https://echarts.apache.org/en/images/people/沈毅.jpg?_v_=20200710_1"></a><h5 class="about-name">Yi Shen</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/100pah" target="_blank"><img src="https://echarts.apache.org/en/images/people/宿爽.jpg?_v_=20200710_1"></a><h5 class="about-name">Shuang Su</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/Ovilia" target="_blank"><img src="https://echarts.apache.org/en/images/people/羡辙.jpg?_v_=20200710_1"></a><h5 class="about-name">Ovilia</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://www.behance.net/wjtjiayouac8aa" target="_blank"><img src="https://echarts.apache.org/en/images/people/王俊婷.jpg?_v_=20200710_1"></a><h5 class="about-name">Junting Wang</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/plainheart" target="_blank"><img src="https://echarts.apache.org/en/images/people/plainheart.jpg"></a><h5 class="about-name">Zhongxiang Wang</h5><div class="about-desc">Henan, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/susiwen8" target="_blank"><img src="https://echarts.apache.org/en/images/people/苏思文.jpg?_v_=20200710_1"></a><h5 class="about-name">Siwen Su</h5><div class="about-desc">Ant Group</div><div class="about-desc">Hangzhou, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/wf123537200" target="_blank"><img src="https://echarts.apache.org/en/images/people/zakwu.jpg?_v_=20200710_1"></a><h5 class="about-name">Zak Wu</h5><div class="about-desc">Tencent</div><div class="about-desc">Shenzhen, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/kener" target="_blank"><img src="https://echarts.apache.org/en/images/people/林峰.jpg?_v_=20200710_1"></a><h5 class="about-name">Feng Lin</h5><div class="about-desc">Alibaba</div><div class="about-desc">Hangzhou, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/deqingli" target="_blank"><img src="https://echarts.apache.org/en/images/people/德清.jpg?_v_=20200710_1"></a><h5 class="about-name">Deqing Li</h5><div class="about-desc">Alibaba</div><div class="about-desc">Hangzhou, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/dave.jpg?_v_=20200710_1"><h5 class="about-name">Dave Fisher</h5><div class="about-desc">San Francisco, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/kevin.jpg?_v_=20200710_1"><h5 class="about-name">Kevin A. McGrail</h5><div class="about-desc">Washington, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/shengwu.jpg?_v_=20200710_1"><h5 class="about-name">Sheng Wu</h5><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/erik168" target="_blank"><img src="https://echarts.apache.org/en/images/people/erik.jpg?_v_=20200710_1"></a><h5 class="about-name">Erik Dong</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chriswong" target="_blank"><img src="https://echarts.apache.org/en/images/people/大佛.jpg?_v_=20200710_1"></a><h5 class="about-name">Houjin Huang</h5><div class="about-desc">GSX</div><div class="about-desc">Beijing, China</div></div></div></div><h4 class="group committer">Committers</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/yufeng04" target="_blank"><img src="https://echarts.apache.org/en/images/people/禹峰.jpg?_v_=20200710_1"></a><h5 class="about-name">Feng Yu</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/cuijian-dexter" target="_blank"><img src="https://echarts.apache.org/en/images/people/崔健.jpg?_v_=20200710_1"></a><h5 class="about-name">Jian Cui</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/quillblue" target="_blank"><img src="https://echarts.apache.org/en/images/people/qiansheng.jpg?_v_=20200710_1"></a><h5 class="about-name">Sheng Qian</h5><div class="about-desc">Dow Inc.</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chfw" target="_blank"><img src="https://echarts.apache.org/en/images/people/chfw.jpg?_v_=20200710_1"></a><h5 class="about-name">chfw</h5><div class="about-desc">UK</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/alex2wong" target="_blank"><img src="https://echarts.apache.org/en/images/people/黄益修.jpg?_v_=20200710_1"></a><h5 class="about-name">Yixiu Huang</h5><div class="about-desc">ByteDance</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/SnailSword" target="_blank"><img src="https://echarts.apache.org/en/images/people/韩天.jpg?_v_=20200710_1"></a><h5 class="about-name">Tian Han</h5><div class="about-desc">Merico</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/nick.jpg?_v_=20200710_1"><h5 class="about-name">Yaxiong He</h5><div class="about-desc">Shenzhen, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/ClemMakesApps" target="_blank"><img src="https://echarts.apache.org/en/images/people/clement.jpg?_v_=20200710_1"></a><h5 class="about-name">Clement Ho</h5><div class="about-desc">MURAL</div><div class="about-desc">Texas, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/tedliu.jpg?_v_=20200710_1"><h5 class="about-name">Ted Liu</h5><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/shenshuntian.jpg?_v_=20200710_1"><h5 class="about-name">Tim Shen</h5><div class="about-desc">Tencent</div><div class="about-desc">Shenzhen, China</div></div></div></div><h4 class="group contributor">Contributors</h4><div class="row"><p></p><p>Thanks to all the <a href="https://github.com/apache/echarts/graphs/contributors">CONTRIBUTORS</a> <br /> making their effort to help ECharts getting better.</p></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Thanks for Helping</h1><p>The development of ECharts is associated with the outstanding contributions from the people in the community,<br>who have different skills and come from different backgrounds.</p><p>Thank you all your help!</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="about-page"><section class="container contributor"><h4 class="group pmc">PMC</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/pissang" target="_blank"><img src="https://echarts.apache.org/en/images/people/沈毅.jpg?_v_=20200710_1"></a><h5 class="about-name">Yi Shen</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/100pah" target="_blank"><img src="https://echarts.apache.org/en/images/people/宿爽.jpg?_v_=20200710_1"></a><h5 class="about-name">Shuang Su</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/Ovilia" target="_blank"><img src="https://echarts.apache.org/en/images/people/羡辙.jpg?_v_=20200710_1"></a><h5 class="about-name">Ovilia</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://www.behance.net/wjtjiayouac8aa" target="_blank"><img src="https://echarts.apache.org/en/images/people/王俊婷.jpg?_v_=20200710_1"></a><h5 class="about-name">Junting Wang</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/plainheart" target="_blank"><img src="https://echarts.apache.org/en/images/people/plainheart.jpg"></a><h5 class="about-name">Zhongxiang Wang</h5><div class="about-desc">Henan, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/susiwen8" target="_blank"><img src="https://echarts.apache.org/en/images/people/苏思文.jpg?_v_=20200710_1"></a><h5 class="about-name">Siwen Su</h5><div class="about-desc">Ant Group</div><div class="about-desc">Hangzhou, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/wf123537200" target="_blank"><img src="https://echarts.apache.org/en/images/people/zakwu.jpg?_v_=20200710_1"></a><h5 class="about-name">Zak Wu</h5><div class="about-desc">Tencent</div><div class="about-desc">Shenzhen, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/kener" target="_blank"><img src="https://echarts.apache.org/en/images/people/林峰.jpg?_v_=20200710_1"></a><h5 class="about-name">Feng Lin</h5><div class="about-desc">Alibaba</div><div class="about-desc">Hangzhou, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/deqingli" target="_blank"><img src="https://echarts.apache.org/en/images/people/德清.jpg?_v_=20200710_1"></a><h5 class="about-name">Deqing Li</h5><div class="about-desc">Alibaba</div><div class="about-desc">Hangzhou, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/dave.jpg?_v_=20200710_1"><h5 class="about-name">Dave Fisher</h5><div class="about-desc">San Francisco, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/kevin.jpg?_v_=20200710_1"><h5 class="about-name">Kevin A. McGrail</h5><div class="about-desc">Washington, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/shengwu.jpg?_v_=20200710_1"><h5 class="about-name">Sheng Wu</h5><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/erik168" target="_blank"><img src="https://echarts.apache.org/en/images/people/erik.jpg?_v_=20200710_1"></a><h5 class="about-name">Erik Dong</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chriswong" target="_blank"><img src="https://echarts.apache.org/en/images/people/大佛.jpg?_v_=20200710_1"></a><h5 class="about-name">Houjin Huang</h5><div class="about-desc">GSX</div><div class="about-desc">Beijing, China</div></div></div></div><h4 class="group committer">Committers</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/yufeng04" target="_blank"><img src="https://echarts.apache.org/en/images/people/禹峰.jpg?_v_=20200710_1"></a><h5 class="about-name">Feng Yu</h5><div class="about-desc">Baidu</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/cuijian-dexter" target="_blank"><img src="https://echarts.apache.org/en/images/people/崔健.jpg?_v_=20200710_1"></a><h5 class="about-name">Jian Cui</h5><div class="about-desc">Baidu</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/quillblue" target="_blank"><img src="https://echarts.apache.org/en/images/people/qiansheng.jpg?_v_=20200710_1"></a><h5 class="about-name">Sheng Qian</h5><div class="about-desc">Dow Inc.</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chfw" target="_blank"><img src="https://echarts.apache.org/en/images/people/chfw.jpg?_v_=20200710_1"></a><h5 class="about-name">chfw</h5><div class="about-desc">UK</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/alex2wong" target="_blank"><img src="https://echarts.apache.org/en/images/people/黄益修.jpg?_v_=20200710_1"></a><h5 class="about-name">Yixiu Huang</h5><div class="about-desc">ByteDance</div><div class="about-desc">Shanghai, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/SnailSword" target="_blank"><img src="https://echarts.apache.org/en/images/people/韩天.jpg?_v_=20200710_1"></a><h5 class="about-name">Tian Han</h5><div class="about-desc">Merico</div><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/nick.jpg?_v_=20200710_1"><h5 class="about-name">Yaxiong He</h5><div class="about-desc">Shenzhen, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/ClemMakesApps" target="_blank"><img src="https://echarts.apache.org/en/images/people/clement.jpg?_v_=20200710_1"></a><h5 class="about-name">Clement Ho</h5><div class="about-desc">MURAL</div><div class="about-desc">Texas, US</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/tedliu.jpg?_v_=20200710_1"><h5 class="about-name">Ted Liu</h5><div class="about-desc">Beijing, China</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://echarts.apache.org/en/images/people/shenshuntian.jpg?_v_=20200710_1"><h5 class="about-name">Tim Shen</h5><div class="about-desc">Tencent</div><div class="about-desc">Shenzhen, China</div></div></div></div><h4 class="group contributor">Contributors</h4><div class="row"><p></p><p>Thanks to all the <a href="https://github.com/apache/echarts/graphs/contributors">CONTRIBUTORS</a> <br /> making their effort to help ECharts getting better.</p></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/contributing.html b/en/contributing.html
index b826c1c..96720df 100644
--- a/en/contributing.html
+++ b/en/contributing.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Contributing - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Contributing</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>Contributing to Apache ECharts</h2><p>There are many ways that you can help make ECharts better. Please dive in and help!</p><h3>Issues</h3><p>Review the <a href="https://github.com/apache/echarts/issues" target="_blank">issues</a> and see if you can offer some help.</p><ul><li>If it's a bug report or how-to question, make sure the author has provided a minimum online demo with either <a href="https://codepen.io/Ovilia/pen/dyYWXWM" target="_blank">Codepen</a> or <a href="https://gallery.echartsjs.com/editor.html" target="_blank">ECharts Gallery (Chinese)</a> to show what's going wrong.</li><li>If it's a feature request, make sure the author has a clear explanation about what is expected and a picture would be very helpful for some cases.</li><li>Help reproduce bugs if an online demo is provided and check the <a href="https://echarts.apache.org/en/option.html" target="_blank">document</a> to see if it's a bug.</li><li>Issues without a "pending" label are the ones we believe is a bug or a feature we should provide in the future. You may make a pull request to fix them.</li></ul><h3>Pull Requests</h3><p>We appreciate pull requests from the community!</p><p>Before you start, please checkout the <a href="./coding-standard.html">Coding Standard</a> and <a href="https://www.apache.org/foundation/policies/conduct.html" target="_blank">Apache Code of Conduct</a>.</p><p>Please refer to <a href="https://github.com/apache/echarts/wiki/How-to-setup-the-dev-environment" target="_blank">How to setup the dev environment</a> and <a href="https://github.com/apache/echarts/wiki/How-to-make-a-pull-request" target="_blank">How to make a pull request</a> for more detailed instructions.</p><p>If you have any problem when making pull requests, please comment in the issues or pull requests or send an email to <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> to ask for help.</p><h3>Mailing List</h3><p>Join us on the <a href="./maillist.html">mailing list</a> and take part in any conversations.</p><h3>Documents</h3><p>Documentation is massively important to help users make the most of Apache ECharts and it's probably the area that needs the most help! So if you are interested, whether it's just to fix a page here or there, correct a link or improve what documentation is already there, please do dive in and help!</p><p>The source code of document is available at <a href="https://github.com/apache/echarts-doc" target="_blank">GitHub</a> and maybe the easiest way to find where to change is by searching key words already there.</p><p>In the issue list, we also have a <a href="https://github.com/apache/echarts/labels/doc" target="_blank">"doc"</a> label. We appreciate pull requests to fix them indeed!</p><h2>Becoming a Committer or PMC Member!</h2><p>As we mentioned above, we appreciate the help for ECharts in any forms. When we find someone making continuous contributions in the community, we will invite him/her to be our committer or PMC member.</p><p>Being a committer means you have the "write" access to the ECharts project, which enables you to contribute more easily and efficiently.</p><p>The Project Management Committee (PMC) is a committee charged with responsibility and governance of ECharts, whose members are directly responsible for overseeing releases and the healthy development of the community. More information can be found at <a href="https://www.apache.org/dev/pmc.html">Project Management Committee</a>.</p><p>We don't have a fixed single standard for selecting a committer or PMC member because we value all kinds of help offered. Generally, current PMC members watch the continuous contributors in the community and start discussion and votes for the candidates, and invite him/her to be a committer or PMC member after the vote passes.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Contributing</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>Contributing to Apache ECharts</h2><p>There are many ways that you can help make ECharts better. Please dive in and help!</p><h3>Issues</h3><p>Review the <a href="https://github.com/apache/echarts/issues" target="_blank">issues</a> and see if you can offer some help.</p><ul><li>If it's a bug report or how-to question, make sure the author has provided a minimum online demo with either <a href="https://codepen.io/Ovilia/pen/dyYWXWM" target="_blank">Codepen</a> or <a href="https://gallery.echartsjs.com/editor.html" target="_blank">ECharts Gallery (Chinese)</a> to show what's going wrong.</li><li>If it's a feature request, make sure the author has a clear explanation about what is expected and a picture would be very helpful for some cases.</li><li>Help reproduce bugs if an online demo is provided and check the <a href="https://echarts.apache.org/en/option.html" target="_blank">document</a> to see if it's a bug.</li><li>Issues without a "pending" label are the ones we believe is a bug or a feature we should provide in the future. You may make a pull request to fix them.</li></ul><h3>Pull Requests</h3><p>We appreciate pull requests from the community!</p><p>Before you start, please checkout the <a href="./coding-standard.html">Coding Standard</a> and <a href="https://www.apache.org/foundation/policies/conduct.html" target="_blank">Apache Code of Conduct</a>.</p><p>Please refer to <a href="https://github.com/apache/echarts/wiki/How-to-setup-the-dev-environment" target="_blank">How to setup the dev environment</a> and <a href="https://github.com/apache/echarts/wiki/How-to-make-a-pull-request" target="_blank">How to make a pull request</a> for more detailed instructions.</p><p>If you have any problem when making pull requests, please comment in the issues or pull requests or send an email to <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> to ask for help.</p><h3>Mailing List</h3><p>Join us on the <a href="./maillist.html">mailing list</a> and take part in any conversations.</p><h3>Documents</h3><p>Documentation is massively important to help users make the most of Apache ECharts and it's probably the area that needs the most help! So if you are interested, whether it's just to fix a page here or there, correct a link or improve what documentation is already there, please do dive in and help!</p><p>The source code of document is available at <a href="https://github.com/apache/echarts-doc" target="_blank">GitHub</a> and maybe the easiest way to find where to change is by searching key words already there.</p><p>In the issue list, we also have a <a href="https://github.com/apache/echarts/labels/doc" target="_blank">"doc"</a> label. We appreciate pull requests to fix them indeed!</p><h2>Becoming a Committer or PMC Member!</h2><p>As we mentioned above, we appreciate the help for ECharts in any forms. When we find someone making continuous contributions in the community, we will invite him/her to be our committer or PMC member.</p><p>Being a committer means you have the "write" access to the ECharts project, which enables you to contribute more easily and efficiently.</p><p>The Project Management Committee (PMC) is a committee charged with responsibility and governance of ECharts, whose members are directly responsible for overseeing releases and the healthy development of the community. More information can be found at <a href="https://www.apache.org/dev/pmc.html">Project Management Committee</a>.</p><p>We don't have a fixed single standard for selecting a committer or PMC member because we value all kinds of help offered. Generally, current PMC members watch the continuous contributors in the community and start discussion and votes for the candidates, and invite him/her to be a committer or PMC member after the vote passes.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/css/doc-bundle.css.map b/en/css/doc-bundle.css.map
deleted file mode 100644
index 771212f..0000000
--- a/en/css/doc-bundle.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack://echartsDoc/./src/components/DocNav.vue?4e19","webpack://echartsDoc/./src/components/PropertiesList.vue?f705","webpack://echartsDoc/./src/controls/ControlColor.vue?00aa","webpack://echartsDoc/./src/controls/ControlNumber.vue?7d88","webpack://echartsDoc/./src/controls/ControlVector.vue?59cc","webpack://echartsDoc/./src/controls/ControlEnum.vue?c193","webpack://echartsDoc/./src/controls/ControlPercent.vue?4384","webpack://echartsDoc/./src/controls/ControlPercentVector.vue?813d","webpack://echartsDoc/./src/components/OptionControl.vue?926d","webpack://echartsDoc/./src/components/DocContentItemCard.vue?24fe","webpack://echartsDoc/./node_modules/codemirror/lib/codemirror.css","webpack://echartsDoc/./node_modules/codemirror/theme/dracula.css","webpack://echartsDoc/./src/components/LiveExample.vue?f86d","webpack://echartsDoc/./src/components/DocContent.vue?89df","webpack://echartsDoc/./src/components/Search.vue?779e","webpack://echartsDoc/./src/components/SearchResultItemCard.vue?9ebf","webpack://echartsDoc/./src/components/SearchResult.vue?2349","webpack://echartsDoc/./src/App.vue?e30c","webpack://echartsDoc/./src/AppMobile.vue?a842","webpack://echartsDoc/./node_modules/highlight.js/styles/github-gist.css"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACrDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC7GA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACPA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AChBA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACnBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACdA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC5SA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA,iBAAiB;AACjB;AACA;AACA;AACA,iBAAiB;AACjB;;AAEA;AACA,0BAA0B;AAC1B;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,0BAA0B,cAAc;AACxC,iCAAiC,aAAa;;AAE9C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,+BAA+B;AACtC;AACA;AACA;AACA;AACA,OAAO,+BAA+B;AACtC;AACA;AACA;AACA;AACA,OAAO,+BAA+B;AACtC;AACA;;AAEA;AACA;;AAEA,SAAS,uBAAuB,0BAA0B;;AAE1D;AACA;AACA,UAAU,UAAU,YAAY;AAChC;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;;AAEA;;AAEA,0BAA0B;AAC1B,yBAAyB;AACzB,cAAc;AACd,cAAc;AACd,wBAAwB;AACxB,QAAQ;AACR,UAAU;AACV,mBAAmB;;AAEnB,2BAA2B;AAC3B,wBAAwB;AACxB,0BAA0B;AAC1B,uBAAuB;AACvB;AACA;AACA;AACA;AACA,8BAA8B;AAC9B,sDAAsD;AACtD,2BAA2B;AAC3B,0BAA0B;AAC1B,4BAA4B;AAC5B,wBAAwB;AACxB,6BAA6B;AAC7B,2BAA2B;AAC3B,2BAA2B;AAC3B,uBAAuB;AACvB,6BAA6B;AAC7B,sBAAsB;AACtB,wBAAwB;;AAExB,yBAAyB;AACzB,iBAAiB;;AAEjB,uBAAuB,0BAA0B;;AAEjD;;AAEA,gDAAgD;AAChD,mDAAmD;AACnD,yBAAyB,mCAAmC;AAC5D,mCAAmC;;AAEnC;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,8BAA8B;AAC9B;AACA;AACA,uBAAuB;AACvB;AACA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA,YAAY;AACZ;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA,UAAU;AACV;;AAEA;AACA,qBAAqB,SAAS;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwC;AACxC,6CAA6C;;AAE7C;AACA;AACA,kBAAkB;AAClB;AACA;AACA;AACA;AACA,wBAAwB,0BAA0B;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,UAAU,UAAU,QAAQ;AAC5B;AACA;;AAEA;AACA;AACA;AACA,iBAAiB;AACjB;;AAEA;;AAEA,qBAAqB,gBAAgB;;AAErC;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,yBAAyB,kBAAkB;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,sBAAsB,qBAAqB;AAC3C,0CAA0C,qBAAqB;AAC/D,uBAAuB,mBAAmB;AAC1C,4GAA4G,qBAAqB;AACjI,2HAA2H,qBAAqB;;AAEhJ;AACA;AACA;AACA;;AAEA;AACA,kBAAkB,qBAAqB;;AAEvC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,yBAAyB,aAAa;;AAEtC;AACA,8BAA8B,kBAAkB;;AC5VhD;;AAEA;AACA;;AAEA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;AACA,mCAAmC,gBAAgB;AACnD,kCAAkC,iCAAiC;AACnE,sCAAsC,gBAAgB;AACtD,oCAAoC,uCAAuC;AAC3E,sJAAsJ,uCAAuC;AAC7L,qKAAqK,uCAAuC;AAC5M,+BAA+B,gBAAgB;AAC/C,8DAA8D,gBAAgB;AAC9E,8BAA8B,gBAAgB;AAC9C,gCAAgC,gBAAgB;AAChD,kCAAkC,cAAc;AAChD,2BAA2B,gBAAgB;AAC3C,gCAAgC,gBAAgB;AAChD,+BAA+B,gBAAgB;AAC/C,4BAA4B,gBAAgB;AAC5C,4BAA4B,gBAAgB;AAC5C,2BAA2B,gBAAgB;AAC3C,iCAAiC,gBAAgB;AACjD,iCAAiC,gBAAgB;AACjD,gCAAgC,gBAAgB;AAChD,+BAA+B,gBAAgB;AAC/C,8DAA8D,gBAAgB;;AAE9E,iDAAiD,mCAAmC;AACpF,2CAA2C,4BAA4B,yBAAyB;;ACvChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AClIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACrOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACjBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACvHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACdA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACjFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC9EA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA","file":"../css/doc-bundle.css","sourcesContent":[".doc-nav h3 {\n margin: 0;\n padding: 5px;\n font-family: Monaco, 'Source Code Pro', monospace;\n font-size: 14px;\n}\n.doc-nav .toolbox {\n position: absolute;\n right: 10px;\n top: 5px;\n}\n.doc-nav .toolbox .item {\n font-size: 14px;\n cursor: pointer;\n color: #337ab7;\n}\n.doc-nav .toolbox .item:hover {\n text-decoration: underline;\n}\n.doc-nav .el-tree {\n padding-left: 6px;\n}\n.doc-nav .el-tree-node {\n color: #333;\n}\n.doc-nav .el-tree-node .el-tree-node__content {\n height: 24px;\n}\n.doc-nav .el-tree-node.is-current > .el-tree-node__content {\n background-color: #B03A5B;\n color: #fff;\n}\n.doc-nav .el-tree-node.is-current > .el-tree-node__content .default-value {\n color: #eee;\n}\n.doc-nav .doc-nav-item {\n font-family: 'Source Code Pro', monospace;\n font-size: 13px;\n white-space: nowrap;\n}\n.doc-nav .doc-nav-item .default-value {\n color: #999;\n}\n.ec-doc-tutorial .doc-nav .el-tree, .ec-doc-api .doc-nav .el-tree {\n padding-left: 0;\n margin-top: 10px;\n}\n.ec-doc-tutorial .doc-nav .el-tree-node .el-tree-node__content {\n height: 32px;\n}\n.ec-doc-tutorial .doc-nav .el-tree-node .doc-nav-item {\n margin-left: -10px;\n font-family: \"Source Sans Pro\", \"Helvetica Neue\", \"Segoe UI\", Arial, \"PingFang SC\", STHeiti, \"Microsoft Yahei\", sans-serif;\n}\n",".properties-list-panel h5 {\n font-weight: normal;\n color: #999;\n font-size: 30px;\n margin: 5px 0;\n font-size: 14px;\n}\n.properties-list-panel .properties-list a {\n font-family: Monaco,'Source Code Pro', STHeiti, \"Microsoft Yahei\", \"WenQuanYi Micro Hei\", sans-serif;\n font-size: 12px;\n margin-right: 2px;\n}\n.property-popup-desc {\n max-height: 300px;\n max-width: 500px;\n overflow-y: auto;\n overflow-x: auto;\n}\n.property-popup-desc .hljs {\n background: transparent;\n padding: 0;\n}\n.property-popup-desc hr {\n border: none;\n border-bottom: 1px solid #eee;\n width: 80%;\n}\n.property-popup-desc blockquote {\n font-size: 12px;\n color: #999;\n background-color: #fdfdfd;\n border-left: 2px solid #ddd;\n margin-left: 0px;\n padding: 5px 10px;\n}\n.property-popup-desc blockquote p {\n margin: 0;\n font-size: 12px;\n}\n.property-popup-desc blockquote pre {\n font-size: 12px;\n}\n.property-popup-desc iframe {\n border: none;\n display: block;\n margin-top: 5px;\n max-width: 100%;\n}\n.property-popup-desc img {\n max-width: 100%;\n}\n.property-popup-desc p {\n line-height: 1.7em;\n margin: 12px 0 12px 0;\n font-size: 14px;\n}\n.property-popup-desc pre {\n margin: 5px 0;\n border-radius: 5px;\n background-color: #f5f7fa;\n border: none;\n padding: 10px;\n font-size: 13px;\n}\n.property-popup-desc .codespan {\n padding: 1px 5px;\n font-size: 14px;\n background-color: #f4f4f4;\n border-radius: 4px;\n}\n.property-popup-desc code *, .property-popup-desc code {\n font-family: 'Source Code Pro', 'Courier New', monospace;\n}\n.property-popup-desc ol {\n margin-left: 20px;\n}\n.property-popup-desc ul li {\n list-style: disc;\n margin: 10px 20px;\n font-size: 14px;\n}\n.property-popup-desc ol li {\n margin: 1em 0;\n list-style: decimal;\n font-size: 14px;\n}\n.property-popup-desc a {\n font-family: 'Source Code Pro', STHeiti, \"Microsoft Yahei\", \"WenQuanYi Micro Hei\", sans-serif;\n}\n.property-popup-desc pre {\n font-size: 12px;\n}\n.property-popup-desc p {\n font-size: 12px;\n}\n.property-popup-desc ul {\n margin: 0;\n padding: 0;\n}\n.property-popup-desc ul li {\n font-size: 12px;\n margin: 5px 20px;\n list-style: disc;\n}\n.property-popup-desc pre {\n padding: 5px;\n}\n.property-popup-desc .codespan {\n font-size: 12px;\n}\n",".control-color > * {\n display: inline-block;\n vertical-align: middle;\n}\n.control-color span {\n font-size: 12px;\n font-weight: bold;\n}\n",".control-number .el-input-number {\n width: 120px;\n}\n",".control-vector > div {\n display: inline-block;\n margin-left: 8px;\n font-size: 12px;\n font-weight: bold;\n}\n.control-vector .control-vector-group > div {\n display: inline-block;\n margin-left: 5px;\n}\n.control-vector .el-input-number {\n width: 90px;\n}\n.control-vector label {\n text-transform: uppercase;\n margin-right: 5px;\n}\n",".control-enum-special {\n font-style: italic;\n}\n",".control-percent > div {\n display: inline-block;\n}\n.control-percent .el-slider {\n width: 200px;\n display: inline-block;\n vertical-align: middle;\n}\n.control-percent .el-input-number {\n display: inline-block;\n width: 90px;\n margin-left: 10px;\n}\n.control-percent .el-radio-group {\n margin-right: 10px;\n}\n.control-percent .el-radio-button--mini .el-radio-button__inner {\n padding: 5px 4px;\n font-size: 10px;\n}\n",".control-percent-vector > div {\n margin-top: 3px;\n font-size: 12px;\n font-weight: bold;\n}\n.control-percent-vector > div > label {\n text-transform: uppercase;\n margin-right: 5px;\n}\n.control-percent-vector .control-percent, .control-percent-vector label {\n display: inline-block;\n}\n.control-percent-vector .control-percent .el-slider {\n width: 100px;\n}\n",".option-control {\n margin-top: 10px;\n}\n",".doc-content-item-card {\n margin-top: 30px;\n margin-left: 15px;\n border-top: 1px solid #ccc;\n position: relative;\n padding: 15px 0;\n}\n.doc-content-item-card .hierarchy-line {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: -14px;\n width: 10px;\n border-left: 1px solid #E0E6F1;\n border-bottom: 1px solid #E0E6F1;\n}\n.doc-content-item-card h4 {\n margin: 0;\n padding: 0;\n font-family: 'Source Code Pro', monospace;\n}\n.doc-content-item-card h4 > * {\n vertical-align: bottom;\n display: inline-block;\n}\n.doc-content-item-card h4 .expand-toggle {\n font-size: 18px;\n margin-left: -23px;\n color: #9aadd1;\n cursor: pointer;\n position: relative;\n background-color: #fff;\n}\n.doc-content-item-card h4 .anchor {\n color: #C592A0;\n font-size: 16px;\n text-decoration: none;\n}\n.doc-content-item-card h4 .anchor:hover {\n text-decoration: underline;\n}\n.doc-content-item-card h4 .path-parent {\n font-size: 12px;\n padding: 0;\n font-weight: normal;\n}\n.doc-content-item-card h4 .path-parent .separator {\n margin: 0 3px;\n color: #B03A5B;\n}\n.doc-content-item-card h4 .path-parent a {\n color: #C592A0;\n margin: 0;\n}\n.doc-content-item-card h4 .path-base {\n font-size: 14px;\n padding: 0;\n margin-left: -4px;\n font-weight: normal;\n}\n.doc-content-item-card h4 .path-base a {\n color: #B03A5B;\n margin: 0;\n}\n.doc-content-item-card h4 .path-parent a, .doc-content-item-card h4 .path-base a {\n text-decoration: none;\n}\n.doc-content-item-card h4 .path-parent a:hover, .doc-content-item-card h4 .path-base a:hover {\n text-decoration: underline;\n}\n.doc-content-item-card h4 .current-flag {\n color: #434343;\n font-size: 20px;\n}\n.doc-content-item-card h4 .default-value {\n color: #434343;\n font-size: 16px;\n margin-left: 15px;\n vertical-align: bottom;\n font-weight: normal;\n}\n.doc-content-item-card h4 .control-toggle {\n float: right;\n font-size: 14px;\n cursor: pointer;\n color: #555;\n}\n.doc-content-item-card h4 .control-toggle i {\n font-family: iconfont;\n font-style: normal;\n vertical-align: middle;\n}\n.doc-content-item-card h4 .control-toggle:hover {\n color: #999;\n}\n.doc-content-item-card h4 .control-toggle.active {\n color: #409eff;\n}\n.doc-content-item-card.level-1 > h4 .anchor {\n font-size: 20px;\n}\n.doc-content-item-card.level-1 > h4 .path-parent {\n font-size: 16px;\n}\n.doc-content-item-card.level-1 > h4 .path-base {\n font-size: 20px;\n}\n.doc-content-item-card.level-2 > h4 .anchor {\n font-size: 16px;\n}\n.doc-content-item-card.level-2 > h4 .path-parent {\n font-size: 14px;\n}\n.doc-content-item-card.level-2 > h4 .path-base {\n font-size: 16px;\n}\n.doc-content-item-card.level-2 > h4 .current-flag {\n font-size: 16px;\n}\n.doc-content-item-card.level-3 > h4 .anchor {\n font-size: 16px;\n}\n.doc-content-item-card.level-3 > h4 .path-parent {\n font-size: 13px;\n}\n.doc-content-item-card.level-3 > h4 .path-base {\n font-size: 16px;\n}\n.doc-content-item-card.level-3 > h4 .current-flag {\n font-size: 16px;\n}\n.doc-content-item-card.level-2 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-2 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-3 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-3 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-4 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-4 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-5 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-5 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-6 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-6 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-7 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-7 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-8 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-8 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-9 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-9 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-10 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-10 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-11 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-11 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card .prop-types {\n margin-top: 5px;\n display: inline-block;\n}\n.doc-content-item-card .option-control {\n float: right;\n}\n.doc-content-item-card .prop-type {\n display: inline-block;\n margin-right: 4px;\n border-radius: 4px;\n padding: 3px 5px;\n color: #333;\n background-color: #f9f2f4;\n font-size: 12px;\n}\n.doc-content-item-card .prop-type-string {\n background-color: #f9f2f4;\n}\n.doc-content-item-card .prop-type-number {\n background-color: #f9f2f4;\n}\n.doc-content-item-card .prop-type-boolean {\n background-color: #f9f2f4;\n}\n.doc-content-item-card .properties-list-panel {\n max-width: 700px;\n}\n.doc-content-item-card .children {\n padding: 10px;\n}\n.ec-doc-mobile .doc-content-item-card {\n margin-left: 0;\n margin-top: 10px;\n padding: 10px 10px;\n background: #fff;\n border-top: none;\n}\n.ec-doc-mobile .doc-content-item-card.level-1 > h4 .anchor {\n font-size: 18px;\n}\n.ec-doc-mobile .doc-content-item-card.level-1 > h4 .path-parent {\n font-size: 13px;\n}\n.ec-doc-mobile .doc-content-item-card.level-1 > h4 .path-base {\n font-size: 18px;\n}\n.ec-doc-mobile .doc-content-item-card.level-1 > h4 .default-value {\n font-size: 14px;\n}\n","/* BASICS */\n\n.CodeMirror {\n /* Set height, width, borders, and global font properties here */\n font-family: monospace;\n height: 300px;\n color: black;\n direction: ltr;\n}\n\n/* PADDING */\n\n.CodeMirror-lines {\n padding: 4px 0; /* Vertical padding around content */\n}\n.CodeMirror pre.CodeMirror-line,\n.CodeMirror pre.CodeMirror-line-like {\n padding: 0 4px; /* Horizontal padding of content */\n}\n\n.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {\n background-color: white; /* The little square between H and V scrollbars */\n}\n\n/* GUTTER */\n\n.CodeMirror-gutters {\n border-right: 1px solid #ddd;\n background-color: #f7f7f7;\n white-space: nowrap;\n}\n.CodeMirror-linenumbers {}\n.CodeMirror-linenumber {\n padding: 0 3px 0 5px;\n min-width: 20px;\n text-align: right;\n color: #999;\n white-space: nowrap;\n}\n\n.CodeMirror-guttermarker { color: black; }\n.CodeMirror-guttermarker-subtle { color: #999; }\n\n/* CURSOR */\n\n.CodeMirror-cursor {\n border-left: 1px solid black;\n border-right: none;\n width: 0;\n}\n/* Shown when moving in bi-directional text */\n.CodeMirror div.CodeMirror-secondarycursor {\n border-left: 1px solid silver;\n}\n.cm-fat-cursor .CodeMirror-cursor {\n width: auto;\n border: 0 !important;\n background: #7e7;\n}\n.cm-fat-cursor div.CodeMirror-cursors {\n z-index: 1;\n}\n.cm-fat-cursor-mark {\n background-color: rgba(20, 255, 20, 0.5);\n -webkit-animation: blink 1.06s steps(1) infinite;\n -moz-animation: blink 1.06s steps(1) infinite;\n animation: blink 1.06s steps(1) infinite;\n}\n.cm-animate-fat-cursor {\n width: auto;\n border: 0;\n -webkit-animation: blink 1.06s steps(1) infinite;\n -moz-animation: blink 1.06s steps(1) infinite;\n animation: blink 1.06s steps(1) infinite;\n background-color: #7e7;\n}\n@-moz-keyframes blink {\n 0% {}\n 50% { background-color: transparent; }\n 100% {}\n}\n@-webkit-keyframes blink {\n 0% {}\n 50% { background-color: transparent; }\n 100% {}\n}\n@keyframes blink {\n 0% {}\n 50% { background-color: transparent; }\n 100% {}\n}\n\n/* Can style cursor different in overwrite (non-insert) mode */\n.CodeMirror-overwrite .CodeMirror-cursor {}\n\n.cm-tab { display: inline-block; text-decoration: inherit; }\n\n.CodeMirror-rulers {\n position: absolute;\n left: 0; right: 0; top: -50px; bottom: 0;\n overflow: hidden;\n}\n.CodeMirror-ruler {\n border-left: 1px solid #ccc;\n top: 0; bottom: 0;\n position: absolute;\n}\n\n/* DEFAULT THEME */\n\n.cm-s-default .cm-header {color: blue;}\n.cm-s-default .cm-quote {color: #090;}\n.cm-negative {color: #d44;}\n.cm-positive {color: #292;}\n.cm-header, .cm-strong {font-weight: bold;}\n.cm-em {font-style: italic;}\n.cm-link {text-decoration: underline;}\n.cm-strikethrough {text-decoration: line-through;}\n\n.cm-s-default .cm-keyword {color: #708;}\n.cm-s-default .cm-atom {color: #219;}\n.cm-s-default .cm-number {color: #164;}\n.cm-s-default .cm-def {color: #00f;}\n.cm-s-default .cm-variable,\n.cm-s-default .cm-punctuation,\n.cm-s-default .cm-property,\n.cm-s-default .cm-operator {}\n.cm-s-default .cm-variable-2 {color: #05a;}\n.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}\n.cm-s-default .cm-comment {color: #a50;}\n.cm-s-default .cm-string {color: #a11;}\n.cm-s-default .cm-string-2 {color: #f50;}\n.cm-s-default .cm-meta {color: #555;}\n.cm-s-default .cm-qualifier {color: #555;}\n.cm-s-default .cm-builtin {color: #30a;}\n.cm-s-default .cm-bracket {color: #997;}\n.cm-s-default .cm-tag {color: #170;}\n.cm-s-default .cm-attribute {color: #00c;}\n.cm-s-default .cm-hr {color: #999;}\n.cm-s-default .cm-link {color: #00c;}\n\n.cm-s-default .cm-error {color: #f00;}\n.cm-invalidchar {color: #f00;}\n\n.CodeMirror-composing { border-bottom: 2px solid; }\n\n/* Default styles for common addons */\n\ndiv.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}\ndiv.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}\n.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }\n.CodeMirror-activeline-background {background: #e8f2ff;}\n\n/* STOP */\n\n/* The rest of this file contains styles related to the mechanics of\n the editor. You probably shouldn't touch them. */\n\n.CodeMirror {\n position: relative;\n overflow: hidden;\n background: white;\n}\n\n.CodeMirror-scroll {\n overflow: scroll !important; /* Things will break if this is overridden */\n /* 50px is the magic margin used to hide the element's real scrollbars */\n /* See overflow: hidden in .CodeMirror */\n margin-bottom: -50px; margin-right: -50px;\n padding-bottom: 50px;\n height: 100%;\n outline: none; /* Prevent dragging from highlighting the element */\n position: relative;\n}\n.CodeMirror-sizer {\n position: relative;\n border-right: 50px solid transparent;\n}\n\n/* The fake, visible scrollbars. Used to force redraw during scrolling\n before actual scrolling happens, thus preventing shaking and\n flickering artifacts. */\n.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {\n position: absolute;\n z-index: 6;\n display: none;\n}\n.CodeMirror-vscrollbar {\n right: 0; top: 0;\n overflow-x: hidden;\n overflow-y: scroll;\n}\n.CodeMirror-hscrollbar {\n bottom: 0; left: 0;\n overflow-y: hidden;\n overflow-x: scroll;\n}\n.CodeMirror-scrollbar-filler {\n right: 0; bottom: 0;\n}\n.CodeMirror-gutter-filler {\n left: 0; bottom: 0;\n}\n\n.CodeMirror-gutters {\n position: absolute; left: 0; top: 0;\n min-height: 100%;\n z-index: 3;\n}\n.CodeMirror-gutter {\n white-space: normal;\n height: 100%;\n display: inline-block;\n vertical-align: top;\n margin-bottom: -50px;\n}\n.CodeMirror-gutter-wrapper {\n position: absolute;\n z-index: 4;\n background: none !important;\n border: none !important;\n}\n.CodeMirror-gutter-background {\n position: absolute;\n top: 0; bottom: 0;\n z-index: 4;\n}\n.CodeMirror-gutter-elt {\n position: absolute;\n cursor: default;\n z-index: 4;\n}\n.CodeMirror-gutter-wrapper ::selection { background-color: transparent }\n.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }\n\n.CodeMirror-lines {\n cursor: text;\n min-height: 1px; /* prevents collapsing before first draw */\n}\n.CodeMirror pre.CodeMirror-line,\n.CodeMirror pre.CodeMirror-line-like {\n /* Reset some styles that the rest of the page might have set */\n -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;\n border-width: 0;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n margin: 0;\n white-space: pre;\n word-wrap: normal;\n line-height: inherit;\n color: inherit;\n z-index: 2;\n position: relative;\n overflow: visible;\n -webkit-tap-highlight-color: transparent;\n -webkit-font-variant-ligatures: contextual;\n font-variant-ligatures: contextual;\n}\n.CodeMirror-wrap pre.CodeMirror-line,\n.CodeMirror-wrap pre.CodeMirror-line-like {\n word-wrap: break-word;\n white-space: pre-wrap;\n word-break: normal;\n}\n\n.CodeMirror-linebackground {\n position: absolute;\n left: 0; right: 0; top: 0; bottom: 0;\n z-index: 0;\n}\n\n.CodeMirror-linewidget {\n position: relative;\n z-index: 2;\n padding: 0.1px; /* Force widget margins to stay inside of the container */\n}\n\n.CodeMirror-widget {}\n\n.CodeMirror-rtl pre { direction: rtl; }\n\n.CodeMirror-code {\n outline: none;\n}\n\n/* Force content-box sizing for the elements where we expect it */\n.CodeMirror-scroll,\n.CodeMirror-sizer,\n.CodeMirror-gutter,\n.CodeMirror-gutters,\n.CodeMirror-linenumber {\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n}\n\n.CodeMirror-measure {\n position: absolute;\n width: 100%;\n height: 0;\n overflow: hidden;\n visibility: hidden;\n}\n\n.CodeMirror-cursor {\n position: absolute;\n pointer-events: none;\n}\n.CodeMirror-measure pre { position: static; }\n\ndiv.CodeMirror-cursors {\n visibility: hidden;\n position: relative;\n z-index: 3;\n}\ndiv.CodeMirror-dragcursors {\n visibility: visible;\n}\n\n.CodeMirror-focused div.CodeMirror-cursors {\n visibility: visible;\n}\n\n.CodeMirror-selected { background: #d9d9d9; }\n.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }\n.CodeMirror-crosshair { cursor: crosshair; }\n.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }\n.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }\n\n.cm-searching {\n background-color: #ffa;\n background-color: rgba(255, 255, 0, .4);\n}\n\n/* Used to force a border model for a node */\n.cm-force-border { padding-right: .1px; }\n\n@media print {\n /* Hide the cursor when printing */\n .CodeMirror div.CodeMirror-cursors {\n visibility: hidden;\n }\n}\n\n/* See issue #2901 */\n.cm-tab-wrap-hack:after { content: ''; }\n\n/* Help users use markselection to safely style text background */\nspan.CodeMirror-selectedtext { background: none; }\n","/*\n\n Name: dracula\n Author: Michael Kaminsky (http://github.com/mkaminsky11)\n\n Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)\n\n*/\n\n\n.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {\n background-color: #282a36 !important;\n color: #f8f8f2 !important;\n border: none;\n}\n.cm-s-dracula .CodeMirror-gutters { color: #282a36; }\n.cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; }\n.cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; }\n.cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }\n.cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }\n.cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }\n.cm-s-dracula span.cm-comment { color: #6272a4; }\n.cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 { color: #f1fa8c; }\n.cm-s-dracula span.cm-number { color: #bd93f9; }\n.cm-s-dracula span.cm-variable { color: #50fa7b; }\n.cm-s-dracula span.cm-variable-2 { color: white; }\n.cm-s-dracula span.cm-def { color: #50fa7b; }\n.cm-s-dracula span.cm-operator { color: #ff79c6; }\n.cm-s-dracula span.cm-keyword { color: #ff79c6; }\n.cm-s-dracula span.cm-atom { color: #bd93f9; }\n.cm-s-dracula span.cm-meta { color: #f8f8f2; }\n.cm-s-dracula span.cm-tag { color: #ff79c6; }\n.cm-s-dracula span.cm-attribute { color: #50fa7b; }\n.cm-s-dracula span.cm-qualifier { color: #50fa7b; }\n.cm-s-dracula span.cm-property { color: #66d9ef; }\n.cm-s-dracula span.cm-builtin { color: #50fa7b; }\n.cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type { color: #ffb86c; }\n\n.cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }\n.cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }\n","#example-panel {\n position: fixed;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n padding: 10px 0px;\n text-align: left;\n background: #fff;\n}\n#example-panel h2 {\n font-weight: normal;\n font-size: 20px;\n color: #333;\n padding-left: 20px;\n font-weight: bold;\n margin: 5px 0;\n}\n#example-panel p.intro {\n color: #aaa;\n padding-left: 20px;\n margin: 5px 0;\n font-size: 12px;\n}\n#example-panel .preview-and-code {\n position: absolute;\n top: 75px;\n bottom: 0;\n left: 0;\n right: 0;\n}\n#example-panel .el-alert {\n position: absolute;\n top: 0;\n}\n#example-panel .preview-main {\n position: relative;\n padding: 0 10px;\n background: #fefefe;\n box-sizing: border-box;\n}\n#example-panel .example-code {\n position: relative;\n}\n#example-panel .example-code .codemirror-main {\n position: absolute;\n left: 10px;\n top: 10px;\n right: 10px;\n bottom: 15px;\n box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.1);\n}\n#example-panel .example-code .codemirror-main .CodeMirror {\n height: 100%;\n overflow-y: scroll;\n border-radius: 6px;\n font-family: 'Source Code Pro', monospace;\n font-size: 13px;\n}\n#example-panel .example-code .codemirror-main .CodeMirror .CodeMirror-scroll {\n padding: 15px;\n}\n#example-panel .example-code .codemirror-main .CodeMirror ::-webkit-scrollbar-thumb {\n width: 8px;\n min-height: 15px;\n background: rgba(255, 255, 255, 0.3) !important;\n -webkit-transition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n border-radius: 2px;\n}\n#example-panel .example-code .codemirror-main .CodeMirror .option-changed {\n background: rgba(255, 255, 255, 0.1);\n}\n#example-panel .example-code .codemirror-main .CodeMirror .CodeMirror-cursor {\n display: none;\n}\n#example-panel .toolbar {\n position: absolute;\n top: 15px;\n right: 10px;\n}\n#example-panel .toolbar .example-list {\n width: 180px;\n}\n#example-panel.right-layout {\n bottom: 0;\n top: 40px;\n right: 10px;\n}\n#example-panel.right-layout .preview-main {\n width: 100%;\n height: 50%;\n}\n#example-panel.right-layout .example-code {\n width: 100%;\n height: 50%;\n}\n#example-panel.bottom-layout {\n left: 300px;\n bottom: 0;\n right: 10px;\n}\n#example-panel.bottom-layout .preview-main {\n width: 50%;\n height: 100%;\n float: left;\n}\n#example-panel.bottom-layout .example-code {\n width: 50%;\n height: 100%;\n float: left;\n}\n#example-panel.top-layout {\n left: 300px;\n top: 50px;\n right: 10px;\n}\n#example-panel.top-layout .preview-main {\n width: 50%;\n height: 100%;\n float: left;\n}\n#example-panel.top-layout .example-code {\n width: 50%;\n height: 100%;\n float: left;\n}\n.example-change-layout .layout-title > i {\n font-size: 14px;\n margin-right: 5px;\n}\n.example-change-layout .layout-mode {\n margin-top: 10px;\n}\n",".doc-main {\n margin-left: 10px;\n}\n.doc-main .open-option-example {\n position: fixed;\n right: 0;\n top: 50%;\n padding: 10px;\n border-radius: 20px 0 0 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n background: #fff;\n cursor: pointer;\n font-size: 12px;\n}\n.doc-main .open-option-example:hover {\n background: #eee;\n}\n.doc-main .open-option-example i {\n font-size: 16px;\n vertical-align: middle;\n}\n.doc-content {\n text-align: left;\n color: #4d555e;\n}\n.doc-content.option-example-actived.option-example-right-layout {\n margin-right: 45%;\n}\n.doc-content h2 {\n color: #B03A5B;\n font-size: 34px;\n border-bottom: 1px solid #ccc;\n height: 45px;\n line-height: 45px;\n margin: 0;\n margin-left: 15px;\n font-weight: normal;\n box-sizing: content-box;\n}\n.doc-content h3 {\n font-weight: normal;\n color: #969696;\n font-size: 28px;\n margin: 20px 0px 20px 15px;\n}\n.doc-content .page-description {\n padding: 5px 0;\n margin-left: 15px;\n}\n.doc-content .page-description .hljs {\n background: transparent;\n padding: 0;\n}\n.doc-content .page-description hr {\n border: none;\n border-bottom: 1px solid #eee;\n width: 80%;\n}\n.doc-content .page-description blockquote {\n font-size: 12px;\n color: #999;\n background-color: #fdfdfd;\n border-left: 2px solid #ddd;\n margin-left: 0px;\n padding: 5px 10px;\n}\n.doc-content .page-description blockquote p {\n margin: 0;\n font-size: 12px;\n}\n.doc-content .page-description blockquote pre {\n font-size: 12px;\n}\n.doc-content .page-description iframe {\n border: none;\n display: block;\n margin-top: 5px;\n max-width: 100%;\n}\n.doc-content .page-description img {\n max-width: 100%;\n}\n.doc-content .page-description p {\n line-height: 1.7em;\n margin: 12px 0 12px 0;\n font-size: 14px;\n}\n.doc-content .page-description pre {\n margin: 5px 0;\n border-radius: 5px;\n background-color: #f5f7fa;\n border: none;\n padding: 10px;\n font-size: 13px;\n}\n.doc-content .page-description .codespan {\n padding: 1px 5px;\n font-size: 14px;\n background-color: #f4f4f4;\n border-radius: 4px;\n}\n.doc-content .page-description code *, .doc-content .page-description code {\n font-family: 'Source Code Pro', 'Courier New', monospace;\n}\n.doc-content .page-description ol {\n margin-left: 20px;\n}\n.doc-content .page-description ul li {\n list-style: disc;\n margin: 10px 20px;\n font-size: 14px;\n}\n.doc-content .page-description ol li {\n margin: 1em 0;\n list-style: decimal;\n font-size: 14px;\n}\n.doc-content .page-description a {\n font-family: 'Source Code Pro', STHeiti, \"Microsoft Yahei\", \"WenQuanYi Micro Hei\", sans-serif;\n}\n.doc-content .item-description {\n margin: 0;\n padding: 5px 0;\n}\n.doc-content .item-description .hljs {\n background: transparent;\n padding: 0;\n}\n.doc-content .item-description hr {\n border: none;\n border-bottom: 1px solid #eee;\n width: 80%;\n}\n.doc-content .item-description blockquote {\n font-size: 12px;\n color: #999;\n background-color: #fdfdfd;\n border-left: 2px solid #ddd;\n margin-left: 0px;\n padding: 5px 10px;\n}\n.doc-content .item-description blockquote p {\n margin: 0;\n font-size: 12px;\n}\n.doc-content .item-description blockquote pre {\n font-size: 12px;\n}\n.doc-content .item-description iframe {\n border: none;\n display: block;\n margin-top: 5px;\n max-width: 100%;\n}\n.doc-content .item-description img {\n max-width: 100%;\n}\n.doc-content .item-description p {\n line-height: 1.7em;\n margin: 12px 0 12px 0;\n font-size: 14px;\n}\n.doc-content .item-description pre {\n margin: 5px 0;\n border-radius: 5px;\n background-color: #f5f7fa;\n border: none;\n padding: 10px;\n font-size: 13px;\n}\n.doc-content .item-description .codespan {\n padding: 1px 5px;\n font-size: 14px;\n background-color: #f4f4f4;\n border-radius: 4px;\n}\n.doc-content .item-description code *, .doc-content .item-description code {\n font-family: 'Source Code Pro', 'Courier New', monospace;\n}\n.doc-content .item-description ol {\n margin-left: 20px;\n}\n.doc-content .item-description ul li {\n list-style: disc;\n margin: 10px 20px;\n font-size: 14px;\n}\n.doc-content .item-description ol li {\n margin: 1em 0;\n list-style: decimal;\n font-size: 14px;\n}\n.doc-content .item-description a {\n font-family: 'Source Code Pro', STHeiti, \"Microsoft Yahei\", \"WenQuanYi Micro Hei\", sans-serif;\n}\n.doc-content table {\n border: 1px solid #ddd;\n border-collapse: collapse;\n}\n.doc-content th, .doc-content td {\n padding: 10px;\n border: 1px solid #eee;\n}\n.ec-doc-tutorial .page-description h2 {\n font-weight: normal;\n font-size: 22px;\n margin-left: 0;\n margin-top: 40px;\n}\n.ec-doc-mobile .doc-main {\n margin-left: 0;\n}\n.ec-doc-mobile .doc-content {\n background: #f2f2f2;\n margin-bottom: 100px;\n}\n.ec-doc-mobile .page-description {\n padding: 5px 10px;\n background: #fff;\n}\n.ec-doc-mobile h2 {\n font-size: 22px;\n font-weight: normal;\n padding: 20px 10px;\n border-bottom: none;\n}\n.ec-doc-mobile h3 {\n font-size: 20px;\n padding-left: 10px;\n}\n",".doc-search {\n padding: 5px;\n}\n.doc-search .search-input {\n width: 100%;\n}\n.el-autocomplete-suggestion.search-input-popper {\n width: auto !important;\n min-width: 300px;\n}\n.el-autocomplete-suggestion.search-input-popper li {\n line-height: 28px;\n padding: 0 10px;\n}\n.doc-path-suggestion-item {\n font-family: Monaco,Consolas,Courier new,monospace;\n font-size: 12px;\n}\n",".doc-search-result-item-card {\n margin: 30px 10px;\n border-top: 1px solid #ccc;\n}\n.doc-search-result-item-card h4 {\n margin: 10px 0;\n}\n.doc-search-result-item-card h4 > * {\n vertical-align: middle;\n display: inline-block;\n}\n.doc-search-result-item-card h4 a.path {\n font-family: Montserrat, sans-serif;\n font-size: 18px;\n padding-left: 5px;\n padding: 0;\n font-weight: normal;\n color: #B03A5B;\n}\n.doc-search-result-item-card .item-description mark, .doc-search-result-item-card h4 mark {\n background-color: #fc0;\n border-radius: 3px;\n padding: 2px;\n}\n.doc-search-result-item-card .other-result {\n font-size: 12px;\n padding: 0 0 10px 0;\n}\n.doc-search-result-item-card .other-result > div {\n font-family: Montserrat, sans-serif;\n}\n.doc-search-result-item-card.needs-show-more .item-description {\n max-height: 200px;\n overflow-y: hidden;\n}\n.doc-search-result-item-card.needs-show-more .show-more-button {\n display: block;\n}\n.doc-search-result-item-card .show-more-button {\n display: none;\n text-align: center;\n cursor: pointer;\n}\n.doc-search-result-item-card .hljs {\n background: transparent;\n padding: 0;\n}\n.doc-search-result-item-card hr {\n border: none;\n border-bottom: 1px solid #eee;\n width: 80%;\n}\n.doc-search-result-item-card blockquote {\n font-size: 12px;\n color: #999;\n background-color: #fdfdfd;\n border-left: 2px solid #ddd;\n margin-left: 0px;\n padding: 5px 10px;\n}\n.doc-search-result-item-card blockquote p {\n margin: 0;\n font-size: 12px;\n}\n.doc-search-result-item-card blockquote pre {\n font-size: 12px;\n}\n.doc-search-result-item-card iframe {\n border: none;\n display: block;\n margin-top: 5px;\n max-width: 100%;\n}\n.doc-search-result-item-card img {\n max-width: 100%;\n}\n.doc-search-result-item-card p {\n line-height: 1.7em;\n margin: 12px 0 12px 0;\n font-size: 14px;\n}\n.doc-search-result-item-card pre {\n margin: 5px 0;\n border-radius: 5px;\n background-color: #f5f7fa;\n border: none;\n padding: 10px;\n font-size: 13px;\n}\n.doc-search-result-item-card .codespan {\n padding: 1px 5px;\n font-size: 14px;\n background-color: #f4f4f4;\n border-radius: 4px;\n}\n.doc-search-result-item-card code *, .doc-search-result-item-card code {\n font-family: 'Source Code Pro', 'Courier New', monospace;\n}\n.doc-search-result-item-card ol {\n margin-left: 20px;\n}\n.doc-search-result-item-card ul li {\n list-style: disc;\n margin: 10px 20px;\n font-size: 14px;\n}\n.doc-search-result-item-card ol li {\n margin: 1em 0;\n list-style: decimal;\n font-size: 14px;\n}\n.doc-search-result-item-card a {\n font-family: 'Source Code Pro', STHeiti, \"Microsoft Yahei\", \"WenQuanYi Micro Hei\", sans-serif;\n}\n.doc-search-result-item-card iframe, .doc-search-result-item-card pre, .doc-search-result-item-card image {\n display: none;\n}\n.ec-doc-mobile .doc-search-result-item-card {\n margin: 30px 0;\n}\n",".doc-search-result h3 {\n font-weight: normal;\n font-size: 24px;\n margin: 20px 20px 20px 0;\n}\n.doc-search-result .result-summary {\n padding: 10px 0;\n color: #999;\n}\n.doc-search-result .result-summary .searching {\n color: #B03A5B;\n}\n.ec-doc-mobile .doc-search-result {\n padding: 0 10px;\n}\n","@font-face {\n font-family: 'iconfont';\n src: url(../css/icon.eot);\n src: url(../css/icon.eot#iefix) format(\"embedded-opentype\"), url(../css/icon.ttf) format(\"truetype\"), url(../css/icon.woff) format(\"woff\"), url(../css/icon.svg) format(\"svg\");\n font-weight: normal;\n font-style: normal;\n font-display: block;\n}\n@font-face {\n font-family: 'Source Code Pro';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(../css/SourceCodePro-Regular.woff) format(\"woff\");\n}\n.ec-doc {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans GB\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n height: 100%;\n}\n.ec-doc ul, .ec-doc ol {\n margin: 0;\n padding: 0;\n}\n.ec-doc a {\n color: #337ab7;\n text-decoration: none;\n margin: 0 3px;\n}\n.ec-doc a:hover {\n text-decoration: underline;\n}\n.ec-doc > .el-aside {\n border-right: 1px solid #ddd;\n position: relative;\n}\n.ec-doc > .el-aside .doc-type-nav {\n border-bottom: 1px solid #eee;\n margin-bottom: 10px;\n margin-left: 5px;\n}\n.ec-doc > .el-aside .doc-type-nav a {\n display: inline-block;\n line-height: 35px;\n width: 20%;\n text-align: center;\n box-sizing: border-box;\n text-decoration: none;\n color: #000;\n cursor: pointer;\n font-size: 14px;\n}\n.ec-doc > .el-aside .doc-type-nav a.selected {\n border-top: 3px solid #B03A5B;\n}\n.ec-doc > .el-aside .doc-type-nav a.handbook-link {\n color: #337ab7;\n}\n.ec-doc > .el-aside .doc-type-nav a.handbook-link:hover {\n text-decoration: underline;\n}\n.ec-doc > .el-aside .doc-nav {\n position: absolute;\n top: 90px;\n bottom: 0;\n left: 0;\n right: 0;\n overflow-y: scroll;\n}\n.ec-doc > .el-main {\n text-align: center;\n}\n.ec-doc > .el-main > div {\n margin: 0 auto;\n text-align: left;\n min-width: 100%;\n}\n.ec-doc.ec-doc-locale-zh .doc-type-nav a {\n width: 20%;\n}\n.el-select-dropdown.el-popper {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans GB\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}\n",".ec-doc-mobile {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans GB\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n position: relative;\n}\n.ec-doc-mobile ul, .ec-doc-mobile ol {\n margin: 0;\n padding: 0;\n}\n.ec-doc-mobile a {\n color: #337ab7;\n text-decoration: none;\n margin: 0 3px;\n}\n.ec-doc-mobile a:hover {\n text-decoration: underline;\n}\n.ec-doc-mobile .top-bar {\n position: sticky;\n top: 0;\n height: 90px;\n left: 0;\n right: 0;\n background: #fff;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n border-bottom: 1px solid #ddd;\n z-index: 10;\n}\n.ec-doc-mobile .doc-type-nav {\n border-bottom: 1px solid #eee;\n margin-bottom: 10px;\n margin-left: 5px;\n}\n.ec-doc-mobile .doc-type-nav a {\n display: inline-block;\n line-height: 30px;\n width: 22%;\n text-align: center;\n box-sizing: border-box;\n text-decoration: none;\n color: #000;\n cursor: pointer;\n font-size: 14px;\n}\n.ec-doc-mobile .doc-type-nav a.selected {\n border-top: 3px solid #B03A5B;\n}\n.ec-doc-mobile .doc-mobile-toolbar {\n display: flex;\n flex-direction: row;\n}\n.ec-doc-mobile .doc-mobile-toolbar .open-nav {\n margin: 6px 5px;\n}\n.ec-doc-mobile .doc-mobile-toolbar .doc-search {\n flex: 1;\n}\n.ec-doc-mobile .doc-breadcrumb {\n position: fixed;\n text-align: center;\n left: 50%;\n transform: translate(-50%, 0);\n bottom: 20px;\n border-radius: 4px;\n padding: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n background: #337ab7;\n}\n.ec-doc-mobile .doc-breadcrumb a {\n display: inline-block;\n color: #fff;\n}\n.el-drawer .doc-nav {\n position: absolute;\n top: 10px;\n bottom: 0;\n left: 0;\n right: 0;\n overflow-y: scroll;\n}\n","/**\n * GitHub Gist Theme\n * Author : Anthony Attard - https://github.com/AnthonyAttard\n * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro\n */\n\n.hljs {\n display: block;\n background: white;\n padding: 0.5em;\n color: #333333;\n overflow-x: auto;\n}\n\n.hljs-comment,\n.hljs-meta {\n color: #969896;\n}\n\n.hljs-variable,\n.hljs-template-variable,\n.hljs-strong,\n.hljs-emphasis,\n.hljs-quote {\n color: #df5000;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-type {\n color: #d73a49;\n}\n\n.hljs-literal,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-attribute {\n color: #0086b3;\n}\n\n.hljs-section,\n.hljs-name {\n color: #63a35c;\n}\n\n.hljs-tag {\n color: #333333;\n}\n\n.hljs-title,\n.hljs-attr,\n.hljs-selector-id,\n.hljs-selector-class,\n.hljs-selector-attr,\n.hljs-selector-pseudo {\n color: #6f42c1;\n}\n\n.hljs-addition {\n color: #55a532;\n background-color: #eaffea;\n}\n\n.hljs-deletion {\n color: #bd2c00;\n background-color: #ffecec;\n}\n\n.hljs-link {\n text-decoration: underline;\n}\n\n.hljs-number {\n color: #005cc5;\n}\n\n.hljs-string {\n color: #032f62;\n}\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/en/css/element-icons.ttf b/en/css/element-icons.ttf
deleted file mode 100644
index 91b74de..0000000
--- a/en/css/element-icons.ttf
+++ /dev/null
Binary files differ
diff --git a/en/css/element-icons.woff b/en/css/element-icons.woff
deleted file mode 100644
index 02b9a25..0000000
--- a/en/css/element-icons.woff
+++ /dev/null
Binary files differ
diff --git a/en/css/main.css b/en/css/main.css
index a2f8b56..ca718d9 100644
--- a/en/css/main.css
+++ b/en/css/main.css
@@ -1 +1 @@
-@font-face{font-family:'iconfont';src:url("font/iconfont.eot");src:url("font/iconfont.eot?#iefix") format("embedded-opentype"),url("font/iconfont.woff") format("woff"),url("font/iconfont.ttf") format("truetype"),url("font/iconfont.svg#iconfont") format("svg")}.iconfont{font-family:"iconfont" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:url(font/OpenSans-Regular.ttf) format("truetype")}@font-face{font-family:'Open Sans';font-style:bold;font-weight:800;src:url(font/OpenSans-Bold.ttf) format("truetype")}html{height:100%}body{font-family:'Open Sans', "PingFang SC", Helvetica, Arial, sans-serif}#lowie-main{display:none}.lower-ie #main{display:none}.lower-ie #lowie-main{display:block;height:100%;width:100%;padding:200px 0 100px;background-color:#2a3c54}.lower-ie #lowie-main img{display:block;width:60%;margin:0 auto}#v4-link{position:fixed;bottom:0;left:50%;width:200px;margin-left:-100px;text-align:center;z-index:1000;padding:5px 30px}.navbar-default{border:none;background-color:#fff;z-index:10000;-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;height:50px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2)}.navbar-default .navbar-nav{-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear}.navbar-default .navbar-nav li{position:relative}.navbar-default .navbar-nav li a{color:#081642;background-color:none !important;padding:15px 20px;-webkit-transition:0.5s background-color;-o-transition:0.5s background-color;transition:0.5s background-color;font-size:14px}.navbar-default .navbar-nav li a:before{content:'';position:absolute;left:50%;right:50%;top:0;background:#081642;height:3px;-webkit-transition-property:'left, right';-o-transition-property:'left, right';transition-property:'left, right';-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-nav li a:focus{color:#081642;background-color:#f9f9f9}.navbar-default .navbar-nav li a:hover:before,.navbar-default .navbar-nav li a:focus:before{left:0;right:0}.navbar-default .navbar-nav li a .iconfont{font-size:12px}.navbar-default .navbar-nav li a .new{display:inline-block;padding:0 5px;background-color:#F72C5B;color:#fff;font-size:12px;border-radius:3px;vertical-align:middle;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.navbar-default .navbar-nav li.open{background-color:#f9f9f9;color:#fff}.navbar-default .navbar-nav li.open>a:focus,.navbar-default .navbar-nav li.open>a:hover{color:#081642;background-color:#f9f9f9}.navbar-default .navbar-nav li.active>a{padding-top:11px;border-top:3px solid #F72C5B;color:#F72C5B;background-color:#fff;-webkit-transition:0.5s background-color;-o-transition:0.5s background-color;transition:0.5s background-color}.navbar-default .navbar-nav li.active>a:before{display:none}.navbar-default .navbar-nav li.active>a:hover,.navbar-default .navbar-nav li.active>a:focus{color:#FF6D8F;background-color:#f9f9f9}.navbar-default .navbar-nav li .dropdown-menu{width:250px;padding:0;border:none}.navbar-default .navbar-nav li .dropdown-menu li{background-color:#fff;border-top:none}.navbar-default .navbar-nav li .dropdown-menu li a{padding:13px 20px}.navbar-default .navbar-nav li .dropdown-menu li:hover,.navbar-default .navbar-nav li .dropdown-menu li:focus{background-color:#f9f9f9}.navbar-default .navbar-nav li .dropdown-menu li:hover a,.navbar-default .navbar-nav li .dropdown-menu li:focus a{color:#344C9B;background-color:#f9f9f9}.navbar-default .navbar-nav li ul{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1);border-radius:0 0 10px 10px;overflow:hidden}.navbar-default .navbar-nav li ul a:before{display:none}.navbar-default .navbar-logo{height:32px;margin-top:-6px;margin-left:-2px}.navbar-default #navbar-collapse{border-top:none;background:#fff;margin-left:-25px;margin-right:-15px}.navbar-default .navbar-toggle{padding:1px 5px;margin:7px 16px 0 0;border-color:#ddd;background-color:#fff}.navbar-default .navbar-toggle .icon-bar{margin:7px 0 !important;height:1px;background-color:#ddd}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{border-color:#ddd;background-color:#f9f9f9}.container-fluid{padding:0 25px}#menu-btn{display:none;float:right;height:45px;line-height:45px;margin:5px 20px 0 0;font-size:30px;color:#fff;cursor:pointer}.navbar-bg{background-color:#fff;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:background-color, opacity;-o-transition-property:background-color, opacity;transition-property:background-color, opacity}.navbar-bg .navbar-nav li a{color:#081642}.navbar-bg .navbar-nav li.active a{color:#F72C5B;background-color:transparent}#nav-apache{margin-left:10px;margin-right:10px;position:relative;top:1px}#nav-apache a{padding:10px 15px}#nav-apache a img{height:30px}#nav-github{height:50px;overflow:hidden}#nav-github a{padding-top:13px}.nav-circle{height:50px}.nav-circle-inner{width:22px;height:22px;margin:14px 20px;text-align:center;overflow:hidden;border:1px solid;border-radius:50%}.navbar-default .navbar-nav li .nav-circle-inner a{height:100%;padding:0;font-size:12px}.navbar-default .navbar-nav li .nav-circle-inner a:hover{text-decoration:none}.icon-external-link{position:relative;top:2px;left:5px;opacity:0.5}@media (max-width: 768px){.navbar-default .navbar-nav{-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;margin-top:0;margin-bottom:0}.navbar-default .navbar-nav li.active>a{border-left:3px solid #081642;border-top:none;padding:10px 15px 10px 11px}#menu-btn{display:block}#nav-download{display:none}.dropdown-menu{width:100% !important}}@media (max-width: 1280px) and (min-width: 1192px){.navbar-default .navbar-nav li a{padding:15px 15px}}@media (max-width: 1192px) and (min-width: 900px){.navbar-default .navbar-nav li a{padding:15px 8px}}@media (max-width: 900px) and (min-width: 768px){.navbar-default .navbar-nav li a{padding:15px 3px;font-size:12px}}@media (max-width: 1065px){#nav-apache{display:none}}.page-main{position:absolute;left:0;right:0;top:50px;bottom:0;overflow-y:auto}.doc-version-change{position:absolute;top:70px;right:50px;z-index:100}.doc-version-change a{display:inline-block;margin-left:20px}.section-bg{background:#F4F7FC;padding:10px 0}.d-section.last-section{margin-bottom:30px;border-bottom:0}.page-info{margin-bottom:30px;text-align:center;padding:40px;color:#4e6167;background:#F4F7FC}.page-info h1{margin-bottom:5px;font-size:40px;font-weight:bold;color:#333}.page-info p{font-size:16px}.page-info-echarts{font-size:12px;margin-top:15px;color:#8E99AB}.page-content{min-height:300px;padding-bottom:40px;font-size:16px;line-height:22px}.page-content h2{color:#C42E51;padding-bottom:15px;border-bottom:1px solid #ddd;margin-top:40px;margin-bottom:20px}.page-content h2:first-child{margin-top:0}.page-content h3{margin:30px 0 10px 0}.page-content p{margin:10px 0}.page-content section{padding:40px 0;text-align:center}.page-content td,.page-content th{padding:5px 10px;border:1px solid #ddd}.page-content td ol,.page-content th ol{padding-left:1em}.page-content ul{padding-left:30px}.page-content ul li{list-style:disc}.page-content ol li{list-style:decimal}.page-content li{margin:5px 0}.page-nav{position:-webkit-sticky;position:sticky;overflow:auto;float:left;width:200px;top:20px;height:-webkit-calc(100vh - 100px);height:calc(100vh - 100px);margin:0 0 0 30px;padding:0 0 20px 0}.page-nav h4{margin:10px 0;color:#666;font-size:14px;padding-left:10px}.page-nav h4:first-child{margin-top:0}.page-nav h4.inner{margin:0;padding-left:0;font-size:18px}.page-nav a{border-left:1px solid rgba(78,97,103,0.25);color:#999;padding:7px 10px;display:block;position:relative}.page-nav a:before{content:'';position:absolute;top:50%;bottom:50%;background:#F72C5B;width:3px;left:-1px;-webkit-transition-property:'top, bottom';-o-transition-property:'top, bottom';transition-property:'top, bottom';-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.page-nav a:hover{text-decoration:none;color:#333}.page-nav a:hover:before{top:0;bottom:0}.page-nav a.active{color:#F72C5B}.page-nav .slide-btn{display:none}.page-detail{margin-left:220px;margin-bottom:20px;padding:0 40px 0 40px;overflow-x:hidden}.page-detail h2{margin:10px 0;padding-top:20px;font-size:22px}.page-detail h2:first-child{margin-top:0;padding-top:0}.page-detail h2+h3{margin-top:20px}.page-detail h3{margin:40px 0 15px 0;font-size:18px}.page-detail p{margin:15px 0}.page-detail li{padding-left:0}.page-detail li li{margin:5px 0}.page-detail .time{float:right;position:relative;top:-35px}@media screen and (max-device-width: 600px){.page-content.single-page{position:static}.page-content.slide-up .page-nav ul{display:none}.page-info{text-align:left;padding:15px;margin-bottom:10px}.page-info h1{margin-bottom:10px}.page-nav{position:static}.page-nav .slide-btn{display:block;color:#F72C5B;position:absolute;right:20px;margin-top:10px}.page-detail{position:static;margin-left:0;padding:0 15px}.page-detail h2{padding-top:20px}.page-detail h2:first-child{padding-top:0}}#download-extension-container{max-width:800px}#download-extension-container .row{margin-top:40px;margin-bottom:40px}#reference{padding:90px 0 140px 0;text-align:center}footer{min-height:190px;background-color:#202D42;color:#808795;font-size:14px}footer.inner-footer{background-color:transparent;border-top:1px solid #eee;margin-top:40px;color:#aaa;font-size:12px}footer.inner-footer .container{padding:0}footer.inner-footer p{line-height:20px}footer.inner-footer .row{margin-top:20px !important}footer.inner-footer #footer-icon-panel{text-align:right}footer.inner-footer #footer-icon-panel img{margin-top:20px;width:250px}footer .row{margin-top:50px !important;margin-bottom:0 !important}footer .logo img{display:block;margin-bottom:20px;width:109px}footer .footer-apache-logo{width:300px;max-width:80%;margin:0 0 10px 0}footer #echarts-copyright{color:rgba(255,255,255,0.4);margin:65px 0 20px 0;font-size:1.2rem}footer h3{color:#fff;font-size:1.5rem;margin:10px 0}footer ul{height:150px}footer ul dt{width:50%;float:left;font-weight:300}footer ul li{font-weight:300}footer ul a{color:rgba(255,255,255,0.4);font-size:1.2rem;margin:5px 0}footer ul a:hover{color:rgba(255,255,255,0.8)}footer .icon-panel{margin-top:20px}footer .footer-icon{display:inline-block;width:40px;height:40px;border-radius:50px;margin-right:10px;padding:8px 10px;border:1px solid white;opacity:0.5;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}footer .footer-icon:hover{opacity:1}@media (max-width: 992px){footer .footer-apache-logo{-webkit-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7)}footer .icon-panel{margin:20px 0}footer #echarts-copyright{margin:20px 0;text-align:center}}@media (max-width: 768px){footer .logo img{margin:0 auto}footer #footer-icon-panel{text-align:center}footer #echarts-copyright{text-align:center}}html{overflow-x:hidden}body{width:100%;background-color:#fff}#main-content{overflow:hidden;color:#949CB1}#main-content a{color:#5E7AD9}#main-content .more{text-align:center;display:block}#main-content footer{font-weight:400 !important}#main-content footer h3{color:white}#main-content #home-section{width:100%;height:100vh;overflow:hidden}#main-content .home-brand-panel{margin:0 auto;height:100%;padding:0 30px;position:relative}#main-content .home-info{margin-top:20vh}#main-content .home-brand{font-size:75px;font-weight:800;color:#081642;line-height:1.2em}#main-content .home-subtitle{font-size:21px;color:#1d2b5a;margin-top:15px}#main-content .home-btn-panel{margin-top:40px}#main-content .btn-index-home{min-width:150px;padding:15px 10px;border-radius:30px;background-color:#fff;border:1px solid #F72C5B;color:#F72C5B;opacity:0.8;font-size:16px}#main-content .btn-index-home:first-child{background-color:#F72C5B;color:#fff;opacity:1}#main-content .btn-index-home:first-child .index-home-svg{left:-3px;top:3px}#main-content .btn-index-home:hover,#main-content .btn-index-home:focus{-webkit-box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2);box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2)}#main-content .btn-index-github{min-width:56px;height:56px;background:transparent;border:none;opacity:0.5}#main-content .btn-index-github:hover{opacity:1}#main-content .index-home-svg{position:relative;top:4px;left:-6px}#main-content .home-chart{height:60%;top:16%;position:absolute;right:50px;z-index:-100}#main-content .home-chart img{max-height:100%}#main-content #events-section{margin:20px 0 60px 0}#main-content .banner-section{position:relative;margin-top:-5px}#main-content .banner-section a{display:block;text-align:center}#main-content .banner-img{width:100%}#main-content h2{margin:35px 0 5px 0}#main-content .row{margin-top:20px;margin-bottom:20px}#main-content section.normal{padding-top:50px;padding-bottom:165px;text-align:center}#reference{font-size:1.6rem;font-weight:400;line-height:2.4rem;text-align:center;background-image:url("../images/map.png");background-repeat:no-repeat;background-position:center center;background-size:contain;color:#333}#reference #recommends{height:160px;position:relative;max-width:90%;width:600px;margin:0 auto;text-align:center}#reference .recommend{display:none;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;position:absolute;bottom:0;width:100%}#reference .recommend.active{display:block}#reference .recommend p{margin:10px auto;font-size:20px;font-weight:400;color:#333}#reference .recommend p:before{display:inline-block;content:'';width:41px;height:37px;background-image:url("../images/yinhao.png");background-size:100%;margin-right:20px}#reference .person{margin:10px 0 20px 0;color:#949CB1}#reference .person .name{margin-top:-5px}#reference .people{height:100px}#reference .people img{width:70px;border-radius:50%;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;border-color:white;opacity:0.5;display:inline-block;margin:15px 10px}#reference .people img.active{width:100px;margin:0;-webkit-box-shadow:1px 4px 8px 0 rgba(46,37,37,0.3);box-shadow:1px 4px 8px 0 rgba(46,37,37,0.3);border:4px solid white;opacity:1}#main-content #reference{margin-top:100px}#feature-section hr{display:inline-block;text-align:center;width:36px;margin:15px 0;height:2px;border:0;background-color:#5E7AD9}.index-features{margin-top:20px;text-align:center;color:#949CB1}.index-features h2{font-size:35px;font-weight:800;color:#090909}.index-feature{margin:30px 0}.index-feature-left{display:inline-block;position:absolute;width:107px;height:99px}.index-feature-icon{position:absolute;width:50%;left:28%;top:22.5%}.index-feature-right{display:inline-block;margin-left:127px}.index-feature-right h3{margin-top:10px;font-size:16px;font-weight:bold;color:#06133B}.index-feature-right p{margin-top:14px;line-height:1.75em}#publication{overflow:hidden;height:720px;opacity:0;-webkit-transition:1s;-o-transition:1s;transition:1s}#publication #start-line{position:relative;left:500px;top:95px;width:200px;z-index:-10}#publication #end-line{position:relative;left:1015px;top:-84px;width:257px;z-index:-10}#publication .container .paper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}#publication .container .paper .content{width:528px}#publication .container .paper .content h2{line-height:36px;font-weight:600;font-size:25px;color:#090909}#publication .container .paper .icon #paper-icon{width:530px}#publication p.note{margin-top:10px}#publication .pdf{display:inline-block;margin-top:20px;height:45px;width:237px;text-align:center;background:#5E7AD9;border-radius:22.5px;padding:13px 0;color:#fff;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}#publication .pdf:hover,#publication .pdf:focus{text-decoration:none;-webkit-box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2);box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2)}#gongzhonghao{margin:40px 0}#gongzhonghao img{width:150px;-webkit-box-shadow:0px 6px 12px 0 #eee;box-shadow:0px 6px 12px 0 #eee}#about-section{padding-top:40px;padding-bottom:90px;background-color:#fff}#about-section h3{font-weight:600;font-size:35px;color:#06133B}#about-section hr{display:inline-block;text-align:center;width:36px;height:2px;background-color:#8EE3A9;color:#8EE3A9;margin-top:24px;border:0px}#about-section p{font-size:12px;color:#949CB1;letter-spacing:0}#about-section .btn-panel{text-align:center;margin-top:30px}#about-section .btn-panel a{height:78px}#about-section .btn-panel a:hover{text-decoration:none}#about-section .btn-content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;margin:20px 0;padding:9px 22px 9px 24px;text-indent:10px;position:relative;z-index:100;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;line-height:60px;-webkit-box-shadow:2px 4px 14px 4px rgba(112,114,124,0.2);box-shadow:2px 4px 14px 4px rgba(112,114,124,0.2);border-radius:8px}#about-section .btn-content .btn-logo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}#about-section .btn-content .btn-logo span{margin-left:14px;font-size:20px;color:#06133B}#about-section .btn-content .btn-logo svg{height:41px;width:41px}#about-section .btn-content .icon-v-right{width:12px;height:12px;border:2px solid rgba(148,156,177,0.4);border-width:2px 2px 0 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);margin:0;line-height:60px}#about-section .btn-content .weixin-code{width:60px}#about-section .btn-content img{margin-right:10px;position:relative;top:-2px}@media (max-width: 992px){#main-content .home-info{width:100%;left:0;margin-left:0;text-align:center}#main-content .home-brand{font-size:55px}#main-content .home-chart{margin:0 auto;width:100%;left:0;text-align:center;top:15vh;opacity:0.3;right:auto}.single-btn-panel{text-align:center}#start-line,#paper-icon,#end-line{display:none}#publication{height:auto;margin:80px 10px}#publication .container .paper .content{width:100%}#publication .home-chart{top:140px}}@media (max-width: 768px){#main-content .home-brand{font-size:48px}#main-content .home-btn-panel{margin:40px auto}#main-content .home-subtitle{font-size:14px;margin-top:10px}#main-content .btn-index-home{display:block;margin:15px auto;width:220px}#main-content .feature-btn{margin:0 auto;margin-top:50px;text-align:center}#main-content .container .paper .content h2{font-size:20px;line-height:25px}#main-content .index-feature{margin:50px 0}#reference{background-size:cover}#reference .people{height:180px}}@media (max-width: 480px){#home-section .home-brand-panel{text-align:center}#home-section .home-brand-panel .btn{display:block;margin:10px auto}}.ch-main{position:relative;margin-top:100px;margin-left:100px}.ch-pc-chart{width:90%;height:280px;border-radius:12px;-webkit-box-shadow:6px 6px 22px #ccc;box-shadow:6px 6px 22px #ccc}.ch-pc-chart div{z-index:50 !important}.ch-mobile{position:absolute;right:0;width:180px;top:-30px;z-index:300}.ch-mobile-box{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ch-mobile-content{position:absolute;overflow:hidden;border-bottom-left-radius:5px;border-bottom-right-radius:5px;left:12%;right:12%;top:16%;bottom:15.5%;background:#333;z-index:300;padding:0;margin:0}.ch-mobile-chart{width:200%;height:200%;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);padding:0;margin:0}.ch-mobile-chart div div{z-index:50 !important}.ch-on-touch .ch-pc-chart{width:auto}.ch-on-touch .ch-mobile{display:none}@media (max-width: 768px){.ch-main{margin-left:0}}@media (max-width: 480px){.ch-main{margin-top:0}}#ec-example-main #toolbar{top:81px}#ec-doc-main .ec-doc-tutorial .page-description h4{margin:1.33em 0;padding:0;font-weight:bold}#ec-doc-main .ec-doc-tutorial .page-description h5{margin:1.67em 0;padding:0;font-weight:bold}h1,h2,h3,h4,h5,h6,h7,p{font-weight:400;margin:0;padding:0}ul{list-style:none;padding:0;margin:0}img{max-width:100%}.clear :after{display:block;content:'';clear:both}iframe{border:1px solid #ccc}#download-table{margin:20px 0}#download-table td{padding:8px;text-align:left}#download-main{max-width:800px}#download-main .d-section{margin-top:20px;padding-top:20px}#download-main h2{font-size:25px;border-bottom:0;text-align:center;color:#5E7AD9;text-align:left}#download-main h3{margin-top:40px;font-size:18px;font-weight:bold;text-align:left}#download-main h3.first{margin-top:-20px}#download-main p{text-align:left}#download-main .center{text-align:center}#download-main h4{margin:10px auto;margin-top:20px;font-size:16px;font-weight:bold;text-align:left}#download-main h4 .warn{color:#A9334C}#download-main .list-wrap{margin:20px 0 0 0}#download-main .d-section-version h2{margin-top:-30px}#download-main .checksum{text-align:left;margin:20px 0;border-left:0;padding:0}#download-main .checksum p,#download-main .checksum li{font-size:14px}#download-main li{list-style:inherit;margin:5px 0}.download-note{margin-top:12px;line-height:20px;font-size:14px;color:#999;text-align:left}.paper-desc{text-align:left;margin:20px -20px;padding:20px;background-color:#f5f7fd}.paper-desc .paper-title{font-size:16px;margin-top:5px;font-weight:bold}.paper-desc .paper-author{font-size:12px;margin:10px 0px;color:#999}.paper-desc .paper-journal{font-size:14px}#download-row{text-align:center}.d-section{padding-top:50px;padding-bottom:25px;text-align:center;border-bottom:1px solid rgba(78,97,118,0.25);color:#6b7a89}.d-section{*zoom:1}.d-section:before,.d-section:after{display:table;line-height:0;content:""}.d-section:after{clear:both}.download-theme img{-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.download-theme img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#download-main .d-section-version a,#download-main .d-section-gl a{text-decoration:none}#download-main .d-section-version a:hover .circle-wrap,#download-main .d-section-gl a:hover .circle-wrap{color:#fff;background-color:#45B4E8;-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);border-color:transparent}#download-main .d-section-version a:active .circle-wrap,#download-main .d-section-version a:focus .circle-wrap,#download-main .d-section-gl a:active .circle-wrap,#download-main .d-section-gl a:focus .circle-wrap{color:#fff;background-color:#2997D6;-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);border-color:transparent}#download-main .d-section-version .mode,#download-main .d-section-gl .mode{display:block;margin:38px 0 2px;font-size:17px}#download-main .d-section-version .text,#download-main .d-section-gl .text{margin-left:-10px;text-align:center;color:#333}#download-main .d-section-version .text span,#download-main .d-section-gl .text span{color:#333;opacity:0.7}.d-section-version{padding-bottom:50px}.d-section-version .row>div{height:220px}#download-main .circle-wrap{width:120px;height:120px;border-radius:50%;background-color:white;border:1px solid rgba(78,97,118,0.2);margin:0 auto;margin-bottom:15px;color:#5E7AD9;-webkit-transition:0.2s;-o-transition:0.2s;transition:0.2s}.more-btn{position:relative;display:block;margin:20px auto;margin-bottom:10px}.more-btn:after{display:block;content:'';width:19px;height:18px;background-image:url("../images/btn-arrow.png");background-size:80% 80%;position:absolute;background-repeat:no-repeat;right:20px;top:13px}.more-btn+p{color:#6b7a89}.btn-two{margin-left:15px;margin-right:15px;margin-bottom:10px;position:relative;text-align:left;padding-left:45px !important}.d-section-map ul,.d-section-theme ul{*zoom:1}.d-section-map ul:before,.d-section-map ul:after,.d-section-theme ul:before,.d-section-theme ul:after{display:table;line-height:0;content:""}.d-section-map ul:after,.d-section-theme ul:after{clear:both}.d-section-map li,.d-section-theme li{float:left;width:260px}.d-section-map .first-item,.d-section-theme .first-item{margin-right:160px}.hover-shadow{-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s ease-out;-o-transition:0.5s ease-out;transition:0.5s ease-out}.hover-shadow:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#download-extension-container h2{color:#5E7AD9;margin-bottom:5px}#download-extension-container p{margin:5px 0}#builder .warn{color:#F72C5B;margin-top:10px;font-size:16px;line-height:25px}#builder ul{margin:0px;padding:0px}#builder li{list-style:none}#title h1 span{margin-left:20px;font-size:34px;color:#888;font-weight:100}#title .download-version{margin:15px;font-size:18px;font-weight:bold}#title .download-version select{margin-left:10px}#configuration{width:1000px;margin:0 auto}#configuration p.desc{color:#6b7a89;font-size:16px}#configuration h3{font-family:noto-thin;margin:26px 0}#configuration>section{border-bottom:1px solid #e5e5e5;text-align:left}#configuration>section p{margin:20px 0}#configuration h3{margin:10px 0;color:#3c485c;font-size:26px;font-weight:normal}#configuration h3 span{font-size:16px;margin-left:5px}#configuration ul{margin:10px}#configuration li{display:inline-block;vertical-align:top;margin:20px 18px;text-align:center;width:120px;border:2px solid rgba(0,0,0,0);cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}#configuration li input{display:none}#configuration li img{margin-top:5px;width:90px;height:90px;padding:5px 10px}#configuration li h5{color:#000;font-weight:normal;margin:10px 0;padding:0;line-height:18px;position:relative}#configuration li h5 span{font-size:12px;margin-left:3px}#configuration li:hover{-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.1);box-shadow:0px 0px 10px rgba(0,0,0,0.1)}#configuration li.checked{-webkit-box-shadow:0px 0px 15px rgba(41,60,85,0.2);box-shadow:0px 0px 15px rgba(41,60,85,0.2);border-radius:5px}#configuration li.checked h5::before{content:'';width:15px;height:15px;background-size:15px 15px;background-image:url(../images/builder/checked.png);display:inline-block;position:absolute;right:-2px;top:-107px;border-radius:0 3px 0 0}#other input{margin:0 10px 0 0;vertical-align:middle}#other label{font-size:16px}#other p.desc{font-size:14px;padding-left:10px}#other a{color:black}#other .other-option{margin-left:15px}#action{margin-top:50px;margin-bottom:100px;text-align:center}#email{border:1px solid #ccc;border-radius:20px;line-height:2em;width:250px;padding:5px 20px;outline:none;margin-top:20px}#build{margin-top:20px}.clear{clear:both}#about-page{margin-bottom:20px;text-align:center}#about-page section{padding:40px 15px}#about-page .contributor{max-width:800px}#about-page h3{margin-bottom:20px}#about-page p{color:#888;margin:5px 0}#about-page h4.group{text-align:left;border-left:4px solid;padding-left:15px}#about-page h4.group.pmc{margin:0px 0 10px 0;border-color:#E86C4B}#about-page h4.group.committer{margin:40px 0 40px 0;border-color:#40A7DC}#about-page h4.group.contributor{margin:40px 0 40px 0;border-color:#58A77C}#about-page h5{margin:5px 0;font-weight:bold}#about-page .about-person{margin:20px 0;height:150px}#about-page .about-person>a{display:inline-block;height:90px}#about-page .about-person>a img{height:88px}#about-page .about-person>a:hover img{-webkit-box-shadow:0 4px 9px 0 rgba(46,37,37,0.3);box-shadow:0 4px 9px 0 rgba(46,37,37,0.3);border-color:white}#about-page .about-person img{display:block;margin:0 auto;margin-bottom:10px;width:90px;border-radius:50%;border:4px solid white;border-color:transparent;-webkit-box-shadow:0 4px 9px 0 rgba(46,37,37,0);box-shadow:0 4px 9px 0 rgba(46,37,37,0);-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}#about-page .about-person .about-desc{color:#888}#about-page .about-person.wait-for-you img{border:1px solid #ececec;padding:10px;margin-bottom:20px}#about-page .company{border-top:1px solid rgba(78,97,118,0.25);max-width:800px}#about-page .company h3{margin-bottom:40px}#about-page .company .col-md-3{height:80px}#about-send-logo{margin:20px 0 50px 0}#about-send-logo p{margin-top:10px}.not-found{padding:150px 0 160px;height:100%;background-color:#2a3c54;overflow:hidden}.not-found img{display:block;width:60%;margin:0 auto}.not-found .text{margin-top:50px;text-align:center;font-size:20px;color:#fff}.not-found .link{margin-left:10px;color:#3183c6}@media (max-width: 768px){.not-found .text{padding:0 15px;font-size:14px}}#maps .links{text-align:center}#maps .links a{display:inline-block;margin:0 5px}#maps h3{margin-top:20px}#maps h3 span{font-size:0.7em;display:inline-block;margin:0 4px}#maps h5{text-align:center}#maps .province{margin-top:10px;margin-bottom:10px}#maps #map-list{padding-bottom:40px}#maps section p{margin-bottom:0;color:#6b7a89}#map-example{margin-top:30px;margin-bottom:100px;line-height:2em;font-size:14px}#map-example h4{margin:20px 0 10px 0}#map-example .prettyprint{padding:10px;border:#ccc 1px solid}#themes{max-width:800px}#themes p.desc{color:#888}#themes h1{text-align:center}#themes h3 span{font-size:16px;margin-left:5px}#themes .theme{text-align:center}#themes .theme img{margin-top:20px;width:285px;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s ease-out;-o-transition:0.5s ease-out;transition:0.5s ease-out;cursor:pointer}#themes .theme img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#theme-configure-section{margin-top:40px}#theme-example{margin:50px 0 80px 0;line-height:2em;font-size:14px}#theme-example h4{margin:20px 0 10px 0}#theme-example .prettyprint{padding:10px;border:#ccc 1px solid}#theme-builder{margin:30px 0;text-align:center}#changelog{width:700px;margin:0 auto;margin-top:100px;margin-bottom:100px;font-family:'Microsoft Yahei'}#changelog p.desc{margin:10px 0}#changelog p{font-weight:normal}#changelog .time{color:#888;float:right;margin-top:-35px;margin-right:10px}#changelog h2{margin-top:50px;border-bottom:1px solid #ccc;padding-bottom:5px;margin-bottom:10px}#changelog strong{color:#c12c2c}#changelog strong a{color:#3cafa4}#changelog>ul{margin-left:-10px}#changelog li{margin:10px 0;padding:0 20px}#changelog pre{margin:10px 20px;border:none}#ec-doc-main{position:absolute;left:0;right:0;top:0;bottom:0}@media (max-width: 600px){#ec-doc-main{-webkit-overflow-scrolling:touch;position:static}#ec-doc-nav{position:static;margin-bottom:0}}#extension{margin-bottom:-40px}#extension .nav-container{text-align:center;border-bottom:1px solid rgba(78,97,118,0.25);height:52px}#extension .nav-tabs{display:inline-block;border-bottom:none}#extension .nav-tabs li>a{border:none;color:#5E7AD9}#extension .nav-tabs li>a:hover{background:transparent}#extension .nav-tabs li.active>a{color:#F72C5B;border-bottom:4px solid #F72C5B}#extension .tab-content{margin:40px 0}.extension{margin:10px 0 40px 0}.extension-content{-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,0.05);box-shadow:0 1px 4px 0 rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);border-radius:4px}.extension-head{display:block}.extension-img{width:100%}.extension-info{padding:10px 15px;height:132px;overflow:hidden}@media (min-width: 992px){.extension-info:lang(en){height:195px}.extension-info:lang(zh){height:155px}}@media (min-width: 768px){.extension-info:lang(en){height:215px}}.extension-name{font-size:18px}.extension-author{margin-bottom:5px}.extension-author-name{display:inline-block;margin-right:5px}.extension-author-name+.extension-author-name{opacity:0.5}#submit-extension{text-align:center;padding-top:60px;padding-bottom:40px;background:#F4F7FC}#submit-extension h3{margin-bottom:10px}#submit-extension p{margin:2px 0;color:#6b7a89}#submit-extension a.btn{margin:20px 0 5px 0}#faq-page .page-detail li{margin:10px 0;list-style:circle}#maillist ul{list-style:circle;font-size:16px;padding-left:40px}#maillist li{margin:10px 0}#cheat-selector{margin-bottom:20px}#cheat-selector .selected .btn{background-color:#5E7AD9;border-color:#4B65BD;color:white}#cheat-chart{width:100%;height:400px}#cheat-detail{min-height:100px}#cheat-detail .desc{margin:10px 0 20px 0;font-size:14px;color:#555}.page-cheatsheet h2{font-size:22px;margin-top:30px;margin-bottom:10px}.page-cheatsheet h2:first-child{margin-top:0}.cheat-chart-item{display:inline-block;vertical-align:top;margin:20px 11px;text-align:center;width:120.5px;border:2px solid rgba(0,0,0,0);cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}.cheat-chart-item:hover{-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.2);box-shadow:0px 0px 10px rgba(0,0,0,0.2)}.cheat-chart-item a{text-decoration:none}.cheat-chart-item img{margin-top:5px;width:90px;height:90px;padding:5px 10px}.cheat-chart-item h5{color:#000;font-weight:normal;margin:10px 0;padding:0;line-height:18px;position:relative}#page-events .page-content h2{border-bottom:none;margin-bottom:0;margin-top:80px}#page-events .page-content h2:first-child{margin-top:20px}.event{display:block;margin:15px 0;width:100%;border-radius:10px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1);-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;overflow:hidden}.event:hover{-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.2);box-shadow:0 10px 20px rgba(0,0,0,0.2)}.event.event-detail-img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1)}.page-spa-container{position:absolute;top:51px;bottom:0;left:0;right:0}.no-script{position:fixed;left:0;right:0;bottom:0;padding:30px 40px;z-index:10001;background-color:rgba(0,0,0,0.6);color:#fff;text-align:center}#apache-banner{position:fixed;left:0;right:0;bottom:0;padding:20px 40px 0;z-index:10000;background-color:rgba(0,0,0,0.6);color:#fff;display:none}#apache-banner .txt{width:80%;height:100%;display:inline-block}#apache-banner p{margin:5px 0}#apache-banner p a{color:#fff;text-decoration:underline}#apache-banner .btn{position:relative;bottom:20px;width:20%;height:100%;display:inline-block;background-color:#F72C5B;border-radius:6px;color:#fff;padding:10px}#apache-banner .btn:hover{-webkit-box-shadow:none;box-shadow:none}#apache-banner .close-btn{position:absolute;padding:5px;right:15px;top:15px;color:#fff}#apache-banner .close-btn:hover{text-decoration:none}@media (max-width: 768px){.no-script{text-align:left;padding:20px}#apache-banner{padding:15px}#apache-banner .txt{width:100%;height:auto;display:block;margin-top:20px}#apache-banner .btn{width:100%;height:auto;display:block;top:0}#apache-banner .close-btn{top:10px}}.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:#F72C5B;position:fixed;z-index:100000;top:0;right:100%;width:100%;height:2px}.pace .pace-progress-inner{display:block;position:absolute;right:0px;width:100px;height:100%;-webkit-box-shadow:0 0 10px #F72C5B,0 0 5px #F72C5B;box-shadow:0 0 10px #F72C5B,0 0 5px #F72C5B;opacity:1.0;-webkit-transform:rotate(3deg) translate(0px, -4px);-ms-transform:rotate(3deg) translate(0px, -4px);transform:rotate(3deg) translate(0px, -4px)}.btn-main{border-radius:20px;padding:8px 50px;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s}.btn-main+.btn{margin-left:15px}.btn-main img{width:20px;margin-right:10px;margin-top:-2px;margin-left:-5px}.btn-main:hover{-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5)}.btn-main:focus,.btn-main:active{-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5)}.btn-thirdary{width:180px;-webkit-box-shadow:1px 3px 8px 0 rgba(25,119,173,0.4);box-shadow:1px 3px 8px 0 rgba(25,119,173,0.4);background-color:#3FA5DC;padding:9px 10px;color:white;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.btn-thirdary:hover{color:white;background-color:#45B4E8}.btn-thirdary:focus,.btn-thirdary:active{color:white;background-color:#2997D6}.btn-blue{background-color:#47ACE3;color:white;-webkit-box-shadow:1px 4px 8px 0 rgba(25,119,173,0.4);box-shadow:1px 4px 8px 0 rgba(25,119,173,0.4)}.btn-blue:hover{background-color:#46B5F1;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5)}.btn-blue:focus{background-color:#2E9FDC;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5)}.btn-red{background-color:#FF424F;color:white;-webkit-box-shadow:1px 4px 8px 0 rgba(174,44,53,0.4);box-shadow:1px 4px 8px 0 rgba(174,44,53,0.4)}.btn-red:hover{background-color:#FF4F4B;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5);box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5)}.btn-red:focus{background-color:#EE2A38;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5);box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5)}.btn-green{background-color:#80BB6A;color:white}.btn-green:hover,.btn-green:focus{background-color:#95CC81;color:white;-webkit-box-shadow:1px 3px 8px 0 rgba(76,151,47,0.4);box-shadow:1px 3px 8px 0 rgba(76,151,47,0.4)}.btn-default{background-color:white;color:#40A7DC;border:1px solid #40A7DC}.btn-default:hover,.btn-default:focus{background-color:#40A7DC;color:white;border:1px solid #40A7DC}.btn-group{margin:0 5px}.btn-group .caret{margin-left:5px}::-webkit-scrollbar{height:8px;width:8px;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border-radius:2px}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{width:8px;min-height:15px;background:rgba(50,50,50,0.3) !important;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.5) !important}
+@font-face{font-family:'iconfont';src:url("font/iconfont.eot");src:url("font/iconfont.eot?#iefix") format("embedded-opentype"),url("font/iconfont.woff") format("woff"),url("font/iconfont.ttf") format("truetype"),url("font/iconfont.svg#iconfont") format("svg")}.iconfont{font-family:"iconfont" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:url(font/OpenSans-Regular.ttf) format("truetype")}@font-face{font-family:'Open Sans';font-style:bold;font-weight:800;src:url(font/OpenSans-Bold.ttf) format("truetype")}html{height:100%}body{font-family:'Open Sans', "PingFang SC", Helvetica, Arial, sans-serif}#lowie-main{display:none}.lower-ie #main{display:none}.lower-ie #lowie-main{display:block;height:100%;width:100%;padding:200px 0 100px;background-color:#2a3c54}.lower-ie #lowie-main img{display:block;width:60%;margin:0 auto}#v4-link{position:fixed;bottom:0;left:50%;width:200px;margin-left:-100px;text-align:center;z-index:1000;padding:5px 30px}.navbar-default{border:none;background-color:#fff;z-index:10000;-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;height:50px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2)}.navbar-default .navbar-nav{-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear}.navbar-default .navbar-nav li{position:relative}.navbar-default .navbar-nav li a{color:#081642;background-color:none !important;padding:15px 20px;-webkit-transition:0.5s background-color;-o-transition:0.5s background-color;transition:0.5s background-color;font-size:14px}.navbar-default .navbar-nav li a:before{content:'';position:absolute;left:50%;right:50%;top:0;background:#081642;height:3px;-webkit-transition-property:'left, right';-o-transition-property:'left, right';transition-property:'left, right';-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-nav li a:focus{color:#081642;background-color:#f9f9f9}.navbar-default .navbar-nav li a:hover:before,.navbar-default .navbar-nav li a:focus:before{left:0;right:0}.navbar-default .navbar-nav li a .iconfont{font-size:12px}.navbar-default .navbar-nav li a .new{display:inline-block;padding:0 5px;background-color:#F72C5B;color:#fff;font-size:12px;border-radius:3px;vertical-align:middle;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.navbar-default .navbar-nav li.open{background-color:#f9f9f9;color:#fff}.navbar-default .navbar-nav li.open>a:focus,.navbar-default .navbar-nav li.open>a:hover{color:#081642;background-color:#f9f9f9}.navbar-default .navbar-nav li.active>a{padding-top:11px;border-top:3px solid #F72C5B;color:#F72C5B;background-color:#fff;-webkit-transition:0.5s background-color;-o-transition:0.5s background-color;transition:0.5s background-color}.navbar-default .navbar-nav li.active>a:before{display:none}.navbar-default .navbar-nav li.active>a:hover,.navbar-default .navbar-nav li.active>a:focus{color:#FF6D8F;background-color:#f9f9f9}.navbar-default .navbar-nav li .dropdown-menu{width:250px;padding:0;border:none}.navbar-default .navbar-nav li .dropdown-menu li{background-color:#fff;border-top:none}.navbar-default .navbar-nav li .dropdown-menu li a{padding:13px 20px}.navbar-default .navbar-nav li .dropdown-menu li:hover,.navbar-default .navbar-nav li .dropdown-menu li:focus{background-color:#f9f9f9}.navbar-default .navbar-nav li .dropdown-menu li:hover a,.navbar-default .navbar-nav li .dropdown-menu li:focus a{color:#344C9B;background-color:#f9f9f9}.navbar-default .navbar-nav li ul{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1);border-radius:0 0 10px 10px;overflow:hidden}.navbar-default .navbar-nav li ul a:before{display:none}.navbar-default .navbar-logo{height:32px;margin-top:-6px;margin-left:-2px}.navbar-default #navbar-collapse{border-top:none;background:#fff;margin-left:-25px;margin-right:-15px}.navbar-default .navbar-toggle{padding:1px 5px;margin:7px 16px 0 0;border-color:#ddd;background-color:#fff}.navbar-default .navbar-toggle .icon-bar{margin:7px 0 !important;height:1px;background-color:#ddd}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{border-color:#ddd;background-color:#f9f9f9}.container-fluid{padding:0 25px}#menu-btn{display:none;float:right;height:45px;line-height:45px;margin:5px 20px 0 0;font-size:30px;color:#fff;cursor:pointer}.navbar-bg{background-color:#fff;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:background-color, opacity;-o-transition-property:background-color, opacity;transition-property:background-color, opacity}.navbar-bg .navbar-nav li a{color:#081642}.navbar-bg .navbar-nav li.active a{color:#F72C5B;background-color:transparent}#nav-apache{margin-left:10px;margin-right:10px;position:relative;top:1px}#nav-apache a{padding:10px 15px}#nav-apache a img{height:30px}#nav-github{height:50px;overflow:hidden}#nav-github a{padding-top:13px}.nav-circle{height:50px}.nav-circle-inner{width:22px;height:22px;margin:14px 20px;text-align:center;overflow:hidden;border:1px solid;border-radius:50%}.navbar-default .navbar-nav li .nav-circle-inner a{height:100%;padding:0;font-size:12px}.navbar-default .navbar-nav li .nav-circle-inner a:hover{text-decoration:none}.icon-external-link{position:relative;top:2px;left:5px;opacity:0.5}@media (max-width: 768px){.navbar-default .navbar-nav{-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;margin-top:0;margin-bottom:0}.navbar-default .navbar-nav li.active>a{border-left:3px solid #081642;border-top:none;padding:10px 15px 10px 11px}#menu-btn{display:block}#nav-download{display:none}.dropdown-menu{width:100% !important}}@media (max-width: 1280px) and (min-width: 1192px){.navbar-default .navbar-nav li a{padding:15px 15px}}@media (max-width: 1192px) and (min-width: 900px){.navbar-default .navbar-nav li a{padding:15px 8px}}@media (max-width: 900px) and (min-width: 768px){.navbar-default .navbar-nav li a{padding:15px 3px;font-size:12px}}@media (max-width: 1065px){#nav-apache{display:none}}.page-main{position:absolute;left:0;right:0;top:50px;bottom:0;overflow-y:auto}.doc-version-change{position:absolute;top:70px;right:50px;z-index:100}.doc-version-change a{display:inline-block;margin-left:20px}.section-bg{background:#F4F7FC;padding:10px 0}.d-section.last-section{margin-bottom:30px;border-bottom:0}.page-info{margin-bottom:30px;text-align:center;padding:40px;color:#4e6167;background:#F4F7FC}.page-info h1{margin-bottom:5px;font-size:40px;font-weight:bold;color:#333}.page-info p{font-size:16px}.page-info-echarts{font-size:12px;margin-top:15px;color:#8E99AB}.page-content{min-height:300px;padding-bottom:40px;font-size:16px;line-height:22px}.page-content h2{color:#C42E51;padding-bottom:15px;border-bottom:1px solid #ddd;margin-top:40px;margin-bottom:20px}.page-content h2:first-child{margin-top:0}.page-content h3{margin:30px 0 10px 0}.page-content p{margin:10px 0}.page-content section{padding:40px 0;text-align:center}.page-content td,.page-content th{padding:5px 10px;border:1px solid #ddd}.page-content td ol,.page-content th ol{padding-left:1em}.page-content ul{padding-left:30px}.page-content ul li{list-style:disc}.page-content ol li{list-style:decimal}.page-content li{margin:5px 0}.page-nav{position:-webkit-sticky;position:sticky;overflow:auto;float:left;width:200px;top:20px;height:calc(100vh - 100px);margin:0 0 0 30px;padding:0 0 20px 0}.page-nav h4{margin:10px 0;color:#666;font-size:14px;padding-left:10px}.page-nav h4:first-child{margin-top:0}.page-nav h4.inner{margin:0;padding-left:0;font-size:18px}.page-nav a{border-left:1px solid rgba(78,97,103,0.25);color:#999;padding:7px 10px;display:block;position:relative}.page-nav a:before{content:'';position:absolute;top:50%;bottom:50%;background:#F72C5B;width:3px;left:-1px;-webkit-transition-property:'top, bottom';-o-transition-property:'top, bottom';transition-property:'top, bottom';-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.page-nav a:hover{text-decoration:none;color:#333}.page-nav a:hover:before{top:0;bottom:0}.page-nav a.active{color:#F72C5B}.page-nav .slide-btn{display:none}.page-detail{margin-left:220px;margin-bottom:20px;padding:0 40px 0 40px;overflow-x:hidden}.page-detail h2{margin:10px 0;padding-top:20px;font-size:22px}.page-detail h2:first-child{margin-top:0;padding-top:0}.page-detail h2+h3{margin-top:20px}.page-detail h3{margin:40px 0 15px 0;font-size:18px}.page-detail p{margin:15px 0}.page-detail li{padding-left:0}.page-detail li li{margin:5px 0}.page-detail .time{float:right;position:relative;top:-35px}@media screen and (max-device-width: 600px){.page-content.single-page{position:static}.page-content.slide-up .page-nav ul{display:none}.page-info{text-align:left;padding:15px;margin-bottom:10px}.page-info h1{margin-bottom:10px}.page-nav{position:static}.page-nav .slide-btn{display:block;color:#F72C5B;position:absolute;right:20px;margin-top:10px}.page-detail{position:static;margin-left:0;padding:0 15px}.page-detail h2{padding-top:20px}.page-detail h2:first-child{padding-top:0}}#download-extension-container{max-width:800px}#download-extension-container .row{margin-top:40px;margin-bottom:40px}#reference{padding:90px 0 140px 0;text-align:center}footer{min-height:190px;background-color:#202D42;color:#808795;font-size:14px}footer.inner-footer{background-color:transparent;border-top:1px solid #eee;margin-top:40px;color:#aaa;font-size:12px}footer.inner-footer .container{padding:0}footer.inner-footer p{line-height:20px}footer.inner-footer .row{margin-top:20px !important}footer.inner-footer #footer-icon-panel{text-align:right}footer.inner-footer #footer-icon-panel img{margin-top:20px;width:250px}footer .row{margin-top:50px !important;margin-bottom:0 !important}footer .logo img{display:block;margin-bottom:20px;width:109px}footer .footer-apache-logo{width:300px;max-width:80%;margin:0 0 10px 0}footer #echarts-copyright{color:rgba(255,255,255,0.4);margin:65px 0 20px 0;font-size:1.2rem}footer h3{color:#fff;font-size:1.5rem;margin:10px 0}footer ul{height:150px}footer ul dt{width:50%;float:left;font-weight:300}footer ul li{font-weight:300}footer ul a{color:rgba(255,255,255,0.4);font-size:1.2rem;margin:5px 0}footer ul a:hover{color:rgba(255,255,255,0.8)}footer .icon-panel{margin-top:20px}footer .footer-icon{display:inline-block;width:40px;height:40px;border-radius:50px;margin-right:10px;padding:8px 10px;border:1px solid white;opacity:0.5;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}footer .footer-icon:hover{opacity:1}@media (max-width: 992px){footer .footer-apache-logo{-webkit-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7)}footer .icon-panel{margin:20px 0}footer #echarts-copyright{margin:20px 0;text-align:center}}@media (max-width: 768px){footer .logo img{margin:0 auto}footer #footer-icon-panel{text-align:center}footer #echarts-copyright{text-align:center}}html{overflow-x:hidden}body{width:100%;background-color:#fff}#main-content{overflow:hidden;color:#949CB1}#main-content a{color:#5E7AD9}#main-content .more{text-align:center;display:block}#main-content footer{font-weight:400 !important}#main-content footer h3{color:white}#main-content #home-section{width:100%;height:100vh;overflow:hidden}#main-content .home-brand-panel{margin:0 auto;height:100%;padding:0 30px;position:relative}#main-content .home-info{margin-top:20vh}#main-content .home-brand{font-size:75px;font-weight:800;color:#081642;line-height:1.2em}#main-content .home-subtitle{font-size:21px;color:#1d2b5a;margin-top:15px}#main-content .home-btn-panel{margin-top:40px}#main-content .btn-index-home{min-width:150px;padding:15px 10px;border-radius:30px;background-color:#fff;border:1px solid #F72C5B;color:#F72C5B;opacity:0.8;font-size:16px}#main-content .btn-index-home:first-child{background-color:#F72C5B;color:#fff;opacity:1}#main-content .btn-index-home:first-child .index-home-svg{left:-3px;top:3px}#main-content .btn-index-home:hover,#main-content .btn-index-home:focus{-webkit-box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2);box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2)}#main-content .btn-index-github{min-width:56px;height:56px;background:transparent;border:none;opacity:0.5}#main-content .btn-index-github:hover{opacity:1}#main-content .index-home-svg{position:relative;top:4px;left:-6px}#main-content .home-chart{height:60%;top:16%;position:absolute;right:50px;z-index:-100}#main-content .home-chart img{max-height:100%}#main-content #events-section{margin:20px 0 60px 0}#main-content .banner-section{position:relative;margin-top:-5px}#main-content .banner-section a{display:block;text-align:center}#main-content .banner-img{width:100%}#main-content h2{margin:35px 0 5px 0}#main-content .row{margin-top:20px;margin-bottom:20px}#main-content section.normal{padding-top:50px;padding-bottom:165px;text-align:center}#reference{font-size:1.6rem;font-weight:400;line-height:2.4rem;text-align:center;background-image:url("../images/map.png");background-repeat:no-repeat;background-position:center center;background-size:contain;color:#333}#reference #recommends{height:160px;position:relative;max-width:90%;width:600px;margin:0 auto;text-align:center}#reference .recommend{display:none;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;position:absolute;bottom:0;width:100%}#reference .recommend.active{display:block}#reference .recommend p{margin:10px auto;font-size:20px;font-weight:400;color:#333}#reference .recommend p:before{display:inline-block;content:'';width:41px;height:37px;background-image:url("../images/yinhao.png");background-size:100%;margin-right:20px}#reference .person{margin:10px 0 20px 0;color:#949CB1}#reference .person .name{margin-top:-5px}#reference .people{height:100px}#reference .people img{width:70px;border-radius:50%;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;border-color:white;opacity:0.5;display:inline-block;margin:15px 10px}#reference .people img.active{width:100px;margin:0;-webkit-box-shadow:1px 4px 8px 0 rgba(46,37,37,0.3);box-shadow:1px 4px 8px 0 rgba(46,37,37,0.3);border:4px solid white;opacity:1}#main-content #reference{margin-top:100px}#feature-section hr{display:inline-block;text-align:center;width:36px;margin:15px 0;height:2px;border:0;background-color:#5E7AD9}.index-features{margin-top:20px;text-align:center;color:#949CB1}.index-features h2{font-size:35px;font-weight:800;color:#090909}.index-feature{margin:30px 0}.index-feature-left{display:inline-block;position:absolute;width:107px;height:99px}.index-feature-icon{position:absolute;width:50%;left:28%;top:22.5%}.index-feature-right{display:inline-block;margin-left:127px}.index-feature-right h3{margin-top:10px;font-size:16px;font-weight:bold;color:#06133B}.index-feature-right p{margin-top:14px;line-height:1.75em}#publication{overflow:hidden;height:720px;opacity:0;-webkit-transition:1s;-o-transition:1s;transition:1s}#publication #start-line{position:relative;left:500px;top:95px;width:200px;z-index:-10}#publication #end-line{position:relative;left:1015px;top:-84px;width:257px;z-index:-10}#publication .container .paper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}#publication .container .paper .content{width:528px}#publication .container .paper .content h2{line-height:36px;font-weight:600;font-size:25px;color:#090909}#publication .container .paper .icon #paper-icon{width:530px}#publication p.note{margin-top:10px}#publication .pdf{display:inline-block;margin-top:20px;height:45px;width:237px;text-align:center;background:#5E7AD9;border-radius:22.5px;padding:13px 0;color:#fff;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}#publication .pdf:hover,#publication .pdf:focus{text-decoration:none;-webkit-box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2);box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2)}#gongzhonghao{margin:40px 0}#gongzhonghao img{width:150px;-webkit-box-shadow:0px 6px 12px 0 #eee;box-shadow:0px 6px 12px 0 #eee}#about-section{padding-top:40px;padding-bottom:90px;background-color:#fff}#about-section h3{font-weight:600;font-size:35px;color:#06133B}#about-section hr{display:inline-block;text-align:center;width:36px;height:2px;background-color:#8EE3A9;color:#8EE3A9;margin-top:24px;border:0px}#about-section p{font-size:12px;color:#949CB1;letter-spacing:0}#about-section .btn-panel{text-align:center;margin-top:30px}#about-section .btn-panel a{height:78px}#about-section .btn-panel a:hover{text-decoration:none}#about-section .btn-content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;margin:20px 0;padding:9px 22px 9px 24px;text-indent:10px;position:relative;z-index:100;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;line-height:60px;-webkit-box-shadow:2px 4px 14px 4px rgba(112,114,124,0.2);box-shadow:2px 4px 14px 4px rgba(112,114,124,0.2);border-radius:8px}#about-section .btn-content .btn-logo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}#about-section .btn-content .btn-logo span{margin-left:14px;font-size:20px;color:#06133B}#about-section .btn-content .btn-logo svg{height:41px;width:41px}#about-section .btn-content .icon-v-right{width:12px;height:12px;border:2px solid rgba(148,156,177,0.4);border-width:2px 2px 0 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);margin:0;line-height:60px}#about-section .btn-content .weixin-code{width:60px}#about-section .btn-content img{margin-right:10px;position:relative;top:-2px}@media (max-width: 992px){#main-content .home-info{width:100%;left:0;margin-left:0;text-align:center}#main-content .home-brand{font-size:55px}#main-content .home-chart{margin:0 auto;width:100%;left:0;text-align:center;top:15vh;opacity:0.3;right:auto}.single-btn-panel{text-align:center}#start-line,#paper-icon,#end-line{display:none}#publication{height:auto;margin:80px 10px}#publication .container .paper .content{width:100%}#publication .home-chart{top:140px}}@media (max-width: 768px){#main-content .home-brand{font-size:48px}#main-content .home-btn-panel{margin:40px auto}#main-content .home-subtitle{font-size:14px;margin-top:10px}#main-content .btn-index-home{display:block;margin:15px auto;width:220px}#main-content .feature-btn{margin:0 auto;margin-top:50px;text-align:center}#main-content .container .paper .content h2{font-size:20px;line-height:25px}#main-content .index-feature{margin:50px 0}#reference{background-size:cover}#reference .people{height:180px}}@media (max-width: 480px){#home-section .home-brand-panel{text-align:center}#home-section .home-brand-panel .btn{display:block;margin:10px auto}}.ch-main{position:relative;margin-top:100px;margin-left:100px}.ch-pc-chart{width:90%;height:280px;border-radius:12px;-webkit-box-shadow:6px 6px 22px #ccc;box-shadow:6px 6px 22px #ccc}.ch-pc-chart div{z-index:50 !important}.ch-mobile{position:absolute;right:0;width:180px;top:-30px;z-index:300}.ch-mobile-box{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ch-mobile-content{position:absolute;overflow:hidden;border-bottom-left-radius:5px;border-bottom-right-radius:5px;left:12%;right:12%;top:16%;bottom:15.5%;background:#333;z-index:300;padding:0;margin:0}.ch-mobile-chart{width:200%;height:200%;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);padding:0;margin:0}.ch-mobile-chart div div{z-index:50 !important}.ch-on-touch .ch-pc-chart{width:auto}.ch-on-touch .ch-mobile{display:none}@media (max-width: 768px){.ch-main{margin-left:0}}@media (max-width: 480px){.ch-main{margin-top:0}}#ec-example-main #toolbar{top:81px}#ec-doc-main .ec-doc-tutorial .page-description h4{margin:1.33em 0;padding:0;font-weight:bold}#ec-doc-main .ec-doc-tutorial .page-description h5{margin:1.67em 0;padding:0;font-weight:bold}h1,h2,h3,h4,h5,h6,h7,p{font-weight:400;margin:0;padding:0}ul{list-style:none;padding:0;margin:0}img{max-width:100%}.clear :after{display:block;content:'';clear:both}iframe{border:1px solid #ccc}#download-table{margin:20px 0}#download-table td{padding:8px;text-align:left}#download-main{max-width:800px}#download-main .d-section{margin-top:20px;padding-top:20px}#download-main h2{font-size:25px;border-bottom:0;text-align:center;color:#5E7AD9;text-align:left}#download-main h3{margin-top:40px;font-size:18px;font-weight:bold;text-align:left}#download-main h3.first{margin-top:-20px}#download-main p{text-align:left}#download-main .center{text-align:center}#download-main h4{margin:10px auto;margin-top:20px;font-size:16px;font-weight:bold;text-align:left}#download-main h4 .warn{color:#A9334C}#download-main .list-wrap{margin:20px 0 0 0}#download-main .d-section-version h2{margin-top:-30px}#download-main .checksum{text-align:left;margin:20px 0;border-left:0;padding:0}#download-main .checksum p,#download-main .checksum li{font-size:14px}#download-main li{list-style:inherit;margin:5px 0}.download-note{margin-top:12px;line-height:20px;font-size:14px;color:#999;text-align:left}.paper-desc{text-align:left;margin:20px -20px;padding:20px;background-color:#f5f7fd}.paper-desc .paper-title{font-size:16px;margin-top:5px;font-weight:bold}.paper-desc .paper-author{font-size:12px;margin:10px 0px;color:#999}.paper-desc .paper-journal{font-size:14px}#download-row{text-align:center}.d-section{padding-top:50px;padding-bottom:25px;text-align:center;border-bottom:1px solid rgba(78,97,118,0.25);color:#6b7a89}.d-section{*zoom:1}.d-section:before,.d-section:after{display:table;line-height:0;content:""}.d-section:after{clear:both}.download-theme img{-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.download-theme img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#download-main .d-section-version a,#download-main .d-section-gl a{text-decoration:none}#download-main .d-section-version a:hover .circle-wrap,#download-main .d-section-gl a:hover .circle-wrap{color:#fff;background-color:#45B4E8;-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);border-color:transparent}#download-main .d-section-version a:active .circle-wrap,#download-main .d-section-version a:focus .circle-wrap,#download-main .d-section-gl a:active .circle-wrap,#download-main .d-section-gl a:focus .circle-wrap{color:#fff;background-color:#2997D6;-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);border-color:transparent}#download-main .d-section-version .mode,#download-main .d-section-gl .mode{display:block;margin:38px 0 2px;font-size:17px}#download-main .d-section-version .text,#download-main .d-section-gl .text{margin-left:-10px;text-align:center;color:#333}#download-main .d-section-version .text span,#download-main .d-section-gl .text span{color:#333;opacity:0.7}.d-section-version{padding-bottom:50px}.d-section-version .row>div{height:220px}#download-main .circle-wrap{width:120px;height:120px;border-radius:50%;background-color:white;border:1px solid rgba(78,97,118,0.2);margin:0 auto;margin-bottom:15px;color:#5E7AD9;-webkit-transition:0.2s;-o-transition:0.2s;transition:0.2s}.more-btn{position:relative;display:block;margin:20px auto;margin-bottom:10px}.more-btn:after{display:block;content:'';width:19px;height:18px;background-image:url("../images/btn-arrow.png");background-size:80% 80%;position:absolute;background-repeat:no-repeat;right:20px;top:13px}.more-btn+p{color:#6b7a89}.btn-two{margin-left:15px;margin-right:15px;margin-bottom:10px;position:relative;text-align:left;padding-left:45px !important}.d-section-map ul,.d-section-theme ul{*zoom:1}.d-section-map ul:before,.d-section-map ul:after,.d-section-theme ul:before,.d-section-theme ul:after{display:table;line-height:0;content:""}.d-section-map ul:after,.d-section-theme ul:after{clear:both}.d-section-map li,.d-section-theme li{float:left;width:260px}.d-section-map .first-item,.d-section-theme .first-item{margin-right:160px}.hover-shadow{-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s ease-out;-o-transition:0.5s ease-out;transition:0.5s ease-out}.hover-shadow:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#download-extension-container h2{color:#5E7AD9;margin-bottom:5px}#download-extension-container p{margin:5px 0}#builder .warn{color:#F72C5B;margin-top:10px;font-size:16px;line-height:25px}#builder ul{margin:0px;padding:0px}#builder li{list-style:none}#title h1 span{margin-left:20px;font-size:34px;color:#888;font-weight:100}#title .download-version{margin:15px;font-size:18px;font-weight:bold}#title .download-version select{margin-left:10px}#configuration{width:1000px;margin:0 auto}#configuration p.desc{color:#6b7a89;font-size:16px}#configuration h3{font-family:noto-thin;margin:26px 0}#configuration>section{border-bottom:1px solid #e5e5e5;text-align:left}#configuration>section p{margin:20px 0}#configuration h3{margin:10px 0;color:#3c485c;font-size:26px;font-weight:normal}#configuration h3 span{font-size:16px;margin-left:5px}#configuration ul{margin:10px}#configuration li{display:inline-block;vertical-align:top;margin:20px 18px;text-align:center;width:120px;border:2px solid rgba(0,0,0,0);cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}#configuration li input{display:none}#configuration li img{margin-top:5px;width:90px;height:90px;padding:5px 10px}#configuration li h5{color:#000;font-weight:normal;margin:10px 0;padding:0;line-height:18px;position:relative}#configuration li h5 span{font-size:12px;margin-left:3px}#configuration li:hover{-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.1);box-shadow:0px 0px 10px rgba(0,0,0,0.1)}#configuration li.checked{-webkit-box-shadow:0px 0px 15px rgba(41,60,85,0.2);box-shadow:0px 0px 15px rgba(41,60,85,0.2);border-radius:5px}#configuration li.checked h5::before{content:'';width:15px;height:15px;background-size:15px 15px;background-image:url(../images/builder/checked.png);display:inline-block;position:absolute;right:-2px;top:-107px;border-radius:0 3px 0 0}#other input{margin:0 10px 0 0;vertical-align:middle}#other label{font-size:16px}#other p.desc{font-size:14px;padding-left:10px}#other a{color:black}#other .other-option{margin-left:15px}#action{margin-top:50px;margin-bottom:100px;text-align:center}#email{border:1px solid #ccc;border-radius:20px;line-height:2em;width:250px;padding:5px 20px;outline:none;margin-top:20px}#build{margin-top:20px}.clear{clear:both}#about-page{margin-bottom:20px;text-align:center}#about-page section{padding:40px 15px}#about-page .contributor{max-width:800px}#about-page h3{margin-bottom:20px}#about-page p{color:#888;margin:5px 0}#about-page h4.group{text-align:left;border-left:4px solid;padding-left:15px}#about-page h4.group.pmc{margin:0px 0 10px 0;border-color:#E86C4B}#about-page h4.group.committer{margin:40px 0 40px 0;border-color:#40A7DC}#about-page h4.group.contributor{margin:40px 0 40px 0;border-color:#58A77C}#about-page h5{margin:5px 0;font-weight:bold}#about-page .about-person{margin:20px 0;height:150px}#about-page .about-person>a{display:inline-block;height:90px}#about-page .about-person>a img{height:88px}#about-page .about-person>a:hover img{-webkit-box-shadow:0 4px 9px 0 rgba(46,37,37,0.3);box-shadow:0 4px 9px 0 rgba(46,37,37,0.3);border-color:white}#about-page .about-person img{display:block;margin:0 auto;margin-bottom:10px;width:90px;border-radius:50%;border:4px solid white;border-color:transparent;-webkit-box-shadow:0 4px 9px 0 rgba(46,37,37,0);box-shadow:0 4px 9px 0 rgba(46,37,37,0);-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}#about-page .about-person .about-desc{color:#888}#about-page .about-person.wait-for-you img{border:1px solid #ececec;padding:10px;margin-bottom:20px}#about-page .company{border-top:1px solid rgba(78,97,118,0.25);max-width:800px}#about-page .company h3{margin-bottom:40px}#about-page .company .col-md-3{height:80px}#about-send-logo{margin:20px 0 50px 0}#about-send-logo p{margin-top:10px}.not-found{padding:150px 0 160px;height:100%;background-color:#2a3c54;overflow:hidden}.not-found img{display:block;width:60%;margin:0 auto}.not-found .text{margin-top:50px;text-align:center;font-size:20px;color:#fff}.not-found .link{margin-left:10px;color:#3183c6}@media (max-width: 768px){.not-found .text{padding:0 15px;font-size:14px}}#maps .links{text-align:center}#maps .links a{display:inline-block;margin:0 5px}#maps h3{margin-top:20px}#maps h3 span{font-size:0.7em;display:inline-block;margin:0 4px}#maps h5{text-align:center}#maps .province{margin-top:10px;margin-bottom:10px}#maps #map-list{padding-bottom:40px}#maps section p{margin-bottom:0;color:#6b7a89}#map-example{margin-top:30px;margin-bottom:100px;line-height:2em;font-size:14px}#map-example h4{margin:20px 0 10px 0}#map-example .prettyprint{padding:10px;border:#ccc 1px solid}#themes{max-width:800px}#themes p.desc{color:#888}#themes h1{text-align:center}#themes h3 span{font-size:16px;margin-left:5px}#themes .theme{text-align:center}#themes .theme img{margin-top:20px;width:285px;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s ease-out;-o-transition:0.5s ease-out;transition:0.5s ease-out;cursor:pointer}#themes .theme img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#theme-configure-section{margin-top:40px}#theme-example{margin:50px 0 80px 0;line-height:2em;font-size:14px}#theme-example h4{margin:20px 0 10px 0}#theme-example .prettyprint{padding:10px;border:#ccc 1px solid}#theme-builder{margin:30px 0;text-align:center}#changelog{width:700px;margin:0 auto;margin-top:100px;margin-bottom:100px;font-family:'Microsoft Yahei'}#changelog p.desc{margin:10px 0}#changelog p{font-weight:normal}#changelog .time{color:#888;float:right;margin-top:-35px;margin-right:10px}#changelog h2{margin-top:50px;border-bottom:1px solid #ccc;padding-bottom:5px;margin-bottom:10px}#changelog strong{color:#c12c2c}#changelog strong a{color:#3cafa4}#changelog>ul{margin-left:-10px}#changelog li{margin:10px 0;padding:0 20px}#changelog pre{margin:10px 20px;border:none}#ec-doc-main{position:absolute;left:0;right:0;top:0;bottom:0}@media (max-width: 600px){#ec-doc-main{-webkit-overflow-scrolling:touch;position:static}#ec-doc-nav{position:static;margin-bottom:0}}#extension{margin-bottom:-40px}#extension .nav-container{text-align:center;border-bottom:1px solid rgba(78,97,118,0.25);height:52px}#extension .nav-tabs{display:inline-block;border-bottom:none}#extension .nav-tabs li>a{border:none;color:#5E7AD9}#extension .nav-tabs li>a:hover{background:transparent}#extension .nav-tabs li.active>a{color:#F72C5B;border-bottom:4px solid #F72C5B}#extension .tab-content{margin:40px 0}.extension{margin:10px 0 40px 0}.extension-content{-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,0.05);box-shadow:0 1px 4px 0 rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);border-radius:4px}.extension-head{display:block}.extension-img{width:100%}.extension-info{padding:10px 15px;height:132px;overflow:hidden}@media (min-width: 992px){.extension-info:lang(en){height:195px}.extension-info:lang(zh){height:155px}}@media (min-width: 768px){.extension-info:lang(en){height:215px}}.extension-name{font-size:18px}.extension-author{margin-bottom:5px}.extension-author-name{display:inline-block;margin-right:5px}.extension-author-name+.extension-author-name{opacity:0.5}#submit-extension{text-align:center;padding-top:60px;padding-bottom:40px;background:#F4F7FC}#submit-extension h3{margin-bottom:10px}#submit-extension p{margin:2px 0;color:#6b7a89}#submit-extension a.btn{margin:20px 0 5px 0}#faq-page .page-detail li{margin:10px 0;list-style:circle}#maillist ul{list-style:circle;font-size:16px;padding-left:40px}#maillist li{margin:10px 0}#cheat-selector{margin-bottom:20px}#cheat-selector .selected .btn{background-color:#5E7AD9;border-color:#4B65BD;color:white}#cheat-chart{width:100%;height:400px}#cheat-detail{min-height:100px}#cheat-detail .desc{margin:10px 0 20px 0;font-size:14px;color:#555}.page-cheatsheet h2{font-size:22px;margin-top:30px;margin-bottom:10px}.page-cheatsheet h2:first-child{margin-top:0}.cheat-chart-item{display:inline-block;vertical-align:top;margin:20px 11px;text-align:center;width:120.5px;border:2px solid rgba(0,0,0,0);cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}.cheat-chart-item:hover{-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.2);box-shadow:0px 0px 10px rgba(0,0,0,0.2)}.cheat-chart-item a{text-decoration:none}.cheat-chart-item img{margin-top:5px;width:90px;height:90px;padding:5px 10px}.cheat-chart-item h5{color:#000;font-weight:normal;margin:10px 0;padding:0;line-height:18px;position:relative}#page-events .page-content h2{border-bottom:none;margin-bottom:0;margin-top:80px}#page-events .page-content h2:first-child{margin-top:20px}.event{display:block;margin:15px 0;width:100%;border-radius:10px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1);-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;overflow:hidden}.event:hover{-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.2);box-shadow:0 10px 20px rgba(0,0,0,0.2)}.event.event-detail-img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1)}.page-spa-container{position:absolute;top:51px;bottom:0;left:0;right:0}.no-script{position:fixed;left:0;right:0;bottom:0;padding:30px 40px;z-index:10001;background-color:rgba(0,0,0,0.6);color:#fff;text-align:center}#apache-banner{position:fixed;left:0;right:0;bottom:0;padding:20px 40px 0;z-index:10000;background-color:rgba(0,0,0,0.6);color:#fff;display:none}#apache-banner .txt{width:80%;height:100%;display:inline-block}#apache-banner p{margin:5px 0}#apache-banner p a{color:#fff;text-decoration:underline}#apache-banner .btn{position:relative;bottom:20px;width:20%;height:100%;display:inline-block;background-color:#F72C5B;border-radius:6px;color:#fff;padding:10px}#apache-banner .btn:hover{-webkit-box-shadow:none;box-shadow:none}#apache-banner .close-btn{position:absolute;padding:5px;right:15px;top:15px;color:#fff}#apache-banner .close-btn:hover{text-decoration:none}@media (max-width: 768px){.no-script{text-align:left;padding:20px}#apache-banner{padding:15px}#apache-banner .txt{width:100%;height:auto;display:block;margin-top:20px}#apache-banner .btn{width:100%;height:auto;display:block;top:0}#apache-banner .close-btn{top:10px}}.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:#F72C5B;position:fixed;z-index:100000;top:0;right:100%;width:100%;height:2px}.pace .pace-progress-inner{display:block;position:absolute;right:0px;width:100px;height:100%;-webkit-box-shadow:0 0 10px #F72C5B,0 0 5px #F72C5B;box-shadow:0 0 10px #F72C5B,0 0 5px #F72C5B;opacity:1.0;-webkit-transform:rotate(3deg) translate(0px, -4px);-ms-transform:rotate(3deg) translate(0px, -4px);transform:rotate(3deg) translate(0px, -4px)}.btn-main{border-radius:20px;padding:8px 50px;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s}.btn-main+.btn{margin-left:15px}.btn-main img{width:20px;margin-right:10px;margin-top:-2px;margin-left:-5px}.btn-main:hover{-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5)}.btn-main:focus,.btn-main:active{-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5)}.btn-thirdary{width:180px;-webkit-box-shadow:1px 3px 8px 0 rgba(25,119,173,0.4);box-shadow:1px 3px 8px 0 rgba(25,119,173,0.4);background-color:#3FA5DC;padding:9px 10px;color:white;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.btn-thirdary:hover{color:white;background-color:#45B4E8}.btn-thirdary:focus,.btn-thirdary:active{color:white;background-color:#2997D6}.btn-blue{background-color:#47ACE3;color:white;-webkit-box-shadow:1px 4px 8px 0 rgba(25,119,173,0.4);box-shadow:1px 4px 8px 0 rgba(25,119,173,0.4)}.btn-blue:hover{background-color:#46B5F1;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5)}.btn-blue:focus{background-color:#2E9FDC;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5)}.btn-red{background-color:#FF424F;color:white;-webkit-box-shadow:1px 4px 8px 0 rgba(174,44,53,0.4);box-shadow:1px 4px 8px 0 rgba(174,44,53,0.4)}.btn-red:hover{background-color:#FF4F4B;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5);box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5)}.btn-red:focus{background-color:#EE2A38;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5);box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5)}.btn-green{background-color:#80BB6A;color:white}.btn-green:hover,.btn-green:focus{background-color:#95CC81;color:white;-webkit-box-shadow:1px 3px 8px 0 rgba(76,151,47,0.4);box-shadow:1px 3px 8px 0 rgba(76,151,47,0.4)}.btn-default{background-color:white;color:#40A7DC;border:1px solid #40A7DC}.btn-default:hover,.btn-default:focus{background-color:#40A7DC;color:white;border:1px solid #40A7DC}.btn-group{margin:0 5px}.btn-group .caret{margin-left:5px}::-webkit-scrollbar{height:8px;width:8px;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border-radius:2px}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{width:8px;min-height:15px;background:rgba(50,50,50,0.3) !important;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.5) !important}
diff --git a/en/dependencies.html b/en/dependencies.html
index c204b65..d9ac423 100644
--- a/en/dependencies.html
+++ b/en/dependencies.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Dependencies - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Dependencies</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content"><div class="container"><h2>ZRender</h2><p>ECharts depends on <a href="https://github.com/ecomfe/zrender">ZRender</a>, a lightweight canvas library which provides 2d draw.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Dependencies</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content"><div class="container"><h2>ZRender</h2><p>ECharts depends on <a href="https://github.com/ecomfe/zrender">ZRender</a>, a lightweight canvas library which provides 2d draw.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/download-extension.html b/en/download-extension.html
index 42d6f6c..5e06480 100644
--- a/en/download-extension.html
+++ b/en/download-extension.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Download Extensions - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Download Extensions</h1><p>Download extensions and enhance what ECharts can do.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="extension" class="page-content container"><div class="nav-container"><ul class="nav nav-tabs"><li class="active"><a href="#chart-type" data-toggle="tab">Charts and Components</a></li><li><a href="#functional" data-toggle="tab">Enhancement</a></li><li><a href="#framework" data-toggle="tab">Frameworks</a></li><li><a href="#language" data-toggle="tab">Languages</a></li></ul></div><div class="tab-content"><div id="chart-type" class="tab-pane active"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-gl" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/gl.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-gl" class="extension-name">ECharts GL</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">ECharts-GL provides 3D plots, globe visualization and WebGL acceleration.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/word-cloud.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-name">字符云</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">Cloud charts can layout text into different sizes and colors. You can also use images as masks.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/liquidfill.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-name">水球图</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/Ovilia" class="extension-author-name">羡辙</a></div><div class="extension-desc">The liquid-fill chart is a chart suitable for presenting a single percentage of data, supporting multiple water waves and animations.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/apache/echarts/tree/master/extension-src/bmap" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/bmap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/apache/echarts/tree/master/extension-src/bmap" class="extension-name">百度地图</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">With Baidu map extension, you can display scatter charts, line charts, heatmaps and so on.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/arcgis.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-name">ArcGIS 地图</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">A combination of ArcGIS maps and ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/leaflet-2.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-name">echarts-leaflet</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/gnijuohz" class="extension-author-name">gnijuohz</a></div><div class="extension-desc">ECharts extension for visualizing data on leaftlet.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/lzxue/echartsLayer" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/mapbox.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/lzxue/echartsLayer" class="extension-name">Mapbox 地图</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/lzxue" class="extension-author-name">lzxue</a></div><div class="extension-desc">A combination of Mapbox maps and ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/plainheart/echarts-extension-amap" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/amap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/plainheart/echarts-extension-amap" class="extension-name">高德地图</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/plainheart" class="extension-author-name">plainheart</a></div><div class="extension-desc">AMap extension for ECharts which is used to display visualizations such as Scatter, Lines, Heatmap.</div></div></div></div></div></div><div id="functional" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/modularity.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-name">图的模块化</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">The plugin can perform community detection on the ECharts Graph and divide the vertices in the graph into subsets.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-stat" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/stat.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-stat" class="extension-name">统计工具</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/deqingli" class="extension-author-name">李德清</a></div><div class="extension-desc">The statistical extension is a tool for data analysis.</div></div></div></div></div></div><div id="framework" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wangshijun/angular-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wangshijun/angular-echarts" class="extension-name">angular-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/wangshijun" class="extension-author-name">wangshijun</a></div><div class="extension-desc">AngularJs bindings for Baidu ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/bornkiller/echarts-ng" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/bornkiller/echarts-ng" class="extension-name">echarts-ng</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/bornkiller" class="extension-author-name">bornkiller</a></div><div class="extension-desc">Encapsulate ECharts as an instruction using Angular.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/ng-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/ng-echarts" class="extension-name">ng-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">AngularJs version ECharts, supports the latest ECharts3.x.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Justineo/vue-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Justineo/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/Justineo" class="extension-author-name">Justineo</a></div><div class="extension-desc">ECharts component for Vue.js.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/panteng/vue-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/panteng/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/panteng" class="extension-author-name">panteng</a></div><div class="extension-desc">A custom directive for using Echarts in Vue.js apps.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/PUGE/echarts-middleware" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/PUGE/echarts-middleware" class="extension-name">echarts-middleware</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/PUGE" class="extension-author-name">PUGE</a></div><div class="extension-desc">Use ECharts elegantly and efficiently with Vue.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hustcc/echarts-for-react" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hustcc/echarts-for-react" class="extension-name">echarts-for-react</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/hustcc" class="extension-author-name">hustcc</a></div><div class="extension-desc">A simple ECharts react package.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/somonus/react-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/somonus/react-echarts" class="extension-name">react-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/somonus" class="extension-author-name">somonus</a></div><div class="extension-desc">ECharts + react.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/re-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/re-echarts" class="extension-name">re-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">ECharts + react.</div></div></div></div></div></div><div id="language" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/pyecharts/pyecharts/" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/pyecharts/pyecharts/" class="extension-name">pyecharts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/chenjiandongx" class="extension-author-name">chenjiandongx</a><a href="https://github.com/chfw" class="extension-author-name">chfw</a><a href="https://github.com/kinegratii" class="extension-author-name">kinegratii</a></div><div class="extension-desc">Python Echarts Plotting Library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yufeiminds/echarts-python" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yufeiminds/echarts-python" class="extension-name">echarts-python</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/yufeiminds" class="extension-author-name">yufeiminds</a></div><div class="extension-desc">Generate Echarts options with Python.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/napjon/krisk" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/napjon/krisk" class="extension-name">krisk</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/napjon" class="extension-author-name">napjon</a></div><div class="extension-desc">Krisk bring Echarts to Python, and helpful tools for statistical interactive visualization.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/taiyun/recharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/taiyun/recharts" class="extension-name">recharts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/taiyun" class="extension-author-name">taiyun</a></div><div class="extension-desc">recharts provides the R language interface of ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yihui/recharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yihui/recharts" class="extension-name">recharts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/yihui" class="extension-author-name">yihui</a></div><div class="extension-desc">An R Interface to ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-name">ECharts2Shiny</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/XD-DENG" class="extension-author-name">XD-DENG</a></div><div class="extension-desc">To insert interactive charts from ECharts into R Shiny applications.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-name">ECharts.jl</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/randyzwitch" class="extension-author-name">randyzwitch</a></div><div class="extension-desc">Julia package for the ECharts 3 visualization library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-name">purescript-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/slamdata" class="extension-author-name">slamdata</a></div><div class="extension-desc">Purescript bindings for Echarts library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-name">iOS-Echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/Pluto-Y/" class="extension-author-name">Pluto-Y</a></div><div class="extension-desc">This is a highly custom chart control for iOS and Mac apps, which build with ECharts 2.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/abel533/ECharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/abel533/ECharts" class="extension-name">ECharts-Java</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/abel533" class="extension-author-name">abel533</a></div><div class="extension-desc">This is a Java version of the ECharts2.x version that implements the Java objects corresponding to the JSON structure in all ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/idoku/EChartsSDK" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/idoku/EChartsSDK" class="extension-name">EChartsSDK</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/idoku" class="extension-author-name">idoku</a></div><div class="extension-desc">ECharts .NET class library, ported from ECharts Java class library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hisune/Echarts-PHP" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hisune/Echarts-PHP" class="extension-name">Echarts-PHP</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/hisune" class="extension-author-name">hisune</a></div><div class="extension-desc">A PHP library that works as a wrapper for Echarts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/entronad/flutter_echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/entronad/flutter_echarts" class="extension-name">flutter_echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/entronad" class="extension-author-name">entronad</a></div><div class="extension-desc">A Flutter widget to use Echarts in a reactive way.</div></div></div></div></div></div></div></div><div id="submit-extension"><div class="container"><h3>Submit your ECharts extension</h3><p>We will get in touch with you as soon as possible, and the extensions you make will be available to ECharts users on this page.</p><p>Thank you again for your support and contribution to ECharts!</p><a href="mailto:dev@echarts.apache.org" class="btn btn-main btn-thirdary"><img src="https://echarts.apache.org/en/images/btn-email.png?_v_=20200710_1"><span>Send Email</span></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Download Extensions</h1><p>Download extensions and enhance what ECharts can do.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="extension" class="page-content container"><div class="nav-container"><ul class="nav nav-tabs"><li class="active"><a href="#chart-type" data-toggle="tab">Charts and Components</a></li><li><a href="#functional" data-toggle="tab">Enhancement</a></li><li><a href="#framework" data-toggle="tab">Frameworks</a></li><li><a href="#language" data-toggle="tab">Languages</a></li></ul></div><div class="tab-content"><div id="chart-type" class="tab-pane active"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-gl" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/gl.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-gl" class="extension-name">ECharts GL</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">ECharts-GL provides 3D plots, globe visualization and WebGL acceleration.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/word-cloud.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-name">字符云</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">Cloud charts can layout text into different sizes and colors. You can also use images as masks.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/liquidfill.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-name">水球图</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/Ovilia" class="extension-author-name">羡辙</a></div><div class="extension-desc">The liquid-fill chart is a chart suitable for presenting a single percentage of data, supporting multiple water waves and animations.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/apache/echarts/tree/master/extension-src/bmap" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/bmap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/apache/echarts/tree/master/extension-src/bmap" class="extension-name">百度地图</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">With Baidu map extension, you can display scatter charts, line charts, heatmaps and so on.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/arcgis.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-name">ArcGIS 地图</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">A combination of ArcGIS maps and ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/leaflet-2.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-name">echarts-leaflet</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/gnijuohz" class="extension-author-name">gnijuohz</a></div><div class="extension-desc">ECharts extension for visualizing data on leaftlet.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/lzxue/echartsLayer" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/mapbox.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/lzxue/echartsLayer" class="extension-name">Mapbox 地图</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/lzxue" class="extension-author-name">lzxue</a></div><div class="extension-desc">A combination of Mapbox maps and ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/plainheart/echarts-extension-amap" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/amap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/plainheart/echarts-extension-amap" class="extension-name">高德地图</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/plainheart" class="extension-author-name">plainheart</a></div><div class="extension-desc">AMap extension for ECharts which is used to display visualizations such as Scatter, Lines, Heatmap.</div></div></div></div></div></div><div id="functional" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/modularity.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-name">图的模块化</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">The plugin can perform community detection on the ECharts Graph and divide the vertices in the graph into subsets.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-stat" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/stat.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-stat" class="extension-name">统计工具</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/deqingli" class="extension-author-name">李德清</a></div><div class="extension-desc">The statistical extension is a tool for data analysis.</div></div></div></div></div></div><div id="framework" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wangshijun/angular-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wangshijun/angular-echarts" class="extension-name">angular-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/wangshijun" class="extension-author-name">wangshijun</a></div><div class="extension-desc">AngularJs bindings for Baidu ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/bornkiller/echarts-ng" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/bornkiller/echarts-ng" class="extension-name">echarts-ng</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/bornkiller" class="extension-author-name">bornkiller</a></div><div class="extension-desc">Encapsulate ECharts as an instruction using Angular.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/ng-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/ng-echarts" class="extension-name">ng-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">AngularJs version ECharts, supports the latest ECharts3.x.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Justineo/vue-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Justineo/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/Justineo" class="extension-author-name">Justineo</a></div><div class="extension-desc">ECharts component for Vue.js.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/panteng/vue-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/panteng/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/panteng" class="extension-author-name">panteng</a></div><div class="extension-desc">A custom directive for using Echarts in Vue.js apps.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/PUGE/echarts-middleware" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/PUGE/echarts-middleware" class="extension-name">echarts-middleware</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/PUGE" class="extension-author-name">PUGE</a></div><div class="extension-desc">Use ECharts elegantly and efficiently with Vue.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hustcc/echarts-for-react" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hustcc/echarts-for-react" class="extension-name">echarts-for-react</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/hustcc" class="extension-author-name">hustcc</a></div><div class="extension-desc">A simple ECharts react package.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/somonus/react-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/somonus/react-echarts" class="extension-name">react-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/somonus" class="extension-author-name">somonus</a></div><div class="extension-desc">ECharts + react.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/re-echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/re-echarts" class="extension-name">re-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">ECharts + react.</div></div></div></div></div></div><div id="language" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/pyecharts/pyecharts/" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/pyecharts/pyecharts/" class="extension-name">pyecharts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/chenjiandongx" class="extension-author-name">chenjiandongx</a><a href="https://github.com/chfw" class="extension-author-name">chfw</a><a href="https://github.com/kinegratii" class="extension-author-name">kinegratii</a></div><div class="extension-desc">Python Echarts Plotting Library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yufeiminds/echarts-python" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yufeiminds/echarts-python" class="extension-name">echarts-python</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/yufeiminds" class="extension-author-name">yufeiminds</a></div><div class="extension-desc">Generate Echarts options with Python.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/napjon/krisk" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/napjon/krisk" class="extension-name">krisk</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/napjon" class="extension-author-name">napjon</a></div><div class="extension-desc">Krisk bring Echarts to Python, and helpful tools for statistical interactive visualization.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/taiyun/recharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/taiyun/recharts" class="extension-name">recharts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/taiyun" class="extension-author-name">taiyun</a></div><div class="extension-desc">recharts provides the R language interface of ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yihui/recharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yihui/recharts" class="extension-name">recharts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/yihui" class="extension-author-name">yihui</a></div><div class="extension-desc">An R Interface to ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-name">ECharts2Shiny</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/XD-DENG" class="extension-author-name">XD-DENG</a></div><div class="extension-desc">To insert interactive charts from ECharts into R Shiny applications.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-name">ECharts.jl</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/randyzwitch" class="extension-author-name">randyzwitch</a></div><div class="extension-desc">Julia package for the ECharts 3 visualization library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-name">purescript-echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/slamdata" class="extension-author-name">slamdata</a></div><div class="extension-desc">Purescript bindings for Echarts library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-name">iOS-Echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/Pluto-Y/" class="extension-author-name">Pluto-Y</a></div><div class="extension-desc">This is a highly custom chart control for iOS and Mac apps, which build with ECharts 2.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/abel533/ECharts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/abel533/ECharts" class="extension-name">ECharts-Java</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/abel533" class="extension-author-name">abel533</a></div><div class="extension-desc">This is a Java version of the ECharts2.x version that implements the Java objects corresponding to the JSON structure in all ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/idoku/EChartsSDK" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/idoku/EChartsSDK" class="extension-name">EChartsSDK</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/idoku" class="extension-author-name">idoku</a></div><div class="extension-desc">ECharts .NET class library, ported from ECharts Java class library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hisune/Echarts-PHP" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hisune/Echarts-PHP" class="extension-name">Echarts-PHP</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/hisune" class="extension-author-name">hisune</a></div><div class="extension-desc">A PHP library that works as a wrapper for Echarts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/entronad/flutter_echarts" class="extension-head"><img src="https://echarts.apache.org/en/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/entronad/flutter_echarts" class="extension-name">flutter_echarts</a><div class="extension-author"><span>Contributors: </span><a href="https://github.com/entronad" class="extension-author-name">entronad</a></div><div class="extension-desc">A Flutter widget to use Echarts in a reactive way.</div></div></div></div></div></div></div></div><div id="submit-extension"><div class="container"><h3>Submit your ECharts extension</h3><p>We will get in touch with you as soon as possible, and the extensions you make will be available to ECharts users on this page.</p><p>Thank you again for your support and contribution to ECharts!</p><a href="mailto:dev@echarts.apache.org" class="btn btn-main btn-thirdary"><img src="https://echarts.apache.org/en/images/btn-email.png?_v_=20200710_1"><span>Send Email</span></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/download-map.html b/en/download-map.html
index 801beb4..0d78de9 100644
--- a/en/download-map.html
+++ b/en/download-map.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,8 +7,8 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Download Maps - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Download Maps</h1><p>ECharts doesn't provide with Map data to download now.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div style="text-align: left; min-height: 300px; margin-top: 30px;" class="page-content container"><p>ECharts doesn't come with Map data. To create Map charts, it is advised to use Baidu Map or other third party maps for the underlying map. Here is an example of <a href="https://echarts.apache.org/examples/en/editor.html?c=map-polygon">ECharts with Baidu Map</a>.</p><p>Please check <a href="./download-extension.html">Download Extension</a> page for other map extensions.</p></div><script type="text/javascript">document.getElementById('nav-download').className = 'active';
-</script><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Download Maps</h1><p>ECharts doesn't provide with Map data to download now.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div style="text-align: left; min-height: 300px; margin-top: 30px;" class="page-content container"><p>ECharts doesn't come with Map data. To create Map charts, it is advised to use Baidu Map or other third party maps for the underlying map. Here is an example of <a href="https://echarts.apache.org/examples/en/editor.html?c=map-polygon">ECharts with Baidu Map</a>.</p><p>Please check <a href="./download-extension.html">Download Extension</a> page for other map extensions.</p></div><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+</script><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/download-theme.html b/en/download-theme.html
index 086452c..6b8b07e 100644
--- a/en/download-theme.html
+++ b/en/download-theme.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Download Themes - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/vendors/prettify/prettify.css?_v_=20200710_1"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div id="themes" class="container"><h1>Download Themes</h1><p>Change the looking of your charts.</p><p>You can also make your own theme along with using the themes we provide.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="themes" class="page-content container"><div class="row"><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/vintage.js?_v_=20200710_1" download="vintage.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/vintage.png?_v_=20200710_1" alt=""></a><p>vintage</p></div><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/dark.js?_v_=20200710_1" download="dark.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/dark.png?_v_=20200710_1" alt=""></a><p>dark</p></div><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/macarons.js?_v_=20200710_1" download="macarons.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/macarons.png?_v_=20200710_1" alt=""></a><p>macarons</p></div><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/infographic.js?_v_=20200710_1" download="infographic.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/infographic.png?_v_=20200710_1" alt=""></a><p>infographic</p></div><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/shine.js?_v_=20200710_1" download="shine.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/shine.png?_v_=20200710_1" alt=""></a><p>shine</p></div><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/roma.js?_v_=20200710_1" download="roma.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/roma.png?_v_=20200710_1" alt=""></a><p>roma</p></div></div></div><section id="theme-configure-section" class="section-bg"><div class="container"><div id="theme-builder"><a href="https://echarts.apache.org/en/theme-builder.html" class="btn btn-main btn-thirdary more-btn">Theme Builder</a><p>Make a custom theme and use it for your charts. Currently, this tool has Chinese version only.</p></div></div></section><section><div class="container"><div id="theme-example"><h4>An example of using a theme</h4><pre class="html"><script src="echarts.js"></script>
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div id="themes" class="container"><h1>Download Themes</h1><p>Change the looking of your charts.</p><p>You can also make your own theme along with using the themes we provide.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="themes" class="page-content container"><div class="row"><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/vintage.js?_v_=20200710_1" download="vintage.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/vintage.png?_v_=20200710_1" alt=""></a><p>vintage</p></div><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/dark.js?_v_=20200710_1" download="dark.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/dark.png?_v_=20200710_1" alt=""></a><p>dark</p></div><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/macarons.js?_v_=20200710_1" download="macarons.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/macarons.png?_v_=20200710_1" alt=""></a><p>macarons</p></div><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/infographic.js?_v_=20200710_1" download="infographic.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/infographic.png?_v_=20200710_1" alt=""></a><p>infographic</p></div><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/shine.js?_v_=20200710_1" download="shine.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/shine.png?_v_=20200710_1" alt=""></a><p>shine</p></div><div class="col-sm-4 theme"><a href="https://echarts.apache.org/en/asset/theme/roma.js?_v_=20200710_1" download="roma.js" target="_blank" class="download-theme"><img src="https://echarts.apache.org/en/asset/theme/thumb/roma.png?_v_=20200710_1" alt=""></a><p>roma</p></div></div></div><section id="theme-configure-section" class="section-bg"><div class="container"><div id="theme-builder"><a href="https://echarts.apache.org/en/theme-builder.html" class="btn btn-main btn-thirdary more-btn">Theme Builder</a><p>Make a custom theme and use it for your charts. Currently, this tool has Chinese version only.</p></div></div></section><section><div class="container"><div id="theme-example"><h4>An example of using a theme</h4><pre class="html"><script src="echarts.js"></script>
<!-- import vintage theme -->
<script src="theme/vintage.js"></script>
<script>
@@ -17,7 +17,7 @@
...
});
</script>
-</pre></div></div></section><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
+</pre></div></div></section><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
$('pre').addClass('prettyprint');
prettyPrint();
diff --git a/en/download.html b/en/download.html
index 1bef8cc..40c11e2 100644
--- a/en/download.html
+++ b/en/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -16,7 +16,7 @@
font-weight: normal;
}
*/
-</style><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Download</h1><p>Free to choose to download different versions, different topics, the map data you need. You can be customized according to your needs.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">Option 1: Install from downloaded source code or binary</h3><table id="download-table" class="table"><tr><th>Version</th><th>Release Date</th><th>Download Source from a Mirror</th><th>Dist files on GitHub</th></tr></table><div class="checksum"><p><strong>Note:</strong> when downloading from a mirror please check the <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> and verify the <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> compatible signature from the main <a href="https://www.apache.org">Apache site</a>. Links are provided above (next to the release download link). This <a href="https://www.apache.org/dist/echarts/KEYS">KEYS</a> file contains the public keys used for signing release. It is recommended that (when possible) a <a href="https://www.apache.org/dev/release-signing#web-of-trust">web of trust</a> is used to confirm the identity of these keys.</p><h4>To verify ECharts releases using GPG:</h4><ol><li>Download the release apache-echarts-X.Y.Z-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-src.zip.asc from <a href="https://www.apache.org/dist/echarts/">Apache</a>.</li><li>Download the <a href="https://www.apache.org/dist/echarts/KEYS">ECharts KEYS</a> file.</li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-src.zip.asc</li></ol><h4>To perform a quick check using SHA-512:</h4><ol><li>Download the release apache-echarts-X.Y.Z-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-src.zip.512 from <a href="https://www.apache.org/dist/echarts/">Apache</a>.</li><li>shasum -a 512 apache-echarts-X.Y.Z-src.zip</li></ol><h4>License</h4><p>Apache ECharts is licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p></div><h3>Option 2: Install from npm</h3><p><code>npm install echarts</code></p><h3>Option 3: Custom Build</h3><a href="builder.html" class="btn btn-main btn-thirdary more-btn">Customize</a><p>Choose the features you want and build the file online.</p><h3>Next Step</h3><p><a href="./tutorial.html">Get Started</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://echarts.apache.org/en/js/download.js?_v_=a291df3a02"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+</style><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Download</h1><p>Free to choose to download different versions, different topics, the map data you need. You can be customized according to your needs.</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">Option 1: Install from downloaded source code or binary</h3><table id="download-table" class="table"><tr><th>Version</th><th>Release Date</th><th>Download Source from a Mirror</th><th>Dist files on GitHub</th></tr></table><div class="checksum"><p><strong>Note:</strong> when downloading from a mirror please check the <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> and verify the <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> compatible signature from the main <a href="https://www.apache.org">Apache site</a>. Links are provided above (next to the release download link). This <a href="https://www.apache.org/dist/echarts/KEYS">KEYS</a> file contains the public keys used for signing release. It is recommended that (when possible) a <a href="https://www.apache.org/dev/release-signing#web-of-trust">web of trust</a> is used to confirm the identity of these keys.</p><h4>To verify ECharts releases using GPG:</h4><ol><li>Download the release apache-echarts-X.Y.Z-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-src.zip.asc from <a href="https://www.apache.org/dist/echarts/">Apache</a>.</li><li>Download the <a href="https://www.apache.org/dist/echarts/KEYS">ECharts KEYS</a> file.</li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-src.zip.asc</li></ol><h4>To perform a quick check using SHA-512:</h4><ol><li>Download the release apache-echarts-X.Y.Z-src.zip from a mirror site.</li><li>Download the checksum apache-echarts-X.Y.Z-src.zip.512 from <a href="https://www.apache.org/dist/echarts/">Apache</a>.</li><li>shasum -a 512 apache-echarts-X.Y.Z-src.zip</li></ol><h4>License</h4><p>Apache ECharts is licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p></div><h3>Option 2: Install from npm</h3><p><code>npm install echarts</code></p><h3>Option 3: Custom Build</h3><a href="builder.html" class="btn btn-main btn-thirdary more-btn">Customize</a><p>Choose the features you want and build the file online.</p><h3>Next Step</h3><p><a href="./tutorial.html">Get Started</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script src="https://echarts.apache.org/en/js/download.js?_v_=13b5fd7540"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
//- var list = [
//- {
diff --git a/en/events.html b/en/events.html
index b4306dd..8d3ac22 100644
--- a/en/events.html
+++ b/en/events.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Events - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Events</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>Current Events</h2><a href="./events/2021-07-05-apachecon.html" class="event"><picture><source data-srcset="https://echarts.apache.org/en/images/event/20210705-apachecon-en.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://echarts.apache.org/en/images/event/20210705-apachecon-en.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://echarts.apache.org/en/images/event/20210705-apachecon-en.jpeg?_v_=20200710_1" alt="ApacheCon Asia 2021" class="lazy"></picture></a><h2>Previous Events</h2><a href="./events/2021-05-13-iscas.html" class="event"><picture><source data-srcset="https://echarts.apache.org/en/images/event/20210513-iscas-en.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://echarts.apache.org/en/images/event/20210513-iscas-en.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://echarts.apache.org/en/images/event/20210513-iscas-en.jpeg?_v_=20200710_1" alt="Summer 2021 of Open Source Promotion Plan" class="lazy"></picture></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">window.lazyLoadOptions = {
+<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Events</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>Current Events</h2><a href="./events/2021-07-05-apachecon.html" class="event"><picture><source data-srcset="https://echarts.apache.org/en/images/event/20210705-apachecon-en.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://echarts.apache.org/en/images/event/20210705-apachecon-en.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://echarts.apache.org/en/images/event/20210705-apachecon-en.jpeg?_v_=20200710_1" alt="ApacheCon Asia 2021" class="lazy"></picture></a><h2>Previous Events</h2><a href="./events/2021-05-13-iscas.html" class="event"><picture><source data-srcset="https://echarts.apache.org/en/images/event/20210513-iscas-en.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://echarts.apache.org/en/images/event/20210513-iscas-en.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://echarts.apache.org/en/images/event/20210513-iscas-en.jpeg?_v_=20200710_1" alt="Summer 2021 of Open Source Promotion Plan" class="lazy"></picture></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">window.lazyLoadOptions = {
elements_selector: ".lazy"
};
document.getElementById('nav-contribute').className = 'active';</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
diff --git a/en/events/2021-05-13-iscas.html b/en/events/2021-05-13-iscas.html
index 2ea7b75..4eb21d5 100644
--- a/en/events/2021-05-13-iscas.html
+++ b/en/events/2021-05-13-iscas.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Events - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Summer 2021 of Open Source Promotion Plan</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><div><a href="../events.html">Back to the event list</a></div><div class="event event-detail-img"><picture><source data-srcset="https://echarts.apache.org/en/images/event/20210513-iscas-en.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://echarts.apache.org/en/images/event/20210513-iscas-en.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://echarts.apache.org/en/images/event/20210513-iscas-en.jpeg?_v_=20200710_1" alt="Open Source Software Supply Chain Ignite Program - Summer 2021" class="lazy"></picture></div><h3>Event Description</h3><p><a href="https://summer.iscas.ac.cn/help/en/" target="_blank">Summer 2021 of Open Source Promotion Plan</a> is a summer program for college students jointly organized by Institute of Software Chinese Academy of Sciences and openEuler community. It aims to encourage college students to actively participate in the development and maintenance of open source software and promote the vigorous development of excellent open source software community.</p><p>The organizer will fund projects with student applications, and the corresponding pre-tax prizes are high (RMB 12,000), medium (RMB 9,000), and low (RMB 6,000) depending on the difficulty (note: the prize amounts are pre-tax RMB amounts). Please refer to the official instructions of the Open Source Software Supply Chain Illumination Program for details.</p><p>The community needs to designate a community mentor for each project, in the process, you can have a better understanding of the Apache ECharts project development with the help of the mentor.</p><h3>Event Registration</h3><p>Please go to the <a href="https://summer.iscas.ac.cn/help/en/student/" target="_blank">event website</a> to register or for more information.</p><h3>Project List</h3><p>Applicants can complete one project from the following list.</p><table><tr><th>ID</th><th>Name</th><th>Difficulty</th><th style="width: 40%">Description</th><th>Delivery</th><th>Requirement</th></tr><tr><td>#1</td><td>Graph series support for dragging nodes</td><td>Easy</td><td>Support for dragging nodes in case of graph series with layout: none, see: <a href="https://github.com/apache/echarts/issues/14510" target="_blank">#14510</a></td><td>Support for dragging nodes in case of graph series with layout: none</td><td>TypeScript</td></tr><tr><td>#2</td><td>Graph charts can be configured to not scaling automatically</td><td>Easy</td><td>With`layout: none`, the developer can turn off the adjustment of the node position through an option, ensuring that the position given by the developer is the coordinate of the final rendering. See: <a href="https://github.com/apache/echarts/issues/13516" target="_blank">#13516</a></td><td>Implement using an option to turn off node position adjustment</td><td>TypeScript</td></tr><tr><td>#3</td><td>Apache ECharts Issue Helper</td><td>Medium</td><td><a href="https://github.com/ecomfe/echarts-issue-helper" target="_blank">The Apache ECharts Issue Helper</a> is a form tool for generating GitHub issues, which is a better way to ensure that the questioner gives the necessary information by using a form rather than Markdown. The project currently has limited functionality and would like to enhance Markdown-related features.</td><td><ol><li>Support for Markdown format (including code) highlighting</li><li>Image upload support</li><li>Support for Markdown result preview</li></ol></td><td>TypeScript; Vue.js (optional)</td></tr><tr><td>#4</td><td>Example website with third-party editors</td><td>Medium</td><td>The examples section of the official Apache ECharts website currently uses its own code editor, and the community would like to provide the same functionality for editing examples in major third-party online editors (StackBiz, JSFiddle, CodePen, CodeSandbox).</td><td><ol><li>Add the "Go to CodeSandbox (StackBlitz, jsfiddle, CodePen) Edit" button to the Apache ECharts website sample component</li><li>Call the API of a third-party online editor and pass the code used in the example in the jump</li></ol></td><td>JavaScript</td></tr><tr><td>#5</td><td>Asymmetric rawing of theme river series</td><td>Medium</td><td>The Apache ECharts theme river is currently drawn using a symmetric drawing method (the overall pattern is symmetric along the x-axis), and it is hoped that the wiggle algorithm will enable an asymmetric drawing to increase the viewability of the river map. See: <a href="https://github.com/apache/echarts/issues/14643" target="_blank">#14643</a></td><td>Implement the function to select the drawing mode of river map using wiggle configuration item in river map</td><td>TypeScript; a brief understanding of computer graphics (requires reading algorithm papers and implementing them)</td></tr><tr><td>#6</td><td>Extend the overlap anti-overlap of labels</td><td>High</td><td>Apache ECharts now provides an anti-overlap layout algorithm for labels on some specific graphs such as pie charts. Now we hope to add a more general layout algorithm, which can search for a better position by iteratively searching for the positions where labels can be placed, and solve the label overlap problem when there are more data in the scatterplots and other graphs. You can refer to the existing papers and implementations: 1. An Empirical Study of Algorithms for Point-Feature Label Placement 2. <a href="https://github.com/tinker10/D3- Labeler" target="_blank">https://github.com/tinker10/D3-Labeler</a> 3. <a href="https://cran.r-project.org/web/packages/ggrepel/ vignettes/ggrepel.html" target="_blank">https://cran.r-project.org/web/packages/ggrepel/vignettes/ggrepel.html</a></td><td><ol><li>Add a configuration item to enable only anti-overlap of tags when turned on</li><li>The anti-overlap algorithm can achieve a balance between performance, complexity (amount of code) and end result</li></ol></td><td>TypeScript</td></tr><tr><td>#7</td><td>Interleaved coordinate axis labels to optimize label overlap</td><td>High</td><td>NAt present, the axis of Apache ECharts can only hide some of the overlapping labels when there are too many labels, but in some scenarios, the labels can be displayed staggered up and down without hiding them, so I would like to add a configuration that allows the user to intelligently move the overlapping labels up/down (or left/right in the case of the Y-axis).</td><td>Add an option to enable alternate display of axis labels when turned on</td><td>TypeScript; need to read the algorithm paper and implement it</td></tr><tr><td>#8</td><td>Circular references to the graph series</td><td>High</td><td>Supports graph nodes pointing to themselves. See: <a href="https://github.com/apache/echarts/issues/12951" target="_blank">#12951</a></td><td><ol><li>Graph nodes can point to themselves</li><li>Configurable parameters to control the position of the connection</li><li>Support for multiple lines pointing to themselves</li></ol></td><td>TypeScript</td></tr></table></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">window.lazyLoadOptions = {
+<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Summer 2021 of Open Source Promotion Plan</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><div><a href="../events.html">Back to the event list</a></div><div class="event event-detail-img"><picture><source data-srcset="https://echarts.apache.org/en/images/event/20210513-iscas-en.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://echarts.apache.org/en/images/event/20210513-iscas-en.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://echarts.apache.org/en/images/event/20210513-iscas-en.jpeg?_v_=20200710_1" alt="Open Source Software Supply Chain Ignite Program - Summer 2021" class="lazy"></picture></div><h3>Event Description</h3><p><a href="https://summer.iscas.ac.cn/help/en/" target="_blank">Summer 2021 of Open Source Promotion Plan</a> is a summer program for college students jointly organized by Institute of Software Chinese Academy of Sciences and openEuler community. It aims to encourage college students to actively participate in the development and maintenance of open source software and promote the vigorous development of excellent open source software community.</p><p>The organizer will fund projects with student applications, and the corresponding pre-tax prizes are high (RMB 12,000), medium (RMB 9,000), and low (RMB 6,000) depending on the difficulty (note: the prize amounts are pre-tax RMB amounts). Please refer to the official instructions of the Open Source Software Supply Chain Illumination Program for details.</p><p>The community needs to designate a community mentor for each project, in the process, you can have a better understanding of the Apache ECharts project development with the help of the mentor.</p><h3>Event Registration</h3><p>Please go to the <a href="https://summer.iscas.ac.cn/help/en/student/" target="_blank">event website</a> to register or for more information.</p><h3>Project List</h3><p>Applicants can complete one project from the following list.</p><table><tr><th>ID</th><th>Name</th><th>Difficulty</th><th style="width: 40%">Description</th><th>Delivery</th><th>Requirement</th></tr><tr><td>#1</td><td>Graph series support for dragging nodes</td><td>Easy</td><td>Support for dragging nodes in case of graph series with layout: none, see: <a href="https://github.com/apache/echarts/issues/14510" target="_blank">#14510</a></td><td>Support for dragging nodes in case of graph series with layout: none</td><td>TypeScript</td></tr><tr><td>#2</td><td>Graph charts can be configured to not scaling automatically</td><td>Easy</td><td>With`layout: none`, the developer can turn off the adjustment of the node position through an option, ensuring that the position given by the developer is the coordinate of the final rendering. See: <a href="https://github.com/apache/echarts/issues/13516" target="_blank">#13516</a></td><td>Implement using an option to turn off node position adjustment</td><td>TypeScript</td></tr><tr><td>#3</td><td>Apache ECharts Issue Helper</td><td>Medium</td><td><a href="https://github.com/ecomfe/echarts-issue-helper" target="_blank">The Apache ECharts Issue Helper</a> is a form tool for generating GitHub issues, which is a better way to ensure that the questioner gives the necessary information by using a form rather than Markdown. The project currently has limited functionality and would like to enhance Markdown-related features.</td><td><ol><li>Support for Markdown format (including code) highlighting</li><li>Image upload support</li><li>Support for Markdown result preview</li></ol></td><td>TypeScript; Vue.js (optional)</td></tr><tr><td>#4</td><td>Example website with third-party editors</td><td>Medium</td><td>The examples section of the official Apache ECharts website currently uses its own code editor, and the community would like to provide the same functionality for editing examples in major third-party online editors (StackBiz, JSFiddle, CodePen, CodeSandbox).</td><td><ol><li>Add the "Go to CodeSandbox (StackBlitz, jsfiddle, CodePen) Edit" button to the Apache ECharts website sample component</li><li>Call the API of a third-party online editor and pass the code used in the example in the jump</li></ol></td><td>JavaScript</td></tr><tr><td>#5</td><td>Asymmetric rawing of theme river series</td><td>Medium</td><td>The Apache ECharts theme river is currently drawn using a symmetric drawing method (the overall pattern is symmetric along the x-axis), and it is hoped that the wiggle algorithm will enable an asymmetric drawing to increase the viewability of the river map. See: <a href="https://github.com/apache/echarts/issues/14643" target="_blank">#14643</a></td><td>Implement the function to select the drawing mode of river map using wiggle configuration item in river map</td><td>TypeScript; a brief understanding of computer graphics (requires reading algorithm papers and implementing them)</td></tr><tr><td>#6</td><td>Extend the overlap anti-overlap of labels</td><td>High</td><td>Apache ECharts now provides an anti-overlap layout algorithm for labels on some specific graphs such as pie charts. Now we hope to add a more general layout algorithm, which can search for a better position by iteratively searching for the positions where labels can be placed, and solve the label overlap problem when there are more data in the scatterplots and other graphs. You can refer to the existing papers and implementations: 1. An Empirical Study of Algorithms for Point-Feature Label Placement 2. <a href="https://github.com/tinker10/D3- Labeler" target="_blank">https://github.com/tinker10/D3-Labeler</a> 3. <a href="https://cran.r-project.org/web/packages/ggrepel/ vignettes/ggrepel.html" target="_blank">https://cran.r-project.org/web/packages/ggrepel/vignettes/ggrepel.html</a></td><td><ol><li>Add a configuration item to enable only anti-overlap of tags when turned on</li><li>The anti-overlap algorithm can achieve a balance between performance, complexity (amount of code) and end result</li></ol></td><td>TypeScript</td></tr><tr><td>#7</td><td>Interleaved coordinate axis labels to optimize label overlap</td><td>High</td><td>NAt present, the axis of Apache ECharts can only hide some of the overlapping labels when there are too many labels, but in some scenarios, the labels can be displayed staggered up and down without hiding them, so I would like to add a configuration that allows the user to intelligently move the overlapping labels up/down (or left/right in the case of the Y-axis).</td><td>Add an option to enable alternate display of axis labels when turned on</td><td>TypeScript; need to read the algorithm paper and implement it</td></tr><tr><td>#8</td><td>Circular references to the graph series</td><td>High</td><td>Supports graph nodes pointing to themselves. See: <a href="https://github.com/apache/echarts/issues/12951" target="_blank">#12951</a></td><td><ol><li>Graph nodes can point to themselves</li><li>Configurable parameters to control the position of the connection</li><li>Support for multiple lines pointing to themselves</li></ol></td><td>TypeScript</td></tr></table></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">window.lazyLoadOptions = {
elements_selector: ".lazy"
};
document.getElementById('nav-contribute').className = 'active';</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
diff --git a/en/events/2021-07-05-apachecon.html b/en/events/2021-07-05-apachecon.html
index 6ff3b76..88a0675 100644
--- a/en/events/2021-07-05-apachecon.html
+++ b/en/events/2021-07-05-apachecon.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Events - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>ApacheCon Asia 2021</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><div><a href="../events.html">Back to the event list</a></div><div class="event event-detail-img"><picture><source data-srcset="https://echarts.apache.org/en/images/event/20210705-apachecon-en.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://echarts.apache.org/en/images/event/20210705-apachecon-en.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://echarts.apache.org/en/images/event/20210705-apachecon-en.jpeg?_v_=20200710_1" alt="ApacheCon Asia 2021" class="lazy"></picture></div><h3>Coming to your living room this August!</h3><p>Join us from the comfort of your own home for three days of Apache project content across dozens of categories, from Big Data to Fintech to Search to Tomcat and more.</p><p>The <a href="https://apachecon.com/acasia2021/tracks/datavisualization.html">Data Visualization track</a> is on 2021.08.06 and the topics are:</p><table><tr><td>13:30 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1090.html">Why Apache Superset is Betting on Apache ECharts</a></td><td>English Session</td><td>Ville Brofeldt</td></tr><tr><td>14:10 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1087.html">Dirty-rectangle Rendering with Apache ECharts</a></td><td>English Session</td><td>Wenli Zhang</td></tr><tr><td>14:50 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1093.html">The challenge of 16ms - Charting tool optimization</a></td><td>Chinese Session</td><td>Shuang Su</td></tr><tr><td>15:30 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1094.html">Fun with ECharts! - how we use it in Tesla!</a></td><td>Chinese Session</td><td>Fanchao Meng</td></tr><tr><td>16:10 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1092.html">Rendering charts using echarts to present community activity</a></td><td>Chinese Session</td><td>Sun Yi</td></tr><tr><td>16:50 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1091.html">echarts4r: ECharts integration with the R programming language</a></td><td>English Session</td><td>John Coene</td></tr></table><h3>Event Registration</h3><p>Please go to the <a href="https://hopin.com/events/apachecon-asia-2021">Hopin platform</a> to register or check for more information at <a href="https://apachecon.com/acasia2021/index.html">the official Website</a>.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">window.lazyLoadOptions = {
+<!--[if (gt IE 8)|!(IE)]><body class="Events - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>ApacheCon Asia 2021</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><div><a href="../events.html">Back to the event list</a></div><div class="event event-detail-img"><picture><source data-srcset="https://echarts.apache.org/en/images/event/20210705-apachecon-en.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://echarts.apache.org/en/images/event/20210705-apachecon-en.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://echarts.apache.org/en/images/event/20210705-apachecon-en.jpeg?_v_=20200710_1" alt="ApacheCon Asia 2021" class="lazy"></picture></div><h3>Coming to your living room this August!</h3><p>Join us from the comfort of your own home for three days of Apache project content across dozens of categories, from Big Data to Fintech to Search to Tomcat and more.</p><p>The <a href="https://apachecon.com/acasia2021/tracks/datavisualization.html">Data Visualization track</a> is on 2021.08.06 and the topics are:</p><table><tr><td>13:30 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1090.html">Why Apache Superset is Betting on Apache ECharts</a></td><td>English Session</td><td>Ville Brofeldt</td></tr><tr><td>14:10 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1087.html">Dirty-rectangle Rendering with Apache ECharts</a></td><td>English Session</td><td>Wenli Zhang</td></tr><tr><td>14:50 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1093.html">The challenge of 16ms - Charting tool optimization</a></td><td>Chinese Session</td><td>Shuang Su</td></tr><tr><td>15:30 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1094.html">Fun with ECharts! - how we use it in Tesla!</a></td><td>Chinese Session</td><td>Fanchao Meng</td></tr><tr><td>16:10 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1092.html">Rendering charts using echarts to present community activity</a></td><td>Chinese Session</td><td>Sun Yi</td></tr><tr><td>16:50 GMT+8</td><td><a href="https://apachecon.com/acasia2021/sessions/1091.html">echarts4r: ECharts integration with the R programming language</a></td><td>English Session</td><td>John Coene</td></tr></table><h3>Event Registration</h3><p>Please go to the <a href="https://hopin.com/events/apachecon-asia-2021">Hopin platform</a> to register or check for more information at <a href="https://apachecon.com/acasia2021/index.html">the official Website</a>.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">window.lazyLoadOptions = {
elements_selector: ".lazy"
};
document.getElementById('nav-contribute').className = 'active';</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
diff --git a/en/faq.html b/en/faq.html
index e463f9b..63f665c 100644
--- a/en/faq.html
+++ b/en/faq.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,9 +7,9 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>FAQ - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="FAQ - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>FAQ</h1><p>Frequently asked questions</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="faq-page" class="page-content single-page"><div class="page-nav"><h4>Topics</h4><ul></ul></div><div class="page-detail"><h2 id="ask-questions">General Questions</h2><h3>What to do if you have technical problem?</h3><p>1)It is recommended that you read the navigation on the left side of the <a href="https://echarts.apache.org/en/option.html">option manual</a> before you ask questions. In the option manual, you can find out what configuration items does ECharts have. And you can find under the relevant components whether there are configuration items that can implement the functions you need.</p><p>2)Browse FAQ questions on this page.</p><p>3)Create a simple example to reproduce your problem on <a href="https://www.makeapie.com/editor.html">ECharts Gallery</a>. If you can't use the code to describe the requirements, you can try to provide a design draft or draw a sketch.</p><p>4)Paste the link when you ask questions on <a href="https://stackoverflow.com">stackoverflow</a>, <a href="https://www.oschina.net/question/tag/echarts">OSCHINA</a> or <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> and etc. Plaes attach the example link.</p><h3>Is ECharts free to use?</h3><p>Yes, ECharts is open-sourced under <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p><h2 id="axis">Axis</h2><h3>What should I do if the axis label don`t have enough space?</h3><p>You can use <a href="https://echarts.apache.org/en/option.html#xAxis.interval">interval</a> to control how many labels are displayed, set it to <code>0</code> to display all labels.</p><p>Or you can set <a href="https://echarts.apache.org/en/option.html#yAxis.axisLabel.rotate">axisLabel.rotate</a> to rotate the label a certain angle.</p><h3>Why does it not work when you want to put the axis on the right side?</h3><p>You need to set <a href="https://echarts.apache.org/en/option.html#yAxis.axisLine.onZero">onZero</a> to <code>false</code>.</p><h3>How do I force the first / last label of the axis to be displayed?</h3><p>Both <a href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMinLabel">axisLabel.showMinLabel</a> and <a href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMaxLabel">axisLabel.showMaxLabel</a> are supported since ECharts version 3.5.2. It can be used to control whether the first / last tags are forced to display.</p><p>If you can't update the version, please refer to this <a href="https://www.makeapie.com/editor.html?c=xry06afSje">example</a> to achieve the same effect.</p><h2 id="legend">legend</h2><h3>What should I do if the legend area overlapped on the chart?</h3><p>You can set the <a href="https://echarts.apache.org/en/option.html#grid">grid</a> to control the position of the chart area. For example, Set a larger <code>grid.top</code> to move drawing area down.</p><p>We are planning to make the layout smarter in the future versions.</p><h2 id="line-chart">line-chart</h2><h3>The ticks on the coordinate axis seems different with the data?</h3><p>Check if you set the <code>stack</code>. You should remove it if you don't want to make a stack line chart.</p><h2 id="bar-chart">bar-chart</h2><h3>Why does the y-axis scale disappear when the values are small?</h3><p>Version 3.5 of ECharts has been fixed this issue.</p><h2 id="map-chart">map-chart</h2><h3>Province names overlap on the chart. How to modify the location of the names?</h3><p>You can modify the <code>cp</code> coordinates of the corresponding province in the map file (JS or JSON), or modify the map data that has been loaded by <code>echarts.getMap('china')</code>.</p><p>For more details, please refer to <a href="https://github.com/apache/echarts/issues/4379#issuecomment-257765948">GitHub</a>.</p><h3>Where can I download maps from other countries?</h3><p>Map information for other countries can be downloaded from <a href="https://github.com/echarts-maps/echarts-countries-js">here</a>.</p><h3>How can I get the zoom event of a map?</h3><p>First, you need to set the series's <a href="https://echarts.apache.org/en/option.html#series-map.roam">roam</a> to <code>true</code> and then listen for the <code>'georoam'</code> event. Such as:</p><pre><code>myChart.on('georoam', function (params) {
+<!--[if (gt IE 8)|!(IE)]><body class="FAQ - Apache ECharts"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>FAQ</h1><p>Frequently asked questions</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="faq-page" class="page-content single-page"><div class="page-nav"><h4>Topics</h4><ul></ul></div><div class="page-detail"><h2 id="ask-questions">General Questions</h2><h3>What to do if you have technical problem?</h3><p>1)It is recommended that you read the navigation on the left side of the <a href="https://echarts.apache.org/en/option.html">option manual</a> before you ask questions. In the option manual, you can find out what configuration items does ECharts have. And you can find under the relevant components whether there are configuration items that can implement the functions you need.</p><p>2)Browse FAQ questions on this page.</p><p>3)Create a simple example to reproduce your problem on <a href="https://www.makeapie.com/editor.html">ECharts Gallery</a>. If you can't use the code to describe the requirements, you can try to provide a design draft or draw a sketch.</p><p>4)Paste the link when you ask questions on <a href="https://stackoverflow.com">stackoverflow</a>, <a href="https://www.oschina.net/question/tag/echarts">OSCHINA</a> or <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> and etc. Plaes attach the example link.</p><h3>Is ECharts free to use?</h3><p>Yes, ECharts is open-sourced under <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a>.</p><h2 id="axis">Axis</h2><h3>What should I do if the axis label don`t have enough space?</h3><p>You can use <a href="https://echarts.apache.org/en/option.html#xAxis.interval">interval</a> to control how many labels are displayed, set it to <code>0</code> to display all labels.</p><p>Or you can set <a href="https://echarts.apache.org/en/option.html#yAxis.axisLabel.rotate">axisLabel.rotate</a> to rotate the label a certain angle.</p><h3>Why does it not work when you want to put the axis on the right side?</h3><p>You need to set <a href="https://echarts.apache.org/en/option.html#yAxis.axisLine.onZero">onZero</a> to <code>false</code>.</p><h3>How do I force the first / last label of the axis to be displayed?</h3><p>Both <a href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMinLabel">axisLabel.showMinLabel</a> and <a href="https://echarts.apache.org/en/option.html#xAxis.axisLabel.showMaxLabel">axisLabel.showMaxLabel</a> are supported since ECharts version 3.5.2. It can be used to control whether the first / last tags are forced to display.</p><p>If you can't update the version, please refer to this <a href="https://www.makeapie.com/editor.html?c=xry06afSje">example</a> to achieve the same effect.</p><h2 id="legend">legend</h2><h3>What should I do if the legend area overlapped on the chart?</h3><p>You can set the <a href="https://echarts.apache.org/en/option.html#grid">grid</a> to control the position of the chart area. For example, Set a larger <code>grid.top</code> to move drawing area down.</p><p>We are planning to make the layout smarter in the future versions.</p><h2 id="line-chart">line-chart</h2><h3>The ticks on the coordinate axis seems different with the data?</h3><p>Check if you set the <code>stack</code>. You should remove it if you don't want to make a stack line chart.</p><h2 id="bar-chart">bar-chart</h2><h3>Why does the y-axis scale disappear when the values are small?</h3><p>Version 3.5 of ECharts has been fixed this issue.</p><h2 id="map-chart">map-chart</h2><h3>Province names overlap on the chart. How to modify the location of the names?</h3><p>You can modify the <code>cp</code> coordinates of the corresponding province in the map file (JS or JSON), or modify the map data that has been loaded by <code>echarts.getMap('china')</code>.</p><p>For more details, please refer to <a href="https://github.com/apache/echarts/issues/4379#issuecomment-257765948">GitHub</a>.</p><h3>Where can I download maps from other countries?</h3><p>Map information for other countries can be downloaded from <a href="https://github.com/echarts-maps/echarts-countries-js">here</a>.</p><h3>How can I get the zoom event of a map?</h3><p>First, you need to set the series's <a href="https://echarts.apache.org/en/option.html#series-map.roam">roam</a> to <code>true</code> and then listen for the <code>'georoam'</code> event. Such as:</p><pre><code>myChart.on('georoam', function (params) {
console.log(params);
-});</code></pre><p>Please refer to <a href="https://www.makeapie.com/editor.html?c=xHyqn_rQ6g">this example</a>.</p><h3>How to make my custom map?</h3><p>The ECharts map is <a href="https://github.com/apache/echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">additionally encoded</a> from original coordinates. You can use the <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus tool</a> to upload a custom geojson file and then generate a map file that can be used in Echarts.</p><h2 id="baidu-map">baidu-map</h2><h3>How to use ECharts with Baidu map?</h3><ol><li>Include <code>echarts.js</code>, <code>bmap.js</code> and <code>https://api.map.baidu.com/api?v=2.0&ak=Here is the access key you obtained on the Baidu development platform</code>.</li><li>Set <code>bmap</code> in <code>option</code>,You can refer to this <a href="https://echarts.apache.org/examples/en/editor.html?c=effectScatter-bmap">example</a>.</li><li>If you need to get a Baidu map instance, you can use <code>chart.getModel().getComponent('bmap').getBMap()</code>,and then make do settings based on <a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">Baidu Maps API</a> .</li></ol><p>There are more examples about Baidu maps on <a href="https://www.makeapie.com/explore.html">ECharts Gallery</a> , which can be used as a reference.</p><h2 id="gauge-chart">gauge-chart</h2><h3>How to set the dashboard color?</h3><p>You can use <a href="https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a>.</p><h2 id="event">Event processing</h2><h3>How do I get events such as chart clicks?</h3><p>Pelease read <a href="https://echarts.apache.org/en/tutorial.html#Events%20and%20Actions%20in%20ECharts"> official website tutorial</a>. The types of events supported by ECharts can be found in the <a href="https://echarts.apache.org/en/api.html#events">related API</a>.</p><h2 id="others">others</h2><h3>Why is the chart not displayed?</h3><p>You can check the following situations:</p><ul><li>Whether <code>echarts.js</code> is loaded normally.</li><li>Whether<code>echarts</code> variable exists.</li><li>Whether the DOM container has a width or height when calling <code>echarts.init</code>.</li></ul><h3>Where can I learn ECharts?</h3><p>The official website is the best learning platform. In addition, learning other people's work on the <a href="https://www.makeapie.com">ECharts Gallery</a> is also a good choice.</p><p>ECharts related projects and resources can be found at <a href="https://github.com/ecomfe/awesome-echarts">awesome-echarts</a>.</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+});</code></pre><p>Please refer to <a href="https://www.makeapie.com/editor.html?c=xHyqn_rQ6g">this example</a>.</p><h3>How to make my custom map?</h3><p>The ECharts map is <a href="https://github.com/apache/echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">additionally encoded</a> from original coordinates. You can use the <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus tool</a> to upload a custom geojson file and then generate a map file that can be used in Echarts.</p><h2 id="baidu-map">baidu-map</h2><h3>How to use ECharts with Baidu map?</h3><ol><li>Include <code>echarts.js</code>, <code>bmap.js</code> and <code>https://api.map.baidu.com/api?v=2.0&ak=Here is the access key you obtained on the Baidu development platform</code>.</li><li>Set <code>bmap</code> in <code>option</code>,You can refer to this <a href="https://echarts.apache.org/examples/en/editor.html?c=effectScatter-bmap">example</a>.</li><li>If you need to get a Baidu map instance, you can use <code>chart.getModel().getComponent('bmap').getBMap()</code>,and then make do settings based on <a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">Baidu Maps API</a> .</li></ol><p>There are more examples about Baidu maps on <a href="https://www.makeapie.com/explore.html">ECharts Gallery</a> , which can be used as a reference.</p><h2 id="gauge-chart">gauge-chart</h2><h3>How to set the dashboard color?</h3><p>You can use <a href="https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a>.</p><h2 id="event">Event processing</h2><h3>How do I get events such as chart clicks?</h3><p>Pelease read <a href="https://echarts.apache.org/en/tutorial.html#Events%20and%20Actions%20in%20ECharts"> official website tutorial</a>. The types of events supported by ECharts can be found in the <a href="https://echarts.apache.org/en/api.html#events">related API</a>.</p><h2 id="others">others</h2><h3>Why is the chart not displayed?</h3><p>You can check the following situations:</p><ul><li>Whether <code>echarts.js</code> is loaded normally.</li><li>Whether<code>echarts</code> variable exists.</li><li>Whether the DOM container has a width or height when calling <code>echarts.init</code>.</li></ul><h3>Where can I learn ECharts?</h3><p>The official website is the best learning platform. In addition, learning other people's work on the <a href="https://www.makeapie.com">ECharts Gallery</a> is also a good choice.</p><p>ECharts related projects and resources can be found at <a href="https://github.com/ecomfe/awesome-echarts">awesome-echarts</a>.</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/feature.html b/en/feature.html
index 10837f9..a5df077 100644
--- a/en/feature.html
+++ b/en/feature.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Features - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Features</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content single-page"><div class="page-nav"><h4>Features</h4><ul></ul></div><div class="page-detail"><p class="page-detail-desc">Apache ECharts<sup>TM</sup> is an open-sourced JavaScript visualization tool, which can run fluently on PC and mobile devices. It is compatible with most modern Web Browsers, e.g., IE9/10/11, Chrome, Firefox, Safari and so on. ECharts depends on <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a>, a graphic rendering engine, to create intuitive, interactive, and highly-customizable charts.</p><h2 id="chart-types">Abundant Chart Types</h2><p>The basic chart types ECharts supports include <a href="option.html#series-line" target="_blank">line series</a>, <a href="option.html#series-line" target="_blank">bar series</a>, <a href="option.html#series-scatter" target="_blank">scatter series</a>, <a href="option.html#series-pie" target="_blank">pie charts</a>, <a href="option.html#series-candlestick" target="_blank">candle-stick series</a>, <a href="option.html#series-boxplot" target="_blank">boxplot series</a> for statistics, <a href="option.html#series-map" target="_blank">map series</a>, <a href="option.html#series-heatmap" target="_blank">heatmap series</a>, <a href="option.html#series-lines" target="_blank">lines series</a> for directional information, <a href="option.html#series-graph" target="_blank">graph series</a> for relationships, <a href="option.html#series-treemap" target="_blank">treemap series</a>, <a href="option.html#series-sunburst">sunburst series</a>, <a href="option.html#series-parallel" target="_blank">parallel series</a> for multi-dimensional data, <a href="option.html#series-funnel" target="_blank">funnel series</a>, <a href="option.html#series-gauge" target="_blank">gauge series</a>. And it's extremely easy to create a combinition of them with ECharts.</p><p>Besides the built-in chart types, ECharts also provide the <a href="option.html#series-custom">customed series</a> for users to create a specific chart types. To use it, you should only pass in a callback function named <em>renderItem</em>, and return any graphic elements you wish to draw to according to the data. What makes it even better is that it can interact with the existing ECharts components and you don't have to worry about the interaction with them.</p><p>If the default package size is too large for you, you can choose the chart types and components you need and download in <a href="builder.html">the online builder</a>.</p><h2 id="dataset">Multiple Data Format Ready-To-Use</h2><p>The built-in <code>dataset</code> attribute from ECharts v4.0 supports data formats including two-dimensional table, key-value object, and so on. The map from data to graphic can be easily set by the <code>encode</code> attribute. This is a more intuitive way to think when developing a chart, and it saves much time writing data-converting steps for developers. Futhermore, it saves memory since different components can share on piece of data rather than copying.</p><p>ECharts supports TypedArray, which occupies less memory than array and is more garbage-collection-friendly. For big data visualization, it is suggested to use TypedArray to improve performance.</p><h2 id="big-data">Data Visualization of Tens of Millions on Web</h2><p>With the help of incremental rendering technique since v4.0 and optimization of all aspects, ECharts can display the visualization of tens of millions of data. What's more, interactions like scaling and transforming are fluent all the same.</p><p>Tens of millions of data usually takes over hundreds of MB in memory. ECharts provide streaming data ability since v4.0 and makes it possible to render as much data as loaded from WebSocket. There is no need to wait for all data to be loaded to start rendering.</p><img src="https://echarts.apache.org/en/images/features/scatterGL.jpg?_v_=20200710_1" width="60%"><br /><img src="https://echarts.apache.org/en/images/features/scatterGL2.jpg?_v_=20200710_1" width="30%"><img src="https://echarts.apache.org/en/images/features/scatterGL3.jpg?_v_=20200710_1" width="30%"><h2 id="mobile">Mobile Optimization</h2><p>ECharts has been carefully optimized for mobile interaction, such zooming and panning the coordinate system with your fingers on small screens. The PC users can also use the mouse wheel to do the same interaction.</p><p>The fine-grained modularity and packaging mechanism allows ECharts to have a small package size on mobile, and the optional SVG rendering engine makes the memory cost of mobile much smaller.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=area-simple&reset=1&edit=1&renderer=svg" width="60%" height="400"></iframe><h2 id="mult-platform">Multi-Rendering Solutions and Cross-Platform Support</h2><p>ECharts supports rendering charts in the form of Canvas, SVG (v4.0+), and VML. VML is compatible with lower versions of IE; SVG reduces the memory cost on mobiles; and Canvas can easily handle large data visualization and special rendering effects. Different rendering methods provide more choices, making ECharts perform better in different scenarios.</p><p>In addition to PC and mobile browsers, ECharts can also be used with node-canvas on Node for efficient server-side rendering (SSR). And ECharts support Wechat Applet rendering since v4.0.</p><p>Community contributors also provide us with a variety of different language extensions. For example, <a href="https://github.com/pyecharts/pyecharts" target="_blank">pyecharts</a> for Python, <a href="https://github.com/cosname/recharts" target="_blank">recharts</a> for R, <a href="https://github.com/randyzwitch/ECharts.jl">ECharts.jl</a> for Julia and so on.</p><p>We hope that the platform and language will not be the limit for everyone to use ECharts for visualization!</p><h2 id="interaction">Interactive Data Exploration In-Depth</h2><p>Interaction is an important means of mining information from data. Overview first, zoom filtering to view details as needed is a basic requirement for data visualization interaction.</p><p>ECharts has been on the road of <em>interaction</em>. We have provided <a href="option.html#legend" target="_blank">legend</a>, <a href="option.html#visualMap" target="_blank">visualMap</a>, <a href="option.html#dataZoom" target="_blank">dataZoom</a>, <a href="option.html#tooltip" target="_blank">tooltip</a>, <a href="option.html#brush">brushing</a> and other ready-to-use interactive components, which can perform interactive operations such as multi-dimensional data screening, view zooming, and display details on the data.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-matrix&reset=1&edit=1" width="60%" height="540"></iframe><h2 id="visual-mapping">Multi-Dimensional Data Support and Rich Visual Coding</h2><p>ECharts 3 began to strengthen support for multi-dimensional data. In addition to the common multi-dimensional data visualization tools such as parallel coordinates, for traditional scatter plots, etc., the input data can also be multiple dimensions. With the rich visual coding provided by the visual mapping component <a href="option.html#visualMap" target="_blank">visualMap</a>, it is possible to map data of different dimensions to color, size, transparency, shading, etc. Different visual channels.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-nutrients-matrix&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="dynamic-data">Dynamic Data</h2><p>ECharts is driven by data, and changes in data drive changes in the chart. So the implementation of dynamic data has become extremely simple, just need to get the data, fill in the data, ECharts will find the difference between the two sets of data and then use the appropriate animation to represent the data changes. The <a href="option.html#timeline" target="_blank">timeline</a> component can present data information in a higher time dimension.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-life-expectancy-timeline&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="fancy-effects">Special Effects</h2><p>ECharts provides eye-catching effects for the visualization of geographic data such as line data and point data.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=lines-bmap-effect&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="gl">More Powerful and Beautiful 3D Visualization with GL</h2><p>Do you want to achieve 3D visualization in VR, large screen scenes? We provide WebGL-based ECharts GL. You can use ECharts GL to draw 3D Earth, buildings, and population distribution histograms as easily as ECharts common components. Furthermore, we also provide configuration items so that you can get artistic results with a few lines of configuration!</p><img src="https://echarts.apache.org/en/images/features/flowGL-line.jpg?_v_=20200710_1" width="40%"><img src="https://echarts.apache.org/en/images/features/buildings-ny.jpg?_v_=20200710_1" width="40%"><br /><img src="https://echarts.apache.org/en/images/features/capetown-taxi.jpg?_v_=20200710_1" width="40%"><img src="https://echarts.apache.org/en/images/features/population.jpg?_v_=20200710_1" width="40%"><h2 id="aria">Accessibility</h2><p>When we talk about visualization, we tend to naturally associate it with seeing, but it is one-sided. The W3C has developed the Accessible Rich Internet Applications Suite (WAI-ARIA), which aims to make web content and web applications accessible to more people with disabilities.</p><p>ECharts 4.0 complies with this specification and supports automatic generation of descriptions based on chart configuration items, enabling people with visual disabilities to understand the chart content with the help of reading devices, so that charts can be accessed by more people!</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script>window.lazyLoadOptions = {
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Features</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content single-page"><div class="page-nav"><h4>Features</h4><ul></ul></div><div class="page-detail"><p class="page-detail-desc">Apache ECharts<sup>TM</sup> is an open-sourced JavaScript visualization tool, which can run fluently on PC and mobile devices. It is compatible with most modern Web Browsers, e.g., IE9/10/11, Chrome, Firefox, Safari and so on. ECharts depends on <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a>, a graphic rendering engine, to create intuitive, interactive, and highly-customizable charts.</p><h2 id="chart-types">Abundant Chart Types</h2><p>The basic chart types ECharts supports include <a href="option.html#series-line" target="_blank">line series</a>, <a href="option.html#series-line" target="_blank">bar series</a>, <a href="option.html#series-scatter" target="_blank">scatter series</a>, <a href="option.html#series-pie" target="_blank">pie charts</a>, <a href="option.html#series-candlestick" target="_blank">candle-stick series</a>, <a href="option.html#series-boxplot" target="_blank">boxplot series</a> for statistics, <a href="option.html#series-map" target="_blank">map series</a>, <a href="option.html#series-heatmap" target="_blank">heatmap series</a>, <a href="option.html#series-lines" target="_blank">lines series</a> for directional information, <a href="option.html#series-graph" target="_blank">graph series</a> for relationships, <a href="option.html#series-treemap" target="_blank">treemap series</a>, <a href="option.html#series-sunburst">sunburst series</a>, <a href="option.html#series-parallel" target="_blank">parallel series</a> for multi-dimensional data, <a href="option.html#series-funnel" target="_blank">funnel series</a>, <a href="option.html#series-gauge" target="_blank">gauge series</a>. And it's extremely easy to create a combinition of them with ECharts.</p><p>Besides the built-in chart types, ECharts also provide the <a href="option.html#series-custom">customed series</a> for users to create a specific chart types. To use it, you should only pass in a callback function named <em>renderItem</em>, and return any graphic elements you wish to draw to according to the data. What makes it even better is that it can interact with the existing ECharts components and you don't have to worry about the interaction with them.</p><p>If the default package size is too large for you, you can choose the chart types and components you need and download in <a href="builder.html">the online builder</a>.</p><h2 id="dataset">Multiple Data Format Ready-To-Use</h2><p>The built-in <code>dataset</code> attribute from ECharts v4.0 supports data formats including two-dimensional table, key-value object, and so on. The map from data to graphic can be easily set by the <code>encode</code> attribute. This is a more intuitive way to think when developing a chart, and it saves much time writing data-converting steps for developers. Futhermore, it saves memory since different components can share on piece of data rather than copying.</p><p>ECharts supports TypedArray, which occupies less memory than array and is more garbage-collection-friendly. For big data visualization, it is suggested to use TypedArray to improve performance.</p><h2 id="big-data">Data Visualization of Tens of Millions on Web</h2><p>With the help of incremental rendering technique since v4.0 and optimization of all aspects, ECharts can display the visualization of tens of millions of data. What's more, interactions like scaling and transforming are fluent all the same.</p><p>Tens of millions of data usually takes over hundreds of MB in memory. ECharts provide streaming data ability since v4.0 and makes it possible to render as much data as loaded from WebSocket. There is no need to wait for all data to be loaded to start rendering.</p><img src="https://echarts.apache.org/en/images/features/scatterGL.jpg?_v_=20200710_1" width="60%"><br /><img src="https://echarts.apache.org/en/images/features/scatterGL2.jpg?_v_=20200710_1" width="30%"><img src="https://echarts.apache.org/en/images/features/scatterGL3.jpg?_v_=20200710_1" width="30%"><h2 id="mobile">Mobile Optimization</h2><p>ECharts has been carefully optimized for mobile interaction, such zooming and panning the coordinate system with your fingers on small screens. The PC users can also use the mouse wheel to do the same interaction.</p><p>The fine-grained modularity and packaging mechanism allows ECharts to have a small package size on mobile, and the optional SVG rendering engine makes the memory cost of mobile much smaller.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=area-simple&reset=1&edit=1&renderer=svg" width="60%" height="400"></iframe><h2 id="mult-platform">Multi-Rendering Solutions and Cross-Platform Support</h2><p>ECharts supports rendering charts in the form of Canvas, SVG (v4.0+), and VML. VML is compatible with lower versions of IE; SVG reduces the memory cost on mobiles; and Canvas can easily handle large data visualization and special rendering effects. Different rendering methods provide more choices, making ECharts perform better in different scenarios.</p><p>In addition to PC and mobile browsers, ECharts can also be used with node-canvas on Node for efficient server-side rendering (SSR). And ECharts support Wechat Applet rendering since v4.0.</p><p>Community contributors also provide us with a variety of different language extensions. For example, <a href="https://github.com/pyecharts/pyecharts" target="_blank">pyecharts</a> for Python, <a href="https://github.com/cosname/recharts" target="_blank">recharts</a> for R, <a href="https://github.com/randyzwitch/ECharts.jl">ECharts.jl</a> for Julia and so on.</p><p>We hope that the platform and language will not be the limit for everyone to use ECharts for visualization!</p><h2 id="interaction">Interactive Data Exploration In-Depth</h2><p>Interaction is an important means of mining information from data. Overview first, zoom filtering to view details as needed is a basic requirement for data visualization interaction.</p><p>ECharts has been on the road of <em>interaction</em>. We have provided <a href="option.html#legend" target="_blank">legend</a>, <a href="option.html#visualMap" target="_blank">visualMap</a>, <a href="option.html#dataZoom" target="_blank">dataZoom</a>, <a href="option.html#tooltip" target="_blank">tooltip</a>, <a href="option.html#brush">brushing</a> and other ready-to-use interactive components, which can perform interactive operations such as multi-dimensional data screening, view zooming, and display details on the data.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-matrix&reset=1&edit=1" width="60%" height="540"></iframe><h2 id="visual-mapping">Multi-Dimensional Data Support and Rich Visual Coding</h2><p>ECharts 3 began to strengthen support for multi-dimensional data. In addition to the common multi-dimensional data visualization tools such as parallel coordinates, for traditional scatter plots, etc., the input data can also be multiple dimensions. With the rich visual coding provided by the visual mapping component <a href="option.html#visualMap" target="_blank">visualMap</a>, it is possible to map data of different dimensions to color, size, transparency, shading, etc. Different visual channels.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-nutrients-matrix&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="dynamic-data">Dynamic Data</h2><p>ECharts is driven by data, and changes in data drive changes in the chart. So the implementation of dynamic data has become extremely simple, just need to get the data, fill in the data, ECharts will find the difference between the two sets of data and then use the appropriate animation to represent the data changes. The <a href="option.html#timeline" target="_blank">timeline</a> component can present data information in a higher time dimension.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=scatter-life-expectancy-timeline&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="fancy-effects">Special Effects</h2><p>ECharts provides eye-catching effects for the visualization of geographic data such as line data and point data.</p><iframe data-src="https://echarts.apache.org/examples/en/view.html?c=lines-bmap-effect&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="gl">More Powerful and Beautiful 3D Visualization with GL</h2><p>Do you want to achieve 3D visualization in VR, large screen scenes? We provide WebGL-based ECharts GL. You can use ECharts GL to draw 3D Earth, buildings, and population distribution histograms as easily as ECharts common components. Furthermore, we also provide configuration items so that you can get artistic results with a few lines of configuration!</p><img src="https://echarts.apache.org/en/images/features/flowGL-line.jpg?_v_=20200710_1" width="40%"><img src="https://echarts.apache.org/en/images/features/buildings-ny.jpg?_v_=20200710_1" width="40%"><br /><img src="https://echarts.apache.org/en/images/features/capetown-taxi.jpg?_v_=20200710_1" width="40%"><img src="https://echarts.apache.org/en/images/features/population.jpg?_v_=20200710_1" width="40%"><h2 id="aria">Accessibility</h2><p>When we talk about visualization, we tend to naturally associate it with seeing, but it is one-sided. The W3C has developed the Accessible Rich Internet Applications Suite (WAI-ARIA), which aims to make web content and web applications accessible to more people with disabilities.</p><p>ECharts 4.0 complies with this specification and supports automatic generation of descriptions based on chart configuration items, enabling people with visual disabilities to understand the chart content with the help of reading devices, so that charts can be accessed by more people!</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script>window.lazyLoadOptions = {
elements_selector: 'iframe'
};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/en/index.html b/en/index.html
index 379348a..0accdc7 100644
--- a/en/index.html
+++ b/en/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,9 +7,9 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Apache ECharts</title><script src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js"></script><script src="https://cdn.jsdelivr.net/npm/lottie-web@5.7.6/build/player/lottie.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div id="page-index" class="page-main"><div id="main-content"><section id="home-section"><div class="home-brand-panel description container"><div class="home-info"><div class="home-brand">Apache ECharts</div><div class="home-subtitle">An Open Source JavaScript Visualization Library</div><div class="home-btn-panel"><a href="https://echarts.apache.org/en/tutorial.html#Get%20Started%20with%20ECharts%20in%205%20minutes" class="btn btn-main btn-index-home"><svg width="22px" height="19px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="index-home-svg"><path fill="#fff" d="M10.9,16.2 C10.9,16.8 10.5,17.2 9.9,17.2 L5.3,17.2 C4.7,17.2 4.3,16.8 4.3,16.2 C4.3,15.6 4.7,15.2 5.3,15.2 L9.9,15.2 C10.5,15.2 10.9,15.7 10.9,16.2 Z M13.6,7.5 L5.3,7.5 C4.7,7.5 4.3,7.9 4.3,8.5 C4.3,9.1 4.7,9.5 5.3,9.5 L13.6,9.5 C14.2,9.5 14.6,9.1 14.6,8.5 C14.6,7.9 14.2,7.5 13.6,7.5 Z M17.9,6 L17.9,19 C17.9,20.7 16.6,22 14.9,22 L3.9,22 C2.2,22 0.9,20.7 0.9,19 L0.9,7.5 L0.9,6 L0.9,5 L0.9,4 L0.9,2 C0.9,0.9 1.8,0 2.9,0 L12.9,0 C14,0 14.9,0.9 14.9,2 L14.9,3 C16.6,3 17.9,4.3 17.9,6 Z M2.9,3 L3.9,3 L12.9,3 L12.9,2 L2.9,2 L2.9,3 Z M15.9,6 C15.9,5.4 15.5,5 14.9,5 L3.9,5 C3.3,5 2.9,5.4 2.9,6 L2.9,19 C2.9,19.6 3.3,20 3.9,20 L14.9,20 C15.5,20 15.9,19.6 15.9,19 L15.9,6 Z M13.6,11.5 L5.3,11.5 C4.7,11.5 4.3,11.9 4.3,12.5 C4.3,13.1 4.7,13.5 5.3,13.5 L13.6,13.5 C14.2,13.5 14.6,13.1 14.6,12.5 C14.6,11.9 14.2,11.5 13.6,11.5 Z"></path></svg><span>Get Started</span></a><a href="https://echarts.apache.org/examples/en/index.html" class="btn btn-main btn-index-home"><svg width="25px" height="19px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="index-home-svg"><path fill="#F72C5B" d="M21,0 L6,0 C4.9,0 4,0.9 4,2 L4,4 L2,4 C0.9,4 0,4.9 0,6 L0,18 C0,19.1 0.9,20 2,20 L17,20 C18.1,20 19,19.1 19,18 L19,16 L21,16 C22.1,16 23,15.1 23,14 L23,2 C23,0.9 22.1,0 21,0 Z M17,18 L2,18 L2,6 L17,6 L17,18 Z M21,14 L19,14 L19,6 C19,4.9 18.1,4 17,4 L6,4 L6,2 L21,2 L21,14 Z M4,15 L4,12 C4,11.4 4.4,11 5,11 C5.6,11 6,11.4 6,12 L6,15 C6,15.6 5.6,16 5,16 C4.4,16 4,15.6 4,15 Z M13,15 L13,12 C13,11.4 13.4,11 14,11 C14.6,11 15,11.4 15,12 L15,15 C15,15.6 14.6,16 14,16 C13.4,16 13,15.6 13,15 Z M7,15 L7,9 C7,8.4 7.4,8 8,8 C8.6,8 9,8.4 9,9 L9,15 C9,15.6 8.6,16 8,16 C7.4,16 7,15.6 7,15 Z M10,15 L10,11 C10,10.4 10.4,10 11,10 C11.6,10 12,10.4 12,11 L12,15 C12,15.6 11.6,16 11,16 C10.4,16 10,15.6 10,15 Z"></path></svg><span>Demo</span></a><a href="https://github.com/apache/echarts" target="_blank" class="btn btn-main btn-index-home btn-index-github"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#081642"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg></a></div></div><div class="home-chart"><img src="images/index-home-pie.png"></div></div></section><section id="feature-section"><div class="container"><div class="index-features"><h2 class="reveal">Features</h2><hr class="reveal"><a href="https://echarts.apache.org/en/feature.html" class="more reveal">View More</a></div><div class="row"><div class="col-md-6"><div id="index-feature-1" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-1" class="index-feature-icon-bg"></div><div id="icon-1" class="index-feature-icon"></div></div><div class="index-feature-right reveal"><h3 class="reveal">Flexible Chart Types</h3><p class="reveal-later">Apache ECharts provides more than 20 chart types available out of the box, along with a dozen components, and each of them can be arbitrarily combined to use.</p></div></div></div><div class="col-md-6"><div id="index-feature-2" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-2" class="index-feature-icon-bg"></div><div id="icon-2" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">Powerful Rendering Engine</h3><p class="reveal-later">Easily switch between Canvas and SVG rendering. Progressive rendering and stream loading make it possible to render 10 million data in realtime.</p></div></div></div><div class="col-md-6"><div id="index-feature-3" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-3" class="index-feature-icon-bg"></div><div id="icon-3" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">Professional Data Analysis</h3><p class="reveal-later">Manage data through datasets, which support data transforms like filtering, clustering, and regression to help analyze multi-dimensional analysis of the same data.</p></div></div></div><div class="col-md-6"><div id="index-feature-4" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-4" class="index-feature-icon-bg"></div><div id="icon-4" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">Elegant Visual Design</h3><p class="reveal-later">The default design follows visualization principles, supports responsive design. Flexible configurations make it easy to customize.</p></div></div></div><div class="col-md-6"><div id="index-feature-5" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-5" class="index-feature-icon-bg"></div><div id="icon-5" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">A Healthy Community</h3><p class="reveal-later">The active open source community ensures the healthy development of the project and contributes a wealth of third-party extensions.</p></div></div></div><div class="col-md-6"><div id="index-feature-6" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-6" class="index-feature-icon-bg"></div><div id="icon-6" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">Accessibility-Friendly</h3><p class="reveal-later">Automatically generated chart descriptions and decal patterns help users with disabilities understand the content and the stories behind the charts.</p></div></div></div></div></div></section><section id="publication"><div class="container"><div id="start-line"></div><div class="paper"><div class="content"><h2 class="reveal-latest">ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization</h2><p class="note reveal-latest">You are welcomed to cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.</p><div class="single-btn-panel reveal-latest"><a href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf" class="pdf reveal-later">Visual Informatics, 2018 [PDF]</a></div></div><div class="icon"><div id="paper-icon"></div></div></div><div id="end-line"></div></div></section><section id="about-section" class="normal reveal-about"><div class="container"><h3>Follow</h3><hr><p>Follow us to get more updates in time.</p><div class="btn-panel row"><div class="col-lg-3 col-sm-6"><a id="btn-github" href="https://github.com/apache/echarts"><div class="btn-content"><div class="btn-logo"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#081642"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg><span>GitHub</span></div><div class="icon-v-right"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-weixin"><div class="btn-content zh"><div class="btn-logo"><svg width="25px" height="21px" viewBox="0 0 25 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-512.000000, -2480.000000)" fill="rgba(93, 201, 116)"><g transform="translate(512.000000, 2480.000000)"><path d="M17.6290595,6.47976119 C17.7534123,6.47976119 17.8770026,6.48260946 18,6.4873469 C17.2166965,2.79549199 13.5198007,0 9.07678865,0 C4.06379837,0 0,3.55853831 0,7.94816178 C0,10.5128275 1.38756065,12.7933344 3.54074891,14.2466508 L2.63388325,17 L5.63681512,15.3050455 C6.69779456,15.6858421 7.85912588,15.8963236 9.07676039,15.8963236 C9.31148885,15.8963236 9.54412784,15.8885344 9.77433851,15.8731886 C9.52032463,15.1807388 9.38270085,14.4428328 9.38270085,13.676822 C9.38275733,9.70202902 13.0747399,6.47976119 17.6290595,6.47976119 Z M12.5,4 C13.328411,4 14,4.67155738 14,5.5 C14,6.32841103 13.3284426,7 12.5,7 C11.6715574,7 11,6.32844262 11,5.5 C11.0000316,4.67155738 11.671589,4 12.5,4 Z M5.5,7 C4.67158897,7 4,6.32844262 4,5.5 C4,4.67158897 4.67155738,4 5.5,4 C6.32844262,4 7,4.67155738 7,5.5 C7,6.32841103 6.32844262,7 5.5,7 Z"></path><path d="M25,13.4664775 C25,9.89513318 21.6421433,7 17.4999862,7 C13.3578291,7 10,9.89513318 10,13.4664775 C10,17.0378217 13.3578567,19.9329549 17.5000138,19.9329549 C18.36973,19.9329549 19.2046277,19.804878 19.9813841,19.5701641 L22.5457108,21 L21.8004292,18.7646117 C23.7349834,17.5951163 25,15.6582837 25,13.4664775 Z M15,12 C14.447707,12 14,11.552293 14,11 C14,10.447707 14.447707,10 15,10 C15.552293,10 16,10.447707 16,11 C16,11.552293 15.552293,12 15,12 Z M20,12 C19.447707,12 19,11.552293 19,11 C19,10.447707 19.447707,10 20,10 C20.552293,10 21,10.447707 21,11 C21,11.552293 20.5522667,12 20,12 Z"></path></g></g></g></svg><span>Wechat</span></div><div class="weixin-code"><img src="images/ercode.jpg"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-weibo" href="https://weibo.com/echarts"><div class="btn-content"><div class="btn-logo"><svg width="25px" height="20px" viewBox="0 0 25 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-774.000000, -2480.000000)" fill="rgba(174, 44, 53)"><g transform="translate(767.000000, 2470.000000)"><g transform="translate(7.000000, 10.000000)"><path d="M9.56107255,18.530208 C5.55942203,18.7083394 2.28534432,16.6598289 2.28534432,13.9878588 C2.28534432,11.3158886 5.55942203,9.08924686 9.56107255,8.91111551 C13.5627231,8.73298415 16.8368008,10.4252319 16.8368008,13.0972021 C16.8368008,15.7691722 13.5627231,18.3520767 9.56107255,18.530208 Z M18.1100532,9.71270657 C17.1096406,9.53457522 17.6553202,9.0001812 17.6553202,9.0001812 C17.6553202,9.0001812 18.5647862,7.48606478 17.473427,6.32821106 C16.1092279,4.90316031 12.7442036,6.50634241 12.7442036,6.50634241 C11.4709512,6.95167077 11.8347376,6.32821106 12.0166308,5.34848869 C12.0166308,4.19063497 11.6528444,2.14212451 8.19687348,3.3890439 C4.74090259,4.54689763 1.83061129,8.7329842 1.83061129,8.7329842 C-0.26116057,11.49402 0.0116792299,13.6315961 0.0116792299,13.6315961 C0.557358851,18.3520767 5.4684754,19.5989961 9.37917931,19.9552588 C13.4717764,20.3115215 18.9285726,18.5302081 20.5656115,14.9675812 C22.1117037,11.3158886 19.1104658,9.89083792 18.1100532,9.71270657 Z"></path><path d="M12.8641827,12.2517204 C12.2123929,10.4024172 10.0707976,9.57023078 7.92920237,10.2174869 C5.78760713,10.9572081 4.57714023,12.9914416 5.13581726,14.7482796 C5.78760713,16.5975828 7.92920237,17.4297692 10.0707976,16.7825131 C12.2123929,16.135257 13.4228598,14.1010235 12.8641827,12.2517204 Z M8.11542806,15.4880009 C7.37052537,15.6729312 6.53250982,15.3955358 6.34628415,14.7482797 C6.16005847,14.1010235 6.62562266,13.4537674 7.46363821,13.176372 C8.2085409,12.9914416 9.04655645,13.2688371 9.23278212,13.9160932 C9.32589493,14.5633493 8.86033075,15.3030706 8.11542806,15.4880009 Z M10.3501361,13.176372 C10.2570233,13.4537674 9.88457196,13.6386977 9.60523346,13.5462326 C9.32589496,13.4537674 9.23278212,13.0839068 9.32589496,12.8065113 C9.4190078,12.5291159 9.79145914,12.3441855 10.0707976,12.4366507 C10.3501361,12.621581 10.5363618,12.8989765 10.3501361,13.176372 Z"></path><path d="M24.5953609,9.4285714 C24.5953609,9.3333333 24.6913146,9.2380952 24.6913146,9.14285713 C25.2670362,7.5238095 24.9791754,5.9047619 24.3075001,4.38095238 C23.0601032,1.7142857 20.3734021,0 17.4947939,0 C16.9190722,0 16.3433505,0.0952380996 15.8635825,0.190476199 L15.8635825,0.190476199 L15.8635825,0.190476199 C15.8635825,0.190476199 15.7676289,0.190476199 15.6716753,0.285714299 L15.6716753,0.285714299 C15.2878608,0.476190498 15,0.857142874 15,1.33333335 C15,2.00000002 15.479768,2.4761905 16.1514433,2.4761905 C16.2473969,2.4761905 16.3433505,2.4761905 16.5352577,2.3809524 L16.5352577,2.3809524 C16.8231186,2.1904762 17.3988402,2.09523812 17.4947938,2.09523812 L17.5907475,2.09523812 C19.6057732,2.09523812 21.5248454,3.23809527 22.3884279,5.23809525 C22.8681959,6.2857143 22.9641496,7.42857143 22.6762887,8.57142857 C22.6762887,8.66666667 22.5803351,8.85714285 22.5803351,8.95238095 C22.5803351,9.52380952 23.0601031,10 23.6358248,10 L23.827732,10 L23.827732,10 L23.9236856,10 C24.2115465,9.9047619 24.4034537,9.8095238 24.5953609,9.61904762 C24.4994073,9.5238095 24.4994073,9.5238095 24.5953609,9.4285714 C24.5953609,9.5238095 24.5953609,9.4285714 24.5953609,9.4285714 Z"></path><path d="M17.6310803,4 C17.3252528,4 16.9174827,4.08510639 16.6116551,4.08510639 C16.3058276,4.17021275 16,4.42553192 16,4.76595745 C16,5.10638297 16.3058275,5.36170214 16.7135976,5.36170214 C16.8155402,5.36170214 16.9174827,5.36170214 17.0194252,5.27659575 C17.2233102,5.27659575 17.3252527,5.19148936 17.5291378,5.19148936 C18.548563,5.19148936 19.4660456,5.87234042 19.4660456,6.72340425 C19.4660456,6.89361703 19.4660456,6.97872339 19.3641031,7.14893617 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.4893617 L19.3641031,7.4893617 C19.4660456,7.82978723 19.7718732,8 20.0777008,8 C20.3835283,8 20.5874133,7.82978723 20.7912984,7.65957447 L20.7912984,7.65957447 C20.8932409,7.40425533 20.9951834,7.06382978 20.9951834,6.72340425 C21.0971259,5.27659575 19.5679882,4 17.6310803,4 Z"></path></g></g></g></g></svg><span>Weibo</span></div><div class="icon-v-right"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-twitter" href="https://twitter.com/ApacheECharts"><div class="btn-content"><div class="btn-logo"><svg width="22px" height="19px" viewBox="0 0 22 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-1029.000000, -2481.000000)" fill="rgba(0, 172, 237)" fill-rule="nonzero"><g transform="translate(1019.000000, 2470.000000)"><path d="M31.9965682,13.2536272 C31.3736136,14.2239084 30.6196136,15.0506018 29.7346591,15.7332964 C29.7441818,15.8714453 29.7489318,16.0792366 29.7489318,16.3566705 C29.7489318,17.6436908 29.5720682,18.9275445 29.2183409,20.2082316 C28.8645909,21.4890636 28.3274091,22.7184796 27.6069091,23.8965522 C26.8862955,25.0746247 26.0280455,26.1166031 25.0323864,27.0222697 C24.0366364,27.9281298 22.8360682,28.6508066 21.4306364,29.1904211 C20.0251818,29.7300356 18.5226591,30 16.9230227,30 C14.4015909,30 12.0938636,29.2822545 10,27.8470776 C10.3251136,27.8862863 10.6878182,27.9059148 11.0880909,27.9059148 C13.1819545,27.9059148 15.0477727,27.2230992 16.6854545,25.8575407 C15.7087727,25.8372354 14.8339318,25.5180789 14.0609545,24.8998053 C13.288,24.281701 12.7573636,23.4924033 12.4690909,22.532299 C12.7763409,22.581612 13.0604091,22.606341 13.32125,22.606341 C13.7215227,22.606341 14.1168864,22.5518066 14.5076136,22.4428346 C13.4654545,22.214883 12.6024318,21.6632061 11.9187955,20.7878041 C11.2351591,19.9125471 10.8933409,18.8958295 10.8933409,17.7380623 L10.8933409,17.6790802 C11.5258182,18.0553092 12.2052955,18.2580242 12.9318409,18.287201 C12.3172955,17.851458 11.8288409,17.2826425 11.4667727,16.5808028 C11.1046818,15.8790598 10.923,15.1170776 10.9219318,14.2949288 C10.9219318,13.4233702 11.1267045,12.6170789 11.5365227,11.8760064 C12.6620909,13.3505127 14.0323182,14.5304949 15.6474545,15.4160496 C17.2624545,16.3015076 18.9907727,16.7936705 20.8321364,16.8924898 C20.7582955,16.5162366 20.7213636,16.1501361 20.7213636,15.7941883 C20.7213636,14.4678626 21.1608409,13.3372176 22.0398409,12.4023257 C22.9188409,11.4674338 23.9818864,11 25.2289318,11 C26.5319318,11 27.6300455,11.5048779 28.5233636,12.5144402 C29.5382045,12.306673 30.4922273,11.9209198 31.3854091,11.3572048 C31.0412273,12.4947875 30.3808409,13.3759186 29.4041364,14.0003804 C30.2700455,13.9015611 31.1353409,13.6539809 32,13.2574224 L31.9965682,13.2536272 Z"></path></g></g></g></svg><span>Twitter</span></div><div class="icon-v-right"></div></div></a></div></div></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">window.lazyLoadOptions = {
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div id="page-index" class="page-main"><div id="main-content"><section id="home-section"><div class="home-brand-panel description container"><div class="home-info"><div class="home-brand">Apache ECharts</div><div class="home-subtitle">An Open Source JavaScript Visualization Library</div><div class="home-btn-panel"><a href="https://echarts.apache.org/en/tutorial.html#Get%20Started%20with%20ECharts%20in%205%20minutes" class="btn btn-main btn-index-home"><svg width="22px" height="19px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="index-home-svg"><path fill="#fff" d="M10.9,16.2 C10.9,16.8 10.5,17.2 9.9,17.2 L5.3,17.2 C4.7,17.2 4.3,16.8 4.3,16.2 C4.3,15.6 4.7,15.2 5.3,15.2 L9.9,15.2 C10.5,15.2 10.9,15.7 10.9,16.2 Z M13.6,7.5 L5.3,7.5 C4.7,7.5 4.3,7.9 4.3,8.5 C4.3,9.1 4.7,9.5 5.3,9.5 L13.6,9.5 C14.2,9.5 14.6,9.1 14.6,8.5 C14.6,7.9 14.2,7.5 13.6,7.5 Z M17.9,6 L17.9,19 C17.9,20.7 16.6,22 14.9,22 L3.9,22 C2.2,22 0.9,20.7 0.9,19 L0.9,7.5 L0.9,6 L0.9,5 L0.9,4 L0.9,2 C0.9,0.9 1.8,0 2.9,0 L12.9,0 C14,0 14.9,0.9 14.9,2 L14.9,3 C16.6,3 17.9,4.3 17.9,6 Z M2.9,3 L3.9,3 L12.9,3 L12.9,2 L2.9,2 L2.9,3 Z M15.9,6 C15.9,5.4 15.5,5 14.9,5 L3.9,5 C3.3,5 2.9,5.4 2.9,6 L2.9,19 C2.9,19.6 3.3,20 3.9,20 L14.9,20 C15.5,20 15.9,19.6 15.9,19 L15.9,6 Z M13.6,11.5 L5.3,11.5 C4.7,11.5 4.3,11.9 4.3,12.5 C4.3,13.1 4.7,13.5 5.3,13.5 L13.6,13.5 C14.2,13.5 14.6,13.1 14.6,12.5 C14.6,11.9 14.2,11.5 13.6,11.5 Z"></path></svg><span>Get Started</span></a><a href="https://echarts.apache.org/examples/en/index.html" class="btn btn-main btn-index-home"><svg width="25px" height="19px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="index-home-svg"><path fill="#F72C5B" d="M21,0 L6,0 C4.9,0 4,0.9 4,2 L4,4 L2,4 C0.9,4 0,4.9 0,6 L0,18 C0,19.1 0.9,20 2,20 L17,20 C18.1,20 19,19.1 19,18 L19,16 L21,16 C22.1,16 23,15.1 23,14 L23,2 C23,0.9 22.1,0 21,0 Z M17,18 L2,18 L2,6 L17,6 L17,18 Z M21,14 L19,14 L19,6 C19,4.9 18.1,4 17,4 L6,4 L6,2 L21,2 L21,14 Z M4,15 L4,12 C4,11.4 4.4,11 5,11 C5.6,11 6,11.4 6,12 L6,15 C6,15.6 5.6,16 5,16 C4.4,16 4,15.6 4,15 Z M13,15 L13,12 C13,11.4 13.4,11 14,11 C14.6,11 15,11.4 15,12 L15,15 C15,15.6 14.6,16 14,16 C13.4,16 13,15.6 13,15 Z M7,15 L7,9 C7,8.4 7.4,8 8,8 C8.6,8 9,8.4 9,9 L9,15 C9,15.6 8.6,16 8,16 C7.4,16 7,15.6 7,15 Z M10,15 L10,11 C10,10.4 10.4,10 11,10 C11.6,10 12,10.4 12,11 L12,15 C12,15.6 11.6,16 11,16 C10.4,16 10,15.6 10,15 Z"></path></svg><span>Demo</span></a><a href="https://github.com/apache/echarts" target="_blank" class="btn btn-main btn-index-home btn-index-github"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#081642"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg></a></div></div><div class="home-chart"><img src="images/index-home-pie.png"></div></div></section><section id="feature-section"><div class="container"><div class="index-features"><h2 class="reveal">Features</h2><hr class="reveal"><a href="https://echarts.apache.org/en/feature.html" class="more reveal">View More</a></div><div class="row"><div class="col-md-6"><div id="index-feature-1" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-1" class="index-feature-icon-bg"></div><div id="icon-1" class="index-feature-icon"></div></div><div class="index-feature-right reveal"><h3 class="reveal">Flexible Chart Types</h3><p class="reveal-later">Apache ECharts provides more than 20 chart types available out of the box, along with a dozen components, and each of them can be arbitrarily combined to use.</p></div></div></div><div class="col-md-6"><div id="index-feature-2" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-2" class="index-feature-icon-bg"></div><div id="icon-2" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">Powerful Rendering Engine</h3><p class="reveal-later">Easily switch between Canvas and SVG rendering. Progressive rendering and stream loading make it possible to render 10 million data in realtime.</p></div></div></div><div class="col-md-6"><div id="index-feature-3" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-3" class="index-feature-icon-bg"></div><div id="icon-3" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">Professional Data Analysis</h3><p class="reveal-later">Manage data through datasets, which support data transforms like filtering, clustering, and regression to help analyze multi-dimensional analysis of the same data.</p></div></div></div><div class="col-md-6"><div id="index-feature-4" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-4" class="index-feature-icon-bg"></div><div id="icon-4" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">Elegant Visual Design</h3><p class="reveal-later">The default design follows visualization principles, supports responsive design. Flexible configurations make it easy to customize.</p></div></div></div><div class="col-md-6"><div id="index-feature-5" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-5" class="index-feature-icon-bg"></div><div id="icon-5" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">A Healthy Community</h3><p class="reveal-later">The active open source community ensures the healthy development of the project and contributes a wealth of third-party extensions.</p></div></div></div><div class="col-md-6"><div id="index-feature-6" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-6" class="index-feature-icon-bg"></div><div id="icon-6" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">Accessibility-Friendly</h3><p class="reveal-later">Automatically generated chart descriptions and decal patterns help users with disabilities understand the content and the stories behind the charts.</p></div></div></div></div></div></section><section id="publication"><div class="container"><div id="start-line"></div><div class="paper"><div class="content"><h2 class="reveal-latest">ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization</h2><p class="note reveal-latest">You are welcomed to cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations, teaching, patents, and other related intelligence activities.</p><div class="single-btn-panel reveal-latest"><a href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf" class="pdf reveal-later">Visual Informatics, 2018 [PDF]</a></div></div><div class="icon"><div id="paper-icon"></div></div></div><div id="end-line"></div></div></section><section id="about-section" class="normal reveal-about"><div class="container"><h3>Follow</h3><hr><p>Follow us to get more updates in time.</p><div class="btn-panel row"><div class="col-lg-3 col-sm-6"><a id="btn-github" href="https://github.com/apache/echarts"><div class="btn-content"><div class="btn-logo"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#081642"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg><span>GitHub</span></div><div class="icon-v-right"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-weixin"><div class="btn-content zh"><div class="btn-logo"><svg width="25px" height="21px" viewBox="0 0 25 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-512.000000, -2480.000000)" fill="rgba(93, 201, 116)"><g transform="translate(512.000000, 2480.000000)"><path d="M17.6290595,6.47976119 C17.7534123,6.47976119 17.8770026,6.48260946 18,6.4873469 C17.2166965,2.79549199 13.5198007,0 9.07678865,0 C4.06379837,0 0,3.55853831 0,7.94816178 C0,10.5128275 1.38756065,12.7933344 3.54074891,14.2466508 L2.63388325,17 L5.63681512,15.3050455 C6.69779456,15.6858421 7.85912588,15.8963236 9.07676039,15.8963236 C9.31148885,15.8963236 9.54412784,15.8885344 9.77433851,15.8731886 C9.52032463,15.1807388 9.38270085,14.4428328 9.38270085,13.676822 C9.38275733,9.70202902 13.0747399,6.47976119 17.6290595,6.47976119 Z M12.5,4 C13.328411,4 14,4.67155738 14,5.5 C14,6.32841103 13.3284426,7 12.5,7 C11.6715574,7 11,6.32844262 11,5.5 C11.0000316,4.67155738 11.671589,4 12.5,4 Z M5.5,7 C4.67158897,7 4,6.32844262 4,5.5 C4,4.67158897 4.67155738,4 5.5,4 C6.32844262,4 7,4.67155738 7,5.5 C7,6.32841103 6.32844262,7 5.5,7 Z"></path><path d="M25,13.4664775 C25,9.89513318 21.6421433,7 17.4999862,7 C13.3578291,7 10,9.89513318 10,13.4664775 C10,17.0378217 13.3578567,19.9329549 17.5000138,19.9329549 C18.36973,19.9329549 19.2046277,19.804878 19.9813841,19.5701641 L22.5457108,21 L21.8004292,18.7646117 C23.7349834,17.5951163 25,15.6582837 25,13.4664775 Z M15,12 C14.447707,12 14,11.552293 14,11 C14,10.447707 14.447707,10 15,10 C15.552293,10 16,10.447707 16,11 C16,11.552293 15.552293,12 15,12 Z M20,12 C19.447707,12 19,11.552293 19,11 C19,10.447707 19.447707,10 20,10 C20.552293,10 21,10.447707 21,11 C21,11.552293 20.5522667,12 20,12 Z"></path></g></g></g></svg><span>Wechat</span></div><div class="weixin-code"><img src="images/ercode.jpg"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-weibo" href="https://weibo.com/echarts"><div class="btn-content"><div class="btn-logo"><svg width="25px" height="20px" viewBox="0 0 25 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-774.000000, -2480.000000)" fill="rgba(174, 44, 53)"><g transform="translate(767.000000, 2470.000000)"><g transform="translate(7.000000, 10.000000)"><path d="M9.56107255,18.530208 C5.55942203,18.7083394 2.28534432,16.6598289 2.28534432,13.9878588 C2.28534432,11.3158886 5.55942203,9.08924686 9.56107255,8.91111551 C13.5627231,8.73298415 16.8368008,10.4252319 16.8368008,13.0972021 C16.8368008,15.7691722 13.5627231,18.3520767 9.56107255,18.530208 Z M18.1100532,9.71270657 C17.1096406,9.53457522 17.6553202,9.0001812 17.6553202,9.0001812 C17.6553202,9.0001812 18.5647862,7.48606478 17.473427,6.32821106 C16.1092279,4.90316031 12.7442036,6.50634241 12.7442036,6.50634241 C11.4709512,6.95167077 11.8347376,6.32821106 12.0166308,5.34848869 C12.0166308,4.19063497 11.6528444,2.14212451 8.19687348,3.3890439 C4.74090259,4.54689763 1.83061129,8.7329842 1.83061129,8.7329842 C-0.26116057,11.49402 0.0116792299,13.6315961 0.0116792299,13.6315961 C0.557358851,18.3520767 5.4684754,19.5989961 9.37917931,19.9552588 C13.4717764,20.3115215 18.9285726,18.5302081 20.5656115,14.9675812 C22.1117037,11.3158886 19.1104658,9.89083792 18.1100532,9.71270657 Z"></path><path d="M12.8641827,12.2517204 C12.2123929,10.4024172 10.0707976,9.57023078 7.92920237,10.2174869 C5.78760713,10.9572081 4.57714023,12.9914416 5.13581726,14.7482796 C5.78760713,16.5975828 7.92920237,17.4297692 10.0707976,16.7825131 C12.2123929,16.135257 13.4228598,14.1010235 12.8641827,12.2517204 Z M8.11542806,15.4880009 C7.37052537,15.6729312 6.53250982,15.3955358 6.34628415,14.7482797 C6.16005847,14.1010235 6.62562266,13.4537674 7.46363821,13.176372 C8.2085409,12.9914416 9.04655645,13.2688371 9.23278212,13.9160932 C9.32589493,14.5633493 8.86033075,15.3030706 8.11542806,15.4880009 Z M10.3501361,13.176372 C10.2570233,13.4537674 9.88457196,13.6386977 9.60523346,13.5462326 C9.32589496,13.4537674 9.23278212,13.0839068 9.32589496,12.8065113 C9.4190078,12.5291159 9.79145914,12.3441855 10.0707976,12.4366507 C10.3501361,12.621581 10.5363618,12.8989765 10.3501361,13.176372 Z"></path><path d="M24.5953609,9.4285714 C24.5953609,9.3333333 24.6913146,9.2380952 24.6913146,9.14285713 C25.2670362,7.5238095 24.9791754,5.9047619 24.3075001,4.38095238 C23.0601032,1.7142857 20.3734021,0 17.4947939,0 C16.9190722,0 16.3433505,0.0952380996 15.8635825,0.190476199 L15.8635825,0.190476199 L15.8635825,0.190476199 C15.8635825,0.190476199 15.7676289,0.190476199 15.6716753,0.285714299 L15.6716753,0.285714299 C15.2878608,0.476190498 15,0.857142874 15,1.33333335 C15,2.00000002 15.479768,2.4761905 16.1514433,2.4761905 C16.2473969,2.4761905 16.3433505,2.4761905 16.5352577,2.3809524 L16.5352577,2.3809524 C16.8231186,2.1904762 17.3988402,2.09523812 17.4947938,2.09523812 L17.5907475,2.09523812 C19.6057732,2.09523812 21.5248454,3.23809527 22.3884279,5.23809525 C22.8681959,6.2857143 22.9641496,7.42857143 22.6762887,8.57142857 C22.6762887,8.66666667 22.5803351,8.85714285 22.5803351,8.95238095 C22.5803351,9.52380952 23.0601031,10 23.6358248,10 L23.827732,10 L23.827732,10 L23.9236856,10 C24.2115465,9.9047619 24.4034537,9.8095238 24.5953609,9.61904762 C24.4994073,9.5238095 24.4994073,9.5238095 24.5953609,9.4285714 C24.5953609,9.5238095 24.5953609,9.4285714 24.5953609,9.4285714 Z"></path><path d="M17.6310803,4 C17.3252528,4 16.9174827,4.08510639 16.6116551,4.08510639 C16.3058276,4.17021275 16,4.42553192 16,4.76595745 C16,5.10638297 16.3058275,5.36170214 16.7135976,5.36170214 C16.8155402,5.36170214 16.9174827,5.36170214 17.0194252,5.27659575 C17.2233102,5.27659575 17.3252527,5.19148936 17.5291378,5.19148936 C18.548563,5.19148936 19.4660456,5.87234042 19.4660456,6.72340425 C19.4660456,6.89361703 19.4660456,6.97872339 19.3641031,7.14893617 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.4893617 L19.3641031,7.4893617 C19.4660456,7.82978723 19.7718732,8 20.0777008,8 C20.3835283,8 20.5874133,7.82978723 20.7912984,7.65957447 L20.7912984,7.65957447 C20.8932409,7.40425533 20.9951834,7.06382978 20.9951834,6.72340425 C21.0971259,5.27659575 19.5679882,4 17.6310803,4 Z"></path></g></g></g></g></svg><span>Weibo</span></div><div class="icon-v-right"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-twitter" href="https://twitter.com/ApacheECharts"><div class="btn-content"><div class="btn-logo"><svg width="22px" height="19px" viewBox="0 0 22 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-1029.000000, -2481.000000)" fill="rgba(0, 172, 237)" fill-rule="nonzero"><g transform="translate(1019.000000, 2470.000000)"><path d="M31.9965682,13.2536272 C31.3736136,14.2239084 30.6196136,15.0506018 29.7346591,15.7332964 C29.7441818,15.8714453 29.7489318,16.0792366 29.7489318,16.3566705 C29.7489318,17.6436908 29.5720682,18.9275445 29.2183409,20.2082316 C28.8645909,21.4890636 28.3274091,22.7184796 27.6069091,23.8965522 C26.8862955,25.0746247 26.0280455,26.1166031 25.0323864,27.0222697 C24.0366364,27.9281298 22.8360682,28.6508066 21.4306364,29.1904211 C20.0251818,29.7300356 18.5226591,30 16.9230227,30 C14.4015909,30 12.0938636,29.2822545 10,27.8470776 C10.3251136,27.8862863 10.6878182,27.9059148 11.0880909,27.9059148 C13.1819545,27.9059148 15.0477727,27.2230992 16.6854545,25.8575407 C15.7087727,25.8372354 14.8339318,25.5180789 14.0609545,24.8998053 C13.288,24.281701 12.7573636,23.4924033 12.4690909,22.532299 C12.7763409,22.581612 13.0604091,22.606341 13.32125,22.606341 C13.7215227,22.606341 14.1168864,22.5518066 14.5076136,22.4428346 C13.4654545,22.214883 12.6024318,21.6632061 11.9187955,20.7878041 C11.2351591,19.9125471 10.8933409,18.8958295 10.8933409,17.7380623 L10.8933409,17.6790802 C11.5258182,18.0553092 12.2052955,18.2580242 12.9318409,18.287201 C12.3172955,17.851458 11.8288409,17.2826425 11.4667727,16.5808028 C11.1046818,15.8790598 10.923,15.1170776 10.9219318,14.2949288 C10.9219318,13.4233702 11.1267045,12.6170789 11.5365227,11.8760064 C12.6620909,13.3505127 14.0323182,14.5304949 15.6474545,15.4160496 C17.2624545,16.3015076 18.9907727,16.7936705 20.8321364,16.8924898 C20.7582955,16.5162366 20.7213636,16.1501361 20.7213636,15.7941883 C20.7213636,14.4678626 21.1608409,13.3372176 22.0398409,12.4023257 C22.9188409,11.4674338 23.9818864,11 25.2289318,11 C26.5319318,11 27.6300455,11.5048779 28.5233636,12.5144402 C29.5382045,12.306673 30.4922273,11.9209198 31.3854091,11.3572048 C31.0412273,12.4947875 30.3808409,13.3759186 29.4041364,14.0003804 C30.2700455,13.9015611 31.1353409,13.6539809 32,13.2574224 L31.9965682,13.2536272 Z"></path></g></g></g></svg><span>Twitter</span></div><div class="icon-v-right"></div></div></a></div></div></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">window.lazyLoadOptions = {
elements_selector: ".lazy"
-};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="https://echarts.apache.org/en/js/index.js?_v_=1630485133448"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="https://echarts.apache.org/en/js/index.js?_v_=1630499963508"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/js/chart-list.js b/en/js/chart-list.js
index fdbee7a..f4797c8 100644
--- a/en/js/chart-list.js
+++ b/en/js/chart-list.js
@@ -1 +1 @@
-var charts=[];$(document).ready(function(){var a=$("#explore-container .chart-list-panel");for(var t in CHART_TYPES)a.append('<div id="chart-type-'+t+'"><h3 class="chart-type-head">'+CHART_TYPES[t]+'</h3><div class="row" id="chart-row-'+t+'"></div></div>');for(var l=0,r=EXAMPLES.length;l<r;++l){var e=EXAMPLES[l].title||"未命名图表",i=(EXAMPLES[l].subtitle,$('<div class="col-lg-3 col-md-4 col-sm-6"></div>')),c=$('<div class="chart"></div>');$("#chart-row-"+EXAMPLES[l].type).append(i.append(c)),$link=$('<a class="chart-link" href="demo.html#'+EXAMPLES[l].id+'"></a>'),c.append($link),$link.append('<h4 class="chart-title">'+e+"</h4>"),$chartArea=$('<img class="chart-area" data-original="'+GALLERY_THUMB_PATH+EXAMPLES[l].id+'.png" />'),$link.append($chartArea)}window.addEventListener("hashchange",function(){scrollBy(0,-80);var a=location.hash.split("-");3===a.length&&($("#left-chart-nav li").removeClass("active"),$("#left-chart-nav-"+a[2]).parent("li").addClass("active"))}),$("#left-chart-nav li").first().addClass("active"),$(".chart-area").lazyload()});
\ No newline at end of file
+var charts=[];$(document).ready(function(){var a,t=$("#explore-container .chart-list-panel");for(a in CHART_TYPES)t.append('<div id="chart-type-'+a+'"><h3 class="chart-type-head">'+CHART_TYPES[a]+'</h3><div class="row" id="chart-row-'+a+'"></div></div>');for(var l=0,e=EXAMPLES.length;l<e;++l){var r=EXAMPLES[l].title||"未命名图表",i=(EXAMPLES[l].subtitle,$('<div class="col-lg-3 col-md-4 col-sm-6"></div>')),c=$('<div class="chart"></div>');$("#chart-row-"+EXAMPLES[l].type).append(i.append(c)),$link=$('<a class="chart-link" href="demo.html#'+EXAMPLES[l].id+'"></a>'),c.append($link),$link.append('<h4 class="chart-title">'+r+"</h4>"),$chartArea=$('<img class="chart-area" data-original="'+GALLERY_THUMB_PATH+EXAMPLES[l].id+'.png" />'),$link.append($chartArea)}window.addEventListener("hashchange",function(){scrollBy(0,-80);var a=location.hash.split("-");3===a.length&&($("#left-chart-nav li").removeClass("active"),$("#left-chart-nav-"+a[2]).parent("li").addClass("active"))}),$("#left-chart-nav li").first().addClass("active"),$(".chart-area").lazyload()});
\ No newline at end of file
diff --git a/en/js/cheat-sheet-en.js b/en/js/cheat-sheet-en.js
index 89306f0..2e61548 100644
--- a/en/js/cheat-sheet-en.js
+++ b/en/js/cheat-sheet-en.js
@@ -1 +1 @@
-var $chart=$("#cheat-chart"),width=$chart.width(),heightRatio=400<width?.5:1.5,height=width*heightRatio,maxWidth=848;$chart.height(height);var highlightFill="rgba(132, 181, 228, 0.5)",grid={left:60,top:100,bottom:70,right:100};grid.width=width-grid.left-grid.right,grid.height=height-grid.top-grid.bottom;var chart,option,xScale=grid.width/(maxWidth-grid.left-grid.right),yScale=grid.height/(maxWidth*heightRatio-grid.top-grid.bottom),$detail=$("#cheat-detail"),selectedRegion=null;$(window).click(function(t){t.target!==$("#cheat-chart canvas")[0]&&$(t.target).closest($("#cheat-detail")).length<1&&(selectedRegion=null,_doUnhighlight(option.graphic.elements,!0),chart.setOption(option))});var baseOption={title:{text:"Chart Title",left:5,top:5},tooltip:{trigger:"axis",axisPointer:{type:"cross"},silent:!0,renderMode:"richText"},toolbox:{right:15,top:5,feature:{dataView:{show:!0,readOnly:!1},magicType:{show:!0,type:["line","bar"]},restore:{show:!0},saveAsImage:{show:!0}}},visualMap:{inRange:{symbolSize:[5,20],color:["#2F4554","#C23431"]},min:0,max:25,seriesIndex:2,left:80,top:80,itemWidth:20,itemHeight:80,calculable:!0},dataZoom:{type:"slider",show:!0,yAxisIndex:1},legend:{data:["Evaporation","Precipitation","Temperature"],top:35,left:5},grid:grid,xAxis:[{type:"category",data:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}],yAxis:[{type:"value",name:"Water",min:0,max:250,interval:50,axisLabel:{formatter:"{value} ml"}},{type:"value",name:"Temperature",min:0,max:25,interval:5,axisLabel:{formatter:"{value} °C"}}],series:[{name:"Evaporation",type:"bar",data:[2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3],silent:!0},{name:"Precipitation",type:"bar",data:[2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3],silent:!0},{name:"Temperature",type:"line",yAxisIndex:1,data:[2,2.2,3.3,5,6.3,10.2,20.3,23.4,23,16.5,12,6.2],silent:!0,symbol:"circle",markPoint:{data:[{coord:["Apr",5],value:"5℃"}]}}],graphic:{elements:[{type:"sector",position:[220,140],shape:{r:50,r0:20,cx:0,cy:0,startAngle:0,endAngle:1.2*Math.PI},style:{fill:"#C23431"}},{type:"text",position:[210,120],style:{text:"Draw Shapes and Text",fill:"#2F4554",font:"14px Arial"}}]},timeline:{data:["2010","2011","2012","2013","2014","2015","2016"],axisType:"category",show:!0,autoPlay:!1}},baseActions=[{type:"showTip",seriesIndex:0,dataIndex:7,position:[.65*width,.45*height]}],regions=[{left:grid.left,top:grid.top,width:grid.width,height:grid.height,option:{id:"grid",desc:"Drawing grid in rectangular coordinate."}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width/12*(i+.05),bottom:grid.bottom,width:grid.width/12*.9,height:grid.height/25*baseOption.series[2].data[i]+10});return t}(),option:{id:"series.itemStyle",desc:'Series data item style. For different series type, this has different meanings.\n For example, for line series, this is the style of data points. As for bar series, this is the style of bars. It works for the whole series. To give a specific data point a different style, it should be set in <a href="option.html#series-line.data.itemStyle" target="_blank"><code>series.data.itemStyle</code></a>.'}},{left:10,top:5,width:100,height:24,option:{id:"title",desc:"Chart title."}},{left:10,top:35,width:350,height:24,option:{id:"legend",desc:"Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart."}},{right:15,top:5,width:133,height:29,option:{id:"toolbox",desc:"A group of utility tools, which includes export, data view, dynamic type switching, data area zooming, and reset."}},{left:5,top:grid.top-35,width:70,height:grid.height+40,option:{id:"yAxis",desc:"The y axis in cartesian (rectangular) coordinate."}},{left:grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"Settings related to axis line."}},{left:grid.left+grid.width-15,top:grid.top-35,width:60,height:grid.height+40,option:{id:"yAxis",desc:"The y axis in cartesian (rectangular) coordinate. The second axis lies on the right side of the grid."}},{left:grid.width+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"Settings related to axis line."}},{group:[{left:grid.left+grid.width-40,top:grid.top-30,width:80,height:20},{left:38,top:grid.top-30,width:40,height:20}],option:{id:"yAxis.name",desc:"Name of axis, whose location can be changed by <code>nameLocation</code>."}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:11,top:grid.top+grid.height/5*i-9,width:42,height:18});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-9,width:42,height:18});return t}(),option:{id:"yAxis.axisLabel",desc:"Settings related to axis label."}},{group:function(){for(var t=[],i=0;i<5;++i)t.push({left:grid.left,top:grid.top+grid.height/5*i-3,width:width-grid.left-grid.right,height:6});return t}(),option:{id:"yAxis.splitLine",desc:"SplitLine of axis in grid area. Besides, there is also <code>splitArea</code> to set separate colors for grid backgrounds."}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:50,top:grid.top+grid.height/5*i-5,width:10,height:10});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-5,width:10,height:10});return t}(),option:{id:"yAxis.axisTick",desc:"Settings related to axis tick."}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis",desc:"The x axis in cartesian (rectangular) coordinate."}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis.axisLine",desc:"Settings related to axis line."}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width*(i+.5)/12-20*xScale,bottom:grid.bottom-25,width:40*xScale,height:20});return t}(),option:{id:"xAxis.axisLabel",desc:"Settings related to axis label."}},{group:function(){for(var t=[],i=0;i<13;++i)t.push({left:grid.left+grid.width*(i/12)-5,bottom:grid.bottom-5,width:10,height:10});return t}(),option:{id:"xAxis.axisTick",desc:"The x axis in cartesian (rectangular) coordinate. The second axis lies on the right side of the grid."}},{left:.65*width-5,top:.45*height-5,width:145,height:80,option:{id:"tooltip",desc:"Tooltip component."}},{left:grid.width/12*7.5+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"tooltip.axisPointer.lineStyle",desc:"Tooltip axisPointer line style."}},{left:grid.left,bottom:grid.height/250*162.2+grid.bottom-4,width:grid.width,height:6,option:{id:"tooltip.axisPointer.crossStyle",desc:"Tooltip axisPointer cross style."}},{group:[{left:5,bottom:grid.height/250*162.2+grid.bottom-10,width:50,height:20},{left:width-grid.right+3,bottom:grid.height/250*162.2+grid.bottom-10,width:43,height:20},{left:grid.width/12*7.5+grid.left-16,bottom:grid.bottom-24,width:32,height:20}],option:{id:"tooltip.axisPointer.label",desc:"Label of axisPointer."}},{left:baseOption.visualMap.left,top:baseOption.visualMap.top,width:60,height:110,option:{id:"visualMap",desc:'Visual mapping. It can maps data value to item shape, size, colors and so on. Besides this example of continuous visual mapping, you can also use <a href="option.html#series-line.data.itemStyle" target="_blank">piecewise visual mapping</a>。'}},{group:[{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top,width:40,height:20},{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top+90,width:40,height:20}],option:{id:"visualMap.calculable",desc:'Whether show handles, which can be dragged to adjust "selected range".'}},{right:5,top:grid.top-5,height:grid.height+12,width:34,option:{id:"dataZoom",desc:"dataZoom component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points."}},{left:160,top:105,width:200,height:90,option:{id:"graphic",desc:"Graphic component enables creating graphic elements in echarts, e.g., image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group and so on."}},{left:150,top:grid.top+grid.height+20,width:grid.width-120,height:45,option:{id:"timeline",desc:"Timeline component provides functions like switching and playing between multiple ECharts options."}},{left:grid.left+grid.width/12*3,width:grid.width/12,bottom:grid.bottom+grid.height/5,height:50,option:{id:"series.markPoint",desc:"Marking point.\nBesides that, you can also use <code>markLine</code> to set mark line, <code>markArea</code> to set mark area."}}];function setSheet(t,i,d){getBaseChart(width,height,t,i,function(t){chart=echarts.init($chart[0]),option={graphic:{}};function i(i,e,o){return{type:"rect",left:i.left,top:i.top,right:i.right,bottom:i.bottom,shape:{width:i.width,height:i.height},style:{fill:"transparent",stroke:"transparent"},onmouseover:function(){highlight(chart,a,e,option,o||i)},onmouseout:function(){unhighlightAll(chart,a,option),selectedRegion&&setDetailHtml(selectedRegion.option)},onclick:function(t){selectedRegion&&_doUnhighlight(a,!0),highlight(chart,a,e,option,selectedRegion=o||i,!0),t.event.stopPropagation()}}}for(var a=[],e=0;e<d.length;++e){var o;if(d[e].group){var r=d[e].group;o={type:"group",children:[],width:"100%",height:"100%"};for(var h=0;h<r.length;++h){var n=i(r[h],e,d[e]);o.children.push(n)}}else o=i(d[e],e);a.push(o)}a.push({type:"image",style:{image:t,width:width,height:height},silent:!0,z:-1}),option.graphic.elements=a,chart.setOption(option)})}function getBaseChart(t,i,e,o,a){var r=document.createElement("canvas");r.width=t,r.height=i;var h=echarts.init(r,null,{devicePixelRatio:2});e.animation=!1,e={baseOption:e},h.setOption(e);for(var n=0;o&&n<o.length;++n)h.dispatchAction(o[n]);"function"==typeof a&&setTimeout(function(){a(r.toDataURL())},10)}function highlight(t,i,e,o,a,r){if(setDetailHtml(a.option),r||_doUnhighlight(i),"group"===i[e].type)for(var h=i[e].children,n=0;n<h.length;++n)r?h[n].style.stroke="#24c":h[n].style.fill=highlightFill;else r?i[e].style.stroke="#24c":i[e].style.fill=highlightFill;t.setOption(o)}function unhighlightAll(t,i,e){$detail.text(""),_doUnhighlight(i),t.setOption(e)}function _doUnhighlight(t,i){for(var e=0;e<t.length;++e)if("rect"===t[e].type)t[e].style.fill="transparent",i&&(t[e].style.stroke="transparent");else if("group"===t[e].type)for(var o=t[e].children,a=0;a<o.length;++a)o[a].style.fill="transparent",i&&(o[a].style.stroke="transparent")}function setDetailHtml(t){var i=t.id;switch(i){case"series.itemStyle":i="series-line.itemStyle";break;case"dataZoom.handleStyle":i="dataZoom-slider.handleStyle";break;case"series.markPoint":i="series-line.markPoint"}var e=["<h3>",t.id,"</h3>",'<p class="desc">Click to select this component.</p>',"<p>",t.desc.split("\n").join("</p><p>"),"</p>","<p>",'<a href="./option.html#'+i+'" target="_blank">',"View Configuration Document","</a>","</p>"].join("");$detail.html(e)}setSheet(baseOption,baseActions,regions);
\ No newline at end of file
+var $chart=$("#cheat-chart"),width=$chart.width(),heightRatio=400<width?.5:1.5,height=width*heightRatio,maxWidth=848;$chart.height(height);var highlightFill="rgba(132, 181, 228, 0.5)",grid={left:60,top:100,bottom:70,right:100};grid.width=width-grid.left-grid.right,grid.height=height-grid.top-grid.bottom;var chart,option,xScale=grid.width/(maxWidth-grid.left-grid.right),yScale=grid.height/(maxWidth*heightRatio-grid.top-grid.bottom),$detail=$("#cheat-detail"),selectedRegion=null;$(window).click(function(t){t.target!==$("#cheat-chart canvas")[0]&&$(t.target).closest($("#cheat-detail")).length<1&&(selectedRegion=null,_doUnhighlight(option.graphic.elements,!0),chart.setOption(option))});var baseOption={title:{text:"Chart Title",left:5,top:5},tooltip:{trigger:"axis",axisPointer:{type:"cross"},silent:!0,renderMode:"richText"},toolbox:{right:15,top:5,feature:{dataView:{show:!0,readOnly:!1},magicType:{show:!0,type:["line","bar"]},restore:{show:!0},saveAsImage:{show:!0}}},visualMap:{inRange:{symbolSize:[5,20],color:["#2F4554","#C23431"]},min:0,max:25,seriesIndex:2,left:80,top:80,itemWidth:20,itemHeight:80,calculable:!0},dataZoom:{type:"slider",show:!0,yAxisIndex:1},legend:{data:["Evaporation","Precipitation","Temperature"],top:35,left:5},grid:grid,xAxis:[{type:"category",data:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}],yAxis:[{type:"value",name:"Water",min:0,max:250,interval:50,axisLabel:{formatter:"{value} ml"}},{type:"value",name:"Temperature",min:0,max:25,interval:5,axisLabel:{formatter:"{value} °C"}}],series:[{name:"Evaporation",type:"bar",data:[2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3],silent:!0},{name:"Precipitation",type:"bar",data:[2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3],silent:!0},{name:"Temperature",type:"line",yAxisIndex:1,data:[2,2.2,3.3,5,6.3,10.2,20.3,23.4,23,16.5,12,6.2],silent:!0,symbol:"circle",markPoint:{data:[{coord:["Apr",5],value:"5℃"}]}}],graphic:{elements:[{type:"sector",position:[220,140],shape:{r:50,r0:20,cx:0,cy:0,startAngle:0,endAngle:1.2*Math.PI},style:{fill:"#C23431"}},{type:"text",position:[210,120],style:{text:"Draw Shapes and Text",fill:"#2F4554",font:"14px Arial"}}]},timeline:{data:["2010","2011","2012","2013","2014","2015","2016"],axisType:"category",show:!0,autoPlay:!1}},baseActions=[{type:"showTip",seriesIndex:0,dataIndex:7,position:[.65*width,.45*height]}],regions=[{left:grid.left,top:grid.top,width:grid.width,height:grid.height,option:{id:"grid",desc:"Drawing grid in rectangular coordinate."}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width/12*(i+.05),bottom:grid.bottom,width:grid.width/12*.9,height:grid.height/25*baseOption.series[2].data[i]+10});return t}(),option:{id:"series.itemStyle",desc:'Series data item style. For different series type, this has different meanings.\n For example, for line series, this is the style of data points. As for bar series, this is the style of bars. It works for the whole series. To give a specific data point a different style, it should be set in <a href="option.html#series-line.data.itemStyle" target="_blank"><code>series.data.itemStyle</code></a>.'}},{left:10,top:5,width:100,height:24,option:{id:"title",desc:"Chart title."}},{left:10,top:35,width:350,height:24,option:{id:"legend",desc:"Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart."}},{right:15,top:5,width:133,height:29,option:{id:"toolbox",desc:"A group of utility tools, which includes export, data view, dynamic type switching, data area zooming, and reset."}},{left:5,top:grid.top-35,width:70,height:grid.height+40,option:{id:"yAxis",desc:"The y axis in cartesian (rectangular) coordinate."}},{left:grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"Settings related to axis line."}},{left:grid.left+grid.width-15,top:grid.top-35,width:60,height:grid.height+40,option:{id:"yAxis",desc:"The y axis in cartesian (rectangular) coordinate. The second axis lies on the right side of the grid."}},{left:grid.width+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"Settings related to axis line."}},{group:[{left:grid.left+grid.width-40,top:grid.top-30,width:80,height:20},{left:38,top:grid.top-30,width:40,height:20}],option:{id:"yAxis.name",desc:"Name of axis, whose location can be changed by <code>nameLocation</code>."}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:11,top:grid.top+grid.height/5*i-9,width:42,height:18});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-9,width:42,height:18});return t}(),option:{id:"yAxis.axisLabel",desc:"Settings related to axis label."}},{group:function(){for(var t=[],i=0;i<5;++i)t.push({left:grid.left,top:grid.top+grid.height/5*i-3,width:width-grid.left-grid.right,height:6});return t}(),option:{id:"yAxis.splitLine",desc:"SplitLine of axis in grid area. Besides, there is also <code>splitArea</code> to set separate colors for grid backgrounds."}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:50,top:grid.top+grid.height/5*i-5,width:10,height:10});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-5,width:10,height:10});return t}(),option:{id:"yAxis.axisTick",desc:"Settings related to axis tick."}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis",desc:"The x axis in cartesian (rectangular) coordinate."}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis.axisLine",desc:"Settings related to axis line."}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width*(i+.5)/12-20*xScale,bottom:grid.bottom-25,width:40*xScale,height:20});return t}(),option:{id:"xAxis.axisLabel",desc:"Settings related to axis label."}},{group:function(){for(var t=[],i=0;i<13;++i)t.push({left:grid.left+grid.width*(i/12)-5,bottom:grid.bottom-5,width:10,height:10});return t}(),option:{id:"xAxis.axisTick",desc:"The x axis in cartesian (rectangular) coordinate. The second axis lies on the right side of the grid."}},{left:.65*width-5,top:.45*height-5,width:145,height:80,option:{id:"tooltip",desc:"Tooltip component."}},{left:grid.width/12*7.5+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"tooltip.axisPointer.lineStyle",desc:"Tooltip axisPointer line style."}},{left:grid.left,bottom:grid.height/250*162.2+grid.bottom-4,width:grid.width,height:6,option:{id:"tooltip.axisPointer.crossStyle",desc:"Tooltip axisPointer cross style."}},{group:[{left:5,bottom:grid.height/250*162.2+grid.bottom-10,width:50,height:20},{left:width-grid.right+3,bottom:grid.height/250*162.2+grid.bottom-10,width:43,height:20},{left:grid.width/12*7.5+grid.left-16,bottom:grid.bottom-24,width:32,height:20}],option:{id:"tooltip.axisPointer.label",desc:"Label of axisPointer."}},{left:baseOption.visualMap.left,top:baseOption.visualMap.top,width:60,height:110,option:{id:"visualMap",desc:'Visual mapping. It can maps data value to item shape, size, colors and so on. Besides this example of continuous visual mapping, you can also use <a href="option.html#series-line.data.itemStyle" target="_blank">piecewise visual mapping</a>。'}},{group:[{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top,width:40,height:20},{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top+90,width:40,height:20}],option:{id:"visualMap.calculable",desc:'Whether show handles, which can be dragged to adjust "selected range".'}},{right:5,top:grid.top-5,height:grid.height+12,width:34,option:{id:"dataZoom",desc:"dataZoom component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points."}},{left:160,top:105,width:200,height:90,option:{id:"graphic",desc:"Graphic component enables creating graphic elements in echarts, e.g., image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group and so on."}},{left:150,top:grid.top+grid.height+20,width:grid.width-120,height:45,option:{id:"timeline",desc:"Timeline component provides functions like switching and playing between multiple ECharts options."}},{left:grid.left+grid.width/12*3,width:grid.width/12,bottom:grid.bottom+grid.height/5,height:50,option:{id:"series.markPoint",desc:"Marking point.\nBesides that, you can also use <code>markLine</code> to set mark line, <code>markArea</code> to set mark area."}}];function setSheet(t,i,d){getBaseChart(width,height,t,i,function(t){chart=echarts.init($chart[0]),option={graphic:{}};function i(i,e,o){return{type:"rect",left:i.left,top:i.top,right:i.right,bottom:i.bottom,shape:{width:i.width,height:i.height},style:{fill:"transparent",stroke:"transparent"},onmouseover:function(){highlight(chart,a,e,option,o||i)},onmouseout:function(){unhighlightAll(chart,a,option),selectedRegion&&setDetailHtml(selectedRegion.option)},onclick:function(t){selectedRegion&&_doUnhighlight(a,!0),highlight(chart,a,e,option,selectedRegion=o||i,!0),t.event.stopPropagation()}}}for(var a=[],e=0;e<d.length;++e){if(d[e].group)for(var o=d[e].group,r={type:"group",children:[],width:"100%",height:"100%"},h=0;h<o.length;++h){var n=i(o[h],e,d[e]);r.children.push(n)}else r=i(d[e],e);a.push(r)}a.push({type:"image",style:{image:t,width:width,height:height},silent:!0,z:-1}),option.graphic.elements=a,chart.setOption(option)})}function getBaseChart(t,i,e,o,a){var r=document.createElement("canvas");r.width=t,r.height=i;var h=echarts.init(r,null,{devicePixelRatio:2});e.animation=!1,h.setOption(e={baseOption:e});for(var n=0;o&&n<o.length;++n)h.dispatchAction(o[n]);"function"==typeof a&&setTimeout(function(){a(r.toDataURL())},10)}function highlight(t,i,e,o,a,r){if(setDetailHtml(a.option),r||_doUnhighlight(i),"group"===i[e].type)for(var h=i[e].children,n=0;n<h.length;++n)r?h[n].style.stroke="#24c":h[n].style.fill=highlightFill;else r?i[e].style.stroke="#24c":i[e].style.fill=highlightFill;t.setOption(o)}function unhighlightAll(t,i,e){$detail.text(""),_doUnhighlight(i),t.setOption(e)}function _doUnhighlight(t,i){for(var e=0;e<t.length;++e)if("rect"===t[e].type)t[e].style.fill="transparent",i&&(t[e].style.stroke="transparent");else if("group"===t[e].type)for(var o=t[e].children,a=0;a<o.length;++a)o[a].style.fill="transparent",i&&(o[a].style.stroke="transparent")}function setDetailHtml(t){var i=t.id;switch(i){case"series.itemStyle":i="series-line.itemStyle";break;case"dataZoom.handleStyle":i="dataZoom-slider.handleStyle";break;case"series.markPoint":i="series-line.markPoint"}t=["<h3>",t.id,"</h3>",'<p class="desc">Click to select this component.</p>',"<p>",t.desc.split("\n").join("</p><p>"),"</p>","<p>",'<a href="./option.html#'+i+'" target="_blank">',"View Configuration Document","</a>","</p>"].join("");$detail.html(t)}setSheet(baseOption,baseActions,regions);
\ No newline at end of file
diff --git a/en/js/cheat-sheet.js b/en/js/cheat-sheet.js
index 2554cf6..ef32c2f 100644
--- a/en/js/cheat-sheet.js
+++ b/en/js/cheat-sheet.js
@@ -1 +1 @@
-var $chart=$("#cheat-chart"),width=$chart.width(),heightRatio=400<width?.5:1.5,height=width*heightRatio,maxWidth=848;$chart.height(height);var highlightFill="rgba(132, 181, 228, 0.5)",grid={left:60,top:100,bottom:70,right:100};grid.width=width-grid.left-grid.right,grid.height=height-grid.top-grid.bottom;var chart,option,xScale=grid.width/(maxWidth-grid.left-grid.right),yScale=grid.height/(maxWidth*heightRatio-grid.top-grid.bottom),$detail=$("#cheat-detail"),selectedRegion=null;$(window).click(function(t){t.target!==$("#cheat-chart canvas")[0]&&$(t.target).closest($("#cheat-detail")).length<1&&(selectedRegion=null,_doUnhighlight(option.graphic.elements,!0),chart.setOption(option))});var baseOption={title:{text:"图表的标题",left:5,top:5},tooltip:{trigger:"axis",axisPointer:{type:"cross"},silent:!0,renderMode:"richText"},toolbox:{right:15,top:5,feature:{dataView:{show:!0,readOnly:!1},magicType:{show:!0,type:["line","bar"]},restore:{show:!0},saveAsImage:{show:!0}}},visualMap:{inRange:{symbolSize:[5,20],color:["#2F4554","#C23431"]},min:0,max:25,seriesIndex:2,left:80,top:80,itemWidth:20,itemHeight:80,calculable:!0},dataZoom:{type:"slider",show:!0,yAxisIndex:1},legend:{data:["蒸发量","降水量","平均温度"],top:35,left:5},grid:grid,xAxis:[{type:"category",data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]}],yAxis:[{type:"value",name:"水量",min:0,max:250,interval:50,axisLabel:{formatter:"{value} ml"}},{type:"value",name:"温度",min:0,max:25,interval:5,axisLabel:{formatter:"{value} °C"}}],series:[{name:"蒸发量",type:"bar",data:[2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3],silent:!0},{name:"降水量",type:"bar",data:[2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3],silent:!0},{name:"平均温度",type:"line",yAxisIndex:1,data:[2,2.2,3.3,5,6.3,10.2,20.3,23.4,23,16.5,12,6.2],silent:!0,symbol:"circle",markPoint:{data:[{coord:["4月",5],value:"5℃"}]}}],graphic:{elements:[{type:"sector",position:[220,140],shape:{r:50,r0:20,cx:0,cy:0,startAngle:0,endAngle:1.2*Math.PI},style:{fill:"#C23431"}},{type:"text",position:[210,120],style:{text:"绘制图形和文字",fill:"#2F4554",font:"14px Arial"}}]},timeline:{data:["2010","2011","2012","2013","2014","2015","2016"],axisType:"category",show:!0,autoPlay:!1}},baseActions=[{type:"showTip",seriesIndex:0,dataIndex:7,position:[.65*width,.45*height]}],regions=[{left:grid.left,top:grid.top,width:grid.width,height:grid.height,option:{id:"grid",desc:"直角坐标系内绘图区域"}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width/12*(i+.05),bottom:grid.bottom,width:grid.width/12*.9,height:grid.height/25*baseOption.series[2].data[i]+10});return t}(),option:{id:"series.itemStyle",desc:'系列的图形样式,对不同类型的图表有不同的意义。\n对折线图而言,这个配置项用于设置拐点处图形的样式;对柱状图而言,用于设置柱子的样式。该配置项是对整个系列的图形做设置,如果要对其中的某一个特定数据点做设置,应使用 <a href="option.html#series-line.data.itemStyle" target="_blank"><code>series.data.itemStyle</code></a>。'}},{left:10,top:5,width:100,height:24,option:{id:"title",desc:"图表的标题"}},{left:10,top:35,width:238,height:24,option:{id:"legend",desc:"图例,展现了不同系列的标记、颜色和名字"}},{right:15,top:5,width:133,height:29,option:{id:"toolbox",desc:"工具栏,提供操作图表的工具,可自定义"}},{left:5,top:grid.top-35,width:70,height:grid.height+40,option:{id:"yAxis",desc:"直角坐标系 grid 中的 y 轴"}},{left:grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"y 轴轴线"}},{left:grid.left+grid.width-15,top:grid.top-35,width:60,height:grid.height+40,option:{id:"yAxis",desc:"直角坐标系 grid 中的 y 轴;第二个 y 轴默认显示在右边"}},{left:grid.width+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"y 轴轴线"}},{group:[{left:grid.left+grid.width-20,top:grid.top-30,width:40,height:20},{left:38,top:grid.top-30,width:40,height:20}],option:{id:"yAxis.name",desc:"y 轴名称,可以通过<code>nameLocation</code>改变位置"}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:11,top:grid.top+grid.height/5*i-9,width:42,height:18});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-9,width:42,height:18});return t}(),option:{id:"yAxis.axisLabel",desc:"坐标轴刻度标签"}},{group:function(){for(var t=[],i=0;i<5;++i)t.push({left:grid.left,top:grid.top+grid.height/5*i-3,width:width-grid.left-grid.right,height:6});return t}(),option:{id:"yAxis.splitLine",desc:"坐标轴分割线,除此之外,还有 <code>splitArea</code> 设置背景色分割"}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:50,top:grid.top+grid.height/5*i-5,width:10,height:10});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-5,width:10,height:10});return t}(),option:{id:"yAxis.axisTick",desc:"坐标轴刻度"}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis",desc:"直角坐标系 grid 中的 x 轴"}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis.axisLine",desc:"x 轴轴线"}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width*(i+.5)/12-20*xScale,bottom:grid.bottom-25,width:40*xScale,height:20});return t}(),option:{id:"xAxis.axisLabel",desc:"坐标轴刻度标签"}},{group:function(){for(var t=[],i=0;i<13;++i)t.push({left:grid.left+grid.width*(i/12)-5,bottom:grid.bottom-5,width:10,height:10});return t}(),option:{id:"xAxis.axisTick",desc:"坐标轴刻度"}},{left:.65*width-5,top:.45*height-5,width:118,height:80,option:{id:"tooltip",desc:"提示框"}},{left:grid.width/12*7.5+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"tooltip.axisPointer.lineStyle",desc:"提示框坐标轴指示器的线条样式"}},{left:grid.left,bottom:grid.height/250*162.2+grid.bottom-4,width:grid.width,height:6,option:{id:"tooltip.axisPointer.crossStyle",desc:"提示框坐标轴指示器的十字线样式"}},{group:[{left:5,bottom:grid.height/250*162.2+grid.bottom-10,width:50,height:20},{left:width-grid.right+3,bottom:grid.height/250*162.2+grid.bottom-10,width:43,height:20},{left:grid.width/12*7.5+grid.left-16,bottom:grid.bottom-24,width:32,height:20}],option:{id:"tooltip.axisPointer.label",desc:"提示框坐标轴指示器的文字"}},{left:baseOption.visualMap.left,top:baseOption.visualMap.top,width:60,height:110,option:{id:"visualMap",desc:'视觉映射,可以将数据值映射到图形的形状、大小、颜色等。\n除了这个例子中连续型的视觉映射之外,还有<a href="option.html#series-line.data.itemStyle" target="_blank">离散型的视觉映射</a>。'}},{group:[{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top,width:40,height:20},{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top+90,width:40,height:20}],option:{id:"visualMap.calculable",desc:"是否显示拖拽用的手柄(手柄能拖拽调整选中范围)"}},{right:5,top:grid.top-5,height:grid.height+12,width:34,option:{id:"dataZoom",desc:"区域缩放,用来放大一部分的数据,以看清细节"}},{left:160,top:105,width:150,height:90,option:{id:"graphic",desc:"绘制图形元素,包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group 等"}},{left:150,top:grid.top+grid.height+20,width:grid.width-120,height:45,option:{id:"timeline",desc:"多个 option 切换,展现不同时间段的数据"}},{left:grid.left+grid.width/12*3,width:grid.width/12,bottom:grid.bottom+grid.height/5,height:50,option:{id:"series.markPoint",desc:"标记点。\n除此之外,还可以用 <code>markLine</code> 设置标记线,<code>markArea</code> 设置标记区域"}}];function setSheet(t,i,a){getBaseChart(width,height,t,i,function(t){chart=echarts.init($chart[0]),option={graphic:{}};function i(i,e,o){return{type:"rect",left:i.left,top:i.top,right:i.right,bottom:i.bottom,shape:{width:i.width,height:i.height},style:{fill:"transparent",stroke:"transparent"},onmouseover:function(){highlight(chart,h,e,option,o||i)},onmouseout:function(){unhighlightAll(chart,h,option),selectedRegion&&setDetailHtml(selectedRegion.option)},onclick:function(t){selectedRegion&&_doUnhighlight(h,!0),highlight(chart,h,e,option,selectedRegion=o||i,!0),t.event.stopPropagation()}}}for(var h=[],e=0;e<a.length;++e){var o;if(a[e].group){var r=a[e].group;o={type:"group",children:[],width:"100%",height:"100%"};for(var d=0;d<r.length;++d){var g=i(r[d],e,a[e]);o.children.push(g)}}else o=i(a[e],e);h.push(o)}h.push({type:"image",style:{image:t,width:width,height:height},silent:!0,z:-1}),option.graphic.elements=h,chart.setOption(option)})}function getBaseChart(t,i,e,o,h){var r=document.createElement("canvas");r.width=t,r.height=i;var d=echarts.init(r,null,{devicePixelRatio:2});e.animation=!1,e={baseOption:e},d.setOption(e);for(var g=0;o&&g<o.length;++g)d.dispatchAction(o[g]);"function"==typeof h&&setTimeout(function(){h(r.toDataURL())},10)}function highlight(t,i,e,o,h,r){if(setDetailHtml(h.option),r||_doUnhighlight(i),"group"===i[e].type)for(var d=i[e].children,g=0;g<d.length;++g)r?d[g].style.stroke="#24c":d[g].style.fill=highlightFill;else r?i[e].style.stroke="#24c":i[e].style.fill=highlightFill;t.setOption(o)}function unhighlightAll(t,i,e){$detail.text(""),_doUnhighlight(i),t.setOption(e)}function _doUnhighlight(t,i){for(var e=0;e<t.length;++e)if("rect"===t[e].type)t[e].style.fill="transparent",i&&(t[e].style.stroke="transparent");else if("group"===t[e].type)for(var o=t[e].children,h=0;h<o.length;++h)o[h].style.fill="transparent",i&&(o[h].style.stroke="transparent")}function setDetailHtml(t){var i=t.id;switch(i){case"series.itemStyle":i="series-line.itemStyle";break;case"dataZoom.handleStyle":i="dataZoom-slider.handleStyle";break;case"series.markPoint":i="series-line.markPoint"}var e=["<h3>",t.id,"</h3>",'<p class="desc">点击图形固定说明文字</p>',"<p>",t.desc.split("\n").join("</p><p>"),"</p>","<p>",'<a href="./option.html#'+i+'" target="_blank">',"查看配置项手册","</a>","</p>"].join("");$detail.html(e)}setSheet(baseOption,baseActions,regions);
\ No newline at end of file
+var $chart=$("#cheat-chart"),width=$chart.width(),heightRatio=400<width?.5:1.5,height=width*heightRatio,maxWidth=848;$chart.height(height);var highlightFill="rgba(132, 181, 228, 0.5)",grid={left:60,top:100,bottom:70,right:100};grid.width=width-grid.left-grid.right,grid.height=height-grid.top-grid.bottom;var chart,option,xScale=grid.width/(maxWidth-grid.left-grid.right),yScale=grid.height/(maxWidth*heightRatio-grid.top-grid.bottom),$detail=$("#cheat-detail"),selectedRegion=null;$(window).click(function(t){t.target!==$("#cheat-chart canvas")[0]&&$(t.target).closest($("#cheat-detail")).length<1&&(selectedRegion=null,_doUnhighlight(option.graphic.elements,!0),chart.setOption(option))});var baseOption={title:{text:"图表的标题",left:5,top:5},tooltip:{trigger:"axis",axisPointer:{type:"cross"},silent:!0,renderMode:"richText"},toolbox:{right:15,top:5,feature:{dataView:{show:!0,readOnly:!1},magicType:{show:!0,type:["line","bar"]},restore:{show:!0},saveAsImage:{show:!0}}},visualMap:{inRange:{symbolSize:[5,20],color:["#2F4554","#C23431"]},min:0,max:25,seriesIndex:2,left:80,top:80,itemWidth:20,itemHeight:80,calculable:!0},dataZoom:{type:"slider",show:!0,yAxisIndex:1},legend:{data:["蒸发量","降水量","平均温度"],top:35,left:5},grid:grid,xAxis:[{type:"category",data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]}],yAxis:[{type:"value",name:"水量",min:0,max:250,interval:50,axisLabel:{formatter:"{value} ml"}},{type:"value",name:"温度",min:0,max:25,interval:5,axisLabel:{formatter:"{value} °C"}}],series:[{name:"蒸发量",type:"bar",data:[2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3],silent:!0},{name:"降水量",type:"bar",data:[2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3],silent:!0},{name:"平均温度",type:"line",yAxisIndex:1,data:[2,2.2,3.3,5,6.3,10.2,20.3,23.4,23,16.5,12,6.2],silent:!0,symbol:"circle",markPoint:{data:[{coord:["4月",5],value:"5℃"}]}}],graphic:{elements:[{type:"sector",position:[220,140],shape:{r:50,r0:20,cx:0,cy:0,startAngle:0,endAngle:1.2*Math.PI},style:{fill:"#C23431"}},{type:"text",position:[210,120],style:{text:"绘制图形和文字",fill:"#2F4554",font:"14px Arial"}}]},timeline:{data:["2010","2011","2012","2013","2014","2015","2016"],axisType:"category",show:!0,autoPlay:!1}},baseActions=[{type:"showTip",seriesIndex:0,dataIndex:7,position:[.65*width,.45*height]}],regions=[{left:grid.left,top:grid.top,width:grid.width,height:grid.height,option:{id:"grid",desc:"直角坐标系内绘图区域"}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width/12*(i+.05),bottom:grid.bottom,width:grid.width/12*.9,height:grid.height/25*baseOption.series[2].data[i]+10});return t}(),option:{id:"series.itemStyle",desc:'系列的图形样式,对不同类型的图表有不同的意义。\n对折线图而言,这个配置项用于设置拐点处图形的样式;对柱状图而言,用于设置柱子的样式。该配置项是对整个系列的图形做设置,如果要对其中的某一个特定数据点做设置,应使用 <a href="option.html#series-line.data.itemStyle" target="_blank"><code>series.data.itemStyle</code></a>。'}},{left:10,top:5,width:100,height:24,option:{id:"title",desc:"图表的标题"}},{left:10,top:35,width:238,height:24,option:{id:"legend",desc:"图例,展现了不同系列的标记、颜色和名字"}},{right:15,top:5,width:133,height:29,option:{id:"toolbox",desc:"工具栏,提供操作图表的工具,可自定义"}},{left:5,top:grid.top-35,width:70,height:grid.height+40,option:{id:"yAxis",desc:"直角坐标系 grid 中的 y 轴"}},{left:grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"y 轴轴线"}},{left:grid.left+grid.width-15,top:grid.top-35,width:60,height:grid.height+40,option:{id:"yAxis",desc:"直角坐标系 grid 中的 y 轴;第二个 y 轴默认显示在右边"}},{left:grid.width+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"y 轴轴线"}},{group:[{left:grid.left+grid.width-20,top:grid.top-30,width:40,height:20},{left:38,top:grid.top-30,width:40,height:20}],option:{id:"yAxis.name",desc:"y 轴名称,可以通过<code>nameLocation</code>改变位置"}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:11,top:grid.top+grid.height/5*i-9,width:42,height:18});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-9,width:42,height:18});return t}(),option:{id:"yAxis.axisLabel",desc:"坐标轴刻度标签"}},{group:function(){for(var t=[],i=0;i<5;++i)t.push({left:grid.left,top:grid.top+grid.height/5*i-3,width:width-grid.left-grid.right,height:6});return t}(),option:{id:"yAxis.splitLine",desc:"坐标轴分割线,除此之外,还有 <code>splitArea</code> 设置背景色分割"}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:50,top:grid.top+grid.height/5*i-5,width:10,height:10});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-5,width:10,height:10});return t}(),option:{id:"yAxis.axisTick",desc:"坐标轴刻度"}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis",desc:"直角坐标系 grid 中的 x 轴"}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis.axisLine",desc:"x 轴轴线"}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width*(i+.5)/12-20*xScale,bottom:grid.bottom-25,width:40*xScale,height:20});return t}(),option:{id:"xAxis.axisLabel",desc:"坐标轴刻度标签"}},{group:function(){for(var t=[],i=0;i<13;++i)t.push({left:grid.left+grid.width*(i/12)-5,bottom:grid.bottom-5,width:10,height:10});return t}(),option:{id:"xAxis.axisTick",desc:"坐标轴刻度"}},{left:.65*width-5,top:.45*height-5,width:118,height:80,option:{id:"tooltip",desc:"提示框"}},{left:grid.width/12*7.5+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"tooltip.axisPointer.lineStyle",desc:"提示框坐标轴指示器的线条样式"}},{left:grid.left,bottom:grid.height/250*162.2+grid.bottom-4,width:grid.width,height:6,option:{id:"tooltip.axisPointer.crossStyle",desc:"提示框坐标轴指示器的十字线样式"}},{group:[{left:5,bottom:grid.height/250*162.2+grid.bottom-10,width:50,height:20},{left:width-grid.right+3,bottom:grid.height/250*162.2+grid.bottom-10,width:43,height:20},{left:grid.width/12*7.5+grid.left-16,bottom:grid.bottom-24,width:32,height:20}],option:{id:"tooltip.axisPointer.label",desc:"提示框坐标轴指示器的文字"}},{left:baseOption.visualMap.left,top:baseOption.visualMap.top,width:60,height:110,option:{id:"visualMap",desc:'视觉映射,可以将数据值映射到图形的形状、大小、颜色等。\n除了这个例子中连续型的视觉映射之外,还有<a href="option.html#series-line.data.itemStyle" target="_blank">离散型的视觉映射</a>。'}},{group:[{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top,width:40,height:20},{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top+90,width:40,height:20}],option:{id:"visualMap.calculable",desc:"是否显示拖拽用的手柄(手柄能拖拽调整选中范围)"}},{right:5,top:grid.top-5,height:grid.height+12,width:34,option:{id:"dataZoom",desc:"区域缩放,用来放大一部分的数据,以看清细节"}},{left:160,top:105,width:150,height:90,option:{id:"graphic",desc:"绘制图形元素,包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group 等"}},{left:150,top:grid.top+grid.height+20,width:grid.width-120,height:45,option:{id:"timeline",desc:"多个 option 切换,展现不同时间段的数据"}},{left:grid.left+grid.width/12*3,width:grid.width/12,bottom:grid.bottom+grid.height/5,height:50,option:{id:"series.markPoint",desc:"标记点。\n除此之外,还可以用 <code>markLine</code> 设置标记线,<code>markArea</code> 设置标记区域"}}];function setSheet(t,i,a){getBaseChart(width,height,t,i,function(t){chart=echarts.init($chart[0]),option={graphic:{}};function i(i,e,o){return{type:"rect",left:i.left,top:i.top,right:i.right,bottom:i.bottom,shape:{width:i.width,height:i.height},style:{fill:"transparent",stroke:"transparent"},onmouseover:function(){highlight(chart,h,e,option,o||i)},onmouseout:function(){unhighlightAll(chart,h,option),selectedRegion&&setDetailHtml(selectedRegion.option)},onclick:function(t){selectedRegion&&_doUnhighlight(h,!0),highlight(chart,h,e,option,selectedRegion=o||i,!0),t.event.stopPropagation()}}}for(var h=[],e=0;e<a.length;++e){if(a[e].group)for(var o=a[e].group,d={type:"group",children:[],width:"100%",height:"100%"},r=0;r<o.length;++r){var g=i(o[r],e,a[e]);d.children.push(g)}else d=i(a[e],e);h.push(d)}h.push({type:"image",style:{image:t,width:width,height:height},silent:!0,z:-1}),option.graphic.elements=h,chart.setOption(option)})}function getBaseChart(t,i,e,o,h){var d=document.createElement("canvas");d.width=t,d.height=i;var r=echarts.init(d,null,{devicePixelRatio:2});e.animation=!1,r.setOption(e={baseOption:e});for(var g=0;o&&g<o.length;++g)r.dispatchAction(o[g]);"function"==typeof h&&setTimeout(function(){h(d.toDataURL())},10)}function highlight(t,i,e,o,h,d){if(setDetailHtml(h.option),d||_doUnhighlight(i),"group"===i[e].type)for(var r=i[e].children,g=0;g<r.length;++g)d?r[g].style.stroke="#24c":r[g].style.fill=highlightFill;else d?i[e].style.stroke="#24c":i[e].style.fill=highlightFill;t.setOption(o)}function unhighlightAll(t,i,e){$detail.text(""),_doUnhighlight(i),t.setOption(e)}function _doUnhighlight(t,i){for(var e=0;e<t.length;++e)if("rect"===t[e].type)t[e].style.fill="transparent",i&&(t[e].style.stroke="transparent");else if("group"===t[e].type)for(var o=t[e].children,h=0;h<o.length;++h)o[h].style.fill="transparent",i&&(o[h].style.stroke="transparent")}function setDetailHtml(t){var i=t.id;switch(i){case"series.itemStyle":i="series-line.itemStyle";break;case"dataZoom.handleStyle":i="dataZoom-slider.handleStyle";break;case"series.markPoint":i="series-line.markPoint"}t=["<h3>",t.id,"</h3>",'<p class="desc">点击图形固定说明文字</p>',"<p>",t.desc.split("\n").join("</p><p>"),"</p>","<p>",'<a href="./option.html#'+i+'" target="_blank">',"查看配置项手册","</a>","</p>"].join("");$detail.html(t)}setSheet(baseOption,baseActions,regions);
\ No newline at end of file
diff --git a/en/js/common.js b/en/js/common.js
index 3dfbc92..dfbb47b 100644
--- a/en/js/common.js
+++ b/en/js/common.js
@@ -1 +1 @@
-function changeLang(e){if("en"!==e||"echarts.apache.org"===location.hostname)location.href=location.href.replace(new RegExp("/(zh|en)/","g"),"/"+e+"/");else{var t=new RegExp("/zh/","g"),n="https://echarts.apache.org"+location.pathname.replace(t,"/en/")+location.search+location.hash;location.href=n}}function closeApacheBanner(e){var t=document.getElementById("apache-banner");t&&t.remove(),e&&(_hmt.push(["_trackEvent","apacheBanner","close"]),Cookies.set("apache-banner-closed","true",{expires:7}))}function logApache(){_hmt.push(["_trackEvent","apacheBanner","visit"])}$(document).ready(function(){if("echarts.apache.org"!==location.host){var e=document.getElementById("apache-banner");e&&(e.style.display="block")}"true"===Cookies.get("apache-banner-closed")&&closeApacheBanner(!1);var t=$(".page-detail h2");0<t.length&&t.each(function(e){var t='href="#'+$(this).attr("id")+'"',n=$(this).text();$(this).next(".time")&&(n+=" "+$(this).next(".time").text());var a=$("<a "+t+(0===e?' class="active"':" ")+">"+n+"</a>").click(function(){$(".page-nav a").removeClass("active"),$(this).addClass("active")});$(".page-nav ul").append($("<li></li>").append(a))});var n=$(".page-content").find("iframe");function a(){n.filter(function(){var e=$(this);if(e.attr("src"))return!1;var t=e[0].getClientRects();return 0<t.length&&0<t[0].top&&t[0].top<$(window).height()}).each(function(){$(this).attr("src",$(this).data("src"))})}a(),$(window).scroll(function(){a()}),$(".slide-btn").click(function(){var e=$(this).parent().parent();e.hasClass("slide-up")?($(this).text("收起目录"),e.removeClass("slide-up")):($(this).text("展开目录"),e.addClass("slide-up"))}),$(".page-nav")&&$(window).scroll(function(){var e=Math.max(120-(window.pageYOffset-120),70);$(".page-nav").css("top",e)})}),function(){function c(){for(var e=0,t={};e<arguments.length;e++){var n=arguments[e];for(var a in n)t[a]=n[a]}return t}function p(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}(function e(s){function i(){}function n(e,t,n){if("undefined"!=typeof document){"number"==typeof(n=c({path:"/"},i.defaults,n)).expires&&(n.expires=new Date(1*new Date+864e5*n.expires)),n.expires=n.expires?n.expires.toUTCString():"";try{var a=JSON.stringify(t);/^[\{\[]/.test(a)&&(t=a)}catch(e){}t=s.write?s.write(t,e):encodeURIComponent(String(t)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),e=encodeURIComponent(String(e)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var r="";for(var o in n)n[o]&&(r+="; "+o,!0!==n[o]&&(r+="="+n[o].split(";")[0]));return document.cookie=e+"="+t+r}}function t(e,t){if("undefined"!=typeof document){for(var n={},a=document.cookie?document.cookie.split("; "):[],r=0;r<a.length;r++){var o=a[r].split("="),i=o.slice(1).join("=");t||'"'!==i.charAt(0)||(i=i.slice(1,-1));try{var c=p(o[0]);if(i=(s.read||s)(i,c)||p(i),t)try{i=JSON.parse(i)}catch(e){}if(n[c]=i,e===c)break}catch(e){}}return e?n[e]:n}}return(window.Cookies=i).set=n,i.get=function(e){return t(e,!1)},i.getJSON=function(e){return t(e,!0)},i.remove=function(e,t){n(e,"",c(t,{expires:-1}))},i.defaults={},i.withConverter=e,i})(function(){})}();
\ No newline at end of file
+function changeLang(e){"en"!==e||"echarts.apache.org"===location.hostname?location.href=location.href.replace(new RegExp("/(zh|en)/","g"),"/"+e+"/"):(e=new RegExp("/zh/","g"),e="https://echarts.apache.org"+location.pathname.replace(e,"/en/")+location.search+location.hash,location.href=e)}function closeApacheBanner(e){var t=document.getElementById("apache-banner");t&&t.remove(),e&&(_hmt.push(["_trackEvent","apacheBanner","close"]),Cookies.set("apache-banner-closed","true",{expires:7}))}function logApache(){_hmt.push(["_trackEvent","apacheBanner","visit"])}$(document).ready(function(){"echarts.apache.org"===location.host||(e=document.getElementById("apache-banner"))&&(e.style.display="block"),"true"===Cookies.get("apache-banner-closed")&&closeApacheBanner(!1);var e=$(".page-detail h2");0<e.length&&e.each(function(e){var t='href="#'+$(this).attr("id")+'"',n=$(this).text();$(this).next(".time")&&(n+=" "+$(this).next(".time").text());n=$("<a "+t+(0===e?' class="active"':" ")+">"+n+"</a>").click(function(){$(".page-nav a").removeClass("active"),$(this).addClass("active")});$(".page-nav ul").append($("<li></li>").append(n))});var t=$(".page-content").find("iframe");function n(){t.filter(function(){var e=$(this);if(e.attr("src"))return!1;e=e[0].getClientRects();return 0<e.length&&0<e[0].top&&e[0].top<$(window).height()}).each(function(){$(this).attr("src",$(this).data("src"))})}n(),$(window).scroll(function(){n()}),$(".slide-btn").click(function(){var e=$(this).parent().parent();e.hasClass("slide-up")?($(this).text("收起目录"),e.removeClass("slide-up")):($(this).text("展开目录"),e.addClass("slide-up"))}),$(".page-nav")&&$(window).scroll(function(){var e=Math.max(120-(window.pageYOffset-120),70);$(".page-nav").css("top",e)})}),function(){function r(){for(var e=0,t={};e<arguments.length;e++){var n,a=arguments[e];for(n in a)t[n]=a[n]}return t}function p(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}(function e(s){function c(){}function n(e,t,n){if("undefined"!=typeof document){"number"==typeof(n=r({path:"/"},c.defaults,n)).expires&&(n.expires=new Date(+new Date+864e5*n.expires)),n.expires=n.expires?n.expires.toUTCString():"";try{var a=JSON.stringify(t);/^[\{\[]/.test(a)&&(t=a)}catch(e){}t=s.write?s.write(t,e):encodeURIComponent(String(t)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),e=encodeURIComponent(String(e)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var o,i="";for(o in n)n[o]&&(i+="; "+o,!0!==n[o]&&(i+="="+n[o].split(";")[0]));return document.cookie=e+"="+t+i}}function t(e,t){if("undefined"!=typeof document){for(var n={},a=document.cookie?document.cookie.split("; "):[],o=0;o<a.length;o++){var i=a[o].split("="),c=i.slice(1).join("=");t||'"'!==c.charAt(0)||(c=c.slice(1,-1));try{var r=p(i[0]),c=(s.read||s)(c,r)||p(c);if(t)try{c=JSON.parse(c)}catch(e){}if(n[r]=c,e===r)break}catch(e){}}return e?n[e]:n}}return(window.Cookies=c).set=n,c.get=function(e){return t(e,!1)},c.getJSON=function(e){return t(e,!0)},c.remove=function(e,t){n(e,"",r(t,{expires:-1}))},c.defaults={},c.withConverter=e,c})(function(){})}();
\ No newline at end of file
diff --git a/en/js/download.js b/en/js/download.js
index 497eadb..8ef2228 100644
--- a/en/js/download.js
+++ b/en/js/download.js
@@ -1 +1 @@
-var param=[{publishedAt:"2021-09-01T00:00:00Z",prerelease:!1,name:"5.2.0"},{publishedAt:"2021-06-09T00:00:00Z",prerelease:!1,name:"5.1.2"},{publishedAt:"2021-04-27T00:00:00Z",prerelease:!1,name:"5.1.1"},{publishedAt:"2021-04-15T00:00:00Z",prerelease:!1,name:"5.1.0"},{publishedAt:"2021-02-06T00:00:00Z",prerelease:!1,name:"5.0.2"},{publishedAt:"2021-01-16T00:00:00Z",prerelease:!1,name:"5.0.1"},{publishedAt:"2020-12-02T00:00:00Z",prerelease:!1,name:"5.0.0"},{publishedAt:"2020-09-01T00:00:00Z",prerelease:!1,name:"4.9.0"},{publishedAt:"2020-05-25T00:00:00Z",prerelease:!1,name:"4.8.0"},{publishedAt:"2020-03-19T00:00:00Z",prerelease:!1,name:"4.7.0"},{publishedAt:"2019-12-30T00:00:00Z",prerelease:!1,name:"4.6.0"},{publishedAt:"2019-11-18T16:00:00Z",prerelease:!1,name:"4.5.0"},{publishedAt:"2019-10-15T01:12:00Z",prerelease:!1,name:"4.4.0"},{publishedAt:"2019-09-16T15:57:00Z",prerelease:!1,name:"4.3.0"},{publishedAt:"2019-03-21T10:27:59Z",prerelease:!1,name:"4.2.1"},{publishedAt:"2018-08-04T12:55:30Z",prerelease:!1,name:"4.1.0"}],table=document.getElementById("download-table");function isIncubatingVersion(e){return e.split(".")[0]<5||"5.0.0"===e}for(var i=0;i<param.length;++i)if(!param[i].prerelease){var time=new Date(param[i].publishedAt);if(time.getTime()>new Date("2018-05-21")){var line=document.createElement("tr"),version=param[i].name,versionEl=document.createElement("td");versionEl.innerHTML=param[i].name,line.appendChild(versionEl);var date=document.createElement("td");date.innerHTML=time.getFullYear()+"/"+(time.getMonth()+1)+"/"+time.getDate(),line.appendChild(date);var isIncubating=isIncubatingVersion(version),main="https://www.apache.org/dist/echarts/"+version+"/apache-echarts-"+version+(isIncubating?"-incubating":""),mirror="https://www.apache.org/dyn/closer.cgi/echarts/"+version+"/apache-echarts-"+version+(isIncubating?"-incubating":""),source=document.createElement("td");source.innerHTML='<a target="_blank" href="'+mirror+'-src.zip">Source</a> (<a target="_blank" href="'+main+'-src.zip.asc">Signature</a> <a target="_blank" href="'+main+'-src.zip.sha512">SHA512</a>)',line.appendChild(source);var bin=document.createElement("td");bin.innerHTML='<a target="_blank" href="https://github.com/apache/echarts/tree/'+version+'/dist">Dist</a>',line.appendChild(bin),table.appendChild(line)}}
\ No newline at end of file
+var param=[{publishedAt:"2021-09-01T00:00:00Z",prerelease:!1,name:"5.2.0"},{publishedAt:"2021-06-09T00:00:00Z",prerelease:!1,name:"5.1.2"},{publishedAt:"2021-04-27T00:00:00Z",prerelease:!1,name:"5.1.1"},{publishedAt:"2021-04-15T00:00:00Z",prerelease:!1,name:"5.1.0"},{publishedAt:"2021-02-06T00:00:00Z",prerelease:!1,name:"5.0.2"},{publishedAt:"2021-01-16T00:00:00Z",prerelease:!1,name:"5.0.1"},{publishedAt:"2020-12-02T00:00:00Z",prerelease:!1,name:"5.0.0"},{publishedAt:"2020-09-01T00:00:00Z",prerelease:!1,name:"4.9.0"},{publishedAt:"2020-05-25T00:00:00Z",prerelease:!1,name:"4.8.0"},{publishedAt:"2020-03-19T00:00:00Z",prerelease:!1,name:"4.7.0"},{publishedAt:"2019-12-30T00:00:00Z",prerelease:!1,name:"4.6.0"},{publishedAt:"2019-11-18T16:00:00Z",prerelease:!1,name:"4.5.0"},{publishedAt:"2019-10-15T01:12:00Z",prerelease:!1,name:"4.4.0"},{publishedAt:"2019-09-16T15:57:00Z",prerelease:!1,name:"4.3.0"},{publishedAt:"2019-03-21T10:27:59Z",prerelease:!1,name:"4.2.1"},{publishedAt:"2018-08-04T12:55:30Z",prerelease:!1,name:"4.1.0"}],table=document.getElementById("download-table");function isIncubatingVersion(e){return e.split(".")[0]<5||"5.0.0"===e}for(var time,line,version,versionEl,date,isIncubating,main,mirror,source,bin,i=0;i<param.length;++i)param[i].prerelease||(time=new Date(param[i].publishedAt)).getTime()>new Date("2018-05-21")&&(line=document.createElement("tr"),version=param[i].name,(versionEl=document.createElement("td")).innerHTML=param[i].name,line.appendChild(versionEl),(date=document.createElement("td")).innerHTML=time.getFullYear()+"/"+(time.getMonth()+1)+"/"+time.getDate(),line.appendChild(date),isIncubating=isIncubatingVersion(version),main="https://www.apache.org/dist/echarts/"+version+"/apache-echarts-"+version+(isIncubating?"-incubating":""),mirror="https://www.apache.org/dyn/closer.cgi/echarts/"+version+"/apache-echarts-"+version+(isIncubating?"-incubating":""),(source=document.createElement("td")).innerHTML='<a target="_blank" href="'+mirror+'-src.zip">Source</a> (<a target="_blank" href="'+main+'-src.zip.asc">Signature</a> <a target="_blank" href="'+main+'-src.zip.sha512">SHA512</a>)',line.appendChild(source),(bin=document.createElement("td")).innerHTML='<a target="_blank" href="https://github.com/apache/echarts/tree/'+version+'/dist">Dist</a>',line.appendChild(bin),table.appendChild(line));
\ No newline at end of file
diff --git a/en/js/examples-nav.js b/en/js/examples-nav.js
index 373722e..76d0a76 100644
--- a/en/js/examples-nav.js
+++ b/en/js/examples-nav.js
@@ -1 +1 @@
-var charts=[];$(document).ready(function(){var a=$("#left-chart-nav ul"),t=location.pathname.match(/demo.html/);for(var e in CHART_TYPES)a.append($("<li>").append('<a class="left-chart-nav-link" id="left-chart-nav-'+e+'" href="'+(t?"examples.html":"")+"#chart-type-"+e+'"><div class="chart-icon"></div><div class="chart-name">'+CHART_TYPES[e]+"</div></a>"));$(".chart-area").height($(".chart-area").width()/5*4);var h=null,i=null;$(window).scroll(function(){var a=-$(".chart-list-panel")[0].getBoundingClientRect().top,t=parseInt($("#chart-type-scatter h3").css("margin-top"),10);if(!h){var e=$(".chart-list-panel").children(),r=0;h=[];for(var l=0;l<e.length;++l)r+=$($(".chart-list-panel").children()[l]).height()+t,h.push({height:r,id:$($(".chart-list-panel").children()[l]).attr("id").slice("chart-type-".length)})}for(l=0;l<h.length;++l)if(h[l].height>a){i!==h[l].id&&($("#left-chart-nav li").removeClass("active"),$("#left-chart-nav-"+h[l].id).parent().addClass("active"),i=h[l].id);break}})});
\ No newline at end of file
+var charts=[];$(document).ready(function(){var a,t=$("#left-chart-nav ul"),e=location.pathname.match(/demo.html/);for(a in CHART_TYPES)t.append($("<li>").append('<a class="left-chart-nav-link" id="left-chart-nav-'+a+'" href="'+(e?"examples.html":"")+"#chart-type-"+a+'"><div class="chart-icon"></div><div class="chart-name">'+CHART_TYPES[a]+"</div></a>"));$(".chart-area").height($(".chart-area").width()/5*4);var h=null,i=null;$(window).scroll(function(){var a=-$(".chart-list-panel")[0].getBoundingClientRect().top,t=parseInt($("#chart-type-scatter h3").css("margin-top"),10);if(!h){var e=$(".chart-list-panel").children(),r=0;h=[];for(var l=0;l<e.length;++l)r+=$($(".chart-list-panel").children()[l]).height()+t,h.push({height:r,id:$($(".chart-list-panel").children()[l]).attr("id").slice("chart-type-".length)})}for(l=0;l<h.length;++l)if(h[l].height>a){i!==h[l].id&&($("#left-chart-nav li").removeClass("active"),$("#left-chart-nav-"+h[l].id).parent().addClass("active"),i=h[l].id);break}})});
\ No newline at end of file
diff --git a/en/js/index.js b/en/js/index.js
index c1ef037..38cd330 100644
--- a/en/js/index.js
+++ b/en/js/index.js
@@ -1 +1 @@
-window.lazyLoadOptions={elements_selector:".lazy"},function(){if(!$(".lower-ie").length){document.getElementById("nav-index").className="active";var e=navigator.userAgent,n=e.match(/MSIE\s([\d.]+)/)||e.match(/Trident\/.+?rv:(([\d.]+))/),o=e.match(/Edge\/([\d.]+)/);window.supportTouch="ontouchstart"in window&&!n&&!o,function(){ScrollReveal().reveal(".reveal",{container:"#page-index",delay:300}),ScrollReveal().reveal(".reveal-later",{container:"#page-index",delay:600}),ScrollReveal().reveal(".reveal-latest",{container:"#page-index",delay:1200}),ScrollReveal().reveal(".reveal-about",{container:"#page-index",delay:600});var t={};function o(e,n){var o=e;"string"==typeof e&&(o=document.getElementById(e)),t[e]=lottie.loadAnimation({container:o,renderer:"svg",loop:!1,autoplay:!0,path:n})}o("icon-1","asset/lottie/json/chart.json"),o("icon-2","asset/lottie/json/fly.json"),o("icon-3","asset/lottie/json/analysis.json"),o("icon-4","asset/lottie/json/compatible.json"),o("icon-5","asset/lottie/json/grown.json"),o("icon-6","asset/lottie/json/simple.json");for(var e=0;e<6;e++)o("bg-icon-"+(e+1),"asset/lottie/json/bg_0"+(e+1)+".json"),function(e){$("#index-feature-"+(e+1)).mouseenter(function(){t["icon-"+(e+1)].goToAndPlay(0)})}(e);var a=!1,i=!1;o("paper-icon","asset/lottie/json/paper.json"),$("#page-index").scroll(function(){var e=$("#start-line").offset().top,n=$("#end-line").offset().top;e>=$(window).scrollTop()&&e<$(window).scrollTop()+$(window).height()-200?a||($("#publication").css("opacity",1),t["start-line"]?t["start-line"].goToAndPlay(0):o("start-line","asset/lottie/json/start_line.json"),t["paper-icon"]?t["paper-icon"].goToAndPlay(0):o("paper-icon","asset/lottie/json/paper.json"),a=!0):a=a||!1,n<=400?i||(t["end-line"]?t["end-line"].goToAndPlay(0):o("end-line","asset/lottie/json/end_line.json"),i=!0):i=i||!1})}()}}();
\ No newline at end of file
+window.lazyLoadOptions={elements_selector:".lazy"},function(){var e,n;$(".lower-ie").length||(document.getElementById("nav-index").className="active",e=(n=navigator.userAgent).match(/MSIE\s([\d.]+)/)||n.match(/Trident\/.+?rv:(([\d.]+))/),n=n.match(/Edge\/([\d.]+)/),window.supportTouch="ontouchstart"in window&&!e&&!n,function(){ScrollReveal().reveal(".reveal",{container:"#page-index",delay:300}),ScrollReveal().reveal(".reveal-later",{container:"#page-index",delay:600}),ScrollReveal().reveal(".reveal-latest",{container:"#page-index",delay:1200}),ScrollReveal().reveal(".reveal-about",{container:"#page-index",delay:600});var t={};function o(e,n){var o=e;"string"==typeof e&&(o=document.getElementById(e)),t[e]=lottie.loadAnimation({container:o,renderer:"svg",loop:!1,autoplay:!0,path:n})}o("icon-1","asset/lottie/json/chart.json"),o("icon-2","asset/lottie/json/fly.json"),o("icon-3","asset/lottie/json/analysis.json"),o("icon-4","asset/lottie/json/compatible.json"),o("icon-5","asset/lottie/json/grown.json"),o("icon-6","asset/lottie/json/simple.json");for(var e=0;e<6;e++)o("bg-icon-"+(e+1),"asset/lottie/json/bg_0"+(e+1)+".json"),function(e){$("#index-feature-"+(e+1)).mouseenter(function(){t["icon-"+(e+1)].goToAndPlay(0)})}(e);var a=!1,l=!1;o("paper-icon","asset/lottie/json/paper.json"),$("#page-index").scroll(function(){var e=$("#start-line").offset().top,n=$("#end-line").offset().top;e>=$(window).scrollTop()&&e<$(window).scrollTop()+$(window).height()-200?a||($("#publication").css("opacity",1),t["start-line"]?t["start-line"].goToAndPlay(0):o("start-line","asset/lottie/json/start_line.json"),t["paper-icon"]?t["paper-icon"].goToAndPlay(0):o("paper-icon","asset/lottie/json/paper.json"),a=!0):a=a||!1,n<=400?l||(t["end-line"]?t["end-line"].goToAndPlay(0):o("end-line","asset/lottie/json/end_line.json"),l=!0):l=l||!1})}())}();
\ No newline at end of file
diff --git a/en/maillist.html b/en/maillist.html
index 047393f..ae61c44 100644
--- a/en/maillist.html
+++ b/en/maillist.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Mailing List - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Mailing List</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="maillist" class="page-content"><div class="container"><h2>About Mailing List</h2><p>Mailing list is where we discuss in public and keep everything tracked. You are welcomed to subscribe it if you wish:</p><ul><li>To be informed about bug reports or feature requests;</li><li>To discuss about developing plans or specific issues;</li><li>To offer helps to those who ask questions by email;</li><li>And etc.</li></ul><p>If you have a specific bug to report or feature request, we'd suggest you opening an issue with our <a href="https://ecomfe.github.io/echarts-issue-helper">issue helper tool</a>, which is a more efficient way to report the details.</p><p><a href="mailto:commits@echarts.apache.org">commits@echarts.apache.org</a> focuses on the commit logs, while <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> holds other general discussions.</p><p>These two are public mailing list, and you can get access to them on Website <a href="https://lists.apache.org/list.html?commits@echarts.apache.org">https://lists.apache.org/list.html?commits@echarts.apache.org</a> and <a href="https://lists.apache.org/list.html?dev@echarts.apache.org">https://lists.apache.org/list.html?dev@echarts.apache.org</a> without subscribing.</p><h2>How To Subscribe</h2><p>Email <a href="mailto:commits-subscribe@echarts.apache.org">commits-subscribe@echarts.apache.org</a> or <a href="mailto:dev-subscribe@echarts.apache.org">dev-subscribe@echarts.apache.org</a> to subscribe commits@echarts.apache.org and dev@echarts.apache.org accordingly.</p><p>You should receive an email and please follow the instructions in that.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><h1>Mailing List</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="maillist" class="page-content"><div class="container"><h2>About Mailing List</h2><p>Mailing list is where we discuss in public and keep everything tracked. You are welcomed to subscribe it if you wish:</p><ul><li>To be informed about bug reports or feature requests;</li><li>To discuss about developing plans or specific issues;</li><li>To offer helps to those who ask questions by email;</li><li>And etc.</li></ul><p>If you have a specific bug to report or feature request, we'd suggest you opening an issue with our <a href="https://ecomfe.github.io/echarts-issue-helper">issue helper tool</a>, which is a more efficient way to report the details.</p><p><a href="mailto:commits@echarts.apache.org">commits@echarts.apache.org</a> focuses on the commit logs, while <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> holds other general discussions.</p><p>These two are public mailing list, and you can get access to them on Website <a href="https://lists.apache.org/list.html?commits@echarts.apache.org">https://lists.apache.org/list.html?commits@echarts.apache.org</a> and <a href="https://lists.apache.org/list.html?dev@echarts.apache.org">https://lists.apache.org/list.html?dev@echarts.apache.org</a> without subscribing.</p><h2>How To Subscribe</h2><p>Email <a href="mailto:commits-subscribe@echarts.apache.org">commits-subscribe@echarts.apache.org</a> or <a href="mailto:dev-subscribe@echarts.apache.org">dev-subscribe@echarts.apache.org</a> to subscribe commits@echarts.apache.org and dev@echarts.apache.org accordingly.</p><p>You should receive an email and please follow the instructions in that.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/nav.html b/en/nav.html
index eacfe0a..f682309 100644
--- a/en/nav.html
+++ b/en/nav.html
@@ -1 +1,3 @@
-<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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav>
\ No newline at end of file
+<template>
+<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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav>
+</template>
\ No newline at end of file
diff --git a/en/option-gl.html b/en/option-gl.html
index cbccc04..2786c17 100644
--- a/en/option-gl.html
+++ b/en/option-gl.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/en/option.html">V4 Documentation</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/en/option.html">V4 Documentation</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/option-gl-parts',
@@ -19,7 +19,7 @@
};
if (window.EC_WWW_CDN_PAY_ROOT) {
window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/en/' + window.globalArgsExtra.baseUrl
-}</script><script type="text/javascript">window.globalArgsExtra.version = '55907f28e6';
+}</script><script type="text/javascript">window.globalArgsExtra.version = 'dbf1fef9db';
echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/option.html b/en/option.html
index ecd3674..b67aa5e 100644
--- a/en/option.html
+++ b/en/option.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/en/option.html">V4 Documentation</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/en/option.html">V4 Documentation</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/option-parts',
@@ -19,7 +19,7 @@
};
if (window.EC_WWW_CDN_PAY_ROOT) {
window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/en/' + window.globalArgsExtra.baseUrl
-}</script><script type="text/javascript">window.globalArgsExtra.version = '55907f28e6';
+}</script><script type="text/javascript">window.globalArgsExtra.version = 'dbf1fef9db';
echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/option3.html b/en/option3.html
index e5936c4..2f34a32 100644
--- a/en/option3.html
+++ b/en/option3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts Configurations"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-info"><div class="container"><h1>ECharts Configurations v3</h1><p>Sorry. This page is currently not available. Please checkout <a href="./option.html">Configurations of v4</a>.</p></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts Configurations"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-info"><div class="container"><h1>ECharts Configurations v3</h1><p>Sorry. This page is currently not available. Please checkout <a href="./option.html">Configurations of v4</a>.</p></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
</script><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/en/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/en/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/resources.html b/en/resources.html
index 6bff8ff..5ebe77b 100644
--- a/en/resources.html
+++ b/en/resources.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>More Resources - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="More Resources"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>More Resources</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="page-nav"></div><div class="container"><p>Besides the official resources we provided in this Website, the community has also created abundant resources like the support of multiple programming languages, or an online platform to host ECharts works called <a target="_blank" href="https://www.makeapie.com">Gallery</a>.</p><p><a target="_blank" href="https://github.com/ecomfe/awesome-echarts">github.com/ecomfe/awesome-echarts</a> project provides a full list of these resources. Please check it out and add more as you know.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="More Resources"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>More Resources</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="page-nav"></div><div class="container"><p>Besides the official resources we provided in this Website, the community has also created abundant resources like the support of multiple programming languages, or an online platform to host ECharts works called <a target="_blank" href="https://www.makeapie.com">Gallery</a>.</p><p><a target="_blank" href="https://github.com/ecomfe/awesome-echarts">github.com/ecomfe/awesome-echarts</a> project provides a full list of these resources. Please check it out and add more as you know.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/security.html b/en/security.html
index ba935b4..9523441 100644
--- a/en/security.html
+++ b/en/security.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Security - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Security"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Security</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><p>The Apache ECharts<sup>TM</sup> takes a rigorous standpoint in annihilating the security issues in its software projects. Apache ECharts is highly sensitive and forthcoming to issues pertaining to its features and functionality.</p><p>If you have apprehensions regarding ECharts's security or you discover vulnerability or potential threat, don't hesitate to get in touch with the <a href="http://www.apache.org/security/" target="_blank">Apache Security Team</a> by dropping a mail at <a href="mailto:security@apache.org">security@apache.org</a>. In the mail, specify the project name ECharts with the description of the issue or potential threat. You are also urged to recommend the way to reproduce and replicate the issue. The security team and the ECharts community will get back to you after assessing and analysing the findings.</p><p>PLEASE PAY ATTENTION to report the security issue on the security email before disclosing it on public domain.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-others').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="Security"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div class="page-info"><div class="container"><h1>Security</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><p>The Apache ECharts<sup>TM</sup> takes a rigorous standpoint in annihilating the security issues in its software projects. Apache ECharts is highly sensitive and forthcoming to issues pertaining to its features and functionality.</p><p>If you have apprehensions regarding ECharts's security or you discover vulnerability or potential threat, don't hesitate to get in touch with the <a href="http://www.apache.org/security/" target="_blank">Apache Security Team</a> by dropping a mail at <a href="mailto:security@apache.org">security@apache.org</a>. In the mail, specify the project name ECharts with the description of the issue or potential threat. You are also urged to recommend the way to reproduce and replicate the issue. The security team and the ECharts community will get back to you after assessing and analysing the findings.</p><p>PLEASE PAY ATTENTION to report the security issue on the security email before disclosing it on public domain.</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://echarts.apache.org/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://echarts.apache.org/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-others').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/spreadsheet.html b/en/spreadsheet.html
index 2739d73..53e0457 100644
--- a/en/spreadsheet.html
+++ b/en/spreadsheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,12 +7,12 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Spreadsheet Tool - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/vendors/handsontable/0.26.1/dist/handsontable.full.min.css?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/spreadsheet.css?_v_=0fe8afb287"><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="ecdoc-sprsht"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="ecdoc-sprsht"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1630485133448',
+ version: '1630499963508',
basePath: './'
}, window.globalArgsExtra || {}));
@@ -31,7 +31,7 @@
numeral: vendorPath + '/numeral/1.4.7/numeral.min',
immutable: vendorPath + '/immutable/3.7.4/dist/immutable'
},
- urlArgs: '_v_=1630485133448'
+ urlArgs: '_v_=1630499963508'
});
require(['spreadsheet/spreadsheet'], function (spreadsheet) {
diff --git a/en/theme-builder.html b/en/theme-builder.html
index 1012182..a72d35d 100644
--- a/en/theme-builder.html
+++ b/en/theme-builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Theme Builder - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap-colorpicker@2.5.3/dist/css/bootstrap-colorpicker.min.css">
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap-colorpicker@2.5.3/dist/css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/default.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/github.css">
<link rel="stylesheet" href="./theme-builder/main.css">
@@ -527,7 +527,7 @@
<script src="//cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
<script src="./theme-builder/app.min.js"></script>
-</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/en/tutorial.html b/en/tutorial.html
index 123fff7..49f54e4 100644
--- a/en/tutorial.html
+++ b/en/tutorial.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/en/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/en/option.html">V4 Documentation</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/en/option.html">V4 Documentation</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/en/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/tutorial-parts',
@@ -19,7 +19,7 @@
};
if (window.EC_WWW_CDN_PAY_ROOT) {
window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/en/' + window.globalArgsExtra.baseUrl
-}</script><script type="text/javascript">window.globalArgsExtra.version = '55907f28e6';
+}</script><script type="text/javascript">window.globalArgsExtra.version = 'dbf1fef9db';
echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/examples/en/editor.html b/examples/en/editor.html
index b47a752..817c050 100644
--- a/examples/en/editor.html
+++ b/examples/en/editor.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,12 +10,12 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-example-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/examples/">V4 Examples</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-example-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/examples/">V4 Examples</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
page: 'editor',
locale: 'en'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1630485133448';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/examples/en/index.html b/examples/en/index.html
index 6c9dedf..72d1043 100644
--- a/examples/en/index.html
+++ b/examples/en/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,12 +10,12 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-example-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/examples/">V4 Examples</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" class="navbar navbar-default navbar-fixed-top"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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('zh')">中文</a></li></ul></div></div></nav></nav><div class="page-main"><div id="ec-example-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/examples/">V4 Examples</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
page: 'explore',
locale: 'en'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1630485133448';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/examples/en/view.html b/examples/en/view.html
index fd7f034..ff38b3c 100644
--- a/examples/en/view.html
+++ b/examples/en/view.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'en';
+<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/en/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/en/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'en';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,11 +10,11 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/en/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>We're sorry, but Apache ECharts website doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></div></noscript><div id="apache-banner"><div class="txt"><p>Please visit the official Apache ECharts Website at</p><a id="a2" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>Visit Official Website</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/en/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
</script><script type="text/javascript">window.globalArgsExtra = {
page: 'view',
locale: 'en'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1630485133448';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);
diff --git a/examples/js/example-bundle.js.map b/examples/js/example-bundle.js.map
deleted file mode 100644
index 498e926..0000000
--- a/examples/js/example-bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack://echartsExample/./node_modules/@lang/object-visualizer/dist/object-visualizer.esm.min.js","webpack://echartsExample/./common/buildCode.js","webpack://echartsExample/src/editor/CodeAce.vue","webpack://echartsExample/src/editor/CodeMonaco.vue","webpack://echartsExample/src/editor/Editor.vue","webpack://echartsExample/src/editor/FullCodePreview.vue","webpack://echartsExample/src/editor/Preview.vue","webpack://echartsExample/src/editor/View.vue","webpack://echartsExample/src/explore/ExampleCard.vue","webpack://echartsExample/src/explore/Explore.vue","webpack://echartsExample/./src/common/config.js","webpack://echartsExample/./src/common/helper.js","webpack://echartsExample/./src/common/i18n.js","webpack://echartsExample/./src/common/store.js","webpack://echartsExample/./src/data/chart-list-data-gl.js","webpack://echartsExample/./src/data/chart-list-data.js","webpack://echartsExample/./src/data/option-keywords.js","webpack://echartsExample/./src/dep/showDebugDirtyRect.js","webpack://echartsExample/./src/editor/downloadExample.js","webpack://echartsExample/./src/editor/sandbox.js","webpack://echartsExample/./src/main.js","webpack://echartsExample/./src/asset/placeholder.jpg","webpack://echartsExample/./src/asset/icon/bar.svg","webpack://echartsExample/./src/asset/icon/boxplot.svg","webpack://echartsExample/./src/asset/icon/calendar.svg","webpack://echartsExample/./src/asset/icon/candlestick.svg","webpack://echartsExample/./src/asset/icon/custom.svg","webpack://echartsExample/./src/asset/icon/dataZoom.svg","webpack://echartsExample/./src/asset/icon/dataset.svg","webpack://echartsExample/./src/asset/icon/drag.svg","webpack://echartsExample/./src/asset/icon/funnel.svg","webpack://echartsExample/./src/asset/icon/gauge.svg","webpack://echartsExample/./src/asset/icon/geo.svg","webpack://echartsExample/./src/asset/icon/gl.svg","webpack://echartsExample/./src/asset/icon/graph.svg","webpack://echartsExample/./src/asset/icon/heatmap.svg","webpack://echartsExample/./src/asset/icon/line.svg","webpack://echartsExample/./src/asset/icon/lines.svg","webpack://echartsExample/./src/asset/icon/map.svg","webpack://echartsExample/./src/asset/icon/parallel.svg","webpack://echartsExample/./src/asset/icon/pictorialBar.svg","webpack://echartsExample/./src/asset/icon/pie.svg","webpack://echartsExample/./src/asset/icon/radar.svg","webpack://echartsExample/./src/asset/icon/rich.svg","webpack://echartsExample/./src/asset/icon/sankey.svg","webpack://echartsExample/./src/asset/icon/scatter.svg","webpack://echartsExample/./src/asset/icon/sunburst.svg","webpack://echartsExample/./src/asset/icon/themeRiver.svg","webpack://echartsExample/./src/asset/icon/tree.svg","webpack://echartsExample/./src/asset/icon/treemap.svg","webpack://echartsExample/./node_modules/lodash/_Symbol.js","webpack://echartsExample/./node_modules/lodash/_baseGetTag.js","webpack://echartsExample/./node_modules/lodash/_freeGlobal.js","webpack://echartsExample/./node_modules/lodash/_getRawTag.js","webpack://echartsExample/./node_modules/lodash/_objectToString.js","webpack://echartsExample/./node_modules/lodash/_root.js","webpack://echartsExample/./node_modules/lodash/debounce.js","webpack://echartsExample/./node_modules/lodash/isObject.js","webpack://echartsExample/./node_modules/lodash/isObjectLike.js","webpack://echartsExample/./node_modules/lodash/isSymbol.js","webpack://echartsExample/./node_modules/lodash/now.js","webpack://echartsExample/./node_modules/lodash/toNumber.js","webpack://echartsExample/./src/editor/CodeAce.vue?fe3c","webpack://echartsExample/./src/editor/CodeMonaco.vue?3785","webpack://echartsExample/./src/editor/Editor.vue?3ca8","webpack://echartsExample/./src/editor/FullCodePreview.vue?ab3f","webpack://echartsExample/./src/editor/Preview.vue?a8fb","webpack://echartsExample/./src/explore/ExampleCard.vue?81d6","webpack://echartsExample/./src/explore/Explore.vue?2d5c","webpack://echartsExample/./src/editor/object-visualizer.css","webpack://echartsExample/./node_modules/resize-detector/esm/index.js","webpack://echartsExample/./node_modules/vanilla-lazyload/dist/lazyload.esm.js","webpack://echartsExample/./node_modules/vue-i18n/dist/vue-i18n.esm.js","webpack://echartsExample/./src/editor/CodeAce.vue","webpack://echartsExample/./src/editor/CodeMonaco.vue","webpack://echartsExample/./src/editor/Editor.vue","webpack://echartsExample/./src/editor/FullCodePreview.vue","webpack://echartsExample/./src/editor/Preview.vue","webpack://echartsExample/./src/editor/View.vue","webpack://echartsExample/./src/explore/ExampleCard.vue","webpack://echartsExample/./src/explore/Explore.vue","webpack://echartsExample/./src/editor/CodeAce.vue?edd2","webpack://echartsExample/./src/editor/CodeMonaco.vue?5397","webpack://echartsExample/./src/editor/Editor.vue?c684","webpack://echartsExample/./src/editor/FullCodePreview.vue?84e7","webpack://echartsExample/./src/editor/Preview.vue?9b0f","webpack://echartsExample/./src/editor/View.vue?61ae","webpack://echartsExample/./src/explore/ExampleCard.vue?15c2","webpack://echartsExample/./src/explore/Explore.vue?0a10","webpack://echartsExample/./src/editor/CodeAce.vue?025a","webpack://echartsExample/./src/editor/CodeMonaco.vue?edac","webpack://echartsExample/./src/editor/Editor.vue?08c4","webpack://echartsExample/./src/editor/FullCodePreview.vue?f280","webpack://echartsExample/./src/editor/Preview.vue?42e8","webpack://echartsExample/./src/editor/View.vue?1961","webpack://echartsExample/./src/explore/ExampleCard.vue?094b","webpack://echartsExample/./src/explore/Explore.vue?6f68","webpack://echartsExample/./node_modules/vue-loader/lib/runtime/componentNormalizer.js","webpack://echartsExample/./node_modules/vue-scrollactive/dist/vue-scrollactive.min.js","webpack://echartsExample//Users/lang/Develop/echarts-examples/src/asset/icon|sync|/^\\.\\/.*\\.svg$/","webpack://echartsExample/external \"Vue\"","webpack://echartsExample/webpack/bootstrap","webpack://echartsExample/webpack/runtime/compat get default export","webpack://echartsExample/webpack/runtime/define property getters","webpack://echartsExample/webpack/runtime/global","webpack://echartsExample/webpack/runtime/hasOwnProperty shorthand","webpack://echartsExample/webpack/runtime/make namespace object","webpack://echartsExample/webpack/runtime/node module decorator","webpack://echartsExample/webpack/runtime/publicPath","webpack://echartsExample/webpack/startup"],"names":["COMPONENTS_MAP","grid","polar","geo","singleAxis","parallel","calendar","graphic","toolbox","tooltip","axisPointer","brush","title","timeline","markPoint","markLine","markArea","legend","dataZoom","visualMap","aria","dataset","xAxis","yAxis","angleAxis","radiusAxis","CHARTS_MAP","line","bar","pie","scatter","radar","map","tree","treemap","graph","gauge","funnel","sankey","boxplot","candlestick","effectScatter","lines","heatmap","pictorialBar","themeRiver","sunburst","custom","COMPONENTS_GL_MAP","grid3D","geo3D","globe","mapbox3D","maptalks3D","xAxis3D","yAxis3D","zAxis3D","CHARTS_GL_MAP","bar3D","line3D","scatter3D","lines3D","polygons3D","surface","map3D","scatterGL","graphGL","flowGL","linesGL","COMPONENTS_MAP_REVERSE","CHARTS_MAP_REVERSE","CHARTS_GL_MAP_REVERSE","COMPONENTS_GL_MAP_REVERSE","RENDERERS_MAP_REVERSE","MARKERS","INJECTED_COMPONENTS","DEPENDENT_COMPONENTS","createReverseMap","reverseMap","Object","keys","forEach","key","includes","module","collectDeps","option","deps","options","opt","concat","baseOption","Array","from","Set","val","isArray","length","push","series","seriesOpt","type","markerType","buildMinimalBundleCode","includeType","chartsImports","componentsImports","chartsGLImports","componentsGLImports","renderersImports","dep","endsWith","replace","getImportsPartCode","imports","str","join","allImports","ECOptionTypeCode","filter","a","importsCodes","item","trim","buildLegacyMinimalBundleCode","isESM","modules","mod","hasGLInDeps","find","jsCode","minimal","esm","legacy","ts","theme","ROOT_PATH","extraImports","hasECStat","indexOf","usedRootPath","usedApp","DEP_CODE","IMPORT_CODE","ENV_CODE","PREPARE_CODE","EXAMPLE_CATEGORIES","THEMES","dark","BLACK_MAP","list","i","location","href","URL_PARAMS","search","substr","split","kv","SUPPORT_WEBP","elem","document","createElement","width","height","getContext","toDataURL","SCRIPT_URLS","localEChartsMinJS","echartsMinJS","echartsDir","echartsStatMinJS","echartsGLMinJS","datGUIMinJS","monacoDir","aceDir","promisesCache","loadScriptsAsync","scripts","Promise","all","scriptUrl","url","match","promise","resolve","reject","script","src","async","onload","onerror","body","appendChild","link","rel","downloadBlob","blob","fileName","window","navigator","msSaveBlob","msSaveOrOpenBlob","URL","createObjectURL","download","click","revokeObjectURL","en","editor","run","errorInEditor","chartOK","darkMode","enableDecal","renderCfgTitle","renderer","useDirtyRect","edit","monacoMode","tabEditor","tabFullCodePreview","tabOptionPreview","minimalBundle","chartTypes","drag","rich","zh","store","cdnRoot","version","locale","typeCheck","runCode","sourceCode","runHash","isMobile","innerWidth","editorStatus","message","loadExampleCode","dataRoot","$","ajax","dataType","success","data","parseSourceCode","code","hashId","updateRunHash","keywords","DebugRect","style","dom","className","assign","backgroundColor","border","cssText","hasOwnProperty","prototype","update","rect","domStyle","left","x","top","y","hide","opacity","show","_this","clearTimeout","_hideTimeout","setTimeout","zr","opts","painter","getLayers","Error","isSingleCanvas","debugViewRoot","debugRects","computedStyle","getComputedStyle","position","on","idx_1","eachBuiltinLayer","layer","debugGetPaintRects","paintRects","hasRootPath","rootPathCode","file","Blob","encoding","createSandbox","optionUpdated","appEnv","gui","_intervalIdList","_timeoutIdList","_oldSetTimeout","_oldSetInterval","setInterval","func","delay","id","gap","_clearTimeTickers","clearInterval","_events","_wrapOnMethods","chart","oldOn","oldSetOption","setOption","eventName","res","apply","arguments","_clearChartEvents","off","chartInstance","resize","dispose","getDataURL","pixelRatio","excludeComponents","getOption","el","echarts","init","showDebugDirtyRect","getZr","autoHideDelay","e","console","error","config","compiledCode","Function","updateTime","startTime","Date","endTime","domElement","remove","destroy","dat","GUI","autoPlace","css","right","zIndex","append","configParameters","name","value","isColor","controller","add","min","max","obj","colorArr","color","parse","stringify","onChange","onFinishChange","Vue","VueScrollactive","i18n","VueI18n","fallbackLocale","messages","querySelector","container","render","h","EditorPage","explore","ExplorePage","view","ViewPage","page"],"mappings":";;;;;;;;;;;;;;;;AAAA,gBAAgB,2CAA2C,YAAY,WAAW,eAAe,2CAA2C,0RAA0R,cAAc,SAAS,WAAW,YAAY,WAAW,KAAK,8BAA8B,gCAAgC,SAAS,iBAAiB,UAAU,wBAAwB,cAAc,WAAW,+BAA+B,MAAM,mBAAmB,0CAA0C,KAAK,cAAc,SAAS,YAAY,yBAAyB,WAAW,mBAAmB,+CAA+C,gBAAgB,0EAA0E,QAAQ,OAAO,8CAA8C,EAAE,cAAc,EAAE,OAAO,QAAQ,OAAO,oBAAoB,mCAAmC,cAAc,gGAAgG,qBAAqB,oBAAoB,6gBAA6gB,4BAA4B,4BAA4B,yLAAyL,KAAK,8CAA8C,YAAY,WAAW,YAAY,aAAa,2BAA2B,sCAAsC,EAAE,OAAO,sBAAsB,qBAAqB,MAAM,gJAAgJ,qBAAM,CAAC,qBAAM,GAAG,qBAAqB,MAAM,gCAAgC,kBAAkB,aAAa,2BAA2B,gBAAgB,sBAAsB,mBAAmB,2CAA2C,mBAAmB,MAAM,IAAI,2CAA2C,QAAQ,gCAAgC,4GAA4G,MAAM,qBAAqB,cAAc,mEAAmE,SAAS,eAAe,MAAM,OAAO,GAAG,aAAa,YAAY,WAAW,mBAAmB,YAAY,UAAU,YAAY,cAAc,kBAAkB,cAAc,iBAAiB,iBAAiB,mBAAmB,0BAA0B,eAAe,sBAAsB,eAAe,0DAA0D,yBAAyB,iBAAiB,aAAa,sBAAsB,kBAAkB,kCAAkC,IAAI,4BAA4B,8CAA8C,2BAA2B,GAAG,uCAAuC,wEAAwE,MAAM,mDAAmD,MAAM,4BAA4B,eAAe,+CAA+C,GAAG,qIAAqI,uBAAuB,uBAAuB,iCAAiC,iCAAiC,gDAAgD,aAAa,6CAA6C,2BAA2B,4DAA4D,2BAA2B,UAAU,0BAA0B,6BAA6B,kDAAkD,2BAA2B,qBAAqB,iBAAiB,0BAA0B,IAAI,iBAAiB,qBAAqB,6CAA6C,0DAA0D,2BAA2B,qBAAqB,KAAK,wBAAwB,eAAe,GAAG,kBAAkB,yBAAyB,aAAa,0DAA0D,oEAAoE,iEAAiE,UAAU,6CAA6C,oDAAoD,uCAAuC,mBAAmB,yBAAyB,oCAAoC,qBAAqB,mDAAmD,KAAK,8CAA8C,QAAQ,KAAK,kBAAkB,UAAU,KAAK,OAAO,8EAA8E,2BAA2B,gCAAgC,mCAAmC,MAAM,MAAM,sBAAsB,8DAA8D,oBAAoB,qCAAqC,4EAA4E,oBAAoB,6DAA6D,eAAe,QAAQ,uCAAuC,wCAAwC,iBAAiB,QAAQ,kBAAkB,YAAY,OAAO,kBAAkB,2BAA2B,oBAAoB,iEAAiE,eAAe,kBAAkB,YAAY,OAAO,kBAAkB,2BAA2B,eAAe,oBAAoB,oCAAoC,cAAc,0CAA0C,wCAAwC,iBAAiB,qBAAqB,gDAAgD,+DAA+D,mBAAmB,sBAAsB,wHAAwH,yBAAyB,OAAO,MAAM,eAAe,UAAU,UAAU,eAAe,EAAE,uCAAuC,qBAAqB,eAAe,eAAe,sBAAsB,0BAA0B,UAAU,OAAO,kBAAkB,YAAY,gBAAgB,2DAA2D,KAAK,OAAO,wBAAwB,YAAY,gBAAgB,2DAA2D,KAAK,OAAO,qBAAqB,YAAY,mBAAmB,QAAQ,0BAA0B,sFAAsF,iBAAiB,qBAAqB,kHAAkH,yDAAyD,sDAAsD,GAAG,UAAU,cAAc,KAAK,cAAc,KAAK,cAAc,+BAA+B,eAAe,yDAAyD,UAAU,kCAAkC,yDAAyD,kBAAkB,2BAA2B,eAAe,4CAA4C,eAAe,sBAAsB,qBAAqB,kBAAkB,+CAA+C,2BAA2B,cAAc,cAAc,kBAAkB,+BAA+B,oBAAoB,eAAe,oDAAoD,eAAe,+BAA+B,eAAe,oBAAoB,eAAe,2BAA2B,yBAAyB,eAAe,oCAAoC,eAAe,wBAAwB,kBAAkB,mBAAmB,IAAI,SAAS,oBAAoB,yEAAyE,YAAY,0CAA0C,aAAa,4GAA4G,UAAU,yBAAyB,uBAAuB,qCAAqC,aAAa,2DAA2D,eAAe,+BAA+B,SAAS,iBAAiB,6CAA6C,YAAY,+BAA+B,aAAa,2BAA2B,SAAS,mBAAmB,iEAAiE,uBAAuB,0DAA0D,wBAAwB,YAAY,kGAAkG,aAAa,iBAAiB,qBAAqB,MAAM,IAAI,gBAAgB,SAAS,UAAU,SAAS,qBAAqB,SAAS,oBAAoB,6BAA6B,UAAU,KAAK,WAAW,YAAY,WAAW,2BAA2B,SAAS,wBAAwB,WAAW,MAAM,eAAe,oBAAoB,KAAK,EAAE,EAAE,aAAa,iBAAiB,WAAW,+BAA+B,WAAW,yCAAyC,uCAAuC,sBAAsB,iBAAiB,UAAU,gBAAgB,YAAY,SAAS,YAAY,iBAAiB,YAAY,iBAAiB,2BAA2B,oBAAoB,eAAe,eAAe,uCAAuC,eAAe,gFAAgF,cAAc,+BAA+B,qBAAqB,wEAAwE,sBAAsB,cAAc,8CAA8C,aAAa,cAAc,8BAA8B,eAAe,cAAc,yBAAyB,4CAA4C,4CAA4C,aAAa,cAAc,cAAc,gCAAgC,eAAe,gDAAgD,IAAI,SAAS,aAAa,MAAM,eAAe,kBAAkB,QAAQ,mEAAmE,sBAAsB,yBAAyB,QAAQ,gDAAgD,cAAc,WAAW,2BAA2B,YAAY,gBAAgB,SAAS,yCAAyC,sBAAsB,qBAAqB,yCAAyC,oBAAoB,MAAM,cAAc,uBAAuB,iBAAiB,QAAQ,aAAa,sBAAsB,iDAAiD,gBAAgB,QAAQ,MAAM,+BAA+B,YAAY,sBAAsB,+FAA+F,+EAA+E,iBAAiB,6GAA6G,YAAY,eAAe,KAAK,eAAe,MAAM,oIAAoI,GAAG,MAAM,KAAK,IAAI,MAAM,kBAAkB,aAAa,gCAAgC,KAAK,UAAU,uBAAuB,uBAAuB,+BAA+B,QAAQ,2BAA2B,wBAAwB,YAAY,GAAG,4DAA4D,mGAAmG,SAAS,mBAAmB,iBAAiB,eAAe,MAAM,YAAY,WAAW,KAAK,aAAa,iBAAiB,qCAAqC,YAAY,KAAK,SAAS,aAAa,MAAM,6DAA6D,YAAY,SAAS,YAAY,WAAW,mDAAmD,UAAU,mBAAmB,uBAAuB,6CAA6C,YAAY,WAAW,KAAK,aAAa,kCAAkC,SAAS,eAAe,uBAAuB,QAAQ,aAAa,SAAS,kBAAkB,wBAAwB,UAAU,MAAM,8FAA8F,qBAAqB,0BAA0B,uBAAuB,aAAa,iBAAiB,MAAM,qDAAqD,MAAM,cAAc,YAAY,WAAW,KAAK,aAAa,wBAAwB,uBAAuB,aAAa,YAAY,uBAAuB,kBAAkB,kBAAkB,oDAAoD,uDAAuD,SAAS,sBAAsB,wCAAwC,oBAAoB,MAAM,SAAS,+BAA+B,YAAY,KAAK,sBAAsB,wBAAwB,+FAA+F,6BAA6B,oBAAoB,WAAW,KAAK,gBAAgB,gBAAgB,4BAA4B,aAAa,UAAU,gCAAgC,OAAO,GAAG,MAAM,+CAA+C,4DAA4D,uBAAuB,eAAe,iBAAiB,eAAe,oDAAoD,iBAAiB,iBAAiB,qBAAqB,iBAAiB,SAAS,uBAAuB,IAAI,2BAA2B,iCAAiC,SAAS,2BAA2B,MAAM,qDAAqD,wBAAwB,WAAW,oBAAoB,uBAAuB,EAAE,mCAAmC,4IAA4I,mBAAmB,iBAAiB,iBAAiB,iDAAiD,SAAS,aAAa,8JAA8J,kDAAkD,SAAS,UAAU,cAAc,YAAY,wBAAwB,YAAY,iBAAiB,aAAa,kBAAkB,YAAY,6DAA6D,UAAU,MAAM,0EAA0E,4BAA4B,eAAe,SAAS,aAAa,0CAA0C,EAAE,qEAAqE,wBAAwB,mBAAmB,mBAAmB,oDAAoD,yBAAyB,4BAA4B,gCAAgC,yBAAyB,WAAW,eAAe,kCAAkC,QAAQ,GAAG,iCAAiC,SAAS,iCAAiC,sBAAsB,+BAA+B,QAAQ,KAAK,EAAE,EAAE,0BAA0B,WAAW,IAAI,EAAE,gBAAgB,eAAe,KAAK,YAAY,6CAA6C,qBAAqB,qBAAqB,SAAS,UAAU,KAAK,gGAAgG,eAAe,iBAAiB,WAAW,WAAW,MAAM,gBAAgB,yBAAyB,iBAAiB,6BAA6B,eAAe,kBAAkB,kBAAkB,aAAa,uBAAuB,iBAAiB,cAAc,aAAa,YAAY,cAAc,uBAAuB,iBAAiB,sBAAsB,uCAAuC,YAAY,WAAW,KAAK,oBAAoB,UAAU,oBAAoB,UAAU,2DAA2D,EAAE,SAAS,qBAAqB,2BAA2B,YAAY,WAAW,KAAK,aAAa,2BAA2B,iBAAiB,2BAA2B,cAAc,OAAO,iBAAiB,gDAAgD,yBAAyB,0DAA0D,wBAAwB,cAAc,+BAA+B,SAAS,iBAAiB,0BAA0B,wBAAwB,uBAAuB,SAAS,eAAe,mFAAmF,gBAAgB,gBAAgB,kVAAkV,OAAO,gBAAgB,sHAAsH,WAAW,gDAAgD,qCAAqC,UAAU,UAAU,6BAA6B,kBAAkB,8EAA8E,gBAAgB,mEAAmE,MAAM,0FAA0F,MAAM,QAAQ,kCAAkC,uBAAuB,sFAAsF,aAAa,yBAAyB,wBAAwB,eAAe,aAAa,WAAW,wBAAwB,6BAA6B,eAAe,qBAAqB,4IAA4I,MAAM,mMAAmM,8CAA8C,0FAA0F,MAAM,yBAAyB,GAAG,UAAU,mBAAmB,MAAM,mBAAmB,MAAM,4BAA4B,MAAM,2BAA2B,MAAM,mGAAmG,+BAA+B,eAAe,qCAAqC,KAAK,kBAAkB,0CAA0C,eAAe,gDAAgD,eAAe,oCAAoC,KAAK,cAAc,QAAQ,MAAM,KAAK,SAAS,qBAAqB,SAAS,KAAK,cAAc,IAAI,MAAM,KAAK,SAAS,iBAAiB,KAAK,uBAAuB,4DAA4D,qBAAqB,QAAQ,MAAM,qEAAqE,GAAG,2CAA2C,KAAK,4JAA4J,4DAA4D,oCAAoC,WAAW,2DAA2D,sBAAsB,kDAAkD,sBAAsB,iCAAiC,mDAAmD,uEAAuE,qDAAqD,KAAK,eAAe,gBAAgB,yBAAyB,4EAA4E,yBAAyB,YAAY,WAAW,KAAK,iCAAiC,uBAAuB,mBAAmB,kBAAkB,IAAI,qCAAqC,GAAG,kBAAkB,gCAAgC,MAAM,2EAA2E,yBAAyB,qGAAqG,uBAAuB,YAAY,WAAW,KAAK,2BAA2B,oDAAoD,8CAA8C,kCAAkC,oCAAoC,4FAA4F,sCAAsC,KAAK,mBAAmB,YAAY,WAAW,KAAK,qFAAqF,wBAAwB,qBAAqB,UAAU,kBAAkB,iBAAiB,oBAAoB,mDAAmD,8EAA8E,uBAAuB,sDAAsD,IAAI,8BAA8B,GAAG,+KAA+K,uBAAuB,4EAA4E,qBAAqB,oCAAoC,sDAAsD,inBAAinB,OAAO,IAAI,gEAAgE,SAAS,QAAQ,+CAA+C,KAAK,MAAM,+BAA+B,eAAe,qBAAqB,yBAAyB,YAAY,wCAAwC,EAAE,eAAe,YAAY,gBAAgB,OAAO,wBAAwB,eAAe,8DAA8D,MAAM,QAAQ,GAAG,MAAM,8CAA8C,YAAY,iBAAiB,OAAO,kDAAkD,SAAS,UAAU,8BAA8B,sBAAsB,wBAAwB,QAAQ,GAAG,aAAa,aAAa,WAAW,aAAa,MAAM,gBAAgB,gCAAgC,yBAAyB,eAAe,sBAAsB,aAAa,gCAAgC,mBAAmB,MAAM,+BAA+B,IAAI,+BAA+B,oBAAoB,iCAAiC,0EAA0E,mBAAmB,+BAA+B,QAAQ,uBAAuB,YAAY,WAAW,KAAK,aAAa,mCAAmC,SAAS,SAAS,qDAAqD,qBAAqB,sBAAsB,qBAAqB,sBAAsB,iDAAiD,qBAAqB,uBAAuB,gBAAgB,OAAO,iCAAiC,OAAO,yFAAyF,0BAA0B,qEAAqE,iBAAiB,IAAI,KAAK,iBAAiB,6BAA6B,kEAAkE,YAAY,2BAA2B,KAAK,MAAM,MAAM,aAAa,IAAI,kBAAkB,GAAG,+CAA+C,wBAAwB,kGAAkG,UAAU,KAAK,MAAM,IAAI,GAAG,4CAA4C,MAAM,aAAa,cAAc,sBAAsB,wCAAwC,MAAM,uBAAuB,aAAa,8BAA8B,oBAAoB,MAAM,YAAY,mIAAmI,iDAAiD,aAAa,6BAA6B,YAAY,WAAW,KAAK,oBAAoB,sBAAsB,KAAK,aAAa,mBAAmB,aAAa,qBAAqB,yBAAyB,MAAM,gBAAgB,GAAG,aAAa,mBAAmB,YAAY,+CAA+C,oBAAoB,UAAU,EAAE,iDAAiD,oCAAoC,0BAA0B,sDAAsD,wBAAwB,GAAG,QAAQ,wCAAwC,wCAAwC,oHAAoH,uBAAuB,OAAO,mDAAmD,MAAM,QAAQ,IAAI,KAAK,iCAAiC,yBAAyB,yCAAyC,uBAAuB,QAAQ,iBAAiB,uBAAuB,KAAK,WAAW,EAAE,wCAAwC,kBAAkB,0BAA0B,KAAK,WAAW,EAAE,wCAAwC,kBAAkB,8BAA8B,QAAQ,SAAS,4BAA4B,KAAK,KAAK,iDAAiD,iBAAiB,KAAK,oBAAoB,KAAK,wBAAwB,QAAQ,KAAK,KAAK,iCAAiC,4BAA4B,UAAU,cAAc,aAAa,qBAAqB,QAAQ,IAAI,WAAW,QAAQ,KAAK,KAAK,aAAa,SAAS,YAAY,SAAS,MAAM,8BAA8B,aAAa,KAAK,+BAA+B,IAAI,MAAM,+EAA+E,sBAAsB,wBAAwB,cAAc,iBAAiB,QAAQ,IAAI,KAAK,aAAa,UAAU,2BAA2B,iBAAiB,SAAS,qBAAqB,IAAI,iCAAiC,wCAAwC,oBAAoB,KAAK,OAAO,eAAe,SAAS,MAAM,uBAAuB,KAAK,KAAK,uCAAuC,iEAAiE,sBAAsB,MAAM,gDAAgD,GAAG,gDAAgD,4CAA4C,qCAAqC,WAAW,SAAS,YAAY,WAAW,kBAAkB,4BAA4B,+BAA+B,2EAA2E,KAAK,MAAM,kCAAkC,yBAAyB,UAAU,WAAW,IAAI,eAAe,cAAc,uBAAuB,MAAM,iFAAiF,GAAG,oEAAoE,eAAe,MAAM,oEAAoE,KAAK,6CAA6C,2KAA2K,yCAAyC,yCAAyC,KAAK,QAAQ,MAAM,kCAAkC,GAAG,8BAA8B,2BAA2B,aAAa,oDAAoD,mCAAmC,MAAM,qBAAqB,gBAAgB,kBAAkB,SAAS,YAAY,MAAM,KAAK,MAAM,iBAAiB,KAAK,cAAc,MAAM,wCAAwC,GAAG,yBAAyB,WAAW,YAAY,yCAAyC,iBAAiB,4JAA4J,4BAA4B,YAAY,WAAW,oBAAoB,4GAA4G,iFAAiF,KAAK,iDAAiD,UAAU,mBAAmB,OAAO,0CAA0C,IAAI,0BAA0B,gBAAgB,sBAAsB,gCAAgC,0BAA0B,WAAW,KAAK,aAAa,WAAW,iHAAiH,6CAA6C,eAAe,0BAA0B,eAAe,MAAM,eAAe,qBAAqB,wBAAwB,8BAA8B,8CAA8C,gDAAgD,oBAAoB,kBAAkB,iBAAiB,sCAAsC,oFAAoF,YAAY,kBAAkB,sBAAsB,cAAc,kCAAkC,uBAAuB,yBAAyB,qDAAqD,eAAe,8BAA8B,iBAAiB,sCAAsC,4BAA4B,MAAM,uBAAuB,MAAM,8BAA8B,SAAS,qDAAqD,kBAAkB,UAAU,mBAAmB,oBAAoB,2CAA2C,MAAM,MAAM,yBAAyB,KAAK,IAAI,gBAAgB,GAAG,qDAAqD,mBAAmB,uFAAuF,kUAAkU,kBAAkB,MAAM,qBAAqB,aAAa,MAAM,uBAAuB,GAAG,QAAQ,qEAAqE,sBAAsB,IAAI,6BAA6B,uCAAuC,UAAU,sBAAsB,MAAM,0BAA0B,sBAAsB,YAAY,OAAO,YAAY,WAAW,KAAK,aAAa,kFAAkF,iDAAiD,cAAc,oBAAoB,oCAAoC,wBAAwB,SAAS,MAAM,MAAM,OAAO,+iBAA+iB,uBAAuB,uBAAuB,uBAAuB,4CAA4C,eAAe,2HAA2H,eAAe,2BAA2B,iBAAiB,QAAQ,MAAM,YAAY,GAAG,kBAAkB,kBAAkB,4BAA4B,cAAc,kBAAkB,sDAAsD,KAAK,YAAY,2FAA2F,cAAc,kBAAkB,+CAA+C,4BAA4B,sBAAsB,eAAe,MAAM,yFAAyF,yBAAyB,4CAA4C,UAAU,qCAAqC,MAAM,2SAA2S,2CAA2C,4JAA4J,WAAW,KAAK,aAAa,WAAW,uBAAuB,aAAa,gDAAgD,uBAAuB,aAAa,uBAAuB,yFAAyF,mBAAmB,oFAAoF,EAAE,2BAA2B,+DAA+D,EAAE,MAAM,6CAA6C,gCAAgC,6CAA6C,yBAAyB,gCAAgC,eAAe,OAAO,kBAAkB,sCAAsC,gDAAgD,SAAS,GAAG,4CAA4C,6DAA6D,gKAAgK,aAAa,2BAA2B,aAAa,uGAAuG,mCAAmC,GAAG,eAAe,mBAAmB,iCAAiC,MAAM,GAAG,8BAA8B,uBAAuB,YAAY,MAAM,mBAAmB,GAAG,8BAA8B,aAAa,2BAA2B,qBAAqB,+BAA+B,aAAa,2BAA2B,qBAAqB,YAAY,WAAW,KAAK,oBAAoB,eAAe,gBAAgB,4BAA4B,uBAAuB,YAAY,WAAW,wBAAwB,mBAAmB,oBAAoB,4CAA4C,qBAAqB,sCAAsC,qBAAqB,WAAW,QAAQ,YAAY,cAAc,cAAc,UAAU,eAAe,SAAS,aAAa,cAAc,6BAA6B,iDAAiD,KAAK,oDAAoD,iBAAiB,mBAAmB,mDAAmD,mBAAmB,GAAG,0CAA0C,oEAAoE,wEAAwE,iOAAiO,gBAAgB,8BAA8B,GAAG,cAAc,4BAA4B,8BAA8B,WAAW,wDAAwD,qHAAqH,MAAM,KAAK,IAAI,IAAI,MAAM,oEAAoE,GAAG,2BAA2B,MAAM,eAAe,aAAa,wBAAwB,mBAAmB,mBAAmB,mBAAmB,mBAAmB,KAAK,oCAAoC,oCAAoC,oDAAoD,oCAAoC,mCAAmC,cAAc,QAAQ,oJAAoJ,MAAM,IAAI,MAAM,MAAM,0BAA0B,GAAG,wBAAwB,6BAA6B,8BAA8B,mDAAmD,MAAM,GAAG,qEAAqE,IAAI,MAAM,uHAAuH,QAAQ,KAAK,SAAS,+CAA+C,8BAA8B,UAAU,SAAS,YAAY,aAAa,MAAM,UAAU,mBAAmB,oGAAoG,iBAAiB,eAAe,uIAAuI,oBAAoB,uCAAuC,eAAe,oBAAoB,QAAQ,iEAAiE,IAAI,sBAAsB,iBAAiB,MAAM,eAAe,sBAAsB,uBAAuB,IAAI,mBAAmB,4BAA4B,eAAe,YAAY,IAAI,kBAAkB,qDAAqD,KAAK,uBAAuB,sBAAsB,uBAAuB,IAAI,KAAK,aAAa,kBAAkB,UAAU,SAAS,+FAA+F,UAAU,UAAU,iBAAiB,0BAA0B,YAAY,qBAAqB,oBAAoB,yEAAyE,KAAK,iGAAiG,cAAc,wBAAwB,gBAAgB,8GAA8G,qBAAqB,2DAA2D,iFAAiF,cAAc,qBAAqB,YAAY,KAAK,EAAE,qCAAqC,cAAc,0BAA0B,mBAAmB,kCAAkC,8CAA8C,KAAK,sBAAsB,cAAc,cAAc,WAAW,uCAAuC,OAAO,YAAY,YAAY,KAAK,gBAAgB,yBAAyB,SAAS,MAAM,oEAAoE,qCAAqC,wCAAwC,gBAAgB,uGAAuG,SAAS,mCAAmC,MAAM,4BAA4B,0BAA0B,SAAS,kBAAkB,KAAK,uBAAuB,MAAM,eAAe,MAAM,SAAS,cAAc,4DAA4D,mCAAmC,IAAI,MAAM,mBAAmB,0BAA0B,wBAAwB,YAAY,oDAAoD,SAAS,mCAAmC,uCAAuC,wBAAwB,kCAAkC,SAAS,sBAAsB,gEAAgE,SAAS,4BAA4B,6BAA6B,wBAAwB,qCAAqC,oBAAoB,UAAU,eAAe,QAAQ,EAAE,aAAa,EAAE,iFAAiF,YAAY,QAAQ,EAAE,aAAa,EAAE,iBAAiB,YAAY,mBAAmB,EAAE,aAAa,EAAE,kEAAkE,SAAS,WAAW,kBAAkB,QAAQ,EAAE,UAAU,iBAAiB,gCAAgC,YAAY,mCAAmC,UAAU,6BAA6B,+CAA+C,KAAK,eAAe,oDAAoD,QAAQ,MAAM,6BAA6B,gBAAgB,kCAAkC,KAAK,8BAA8B,oDAAoD,gCAAgC,QAAQ,MAAM,mDAAmD,yDAAyD,8CAA8C,2CAA2C,4CAA4C,6BAA6B,cAAc,kCAAkC,iFAAiF,wCAAwC,oBAAoB,oBAAoB,8CAA8C,kEAAkE,wDAAwD,IAAI,OAAO,WAAW,KAAK,WAAW,qBAAqB,0BAA0B,wGAAwG,0GAA0G,KAAK,aAAa,kEAAkE,YAAY,mCAAmC,KAAK,OAAO,cAAc,uBAAuB,kBAAkB,8BAA8B,QAAQ,GAAG,mBAAmB,oBAAoB,SAAS,iCAAiC,SAAS,IAAI,aAAa,qBAAqB,oEAAoE,aAAa,sEAAsE,IAAI,kEAAkE,QAAQ,OAAO,MAAM,wCAAwC,OAAO,2BAA2B,UAAU,aAAa,KAAK,YAAY,KAAK,wBAAwB,eAAe,cAAc,YAAY,gCAAgC,6GAA6G,4CAA4C,QAAQ,OAAO,MAAM,2CAA2C,OAAO,2BAA2B,UAAU,gBAAgB,KAAK,YAAY,KAAK,wBAAwB,KAAK,eAAe,gCAAgC,oIAAoI,+CAA+C,QAAQ,OAAO,MAAM,0CAA0C,OAAO,2BAA2B,UAAU,eAAe,KAAK,YAAY,KAAK,wBAAwB,KAAK,eAAe,gCAAgC,oIAAoI,8CAA8C,QAAQ,OAAO,MAAM,0CAA0C,OAAO,2BAA2B,UAAU,eAAe,KAAK,YAAY,KAAK,wBAAwB,eAAe,eAAe,aAAa,cAAc,eAAe,eAAe,SAAS,gCAAgC,0IAA0I,8CAA8C,iBAAiB,eAAe,wDAAwD,EAAE,+BAA+B,6BAA6B,6BAA6B,sBAAsB,6BAA6B,2BAA2B,6BAA6B,4CAA4C,GAAG,aAAa,GAAG,wEAAwE,qFAAqF,QAAQ,4BAA4B,MAAM,2FAA2F,OAAO,yCAAyC,OAAO,wBAAwB,iBAAiB,wBAAwB,eAAe,wBAAwB,4BAA4B,0BAA0B,UAAU,2BAA2B,UAAU,MAAM,sEAAsE,6DAA6D,uBAAuB,2FAA2F,gBAAgB,UAAU,cAAc,KAAK,oBAAoB,KAAK,qBAAqB,gCAAgC,sBAAsB,qCAAqC,kFAAkF,wCAAwC,4EAA4E,wCAAwC,kFAAkF,sCAAsC,8EAA8E,gFAAgF,gFAAgF,kFAAkF,MAAM,iFAAiF,iLAAiL,qJAAqJ,MAAM,iFAAiF,sMAAsM,0IAA0I,6CAA6C,QAAQ,6BAA6B,MAAM,2FAA2F,OAAO,0CAA0C,OAAO,wBAAwB,iBAAiB,wBAAwB,eAAe,wBAAwB,4BAA4B,0BAA0B,UAAU,2BAA2B,UAAU,MAAM,sEAAsE,6DAA6D,uBAAuB,2FAA2F,gBAAgB,UAAU,eAAe,KAAK,oBAAoB,KAAK,qBAAqB,gCAAgC,sBAAsB,qCAAqC,kFAAkF,wCAAwC,4EAA4E,wCAAwC,kFAAkF,sCAAsC,gFAAgF,sBAAsB,IAAI,gCAAgC,MAAM,iFAAiF,+LAA+L,4MAA4M,oNAAoN,gJAAgJ,8CAA8C,UAAU,sBAAsB,MAAM,2FAA2F,OAAO,kIAAkI,OAAO,wBAAwB,iBAAiB,wBAAwB,eAAe,wBAAwB,4BAA4B,0BAA0B,UAAU,2BAA2B,aAAa,kBAAkB,cAAc,sGAAsG,kFAAkF,8IAA8I,oDAAoD,8BAA8B,2EAA2E,8BAA8B,0EAA0E,8BAA8B,0EAA0E,8BAA8B,yEAAyE,oLAAoL,yJAAyJ,oLAAoL,uHAAuH,wCAAwC,wBAAwB,8DAA8D,EAAE,gBAAgB,IAAI,gOAAgO,kBAAkB,iBAAiB,uGAAuG,YAA+C;;;;;;;;;;;;ACA7xpD,IAAMA,cAAc,GAAG;AACnBC,MAAI,EAAE,eADa;AAEnBC,OAAK,EAAE,gBAFY;AAGnBC,KAAG,EAAE,cAHc;AAInBC,YAAU,EAAE,qBAJO;AAKnBC,UAAQ,EAAE,mBALS;AAMnBC,UAAQ,EAAE,mBANS;AAOnBC,SAAO,EAAE,kBAPU;AAQnBC,SAAO,EAAE,kBARU;AASnBC,SAAO,EAAE,kBATU;AAUnBC,aAAW,EAAE,sBAVM;AAWnBC,OAAK,EAAE,gBAXY;AAYnBC,OAAK,EAAE,gBAZY;AAanBC,UAAQ,EAAE,mBAbS;AAcnBC,WAAS,EAAE,oBAdQ;AAenBC,UAAQ,EAAE,mBAfS;AAgBnBC,UAAQ,EAAE,mBAhBS;AAiBnBC,QAAM,EAAE,iBAjBW;AAkBnBC,UAAQ,EAAE,mBAlBS;AAmBnBC,WAAS,EAAE,oBAnBQ;AAoBnBC,MAAI,EAAE,eApBa;AAqBnBC,SAAO,EAAE,kBArBU;AAuBnB;AACAC,OAAK,EAAE,eAxBY;AAyBnBC,OAAK,EAAE,eAzBY;AA0BnBC,WAAS,EAAE,gBA1BQ;AA2BnBC,YAAU,EAAE;AA3BO,CAAvB;AA8BA,IAAMC,UAAU,GAAG;AACfC,MAAI,EAAE,WADS;AAEfC,KAAG,EAAE,UAFU;AAGfC,KAAG,EAAE,UAHU;AAIfC,SAAO,EAAE,cAJM;AAKfC,OAAK,EAAE,YALQ;AAMfC,KAAG,EAAE,UANU;AAOfC,MAAI,EAAE,WAPS;AAQfC,SAAO,EAAE,cARM;AASfC,OAAK,EAAE,YATQ;AAUfC,OAAK,EAAE,YAVQ;AAWfC,QAAM,EAAE,aAXO;AAYfhC,UAAQ,EAAE,eAZK;AAafiC,QAAM,EAAE,aAbO;AAcfC,SAAO,EAAE,cAdM;AAefC,aAAW,EAAE,kBAfE;AAgBfC,eAAa,EAAE,oBAhBA;AAiBfC,OAAK,EAAE,YAjBQ;AAkBfC,SAAO,EAAE,cAlBM;AAmBfC,cAAY,EAAE,mBAnBC;AAoBfC,YAAU,EAAE,iBApBG;AAqBfC,UAAQ,EAAE,eArBK;AAsBfC,QAAM,EAAE;AAtBO,CAAnB;AAwBA,IAAMC,iBAAiB,GAAG;AAEtBC,QAAM,EAAE,iBAFc;AAGtBC,OAAK,EAAE,gBAHe;AAItBC,OAAK,EAAE,gBAJe;AAKtBC,UAAQ,EAAE,mBALY;AAMtBC,YAAU,EAAE,qBANU;AAQtB;AACAC,SAAO,EAAE,iBATa;AAUtBC,SAAO,EAAE,iBAVa;AAWtBC,SAAO,EAAE;AAXa,CAA1B;AAaA,IAAMC,aAAa,GAAG;AAClBC,OAAK,EAAE,YADW;AAElBC,QAAM,EAAE,aAFU;AAGlBC,WAAS,EAAE,gBAHO;AAIlBC,SAAO,EAAE,cAJS;AAKlBC,YAAU,EAAE,iBALM;AAMlBC,SAAO,EAAE,cANS;AAOlBC,OAAK,EAAE,YAPW;AASlBC,WAAS,EAAE,gBATO;AAUlBC,SAAO,EAAE,cAVS;AAWlBC,QAAM,EAAE,aAXU;AAYlBC,SAAO,EAAE;AAZS,CAAtB;AAeA,IAAMC,sBAAsB,GAAG,EAA/B;AACA,IAAMC,kBAAkB,GAAG,EAA3B;AACA,IAAMC,qBAAqB,GAAG,EAA9B;AACA,IAAMC,yBAAyB,GAAG,EAAlC;AAEA,IAAMC,qBAAqB,GAAG;AAC1B,iBAAe,KADW;AAE1B,oBAAkB;AAFQ,CAA9B,C,CAKA;AACA;;AACA,IAAMC,OAAO,GAAG,CAAC,UAAD,EAAa,UAAb,EAAyB,WAAzB,CAAhB;AACA,IAAMC,mBAAmB,aAClBD,OADkB,GACT,MADS,EACD,aADC,EAErB,MAFqB,CAEb;AAFa,EAAzB,C,CAKA;;AACA,IAAME,oBAAoB,GAAG,CACzB,OADyB,EAChB,OADgB,EACP,WADO,EACM,YADN,EAEzB,SAFyB,EAEd,SAFc,EAEH,SAFG,CAA7B;;AAKA,SAASC,gBAAT,CAA0B7C,GAA1B,EAA+B8C,UAA/B,EAA2C;AACvCC,QAAM,CAACC,IAAP,CAAYhD,GAAZ,EAAiBiD,OAAjB,CAAyB,UAAAC,GAAG,EAAI;AAC5B;AACA,QAAIN,oBAAoB,CAACO,QAArB,CAA8BD,GAA9B,CAAJ,EAAwC;AACpC;AACH;;AACDJ,cAAU,CAAC9C,GAAG,CAACkD,GAAD,CAAJ,CAAV,GAAuBA,GAAvB;AACH,GAND;AAOH;;AAEDL,gBAAgB,CAAC7E,cAAD,EAAiBqE,sBAAjB,CAAhB;AACAQ,gBAAgB,CAACnD,UAAD,EAAa4C,kBAAb,CAAhB;AACAO,gBAAgB,CAAC7B,iBAAD,EAAoBwB,yBAApB,CAAhB;AACAK,gBAAgB,CAACpB,aAAD,EAAgBc,qBAAhB,CAAhB;;AAEAa,0BAAA,GAA6B,SAASC,WAAT,CAAqBC,MAArB,EAA6B;AACtD,MAAIC,IAAI,GAAG,EAAX;;AACA,MAAID,MAAM,CAACE,OAAX,EAAoB;AAEhB;AACAF,UAAM,CAACE,OAAP,CAAeP,OAAf,CAAuB,UAACQ,GAAD,EAAS;AAC5BF,UAAI,GAAGA,IAAI,CAACG,MAAL,CAAYL,WAAW,CAACI,GAAD,CAAvB,CAAP;AACH,KAFD;;AAIA,QAAIH,MAAM,CAACK,UAAX,EAAuB;AACnBJ,UAAI,GAAGA,IAAI,CAACG,MAAL,CAAYL,WAAW,CAACC,MAAM,CAACK,UAAR,CAAvB,CAAP;AACH,KATe,CAWhB;;;AACA,WAAOC,KAAK,CAACC,IAAN,CAAW,IAAIC,GAAJ,CAAQP,IAAR,CAAX,CAAP;AACH;;AAEDR,QAAM,CAACC,IAAP,CAAYM,MAAZ,EAAoBL,OAApB,CAA4B,UAACC,GAAD,EAAS;AACjC,QAAIP,mBAAmB,CAACQ,QAApB,CAA6BD,GAA7B,CAAJ,EAAuC;AACnC;AACH;;AACD,QAAMa,GAAG,GAAGT,MAAM,CAACJ,GAAD,CAAlB;;AAEA,QAAIU,KAAK,CAACI,OAAN,CAAcD,GAAd,KAAsB,CAACA,GAAG,CAACE,MAA/B,EAAuC;AACnC;AACH;;AAED,QAAIjG,cAAc,CAACkF,GAAD,CAAlB,EAAyB;AACrBK,UAAI,CAACW,IAAL,CAAUlG,cAAc,CAACkF,GAAD,CAAxB;AACH;;AACD,QAAIlC,iBAAiB,CAACkC,GAAD,CAArB,EAA4B;AACxBK,UAAI,CAACW,IAAL,CAAUlD,iBAAiB,CAACkC,GAAD,CAA3B;AACH;AACJ,GAhBD;AAkBA,MAAIiB,MAAM,GAAGb,MAAM,CAACa,MAApB;;AACA,MAAI,CAACP,KAAK,CAACI,OAAN,CAAcG,MAAd,CAAL,EAA4B;AACxBA,UAAM,GAAG,CAACA,MAAD,CAAT;AACH;;AAEDA,QAAM,CAAClB,OAAP,CAAe,UAACmB,SAAD,EAAe;AAC1B,QAAI1E,UAAU,CAAC0E,SAAS,CAACC,IAAX,CAAd,EAAgC;AAC5Bd,UAAI,CAACW,IAAL,CAAUxE,UAAU,CAAC0E,SAAS,CAACC,IAAX,CAApB;AACH;;AACD,QAAI5C,aAAa,CAAC2C,SAAS,CAACC,IAAX,CAAjB,EAAmC;AAC/Bd,UAAI,CAACW,IAAL,CAAUzC,aAAa,CAAC2C,SAAS,CAACC,IAAX,CAAvB;AACH;;AACD,QAAID,SAAS,CAACC,IAAV,KAAmB,KAAvB,EAA8B;AAC1B;AACAd,UAAI,CAACW,IAAL,CAAUlG,cAAc,CAACG,GAAzB;AACH;;AACDuE,WAAO,CAACO,OAAR,CAAgB,UAAAqB,UAAU,EAAI;AAC1B,UAAIF,SAAS,CAACE,UAAD,CAAb,EAA2B;AACvBf,YAAI,CAACW,IAAL,CAAUlG,cAAc,CAACsG,UAAD,CAAxB;AACH;AACJ,KAJD;AAKH,GAhBD,EAxCsD,CA0DtD;;AACA,SAAOV,KAAK,CAACC,IAAN,CAAW,IAAIC,GAAJ,CAAQP,IAAR,CAAX,CAAP;AACH,CA5DD;;AA8DA,SAASgB,sBAAT,CAAgChB,IAAhC,EAAsCiB,WAAtC,EAAmD;AAC/C,MAAMC,aAAa,GAAG,EAAtB;AACA,MAAMC,iBAAiB,GAAG,EAA1B;AACA,MAAMC,eAAe,GAAG,EAAxB;AACA,MAAMC,mBAAmB,GAAG,EAA5B;AACA,MAAMC,gBAAgB,GAAG,EAAzB;AACAtB,MAAI,CAACN,OAAL,CAAa,UAAU6B,GAAV,EAAe;AACxB,QAAIA,GAAG,CAACC,QAAJ,CAAa,UAAb,CAAJ,EAA8B;AAC1BF,sBAAgB,CAACX,IAAjB,CAAsBY,GAAtB;AACH,KAFD,MAGK,IAAIxC,kBAAkB,CAACwC,GAAD,CAAtB,EAA6B;AAC9BL,mBAAa,CAACP,IAAd,CAAmBY,GAAnB;;AACA,UAAIN,WAAJ,EAAiB;AACbC,qBAAa,CAACP,IAAd,CAAmBY,GAAG,CAACE,OAAJ,CAAY,QAAZ,EAAsB,cAAtB,CAAnB;AACH;AACJ,KALI,MAMA,IAAI3C,sBAAsB,CAACyC,GAAD,CAA1B,EAAiC;AAClCJ,uBAAiB,CAACR,IAAlB,CAAuBY,GAAvB;;AACA,UAAIN,WAAJ,EAAiB;AACbE,yBAAiB,CAACR,IAAlB,CAAuBY,GAAG,CAACE,OAAJ,CAAY,YAAZ,EAA0B,iBAA1B,CAAvB;AACH;AACJ,KALI,MAMA,IAAIzC,qBAAqB,CAACuC,GAAD,CAAzB,EAAgC;AACjCH,qBAAe,CAACT,IAAhB,CAAqBY,GAArB;AACH,KAFI,MAGA,IAAItC,yBAAyB,CAACsC,GAAD,CAA7B,EAAoC;AACrCF,yBAAmB,CAACV,IAApB,CAAyBY,GAAzB;AACH;AACJ,GAtBD;;AAwBA,WAASG,kBAAT,CAA4BC,OAA5B,EAAqC;AACjC,qBAAUA,OAAO,CAAClF,GAAR,CAAY,UAAAmF,GAAG;AAAA,6BAC3BA,GAD2B;AAAA,KAAf,EACLC,IADK,CACA,GADA,CAAV;AAEH;;AAED,MAAMC,UAAU,aACTX,iBADS,EAETD,aAFS,EAGTG,mBAHS,EAITD,eAJS,EAKTE,gBALS,CAAhB;AAQA,MAAMS,gBAAgB,2DAEpBD,UAAU,CAACE,MAAX,CAAkB,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAACT,QAAF,CAAW,QAAX,CAAJ;AAAA,GAAnB,EAA6CK,IAA7C,CAAkD,KAAlD,CAFoB,QAAtB;AAIA,MAAMK,YAAY,GAAG,CACjB,CAACf,iBAAD,EAAoB,oBAApB,CADiB,EAEjB,CAACD,aAAD,EAAgB,gBAAhB,CAFiB,EAGjB,CAACI,gBAAD,EAAmB,mBAAnB,CAHiB,EAIjB,CAACF,eAAD,EAAkB,mBAAlB,CAJiB,EAKjB,CAACC,mBAAD,EAAsB,uBAAtB,CALiB,EAMnBW,MANmB,CAMZ,UAAAC,CAAC;AAAA,WAAIA,CAAC,CAAC,CAAD,CAAD,CAAKvB,MAAL,GAAc,CAAlB;AAAA,GANW,EAMUjE,GANV,CAMc,UAAA0F,IAAI;AAAA,WAAI,oBACrCT,kBAAkB,CAACS,IAAI,CAAC,CAAD,CAAL,CADmB,uBAErCA,IAAI,CAAC,CAAD,CAFiC,cAGzCC,IAHyC,EAAJ;AAAA,GANlB,EASXP,IATW,CASN,IATM,CAArB;AAWA,SAAO,oDACTK,YADS,oCAIJJ,UAAU,CAACE,MAAX,CAAkB,UAAAC,CAAC;AAAA,WAAI,CAACA,CAAC,CAACT,QAAF,CAAW,QAAX,CAAL;AAAA,GAAnB,EAA8CK,IAA9C,CAAmD,IAAnD,CAJI,gBAMNZ,WAAW,GAAGc,gBAAH,GAAsB,EAN3B,CAAP;AAOH;;AAEDlC,qCAAA,GAAwCmB,sBAAxC;;AAEA,SAASqB,4BAAT,CAAsCrC,IAAtC,EAA4CsC,KAA5C,EAAmD;AAC/C,MAAMC,OAAO,GAAG,EAAhB;AACAvC,MAAI,CAACN,OAAL,CAAa,UAAU6B,GAAV,EAAe;AACxB,QAAIA,GAAG,CAACC,QAAJ,CAAa,UAAb,KAA4BD,GAAG,KAAK,gBAAxC,EAA0D;AACtDgB,aAAO,CAAC5B,IAAR,uBAA4BzB,qBAAqB,CAACqC,GAAD,CAAjD,cAA0DrC,qBAAqB,CAACqC,GAAD,CAA/E;AACH,KAFD,MAGK,IAAIxC,kBAAkB,CAACwC,GAAD,CAAtB,EAA6B;AAC9BgB,aAAO,CAAC5B,IAAR,6BAAkC5B,kBAAkB,CAACwC,GAAD,CAApD;AACH,KAFI,MAGA,IAAIzC,sBAAsB,CAACyC,GAAD,CAA1B,EAAiC;AAClCgB,aAAO,CAAC5B,IAAR,iCAAsC7B,sBAAsB,CAACyC,GAAD,CAA5D;AACH,KAFI,MAGA,IAAIvC,qBAAqB,CAACuC,GAAD,CAAzB,EAAgC;AACjCgB,aAAO,CAAC5B,IAAR,gCAAqC3B,qBAAqB,CAACuC,GAAD,CAA1D;AACH,KAFI,MAGA,IAAItC,yBAAyB,CAACsC,GAAD,CAA7B,EAAoC;AACrCgB,aAAO,CAAC5B,IAAR,oCAAyC1B,yBAAyB,CAACsC,GAAD,CAAlE;AACH;AACJ,GAhBD;AAkBA,SAAOe,KAAK,8DACdC,OAAO,CAAC9F,GAAR,CAAY,UAAA+F,GAAG,EAAI;AACjB,6BAAkBA,GAAlB;AACH,GAFC,EAECX,IAFD,CAEM,IAFN,CADc,qEAKdU,OAAO,CAAC9F,GAAR,CAAY,UAAA+F,GAAG,EAAI;AACjB,8BAAmBA,GAAnB;AACH,GAFC,EAECX,IAFD,CAEM,IAFN,CALc,OAAZ;AASH;;AAED,SAASY,WAAT,CAAqBzC,IAArB,EAA2B;AACvB,SAAO,CAAC,CAACA,IAAI,CAAC0C,IAAL,CAAU,UAAAnB,GAAG;AAAA,WAAI,CAAC,EAAEvC,qBAAqB,CAACuC,GAAD,CAArB,IAA8BtC,yBAAyB,CAACsC,GAAD,CAAzD,CAAL;AAAA,GAAb,CAAT;AACH;;AAED1B,MAAM,CAACwC,4BAAP,GAAsCA,4BAAtC;;AAEAxC,+BAAA,GAAkC,UAC9B8C,MAD8B,EACtB3C,IADsB,QAqBhC;AAAA,MAlBM4C,OAkBN,QAlBMA,OAkBN;AAAA,sBAfMC,GAeN;AAAA,MAfMA,GAeN,yBAfY,IAeZ;AAAA,MAXMC,MAWN,QAXMA,MAWN;AAAA,MATMC,EASN,QATMA,EASN;AAAA,MAPMC,KAON,QAPMA,KAON;AAAA,MANMC,SAMN,QANMA,SAMN;AAAA,MAFMC,YAEN,QAFMA,YAEN;;AACE;AACA;AACA;AACA;AAEA,MAAIH,EAAJ,EAAQ;AACJF,OAAG,GAAG,IAAN;AACH;;AAED,MAAID,OAAO,IAAI,CAACC,GAAhB,EAAqB;AACjB;AACAC,UAAM,GAAG,IAAT;AACH;;AAGD,MAAMK,SAAS,GAAGR,MAAM,CAACS,OAAP,CAAe,QAAf,KAA4B,CAA9C;AACA,MAAMC,YAAY,GAAGV,MAAM,CAACS,OAAP,CAAe,WAAf,KAA+B,CAApD;AACA,MAAME,OAAO,GAAGX,MAAM,CAACS,OAAP,CAAe,KAAf,KAAyB,CAAzC;AAEA,MAAMG,QAAQ,eAChBJ,SAAS,GACPN,GAAG,iFADI,GAGL,EAJY,OAAd;AAOA,MAAMW,WAAW,GAAG,CAChB,CAACZ,OAAD,GACMC,GAAG,gDACuCJ,WAAW,CAACzC,IAAD,CAAX,8BAA+C,EADtF,+CAEqCyC,WAAW,CAACzC,IAAD,CAAX,gCAAiD,EAFtF,CADT,GAIM8C,MAAM,GACFT,4BAA4B,CAACrC,IAAD,EAAO6C,GAAP,CAD1B,GAEF7B,sBAAsB,CAAChB,IAAD,EAAO+C,EAAP,CAPhB,EAQfC,KAAK,IAAIA,KAAK,KAAK,MAApB,GACMH,GAAG,mCAC0BG,KAD1B,0CAE2BA,KAF3B,OADT,GAIM,EAZU,EAahBE,YAbgB,EAclBlB,MAdkB,CAcX,UAAAC,CAAC;AAAA,WAAI,CAAC,CAACA,CAAN;AAAA,GAdU,EAcDJ,IAdC,CAcI,IAdJ,CAApB;AAgBA,MAAM4B,QAAQ,GAAG,CACbJ,YAAY,8BAAuBJ,SAAvB,UAAuC,EADtC,EAEbK,OAAO,oBAAaP,EAAE,GAAG,OAAH,GAAa,EAA5B,cAAyC,EAFnC,EAGbA,EAAE,IAAI,CAACH,OAAP,GAAiB,uCAAjB,GAA2D,EAH9C,EAIfZ,MAJe,CAIR,UAAAC,CAAC;AAAA,WAAI,CAAC,CAACA,CAAN;AAAA,GAJO,EAIEJ,IAJF,CAIO,IAJP,CAAjB;AAMA,MAAM6B,YAAY,GAAG,CACjBF,WAAW,CAACpB,IAAZ,EADiB,EACGmB,QAAQ,CAACnB,IAAT,EADH,EACoBqB,QAAQ,CAACrB,IAAT,EADpB,EAEnBJ,MAFmB,CAEZ,UAAAC,CAAC;AAAA,WAAI,CAAC,CAACA,CAAN;AAAA,GAFW,EAEFJ,IAFE,CAEG,MAFH,CAArB;AAIA,mBAAU6B,YAAV,+DAE4CX,EAAE,GAAG,GAAH,GAAS,EAFvD,mDAGiCC,KAAK,gBAASA,KAAT,SAAoB,EAH1D,2BAIQD,EAAE,GAAG,YAAH,GAAkB,EAJ5B,kBAMFJ,MAAM,CAACP,IAAP,EANE;AAUH,CApFD,C;;;;;;;;;;;;;;;;;;;;;;;AC3RA;AACA;AACA;AACA;;AAEA;AACA;AACA,6EACA,0EADA,EAEA,yFAFA,GAGA,IAHA,CAGA;AACA;;AAEA;AACA;AACA;AACA,+BADA;AAEA,6BAFA;AAGA,8BAHA;AAIA;AAJA;AAMA,OAPA;AASA;AACA;AACA;AACA;AAHA;AAKA,KArBA;AAsBA;;AACA;AACA;;AAEA;AAEA,wBAFA;AAIA,MAJA,kBAIA;AACA;AACA,8DADA;AAEA;AAFA;AAIA,GATA;AAWA,SAXA,qBAWA;AAAA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uCADA;AAEA,4BAFA;AAGA;AAHA;AAMA;AAEA;AACA,sEACA,4EADA;AAEA,OAHA;;AAKA;AACA;AACA;AACA,KApBA;AAqBA,GAlCA;AAoCA;AACA,kBADA,0BACA,IADA,EACA;AACA;AACA;;AACA;AACA;AACA,kBADA;AAEA;AAFA,WADA;AAIA;AACA,kBADA;AAEA;AAFA;AAJA;AASA;AACA;AAdA,GApCA;AAqDA;AACA,eADA,uBACA,MADA,EACA;AACA;AACA;AAHA;AArDA,G;;;;;;;;;;;;;;;;;;;;;;;;ACjCA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AADA,KAEA,IAFA,CAEA;AAAA;AAAA,GAFA,EAEA,IAFA,CAEA;AAEA;AACA;AACA,iCADA;AAEA;AAFA,OAHA,CAQA;;AACA;AACA,0DADA;AAEA,gCAFA;AAGA;AAHA,OATA,CAeA;;AACA,+DACA,IADA,EAEA;AACA,oDAHA;AAMA,woBAyBA,sBAzBA;AA2BA;AACA,GApDA;AAqDA;;AAEA;AACA;AACA;AACA,+EACA,gFADA,EAEA;AACA,qGAHA,GAIA,IAJA,CAIA;AACA;AAAA;AAAA;AAAA;AAAA;;AACA;AACA,0BACA,uBADA,GAEA;AACA;AACA;AACA,aAFA;AAGA,WANA;AAOA,SARA;AASA,OAfA;AAgBA;;AACA;AACA,GArBA,CAuBA;;;AACA;AACA;;AAEA;AAEA,wBAFA;AAIA,MAJA,kBAIA;AACA;AACA,8DADA;AAEA;AAFA;AAIA,GATA;AAWA,SAXA,qBAWA;AAAA;;AACA;AACA;AACA;AACA,4CACA,uBADA,EAEA,YAFA,EAGA;AACA,yCAJA;AAMA;AACA,oBADA;AAEA,gGAFA;AAGA;AACA;AADA,SAHA;AAMA;AANA;AASA;;AAEA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA,OAHA;AAIA,KA3BA;AA4BA,GAzCA;AA2CA,WA3CA,uBA2CA;AACA;AACA;;AACA;AACA;AACA,GAhDA;AAkDA;AACA,kBADA,0BACA,IADA,EACA;AACA;AACA;AACA;AACA;AALA,GAlDA;AA0DA;AACA,eADA,uBACA,MADA,EACA;AACA;AACA;AAHA;AA1DA,G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA,8DADA;AAEA,oEAFA;AAGA,8EAHA;AAIA;AAJA,GADA;AAQA,MARA,kBAQA;AACA;AACA,sBADA;AAEA,2BAFA;AAGA,uBAHA;AAIA,8DAJA;AAKA,qBALA;AAOA,+BAPA;AASA,kBATA;AAWA;AACA,sBADA;AAEA,iBAFA;AAGA,mBAHA,CAGA;;AAHA;AAXA;AAiBA,GA1BA;AA4BA;AACA,eADA,yBACA;AACA;AACA;AAEA;AACA;AACA;;AACA;AACA;;AACA;AACA;AACA;AACA;;AACA;AACA;AAfA,GA5BA;AA8CA,SA9CA,qBA8CA;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAHA;AAIA,KANA,MAOA;AACA;AACA;AACA;AACA,OAHA;AAKA;AACA;AACA;AACA;AACA;AACA;AACA,OANA;AAQA;AACA;AACA,OAFA;AAGA;AACA,GAzEA;AA2EA;AACA,uBADA,iCACA;AACA;AACA,KAHA;AAIA,iBAJA,2BAIA;AACA;AACA,KANA;AAOA,kBAPA,4BAOA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;AACA,4CADA;AAEA,iBAFA;AAGA,oCAHA;AAIA;AACA,sFALA;AAMA;AANA;AAQA,KAtBA;AAuBA,uBAvBA,iCAuBA;AACA;;AACA;AACA;AACA;;AACA,qEACA,MADA,EAEA,yCAFA,EAGA;AACA,eADA,mBACA,MADA,EACA,IADA,EACA;AACA;AACA;AACA;AACA;;AACA;AACA,WALA;AAMA,SARA;AASA,iCATA,qCASA,IATA,EASA;AACA,sCACA,wCADA;AAEA;AAZA,OAHA;AAkBA,KA9CA;AA+CA,oBA/CA,4BA+CA,GA/CA,EA+CA;AACA;AACA;AACA,OAFA,MAGA;AACA;AACA;AACA;AAtDA,GA3EA;AAoIA;AACA,sBADA,2BACA,eADA,EACA;AACA;AACA;AACA;AACA,KALA;AAMA,gBANA,sBAMA,GANA,EAMA;AACA;AACA,KARA;AASA,oBATA,2BASA;AACA;AACA,KAXA;AAYA;AACA,gBADA;AAEA,aAFA,qBAEA;AACA;AACA;AAJA;AAZA;AApIA,G;;;;;;;;;;;;;;;;;;;;;;ACxEA;AACA;AACA;;AAEA;AACA;AACA,6EACA,0EADA;AAGA;;AACA;AACA;;AAEA;AAEA,iBAFA;AAIA,MAJA,kBAIA;AACA;AACA,8DADA;AAEA;AAFA;AAIA,GATA;AAWA,SAXA,qBAWA;AAAA;;AACA;AACA;AACA;AACA;AACA,yDAHA,CAIA;;AACA;AACA,sBADA;AAEA,8BAFA;AAGA,8BAHA;AAIA,kCAJA;AAKA;AALA,SALA,CAYA;;AACA;AAEA;;AAEA;AAEA,KAnBA;AAoBA,GAjCA;AAmCA;AACA,WADA,mBACA,IADA,EACA;AACA;AACA;;AACA;AACA;AACA,kBADA;AAEA;AAFA,WADA;AAIA;AACA,kBADA;AAEA;AAFA;AAJA;AASA;AACA;AAdA,GAnCA;AAoDA;AACA,QADA,gBACA,MADA,EACA;AACA;AACA;AAHA;AApDA,G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AAEA,+DAFA,CAIA;;AACA;AACA;AACA;AACA;;AAEA,6EACA,mEADA,EAEA,oEACA,yEADA,GACA,oEAHA,EAIA,kGAJA,EAKA,4DALA,EAMA,wEANA,4BAOA,yIAPA,sBAQA,WACA,0GADA,EAEA,8FAFA,IAGA,EAXA,IAYA,IAZA,CAYA;AACA;AACA,KAdA;AAeA;;AACA;AACA;;AAGA;AACA;AACA;AACA;;AACA;AACA;AACA;;AAGA;AAAA;;AAEA;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA,OAFA,MAGA;AACA;AACA;AACA,KARA;AASA;;AAEA;AACA;AAEA,uDAHA,CAKA;;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;AADA;AAGA;AACA;AACA;AACA,KAlBA,CAoBA;;;AACA;AAEA,GAvBA,CAwBA;AACA;AACA;AACA;AACA;;AAGA;AAEA,qBAFA;AAIA,MAJA,kBAIA;AACA;AACA,8DADA;AAEA,8BAFA;AAGA,yBAHA;AAIA,mBAJA;AAKA,oBALA;AAOA;AAPA;AASA,GAdA;AAgBA,SAhBA,qBAgBA;AAAA;;AACA;AACA;AACA;;AACA;AACA;AACA;AACA,KALA;AAOA;AACA;AACA;AACA;AACA,KAJA;AAKA,GA9BA;AAgCA;AACA,YADA,sBACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AAVA,GAhCA;AA6CA;AACA,oBADA,yBACA,GADA,EACA;AACA;AACA;AACA;AACA;AACA,SAHA,MAIA;AACA;AACA;AACA;AACA,KAXA;AAYA,qBAZA,4BAYA;AACA;AACA,KAdA;AAeA,qBAfA,4BAeA;AACA;AACA,KAjBA;AAkBA,wBAlBA,+BAkBA;AACA;AACA,KApBA;AAqBA,yBArBA,gCAqBA;AACA;AACA;AAvBA,GA7CA;AAuEA;AACA,YADA;AAEA;AACA;AACA,cAJA,wBAIA;AACA;AACA;AACA,KAPA;AAQA,WARA,qBAQA;AACA;AACA;AACA;AACA,KAZA;AAaA,mBAbA,6BAaA;AACA;AACA,KAfA;AAgBA,cAhBA,wBAgBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBADA;AAEA;AAFA;AAIA;AACA;AACA,KA7BA;AA8BA,aA9BA,uBA8BA;AACA;AACA,KAhCA,CAiCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAzCA;AAvEA,G;;;;;;;;;;;;;;;;;;;;;AC/KA;AACA;AAEA;AACA;AACA;AADA,GADA;AAKA,SALA,qBAKA;AACA;AACA;AACA,KAFA;AAGA;AATA,G;;;;;;;;;;;;;;;;;;;;;;;;;;;ACGA;AACA;AAEA;AACA,oBADA;AAGA;AAEA,SAFA,mBAEA;AACA,+HACA,kBADA,IACA,EADA;AAEA,KALA;AAOA,gBAPA,0BAOA;AACA;AACA,KATA;AAWA,YAXA,sBAWA;AACA;AACA,KAbA;AAeA,gBAfA,0BAeA;AACA;AACA;AACA,KAlBA;AAoBA,eApBA,yBAoBA;AACA;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA,KArCA;AAuCA,iBAvCA,2BAuCA;AACA;AACA;AACA;AACA;AACA;AACA;AA7CA;AAHA,G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC0CA;AACA;AACA;AACA;AACA;CAEA;;AAEA;AAEA,qEACA,OADA,EACA,SADA,EACA,UADA,EACA,QADA,EACA,aADA,EACA,SADA,EACA,SADA,EAEA,cAFA,EAEA,YAFA,EAEA,UAFA,EAEA,QAFA,EAEA,UAFA,EAEA,MAFA,EAEA,SAFA,EAEA,KAFA,EAEA,OAFA,EAGA,UAHA,EAGA,MAHA,EAGA,MAHA,EAIA,OAJA,CAIA;AACA;AACA,CANA;;AAQA;;AACA,yEACA,WADA,EACA,SADA,EACA,QADA,EACA,SADA,EACA,OADA,EACA,OADA,CACA;AACA;AACA,CAHA;AAKA;AAEA;AAEA;AACA;AADA,GAFA;AAMA,MANA,kBAMA;AACA;;AAEA;AACA,4BADA,CAEA;;AACA;AACA;;AACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;;AAEA;;AACA;AACA;AACA;;AACA;AACA;AACA,qCADA;AAEA;AAFA;AAIA;AACA;;AACA;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,OA/BA,QA+BA,oCA/BA,EAHA,CAkCA;;AACA;;AAEA;AACA;AAEA;AACA,8DADA;AAGA,kBAHA;AAKA,wFALA;AAMA;AACA;AACA;AACA;AACA;AACA;AAXA;AAaA,GA9DA;AAgEA;AACA,qBADA,4BACA;AACA;;AACA;AACA;AACA;AACA;AACA;;AACA;AACA;AATA,GAhEA;AA4EA;AACA,eADA,yBACA;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA,8BADA;AAEA;AAFA;AAIA;AACA;;AACA;AACA;AAdA,GA5EA;AA6FA,SA7FA,qBA6FA;AACA;AACA;AACA;AACA,yCAHA;AAIA,qBAJA;AAKA;AALA;AAOA,GArGA;AAuGA;AACA,sBADA,8BACA,KADA,EACA,WADA,EACA,cADA,EACA,CACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAXA;AAvGA,G;;;;;;;;;;;;;;;;;;;;AClFO,IAAMuB,kBAAkB,GAAG,CAC9B,MAD8B,EAE9B,KAF8B,EAG9B,KAH8B,EAI9B,SAJ8B,EAK9B,KAL8B,EAM9B,aAN8B,EAO9B,OAP8B,EAQ9B,SAR8B,EAS9B,SAT8B,EAU9B,OAV8B,EAW9B,OAX8B,EAY9B,MAZ8B,EAa9B,SAb8B,EAc9B,UAd8B,EAe9B,UAf8B,EAgB9B,QAhB8B,EAiB9B,QAjB8B,EAkB9B,OAlB8B,EAmB9B,cAnB8B,EAoB9B,YApB8B,EAqB9B,UArB8B,EAsB9B,QAtB8B,EAwB9B,SAxB8B,EAyB9B,UAzB8B,EA0B9B,MA1B8B,EA2B9B,MA3B8B,EA6B9B,OA7B8B,EA8B9B,OA9B8B,EA+B9B,WA/B8B,EAgC9B,SAhC8B,EAiC9B,OAjC8B,EAkC9B,SAlC8B,EAmC9B,QAnC8B,EAoC9B,WApC8B,EAqC9B,SArC8B,EAsC9B,QAtC8B,EAuC9B,SAvC8B,CAA3B;AA0CA,IAAMC,MAAM,GAAG;AAClB,aAAS,CACL,SADK,EAEL,SAFK,EAGL,SAHK,EAIL,SAJK,EAKL,SALK,EAML,SANK,EAOL,SAPK,EAQL,SARK,EASL,SATK,CADS;AAYlBC,MAAI,EAAE,CACF,SADE,EAEF,SAFE,EAGF,SAHE,EAIF,SAJE,EAKF,SALE,EAMF,SANE,EAOF,SAPE,EAQF,SARE,EASF,SATE;AAZY,CAAf;AAyBA,IAAMC,SAAS,GAAI,UAAUC,IAAV,EAAgB;AACtC,MAAMtH,GAAG,GAAG,EAAZ;;AACA,OAAK,IAAIuH,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,IAAI,CAACrD,MAAzB,EAAiCsD,CAAC,EAAlC,EAAsC;AAClCvH,OAAG,CAACsH,IAAI,CAACC,CAAD,CAAL,CAAH,GAAe,CAAf;AACH;;AACD,SAAOC,QAAQ,CAACC,IAAT,CAAcd,OAAd,CAAsB,WAAtB,KAAsC,CAAtC,GAA0C,EAA1C,GAA+C3G,GAAtD;AACH,CANwB,CAMtB,CACC,mBADD,EAEC,WAFD,EAGC,iBAHD,EAIC,aAJD,EAKC,eALD,EAMC,WAND,EAOC,qBAPD,EAQC,YARD,EASC,YATD,EAUC,cAVD,EAWC,WAXD,EAYC,qBAZD,EAaC,aAbD,EAcC,mBAdD,EAeC,eAfD,EAgBC,0BAhBD,EAiBC,OAjBD,EAkBC,6BAlBD,EAmBC,wBAnBD,EAoBC,4BApBD,EAqBC,2BArBD,EAsBC,gBAtBD,EAuBC,iBAvBD,CANsB,CAAlB;AAiCP,IAAM0H,UAAU,GAAG,EAAnB;AACA,CAACF,QAAQ,CAACG,MAAT,IAAmB,EAApB,EAAwBC,MAAxB,CAA+B,CAA/B,EAAkCC,KAAlC,CAAwC,GAAxC,EAA6C5E,OAA7C,CAAqD,UAAUyC,IAAV,EAAgB;AACjE,MAAMoC,EAAE,GAAGpC,IAAI,CAACmC,KAAL,CAAW,GAAX,CAAX;AACAH,YAAU,CAACI,EAAE,CAAC,CAAD,CAAH,CAAV,GAAoBA,EAAE,CAAC,CAAD,CAAtB;AACH,CAHD;AAKA;AAEO,IAAMC,YAAY,GAAI,YAAY;AACrC,MAAIC,IAAI,GAAGC,QAAQ,CAACC,aAAT,CAAuB,QAAvB,CAAX;AACAF,MAAI,CAACG,KAAL,GAAaH,IAAI,CAACI,MAAL,GAAc,CAA3B;;AACA,MAAI,CAAC,EAAEJ,IAAI,CAACK,UAAL,IAAmBL,IAAI,CAACK,UAAL,CAAgB,IAAhB,CAArB,CAAL,EAAkD;AAC9C;AACA,WAAOL,IAAI,CAACM,SAAL,CAAe,YAAf,EAA6B3B,OAA7B,CAAqC,iBAArC,MAA4D,CAAnE;AACH,GANoC,CAOrC;;;AACA,SAAO,KAAP;AACH,CAT2B,EAArB;AAWA,IAAM4B,WAAW,GAAG;AACvBC,mBAAiB,EAAE,0CADI;AAEvBC,cAAY,EAAE,4DAFS;AAGvBC,YAAU,EAAE,wCAHW;AAIvBC,kBAAgB,EAAE,qEAJK;AAKvB;AACAC,gBAAc,EAAE,kEANO;AAOvBC,aAAW,EAAE,iEAPU;AAQvBC,WAAS,EAAE,0DARY;AASvBC,QAAM,EAAE;AATe,CAApB,C;;;;;;;;;;;;;;;;ACvHP,IAAMC,aAAa,GAAG,EAAtB;AAEO,SAASC,gBAAT,CAA0BC,OAA1B,EAAmC;AACtC,SAAOC,OAAO,CAACC,GAAR,CAAYF,OAAO,CAAClJ,GAAR,CAAY,UAAUqJ,SAAV,EAAqB;AAChD,QAAI,OAAOA,SAAP,KAAqB,QAAzB,EAAmC;AAC/BA,eAAS,GAAG;AACRC,WAAG,EAAED,SADG;AAER;AACAhF,YAAI,EAAEgF,SAAS,CAACE,KAAV,CAAgB,QAAhB,IAA4B,KAA5B,GAAoC;AAHlC,OAAZ;AAKH;;AACD,QAAIP,aAAa,CAACK,SAAS,CAACC,GAAX,CAAjB,EAAkC;AAC9B,aAAON,aAAa,CAACK,SAAS,CAACC,GAAX,CAApB;AACH;;AACD,QAAME,OAAO,GAAG,IAAIL,OAAJ,CAAY,UAACM,OAAD,EAAUC,MAAV,EAAqB;AAC7C,UAAIL,SAAS,CAAChF,IAAV,KAAmB,IAAvB,EAA6B;AACzB,YAAMsF,MAAM,GAAG1B,QAAQ,CAACC,aAAT,CAAuB,QAAvB,CAAf;AACAyB,cAAM,CAACC,GAAP,GAAaP,SAAS,CAACC,GAAvB;AACAK,cAAM,CAACE,KAAP,GAAe,KAAf;;AACAF,cAAM,CAACG,MAAP,GAAgB,YAAY;AACxBL,iBAAO;AACV,SAFD;;AAGAE,cAAM,CAACI,OAAP,GAAiB,YAAY;AACzBL,gBAAM;AACT,SAFD;;AAGAzB,gBAAQ,CAAC+B,IAAT,CAAcC,WAAd,CAA0BN,MAA1B;AACH,OAXD,MAYK,IAAIN,SAAS,CAAChF,IAAV,KAAmB,KAAvB,EAA8B;AAC/B,YAAM6F,IAAI,GAAGjC,QAAQ,CAACC,aAAT,CAAuB,MAAvB,CAAb;AACAgC,YAAI,CAACC,GAAL,GAAW,YAAX;AACAD,YAAI,CAACzC,IAAL,GAAY4B,SAAS,CAACC,GAAtB;;AACAY,YAAI,CAACJ,MAAL,GAAc,YAAY;AACtBL,iBAAO;AACV,SAFD;;AAGAS,YAAI,CAACH,OAAL,GAAe,YAAY;AACvBL,gBAAM;AACT,SAFD;;AAGAzB,gBAAQ,CAAC+B,IAAT,CAAcC,WAAd,CAA0BC,IAA1B;AACH;AACJ,KAzBe,CAAhB;AA0BAlB,iBAAa,CAACK,SAAS,CAACC,GAAX,CAAb,GAA+BE,OAA/B;AACA,WAAOA,OAAP;AACH,GAvCkB,CAAZ,CAAP;AAwCH;AAEM,SAASY,YAAT,CAAsBC,IAAtB,EAA4BC,QAA5B,EAAsC;AACzC;AACA,MAAI,OAAOC,MAAM,CAACC,SAAP,CAAiBC,UAAxB,KAAuC,UAA3C,EAAuD;AACnDF,UAAM,CAACC,SAAP,CAAiBE,gBAAjB,CAAkCL,IAAlC,EAAwCC,QAAxC;AACH,GAFD,MAGK;AACD,QAAM9E,CAAC,GAAGyC,QAAQ,CAACC,aAAT,CAAuB,GAAvB,CAAV;AACA1C,KAAC,CAACiC,IAAF,GAASkD,GAAG,CAACC,eAAJ,CAAoBP,IAApB,CAAT;AACA7E,KAAC,CAACqF,QAAF,GAAaP,QAAb;AACA9E,KAAC,CAACsF,KAAF,GAJC,CAKD;;AACAH,OAAG,CAACI,eAAJ,CAAoBvF,CAAC,CAACiC,IAAtB;AACH;AACJ,C;;;;;;;;;;;;;;;AC3DD,iEAAe;AACXuD,IAAE,EAAE;AACAC,UAAM,EAAE;AACJC,SAAG,EAAE,KADD;AAEJC,mBAAa,EAAE,uBAFX;AAGJC,aAAO,EAAE,yCAHL;AAKJC,cAAQ,EAAE,WALN;AAMJC,iBAAW,EAAE,eANT;AAOJ;AAEAC,oBAAc,EAAE,QATZ;AAUJC,cAAQ,EAAE,UAVN;AAWJC,kBAAY,EAAE,gBAXV;AAaJZ,cAAQ,EAAE,UAbN;AAeJa,UAAI,EAAE,MAfF;AAgBJC,gBAAU,EAAE,sBAhBR;AAkBJC,eAAS,EAAE,cAlBP;AAmBJC,wBAAkB,EAAE,WAnBhB;AAoBJC,sBAAgB,EAAE,gBApBd;AAqBJC,mBAAa,EAAE;AArBX,KADR;AAyBAC,cAAU,EAAE;AACRrM,UAAI,EAAE,MADE;AAERC,SAAG,EAAE,KAFG;AAGRC,SAAG,EAAE,KAHG;AAIRC,aAAO,EAAE,SAJD;AAKRE,SAAG,EAAE,SALG;AAMRQ,iBAAW,EAAE,aANL;AAORT,WAAK,EAAE,OAPC;AAQRQ,aAAO,EAAE,SARD;AASRI,aAAO,EAAE,SATD;AAURR,WAAK,EAAE,OAVC;AAWRO,WAAK,EAAE,OAXC;AAYRT,UAAI,EAAE,MAZE;AAaRC,aAAO,EAAE,SAbD;AAcRY,cAAQ,EAAE,UAdF;AAeRzC,cAAQ,EAAE,UAfF;AAgBRiC,YAAM,EAAE,QAhBA;AAiBRD,YAAM,EAAE,QAjBA;AAkBRD,WAAK,EAAE,OAlBC;AAmBRQ,kBAAY,EAAE,cAnBN;AAoBRC,gBAAU,EAAE,YApBJ;AAqBRvC,cAAQ,EAAE,UArBF;AAsBRyC,YAAM,EAAE,QAtBA;AAwBR1B,aAAO,EAAE,SAxBD;AAyBRH,cAAQ,EAAE,UAzBF;AA0BR+M,UAAI,EAAE,MA1BE;AA2BRC,UAAI,EAAE,WA3BE;AA6BR/K,WAAK,EAAE,UA7BC;AA8BRO,WAAK,EAAE,QA9BC;AA+BRE,eAAS,EAAE,YA/BH;AAgCRG,aAAO,EAAE,YAhCD;AAiCRC,WAAK,EAAE,QAjCC;AAkCRH,aAAO,EAAE,UAlCD;AAmCRF,YAAM,EAAE,SAnCA;AAoCRM,eAAS,EAAE,YApCH;AAqCRG,aAAO,EAAE,UArCD;AAsCRD,YAAM,EAAE,SAtCA;AAuCRD,aAAO,EAAE;AAvCD;AAzBZ,GADO;AAoEXiK,IAAE,EAAE;AACAlB,UAAM,EAAE;AACJC,SAAG,EAAE,IADD;AAEJC,mBAAa,EAAE,UAFX;AAGJC,aAAO,EAAE,SAHL;AAKJC,cAAQ,EAAE,MALN;AAMJC,iBAAW,EAAE,OANT;AAOJ;AAEAC,oBAAc,EAAE,MATZ;AAUJE,kBAAY,EAAE,SAVV;AAWJD,cAAQ,EAAE,MAXN;AAYJX,cAAQ,EAAE,MAZN;AAcJa,UAAI,EAAE,IAdF;AAeJC,gBAAU,EAAE,QAfR;AAiBJC,eAAS,EAAE,MAjBP;AAkBJC,wBAAkB,EAAE,MAlBhB;AAmBJC,sBAAgB,EAAE,KAnBd;AAoBJC,mBAAa,EAAE;AApBX,KADR;AAwBAC,cAAU,EAAE;AACRrM,UAAI,EAAE,KADE;AAERC,SAAG,EAAE,KAFG;AAGRC,SAAG,EAAE,IAHG;AAIRC,aAAO,EAAE,KAJD;AAKRE,SAAG,EAAE,SALG;AAMRQ,iBAAW,EAAE,MANL;AAORT,WAAK,EAAE,KAPC;AAQRQ,aAAO,EAAE,KARD;AASRI,aAAO,EAAE,KATD;AAURR,WAAK,EAAE,KAVC;AAWRO,WAAK,EAAE,KAXC;AAYRT,UAAI,EAAE,IAZE;AAaRC,aAAO,EAAE,MAbD;AAcRY,cAAQ,EAAE,KAdF;AAeRzC,cAAQ,EAAE,OAfF;AAgBRiC,YAAM,EAAE,KAhBA;AAiBRD,YAAM,EAAE,KAjBA;AAkBRD,WAAK,EAAE,KAlBC;AAmBRQ,kBAAY,EAAE,MAnBN;AAoBRC,gBAAU,EAAE,OApBJ;AAqBRvC,cAAQ,EAAE,OArBF;AAsBRyC,YAAM,EAAE,OAtBA;AAwBR1B,aAAO,EAAE,KAxBD;AAyBRH,cAAQ,EAAE,QAzBF;AA0BR+M,UAAI,EAAE,IA1BE;AA2BRC,UAAI,EAAE,KA3BE;AA6BR/K,WAAK,EAAE,OA7BC;AA8BRO,WAAK,EAAE,QA9BC;AA+BRE,eAAS,EAAE,QA/BH;AAgCRG,aAAO,EAAE,OAhCD;AAiCRC,WAAK,EAAE,OAjCC;AAkCRH,aAAO,EAAE,QAlCD;AAmCRF,YAAM,EAAE,QAnCA;AAoCRM,eAAS,EAAE,QApCH;AAqCRG,aAAO,EAAE,QArCD;AAsCRD,YAAM,EAAE,SAtCA;AAuCRD,aAAO,EAAE;AAvCD;AAxBZ;AApEO,CAAf,E;;;;;;;;;;;;;;;;;;;ACCA;AACA;AAEO,IAAMkK,KAAK,GAAG;AACjBC,SAAO,EAAE,EADQ;AAEjBC,SAAO,EAAE,EAFQ;AAGjBC,QAAM,EAAE,EAHS;AAKjBlB,UAAQ,EAAE3D,4DAAA,KAAqB,MALd;AAMjB4D,aAAW,EAAE,WAAW5D,sDANP;AAOjB8D,UAAQ,EAAE9D,+DAAA,IAAuB,QAPhB;AASjB8E,WAAS,EAAE9E,6DAAA,KAAsB,QAThB;AAUjB+D,cAAY,EAAE,kBAAkB/D,sDAVf;AAYjB+E,SAAO,EAAE,EAZQ;AAajBC,YAAU,EAAE,EAbK;AAejBC,SAAO,EAAE,EAfQ;AAiBjBC,UAAQ,EAAErC,MAAM,CAACsC,UAAP,GAAoB,GAjBb;AAmBjBC,cAAY,EAAE;AACVzI,QAAI,EAAE,EADI;AAEV0I,WAAO,EAAE;AAFC;AAnBG,CAAd;AAyBA,SAASC,eAAT,GAA2B;AAC9B,SAAO,IAAI7D,OAAJ,CAAY,UAAAM,OAAO,EAAI;AAC1B,QAAMwD,QAAQ,GAAGvF,yDAAA,GAAgB,SAAhB,GAA4B,MAA7C;AACAwF,KAAC,CAACC,IAAF,WAAUf,KAAK,CAACC,OAAhB,cAA2BY,QAA3B,cAAuCvF,wDAAvC,oBAA6D0E,KAAK,CAACE,OAAnE,GAA8E;AAC1Ec,cAAQ,EAAE,MADgE;AAE1EC,aAAO,EAAE,iBAACC,IAAD,EAAU;AACf7D,eAAO,CAAC6D,IAAD,CAAP;AACH;AAJyE,KAA9E;AAMH,GARM,CAAP;AASH;AAEM,SAASC,eAAT,CAAyBC,IAAzB,EAA+B;AAClC,SAAOA,IAAI,CAACxI,OAAL,CAAa,kBAAb,EAAiC,EAAjC,EAAqCW,IAArC,EAAP;AACH;AAED,IAAI8H,MAAM,GAAG,GAAb;AACO,SAASC,aAAT,GAAyB;AAC5BtB,OAAK,CAACO,OAAN,GAAgBc,MAAM,EAAtB;AACH,C;;;;;;;;;;;;;;;AC/CD;AACA;AACA,iEAAe,CACb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,4BAJR;AAKE,UAAQ,EALV;AAME,WAAS,4BANX;AAOE,aAAW,4BAPb;AAQE,gBAAc;AARhB,CADa,EAWb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,qBANX;AAOE,aAAW,uBAPb;AAQE,gBAAc;AARhB,CAXa,EAqBb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,yBAJR;AAKE,UAAQ,EALV;AAME,WAAS,2BANX;AAOE,aAAW,2BAPb;AAQE,gBAAc;AARhB,CArBa,EA+Bb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,IANX;AAOE,aAAW,IAPb;AAQE,gBAAc;AARhB,CA/Ba,EAyCb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,sCAJR;AAKE,UAAQ,EALV;AAME,WAAS,kCANX;AAOE,aAAW,kCAPb;AAQE,gBAAc;AARhB,CAzCa,EAmDb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,oBAPb;AAQE,gBAAc;AARhB,CAnDa,EA6Db;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,WAAS,uBAPX;AAQE,aAAW,uBARb;AASE,gBAAc;AAThB,CA7Da,EAwEb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,sBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,gBAPb;AAQE,gBAAc;AARhB,CAxEa,EAkFb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,WAAS,uBAPX;AAQE,aAAW,YARb;AASE,gBAAc;AAThB,CAlFa,EA6Fb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,OAJR;AAKE,UAAQ,EALV;AAME,WAAS,OANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA7Fa,EAuGb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,6BAJR;AAKE,UAAQ,EALV;AAME,WAAS,6BANX;AAOE,aAAW,6BAPb;AAQE,gBAAc;AARhB,CAvGa,EAiHb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,kCAJR;AAKE,UAAQ,EALV;AAME,WAAS,oCANX;AAOE,aAAW,oCAPb;AAQE,gBAAc;AARhB,CAjHa,EA2Hb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,2BAJR;AAKE,UAAQ,CACN,MADM,CALV;AAQE,WAAS,2BARX;AASE,aAAW,2BATb;AAUE,gBAAc;AAVhB,CA3Ha,EAuIb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,6BAJR;AAKE,UAAQ,CACN,MADM,CALV;AAQE,WAAS,6BARX;AASE,aAAW,6BATb;AAUE,gBAAc;AAVhB,CAvIa,EAmJb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,uBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAnJa,EA6Jb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CA7Ja,EAuKb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,kBAPb;AAQE,gBAAc;AARhB,CAvKa,EAiLb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,oBAPb;AAQE,gBAAc;AARhB,CAjLa,EA2Lb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,8BAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,wBAPb;AAQE,gBAAc;AARhB,CA3La,EAqMb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CArMa,EA+Mb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CA/Ma,EAyNb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,4BAJR;AAKE,UAAQ,EALV;AAME,WAAS,4BANX;AAOE,aAAW,4BAPb;AAQE,gBAAc;AARhB,CAzNa,EAmOb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,WAAS,oBAPX;AAQE,aAAW,oBARb;AASE,gBAAc;AAThB,CAnOa,EA8Ob;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,WAAS,0BAPX;AAQE,aAAW,0BARb;AASE,gBAAc;AAThB,CA9Oa,EAyPb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,WAAS,+BAPX;AAQE,aAAW,qBARb;AASE,gBAAc;AAThB,CAzPa,EAoQb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,wBAPb;AAQE,gBAAc;AARhB,CApQa,EA8Qb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,gBAPb;AAQE,gBAAc;AARhB,CA9Qa,EAwRb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,YANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAxRa,EAkSb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,WANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAlSa,EA4Sb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,0BAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,kBAPb;AAQE,gBAAc;AARhB,CA5Sa,EAsTb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,SANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAtTa,EAgUb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,YANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAhUa,EA0Ub;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,0BAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,kBAPb;AAQE,gBAAc;AARhB,CA1Ua,EAoVb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,2CANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CApVa,EA8Vb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,2BAJR;AAKE,UAAQ,EALV;AAME,WAAS,6BANX;AAOE,aAAW,6BAPb;AAQE,gBAAc;AARhB,CA9Va,EAwWb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,WANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAxWa,EAkXb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,WANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAlXa,EA4Xb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,QANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CA5Xa,EAsYb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,aANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CAtYa,EAgZb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CAhZa,EA0Zb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,yBAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,yBAPb;AAQE,gBAAc;AARhB,CA1Za,EAoab;AACE,cAAY,CACV,WADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,WAAS,WAPX;AAQE,aAAW,WARb;AASE,gBAAc;AAThB,CApaa,EA+ab;AACE,cAAY,CACV,WADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,uBAPb;AAQE,gBAAc;AARhB,CA/aa,EAybb;AACE,cAAY,CACV,WADU,CADd;AAIE,QAAM,4BAJR;AAKE,UAAQ,EALV;AAME,WAAS,8BANX;AAOE,aAAW,8BAPb;AAQE,gBAAc;AARhB,CAzba,EAmcb;AACE,cAAY,CACV,WADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,WAAS,WAPX;AAQE,aAAW,WARb;AASE,gBAAc;AAThB,CAnca,EA8cb;AACE,cAAY,CACV,WADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gCANX;AAOE,aAAW,gBAPb;AAQE,gBAAc;AARhB,CA9ca,EAwdb;AACE,cAAY,CACV,WADU,CADd;AAIE,QAAM,yBAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,WAAS,2BAPX;AAQE,aAAW,2BARb;AASE,gBAAc;AAThB,CAxda,EAmeb;AACE,cAAY,CACV,WADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,4BANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CAnea,EA6eb;AACE,cAAY,CACV,WADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,WAAS,YAPX;AAQE,aAAW,YARb;AASE,gBAAc;AAThB,CA7ea,EAwfb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,gBAPb;AAQE,gBAAc;AARhB,CAxfa,EAkgBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,2BAJR;AAKE,UAAQ,EALV;AAME,WAAS,2BANX;AAOE,aAAW,2BAPb;AAQE,gBAAc;AARhB,CAlgBa,EA4gBb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CA5gBa,EAshBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,UANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CAthBa,EAgiBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,aANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CAhiBa,EA0iBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,MANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CA1iBa,EAojBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,uBAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CApjBa,EA8jBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,aANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CA9jBa,EAwkBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CAxkBa,EAklBb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,mBAPb;AAQE,gBAAc;AARhB,CAllBa,CAAf,E;;;;;;;;;;;;;;;ACFA;AACA;AACA,iEAAe,CACb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,qBANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CADa,EAWb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,8BANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAXa,EAqBb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,WANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CArBa,EA+Bb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CA/Ba,EAyCb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAzCa,EAmDb;AACE,cAAY,CACV,aADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAnDa,EA6Db;AACE,cAAY,CACV,SADU,EAEV,KAFU,EAGV,WAHU,CADd;AAME,QAAM,yBANR;AAOE,UAAQ,EAPV;AAQE,WAAS,wBARX;AASE,aAAW,OATb;AAUE,gBAAc;AAVhB,CA7Da,EAyEb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CAzEa,EAmFb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAnFa,EA6Fb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,qBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA7Fa,EAuGb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAvGa,EAiHb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,OAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAjHa,EA2Hb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA3Ha,EAqIb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,qBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CArIa,EA+Ib;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA/Ia,EAyJb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,0BANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAzJa,EAmKb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAnKa,EA6Kb;AACE,cAAY,CACV,UADU,EAEV,SAFU,CADd;AAKE,QAAM,kBALR;AAME,UAAQ,EANV;AAOE,WAAS,kBAPX;AAQE,aAAW,OARb;AASE,gBAAc;AAThB,CA7Ka,EAwLb;AACE,cAAY,CACV,UADU,EAEV,SAFU,CADd;AAKE,QAAM,mBALR;AAME,UAAQ,EANV;AAOE,WAAS,2BAPX;AAQE,aAAW,OARb;AASE,gBAAc;AAThB,CAxLa,EAmMb;AACE,cAAY,CACV,aADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,YANX;AAOE,aAAW,iBAPb;AAQE,gBAAc;AARhB,CAnMa,EA6Mb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,QANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA7Ma,EAuNb;AACE,cAAY,CACV,SADU,EAEV,KAFU,CADd;AAKE,QAAM,iBALR;AAME,UAAQ,EANV;AAOE,WAAS,eAPX;AAQE,aAAW,aARb;AASE,gBAAc;AAThB,CAvNa,EAkOb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,OAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAlOa,EA4Ob;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CA5Oa,EAsPb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAtPa,EAgQb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAhQa,EA0Qb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CA1Qa,EAoRb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oCANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CApRa,EA8Rb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,KAPb;AAQE,gBAAc;AARhB,CA9Ra,EAwSb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAxSa,EAkTb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CAlTa,EA4Tb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,0BAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,mBAPb;AAQE,gBAAc;AARhB,CA5Ta,EAsUb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CAtUa,EAgVb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,4BAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAhVa,EA0Vb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,gCAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CA1Va,EAoWb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CApWa,EA8Wb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA9Wa,EAwXb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,6BANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAxXa,EAkYb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,+BANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAlYa,EA4Yb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CA5Ya,EAsZb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,6BANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAtZa,EAgab;AACE,cAAY,CACV,aADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CAhaa,EA0ab;AACE,cAAY,CACV,QADU,EAEV,UAFU,CADd;AAKE,QAAM,sBALR;AAME,UAAQ,EANV;AAOE,WAAS,2BAPX;AAQE,aAAW,kBARb;AASE,gBAAc;AAThB,CA1aa,EAqbb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,aANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CArba,EA+bb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,aANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA/ba,EAycb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,gBAPb;AAQE,gBAAc;AARhB,CAzca,EAmdb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAnda,EA6db;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CA7da,EAueb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,yBAJR;AAKE,UAAQ,EALV;AAME,WAAS,qCANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CAvea,EAifb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,uCANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CAjfa,EA2fb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CA3fa,EAqgBb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CArgBa,EA+gBb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CA/gBa,EAyhBb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,4BANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAzhBa,EAmiBb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,4BANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAniBa,EA6iBb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CA7iBa,EAujBb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,2CANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAvjBa,EAikBb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,4BANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAjkBa,EA2kBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA3kBa,EAqlBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,2BAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CArlBa,EA+lBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,+BAJR;AAKE,UAAQ,EALV;AAME,WAAS,uBANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CA/lBa,EAymBb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,uBAJR;AAKE,UAAQ,EALV;AAME,WAAS,8BANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAzmBa,EAmnBb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,uBAJR;AAKE,UAAQ,EALV;AAME,WAAS,uBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAnnBa,EA6nBb;AACE,cAAY,CACV,MADU,EAEV,WAFU,CADd;AAKE,QAAM,aALR;AAME,UAAQ,EANV;AAOE,WAAS,aAPX;AAQE,aAAW,SARb;AASE,gBAAc;AAThB,CA7nBa,EAwoBb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,sCANX;AAOE,aAAW,kBAPb;AAQE,gBAAc;AARhB,CAxoBa,EAkpBb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAlpBa,EA4pBb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA5pBa,EAsqBb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CAtqBa,EAgrBb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,sBAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAhrBa,EA0rBb;AACE,cAAY,CACV,aADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA1rBa,EAosBb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,gBAPb;AAQE,gBAAc;AARhB,CApsBa,EA8sBb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,0BAJR;AAKE,UAAQ,EALV;AAME,WAAS,0BANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA9sBa,EAwtBb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,uBANX;AAOE,aAAW,kBAPb;AAQE,gBAAc;AARhB,CAxtBa,EAkuBb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,SANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAluBa,EA4uBb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,YANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CA5uBa,EAsvBb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,uBAJR;AAKE,UAAQ,EALV;AAME,WAAS,uBANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CAtvBa,EAgwBb;AACE,cAAY,CACV,SADU,EAEV,KAFU,EAGV,WAHU,CADd;AAME,QAAM,6BANR;AAOE,UAAQ,EAPV;AAQE,WAAS,wBARX;AASE,aAAW,WATb;AAUE,gBAAc;AAVhB,CAhwBa,EA4wBb;AACE,cAAY,CACV,SADU,EAEV,KAFU,CADd;AAKE,QAAM,iBALR;AAME,UAAQ,EANV;AAOE,WAAS,qBAPX;AAQE,aAAW,cARb;AASE,gBAAc;AAThB,CA5wBa,EAuxBb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CAvxBa,EAiyBb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAjyBa,EA2yBb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA3yBa,EAqzBb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CArzBa,EA+zBb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,uBANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CA/zBa,EAy0Bb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,CACN,MADM,CALV;AAQE,WAAS,gCARX;AASE,aAAW,YATb;AAUE,gBAAc;AAVhB,CAz0Ba,EAq1Bb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,YANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAr1Ba,EA+1Bb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CA/1Ba,EAy2Bb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,6BANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAz2Ba,EAm3Bb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CAn3Ba,EA63Bb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,sBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA73Ba,EAu4Bb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,QAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAv4Ba,EAi5Bb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAj5Ba,EA25Bb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,uBAJR;AAKE,UAAQ,EALV;AAME,WAAS,2BANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CA35Ba,EAq6Bb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,4BANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CAr6Ba,EA+6Bb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CA/6Ba,EAy7Bb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAz7Ba,EAm8Bb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mCANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAn8Ba,EA68Bb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,qBANX;AAOE,aAAW,qBAPb;AAQE,gBAAc;AARhB,CA78Ba,EAu9Bb;AACE,cAAY,CACV,MADU,EAEV,UAFU,CADd;AAKE,QAAM,aALR;AAME,UAAQ,EANV;AAOE,WAAS,wBAPX;AAQE,aAAW,SARb;AASE,gBAAc;AAThB,CAv9Ba,EAk+Bb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,8BANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAl+Ba,EA4+Bb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,+BANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA5+Ba,EAs/Bb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,MAJR;AAKE,UAAQ,EALV;AAME,WAAS,0BANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAt/Ba,EAggCb;AACE,cAAY,CACV,UADU,EAEV,OAFU,CADd;AAKE,QAAM,gBALR;AAME,UAAQ,EANV;AAOE,WAAS,gBAPX;AAQE,aAAW,OARb;AASE,gBAAc;AAThB,CAhgCa,EA2gCb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA3gCa,EAqhCb;AACE,cAAY,CACV,aADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,6BANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CArhCa,EA+hCb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,iBAPb;AAQE,gBAAc;AARhB,CA/hCa,EAyiCb;AACE,cAAY,CACV,QADU,EAEV,UAFU,EAGV,MAHU,CADd;AAME,QAAM,qBANR;AAOE,UAAQ,EAPV;AAQE,WAAS,gCARX;AASE,aAAW,SATb;AAUE,gBAAc;AAVhB,CAziCa,EAqjCb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,sBAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CArjCa,EA+jCb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,0BAJR;AAKE,UAAQ,EALV;AAME,WAAS,iCANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA/jCa,EAykCb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,aANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAzkCa,EAmlCb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CAnlCa,EA6lCb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA7lCa,EAumCb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,OAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAvmCa,EAinCb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAjnCa,EA2nCb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,UAJR;AAKE,UAAQ,EALV;AAME,WAAS,aANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CA3nCa,EAqoCb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CAroCa,EA+oCb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA/oCa,EAypCb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAzpCa,EAmqCb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAnqCa,EA6qCb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CA7qCa,EAurCb;AACE,cAAY,CACV,cADU,EAEV,WAFU,CADd;AAKE,QAAM,6BALR;AAME,UAAQ,EANV;AAOE,WAAS,yCAPX;AAQE,aAAW,YARb;AASE,gBAAc;AAThB,CAvrCa,EAksCb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,4BANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CAlsCa,EA4sCb;AACE,cAAY,CACV,KADU,EAEV,MAFU,CADd;AAKE,QAAM,eALR;AAME,UAAQ,EANV;AAOE,WAAS,mBAPX;AAQE,aAAW,OARb;AASE,gBAAc;AAThB,CA5sCa,EAutCb;AACE,cAAY,CACV,SADU,EAEV,WAFU,CADd;AAKE,QAAM,uBALR;AAME,UAAQ,EANV;AAOE,WAAS,0BAPX;AAQE,aAAW,aARb;AASE,gBAAc;AAThB,CAvtCa,EAkuCb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,2BAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAluCa,EA4uCb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,yBAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CA5uCa,EAsvCb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,sBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAtvCa,EAgwCb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAhwCa,EA0wCb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,6BAJR;AAKE,UAAQ,EALV;AAME,WAAS,yCANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CA1wCa,EAoxCb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,UANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CApxCa,EA8xCb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,2BANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CA9xCa,EAwyCb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAxyCa,EAkzCb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,gCANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAlzCa,EA4zCb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,uBANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CA5zCa,EAs0Cb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,UAJR;AAKE,UAAQ,EALV;AAME,WAAS,UANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAt0Ca,EAg1Cb;AACE,cAAY,CACV,SADU,EAEV,MAFU,EAGV,KAHU,CADd;AAME,QAAM,cANR;AAOE,UAAQ,EAPV;AAQE,WAAS,eARX;AASE,aAAW,UATb;AAUE,gBAAc;AAVhB,CAh1Ca,EA41Cb;AACE,cAAY,CACV,SADU,EAEV,KAFU,CADd;AAKE,QAAM,0BALR;AAME,UAAQ,EANV;AAOE,WAAS,gCAPX;AAQE,aAAW,WARb;AASE,gBAAc;AAThB,CA51Ca,EAu2Cb;AACE,cAAY,CACV,SADU,EAEV,KAFU,CADd;AAKE,QAAM,iBALR;AAME,UAAQ,EANV;AAOE,WAAS,2BAPX;AAQE,aAAW,kBARb;AASE,gBAAc;AAThB,CAv2Ca,EAk3Cb;AACE,cAAY,CACV,SADU,EAEV,KAFU,CADd;AAKE,QAAM,iBALR;AAME,UAAQ,EANV;AAOE,WAAS,yBAPX;AAQE,aAAW,WARb;AASE,gBAAc;AAThB,CAl3Ca,EA63Cb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,0BANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CA73Ca,EAu4Cb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,YANX;AAOE,aAAW,KAPb;AAQE,gBAAc;AARhB,CAv4Ca,EAi5Cb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,uBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,iBAPb;AAQE,gBAAc;AARhB,CAj5Ca,EA25Cb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CA35Ca,EAq6Cb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,WANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAr6Ca,EA+6Cb;AACE,cAAY,CACV,KADU,EAEV,MAFU,CADd;AAKE,QAAM,UALR;AAME,UAAQ,EANV;AAOE,WAAS,aAPX;AAQE,aAAW,OARb;AASE,gBAAc;AAThB,CA/6Ca,EA07Cb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CA17Ca,EAo8Cb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CAp8Ca,EA88Cb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,uBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gCANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CA98Ca,EAw9Cb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CAx9Ca,EAk+Cb;AACE,cAAY,CACV,QADU,EAEV,UAFU,CADd;AAKE,QAAM,WALR;AAME,UAAQ,EANV;AAOE,WAAS,WAPX;AAQE,aAAW,KARb;AASE,gBAAc;AAThB,CAl+Ca,EA6+Cb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,UANX;AAOE,aAAW,gBAPb;AAQE,gBAAc;AARhB,CA7+Ca,EAu/Cb;AACE,cAAY,CACV,KADU,EAEV,MAFU,CADd;AAKE,QAAM,eALR;AAME,UAAQ,EANV;AAOE,WAAS,oBAPX;AAQE,aAAW,WARb;AASE,gBAAc;AAThB,CAv/Ca,EAkgDb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,KAPb;AAQE,gBAAc;AARhB,CAlgDa,EA4gDb;AACE,cAAY,CACV,UADU,EAEV,KAFU,CADd;AAKE,QAAM,cALR;AAME,UAAQ,EANV;AAOE,WAAS,cAPX;AAQE,aAAW,MARb;AASE,gBAAc;AAThB,CA5gDa,EAuhDb;AACE,cAAY,CACV,QADU,EAEV,KAFU,CADd;AAKE,QAAM,eALR;AAME,UAAQ,EANV;AAOE,WAAS,mBAPX;AAQE,aAAW,eARb;AASE,gBAAc;AAThB,CAvhDa,EAkiDb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CAliDa,EA4iDb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,uBANX;AAOE,aAAW,KAPb;AAQE,gBAAc;AARhB,CA5iDa,EAsjDb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAtjDa,EAgkDb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,qBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAhkDa,EA0kDb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,2BANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CA1kDa,EAolDb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,sBAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CAplDa,EA8lDb;AACE,cAAY,CACV,UADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CA9lDa,EAwmDb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,8BANX;AAOE,aAAW,mBAPb;AAQE,gBAAc;AARhB,CAxmDa,EAknDb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,uBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,gBAAc;AAPhB,CAlnDa,EA2nDb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,4BANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CA3nDa,EAqoDb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oCANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CAroDa,EA+oDb;AACE,cAAY,CACV,QADU,EAEV,UAFU,CADd;AAKE,QAAM,sBALR;AAME,UAAQ,EANV;AAOE,WAAS,sBAPX;AAQE,aAAW,UARb;AASE,gBAAc;AAThB,CA/oDa,EA0pDb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,wCANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CA1pDa,EAoqDb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,OANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CApqDa,EA8qDb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,uBAJR;AAKE,UAAQ,EALV;AAME,WAAS,uBANX;AAOE,aAAW,uBAPb;AAQE,gBAAc;AARhB,CA9qDa,EAwrDb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,qCAJR;AAKE,UAAQ,EALV;AAME,WAAS,2CANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAxrDa,EAksDb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,UAJR;AAKE,UAAQ,EALV;AAME,WAAS,UANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAlsDa,EA4sDb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,WANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA5sDa,EAstDb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAttDa,EAguDb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAhuDa,EA0uDb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA1uDa,EAovDb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,0BAJR;AAKE,UAAQ,EALV;AAME,WAAS,0BANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CApvDa,EA8vDb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,WANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CA9vDa,EAwwDb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,gBAPb;AAQE,gBAAc;AARhB,CAxwDa,EAkxDb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAlxDa,EA4xDb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,eAPb;AAQE,gBAAc;AARhB,CA5xDa,EAsyDb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,yBAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,mBAPb;AAQE,gBAAc;AARhB,CAtyDa,EAgzDb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAhzDa,EA0zDb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CA1zDa,EAo0Db;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,0BANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAp0Da,EA80Db;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,UAJR;AAKE,UAAQ,EALV;AAME,WAAS,qBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CA90Da,EAw1Db;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,kCAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,gBAPb;AAQE,gBAAc;AARhB,CAx1Da,EAk2Db;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iDANX;AAOE,aAAW,iDAPb;AAQE,gBAAc;AARhB,CAl2Da,EA42Db;AACE,cAAY,EADd;AAEE,QAAM,wBAFR;AAGE,UAAQ,EAHV;AAIE,gBAAc;AAJhB,CA52Da,EAk3Db;AACE,cAAY,EADd;AAEE,QAAM,4BAFR;AAGE,UAAQ,EAHV;AAIE,gBAAc;AAJhB,CAl3Da,EAw3Db;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAx3Da,EAk4Db;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,yBAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAl4Da,EA44Db;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,qBANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CA54Da,EAs5Db;AACE,cAAY,EADd;AAEE,QAAM,wBAFR;AAGE,UAAQ,EAHV;AAIE,gBAAc;AAJhB,CAt5Da,EA45Db;AACE,cAAY,CACV,aADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA55Da,EAs6Db;AACE,cAAY,CACV,aADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAt6Da,EAg7Db;AACE,cAAY,EADd;AAEE,QAAM,eAFR;AAGE,UAAQ,EAHV;AAIE,gBAAc;AAJhB,CAh7Da,EAs7Db;AACE,cAAY,CACV,SADU,EAEV,KAFU,CADd;AAKE,QAAM,oBALR;AAME,UAAQ,CACN,MADM,CANV;AASE,WAAS,yBATX;AAUE,aAAW,mBAVb;AAWE,gBAAc;AAXhB,CAt7Da,EAm8Db;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,QAJR;AAKE,UAAQ,EALV;AAME,WAAS,cANX;AAOE,aAAW,KAPb;AAQE,gBAAc;AARhB,CAn8Da,EA68Db;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA78Da,EAu9Db;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,KAPb;AAQE,gBAAc;AARhB,CAv9Da,EAi+Db;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,KAPb;AAQE,gBAAc;AARhB,CAj+Da,EA2+Db;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CA3+Da,EAq/Db;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,WANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CAr/Da,EA+/Db;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,6BANX;AAOE,aAAW,6BAPb;AAQE,gBAAc;AARhB,CA//Da,EAygEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,qBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAzgEa,EAmhEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAnhEa,EA6hEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CA7hEa,EAuiEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,aANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAviEa,EAijEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CAjjEa,EA2jEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,iBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA3jEa,EAqkEb;AACE,cAAY,CACV,MADU,EAEV,MAFU,CADd;AAKE,QAAM,gBALR;AAME,UAAQ,EANV;AAOE,WAAS,2BAPX;AAQE,aAAW,MARb;AASE,gBAAc;AAThB,CArkEa,EAglEb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAhlEa,EA0lEb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA1lEa,EAomEb;AACE,cAAY,CACV,MADU,EAEV,UAFU,CADd;AAKE,QAAM,oBALR;AAME,UAAQ,EANV;AAOE,WAAS,gCAPX;AAQE,aAAW,0BARb;AASE,gBAAc;AAThB,CApmEa,EA+mEb;AACE,cAAY,CACV,KADU,EAEV,OAFU,CADd;AAKE,QAAM,eALR;AAME,UAAQ,EANV;AAOE,WAAS,cAPX;AAQE,aAAW,WARb;AASE,gBAAc;AAThB,CA/mEa,EA0nEb;AACE,cAAY,CACV,KADU,EAEV,OAFU,CADd;AAKE,QAAM,YALR;AAME,UAAQ,CACN,MADM,CANV;AASE,WAAS,wCATX;AAUE,aAAW,iBAVb;AAWE,gBAAc;AAXhB,CA1nEa,EAuoEb;AACE,cAAY,CACV,KADU,EAEV,OAFU,CADd;AAKE,QAAM,gBALR;AAME,UAAQ,CACN,MADM,CANV;AASE,WAAS,kCATX;AAUE,aAAW,eAVb;AAWE,gBAAc;AAXhB,CAvoEa,EAopEb;AACE,cAAY,CACV,KADU,EAEV,OAFU,CADd;AAKE,QAAM,mBALR;AAME,UAAQ,CACN,MADM,CANV;AASE,WAAS,oCATX;AAUE,aAAW,cAVb;AAWE,gBAAc;AAXhB,CAppEa,EAiqEb;AACE,cAAY,CACV,KADU,EAEV,OAFU,CADd;AAKE,QAAM,UALR;AAME,UAAQ,EANV;AAOE,WAAS,yCAPX;AAQE,aAAW,sBARb;AASE,gBAAc;AAThB,CAjqEa,EA4qEb;AACE,cAAY,CACV,KADU,EAEV,WAFU,CADd;AAKE,QAAM,eALR;AAME,UAAQ,EANV;AAOE,WAAS,8BAPX;AAQE,aAAW,WARb;AASE,gBAAc;AAThB,CA5qEa,EAurEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,SAJR;AAKE,UAAQ,CACN,MADM,CALV;AAQE,WAAS,gBARX;AASE,aAAW,gBATb;AAUE,gBAAc;AAVhB,CAvrEa,EAmsEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,WANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAnsEa,EA6sEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iBANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CA7sEa,EAutEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,QAJR;AAKE,UAAQ,EALV;AAME,WAAS,uCANX;AAOE,aAAW,kBAPb;AAQE,gBAAc;AARhB,CAvtEa,EAiuEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CAjuEa,EA2uEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,YANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CA3uEa,EAqvEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,CACN,MADM,CALV;AAQE,WAAS,qBARX;AASE,aAAW,WATb;AAUE,gBAAc;AAVhB,CArvEa,EAiwEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,2BANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CAjwEa,EA2wEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,SAJR;AAKE,UAAQ,EALV;AAME,WAAS,iCANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CA3wEa,EAqxEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,WAJR;AAKE,UAAQ,EALV;AAME,WAAS,WANX;AAOE,aAAW,WAPb;AAQE,gBAAc;AARhB,CArxEa,EA+xEb;AACE,cAAY,CACV,KADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,yBAPb;AAQE,gBAAc;AARhB,CA/xEa,EAyyEb;AACE,cAAY,CACV,cADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAzyEa,EAmzEb;AACE,cAAY,CACV,cADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,YANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAnzEa,EA6zEb;AACE,cAAY,CACV,cADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,qBANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA7zEa,EAu0Eb;AACE,cAAY,CACV,cADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,+BANX;AAOE,aAAW,aAPb;AAQE,gBAAc;AARhB,CAv0Ea,EAi1Eb;AACE,cAAY,CACV,cADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,SANX;AAOE,aAAW,IAPb;AAQE,gBAAc;AARhB,CAj1Ea,EA21Eb;AACE,cAAY,CACV,cADU,CADd;AAIE,QAAM,sBAJR;AAKE,UAAQ,EALV;AAME,WAAS,UANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CA31Ea,EAq2Eb;AACE,cAAY,CACV,cADU,CADd;AAIE,QAAM,uBAJR;AAKE,UAAQ,EALV;AAME,WAAS,iCANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAr2Ea,EA+2Eb;AACE,cAAY,CACV,QADU,EAEV,UAFU,CADd;AAKE,QAAM,2BALR;AAME,UAAQ,EANV;AAOE,WAAS,wCAPX;AAQE,aAAW,eARb;AASE,gBAAc;AAThB,CA/2Ea,EA03Eb;AACE,cAAY,CACV,OADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CA13Ea,EAo4Eb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,aANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAp4Ea,EA84Eb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,mBAPb;AAQE,gBAAc;AARhB,CA94Ea,EAw5Eb;AACE,cAAY,CACV,UADU,EAEV,SAFU,CADd;AAKE,QAAM,gBALR;AAME,UAAQ,EANV;AAOE,WAAS,gBAPX;AAQE,aAAW,WARb;AASE,gBAAc;AAThB,CAx5Ea,EAm6Eb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,YAPb;AAQE,gBAAc;AARhB,CAn6Ea,EA66Eb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,0BAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,yBAPb;AAQE,gBAAc;AARhB,CA76Ea,EAu7Eb;AACE,cAAY,CACV,YADU,CADd;AAIE,QAAM,kBAJR;AAKE,UAAQ,EALV;AAME,WAAS,YANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CAv7Ea,EAi8Eb;AACE,cAAY,CACV,YADU,CADd;AAIE,QAAM,mBAJR;AAKE,UAAQ,EALV;AAME,WAAS,mBANX;AAOE,aAAW,mBAPb;AAQE,gBAAc;AARhB,CAj8Ea,EA28Eb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,YAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA38Ea,EAq9Eb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,gBANX;AAOE,aAAW,KAPb;AAQE,gBAAc;AARhB,CAr9Ea,EA+9Eb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA/9Ea,EAy+Eb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAz+Ea,EAm/Eb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CAn/Ea,EA6/Eb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,aAJR;AAKE,UAAQ,EALV;AAME,WAAS,aANX;AAOE,aAAW,OAPb;AAQE,gBAAc;AARhB,CA7/Ea,EAugFb;AACE,cAAY,CACV,MADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,yBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CAvgFa,EAihFb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,cAJR;AAKE,UAAQ,EALV;AAME,WAAS,YANX;AAOE,aAAW,MAPb;AAQE,gBAAc;AARhB,CAjhFa,EA2hFb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,sBANX;AAOE,aAAW,iBAPb;AAQE,gBAAc;AARhB,CA3hFa,EAqiFb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,eAJR;AAKE,UAAQ,EALV;AAME,WAAS,4BANX;AAOE,aAAW,4BAPb;AAQE,gBAAc;AARhB,CAriFa,EA+iFb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,qBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,SAPb;AAQE,gBAAc;AARhB,CA/iFa,EAyjFb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,eANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CAzjFa,EAmkFb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,gBAJR;AAKE,UAAQ,EALV;AAME,WAAS,kBANX;AAOE,aAAW,QAPb;AAQE,gBAAc;AARhB,CAnkFa,EA6kFb;AACE,cAAY,CACV,UADU,EAEV,SAFU,CADd;AAKE,QAAM,iBALR;AAME,UAAQ,EANV;AAOE,WAAS,iBAPX;AAQE,aAAW,KARb;AASE,gBAAc;AAThB,CA7kFa,EAwlFb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,wBAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,wBAPb;AAQE,gBAAc;AARhB,CAxlFa,EAkmFb;AACE,cAAY,CACV,QADU,CADd;AAIE,QAAM,oBAJR;AAKE,UAAQ,EALV;AAME,WAAS,oBANX;AAOE,aAAW,UAPb;AAQE,gBAAc;AARhB,CAlmFa,EA4mFb;AACE,cAAY,CACV,SADU,CADd;AAIE,QAAM,gCAJR;AAKE,UAAQ,EALV;AAME,WAAS,wBANX;AAOE,aAAW,cAPb;AAQE,gBAAc;AARhB,CA5mFa,CAAf,E;;;;;;;;;;;;;;;ACFA;;AAEA;AACO,IAAME,QAAQ,GAAG,CAAC;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAD,EAA+B;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA/B,EAAmE;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAnE,EAAsG;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAtG,EAA4I;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA5I,EAAkL;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAlL,EAAsN;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAtN,EAA0P;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA1P,EAAwR;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAxR,EAA2T;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAA3T,EAAoW;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAApW,EAAmY;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAnY,EAA2a;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA3a,EAA4c;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA5c,EAA8e;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA9e,EAAihB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAjhB,EAAojB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAApjB,EAAulB;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAvlB,EAA+nB;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA/nB,EAAuqB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAvqB,EAA8sB;AAAC,UAAO,sBAAR;AAA+B,WAAQ;AAAvC,CAA9sB,EAA2vB;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA3vB,EAAmyB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAnyB,EAA00B;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAA10B,EAAo3B;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAAp3B,EAA85B;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA95B,EAA87B;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA97B,EAAm+B;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAn+B,EAAggC;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAhgC,EAAqiC;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAriC,EAAokC;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAApkC,EAAgmC;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAhmC,EAAgoC;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAhoC,EAAgqC;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAhqC,EAAosC;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAApsC,EAAouC;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAApuC,EAAgwC;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAhwC,EAAoyC;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAApyC,EAAo0C;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAp0C,EAAi2C;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAj2C,EAA63C;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA73C,EAA25C;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA35C,EAAy7C;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAz7C,EAA09C;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA19C,EAA2/C;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA3/C,EAA6hD;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAA7hD,EAAqkD;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAArkD,EAAsmD;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAtmD,EAAuoD;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAvoD,EAAyqD;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAAzqD,EAAosD;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAApsD,EAAguD;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAhuD,EAAkwD;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAlwD,EAAkyD;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAlyD,EAA8zD;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA9zD,EAA01D;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA11D,EAA23D;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA33D,EAAy5D;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAz5D,EAA27D;AAAC,UAAO,GAAR;AAAY,WAAQ;AAApB,CAA37D,EAAo9D;AAAC,UAAO,GAAR;AAAY,WAAQ;AAApB,CAAp9D,EAA6+D;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA7+D,EAA0gE;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAA1gE,EAAijE;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAjjE,EAA8kE;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA9kE,EAA8mE;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA9mE,EAA6oE;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA7oE,EAAgrE;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAAhrE,EAAysE;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAzsE,EAAouE;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAApuE,EAAuwE;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAAvwE,EAA+yE;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA/yE,EAAq1E;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAr1E,EAA03E;AAAC,UAAO,GAAR;AAAY,WAAQ;AAApB,CAA13E,EAAk5E;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAl5E,EAAk7E;AAAC,UAAO,yBAAR;AAAkC,WAAQ;AAA1C,CAAl7E,EAAg+E;AAAC,UAAO,oBAAR;AAA6B,WAAQ;AAArC,CAAh+E,EAAygF;AAAC,UAAO,uBAAR;AAAgC,WAAQ;AAAxC,CAAzgF,EAAqjF;AAAC,UAAO,sBAAR;AAA+B,WAAQ;AAAvC,CAArjF,EAAgmF;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAhmF,EAA4nF;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA5nF,EAAypF;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAzpF,EAAyrF;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAzrF,EAAstF;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAttF,EAAuvF;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAvvF,EAAmxF;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAnxF,EAAmzF;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAnzF,EAA+0F;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA/0F,EAA62F;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA72F,EAA04F;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA14F,EAA26F;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA36F,EAA08F;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA18F,EAA6+F;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA7+F,EAA4gG;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA5gG,EAAuiG;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAAviG,EAAikG;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAjkG,EAA6lG;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA7lG,EAA0nG;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA1nG,EAA0pG;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA1pG,EAAsrG;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAtrG,EAAutG;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAvtG,EAAwvG;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAxvG,EAA2xG;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA3xG,EAA+zG;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA/zG,EAA41G;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA51G,EAAw3G;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAx3G,EAAo5G;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAp5G,EAAi7G;AAAC,UAAO,GAAR;AAAY,WAAQ;AAApB,CAAj7G,EAAy8G;AAAC,UAAO,GAAR;AAAY,WAAQ;AAApB,CAAz8G,EAAi+G;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAj+G,EAAigH;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAjgH,EAA8hH;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA9hH,EAA2jH;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA3jH,EAAylH;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAzlH,EAAunH;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAvnH,EAAkpH;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAlpH,EAAkrH;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAlrH,EAA+sH;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA/sH,EAAivH;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAjvH,EAAkxH;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAlxH,EAAmzH;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAnzH,EAA+0H;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA/0H,EAAg3H;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAh3H,EAAm5H;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAn5H,EAAq7H;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAr7H,EAAy9H;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAz9H,EAAs/H;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAt/H,EAAyhI;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAzhI,EAAojI;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAApjI,EAAilI;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAjlI,EAAinI;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAjnI,EAA8oI;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA9oI,EAA8qI;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA9qI,EAA0sI;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA1sI,EAAuuI;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAvuI,EAAuwI;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAvwI,EAAyyI;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAzyI,EAA20I;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA30I,EAAy2I;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAz2I,EAA44I;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA54I,EAA86I;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA96I,EAAg9I;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAh9I,EAAk/I;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAAl/I,EAA2gJ;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAA3gJ,EAAoiJ;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAApiJ,EAA0kJ;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA1kJ,EAAqmJ;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAArmJ,EAAsoJ;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAtoJ,EAAuqJ;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAAvqJ,EAAisJ;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAAjsJ,EAA2tJ;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA3tJ,EAAuvJ;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAAvvJ,EAA8xJ;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA9xJ,EAA8zJ;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA9zJ,EAA61J;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA71J,EAA43J;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAA53J,EAAq5J;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAr5J,EAAk7J;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAl7J,EAA88J;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA98J,EAA2+J;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA3+J,EAA2gK;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA3gK,EAA2iK;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA3iK,EAAykK;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAzkK,EAAwmK;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAxmK,EAAsoK;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAtoK,EAAwqK;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAxqK,EAAysK;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAzsK,EAA2uK;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA3uK,EAA8wK;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA9wK,EAAgzK;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAhzK,EAAg1K;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAh1K,EAA62K;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA72K,EAA+4K;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA/4K,EAA+6K;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA/6K,EAAi9K;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAj9K,EAAm/K;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAn/K,EAAohL;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAphL,EAAijL;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAjjL,EAAulL;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAvlL,EAAwnL;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAxnL,EAAypL;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAzpL,EAA2rL;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA3rL,EAAstL;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAttL,EAAwvL;AAAC,UAAO,GAAR;AAAY,WAAQ;AAApB,CAAxvL,EAAgxL;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAhxL,EAA6yL;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA7yL,EAA40L;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA50L,EAAw2L;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAx2L,EAAm4L;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAn4L,EAAk6L;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAl6L,EAAo8L;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAp8L,EAAi+L;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAj+L,EAA+/L;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA//L,EAA6hM;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA7hM,EAA4jM;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA5jM,EAA6lM;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA7lM,EAA+nM;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA/nM,EAAiqM;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAjqM,EAAgsM;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAhsM,EAA0tM;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA1tM,EAAwvM;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAxvM,EAAoxM;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAApxM,EAAozM;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAApzM,EAAk1M;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAAl1M,EAA02M;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAA12M,EAAk4M;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAl4M,EAAs6M;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAt6M,EAAw8M;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAx8M,EAAo+M;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAp+M,EAAsgN;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAtgN,EAAmiN;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAniN,EAAokN;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAApkN,EAAqmN;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAArmN,EAAkoN;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAloN,EAAsqN;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAtqN,EAAqsN;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAArsN,EAAquN;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAruN,EAAowN;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAApwN,EAA8xN;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA9xN,EAAwzN;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAxzN,EAA01N;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA11N,EAA63N;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA73N,EAA65N;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA75N,EAA47N;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAA57N,EAAg+N;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAh+N,EAA4/N;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA5/N,EAAwhO;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAxhO,EAA0jO;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA1jO,EAAwlO;AAAC,UAAO,qBAAR;AAA8B,WAAQ;AAAtC,CAAxlO,EAAioO;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAAjoO,EAAuqO;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAvqO,EAAwsO;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAxsO,EAAkuO;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAluO,EAA8vO;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAA9vO,EAAsxO;AAAC,UAAO,sBAAR;AAA+B,WAAQ;AAAvC,CAAtxO,EAAg0O;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAh0O,EAAg2O;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAh2O,EAAq4O;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAr4O,EAAu6O;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAv6O,EAAm8O;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAn8O,EAAg+O;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAh+O,EAAogP;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAApgP,EAAgiP;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAhiP,EAA8jP;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA9jP,EAAwlP;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAAxlP,EAAinP;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAjnP,EAA4oP;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA5oP,EAAsqP;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAtqP,EAAosP;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAApsP,EAAwuP;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAxuP,EAA2wP;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA3wP,EAAqyP;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAryP,EAAm0P;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAn0P,EAAg2P;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAh2P,EAA03P;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA13P,EAA05P;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAA15P,EAAm7P;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAn7P,EAAo9P;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAp9P,EAAi/P;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAj/P,EAAihQ;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAjhQ,EAA8iQ;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA9iQ,EAA0kQ;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAA1kQ,EAAgnQ;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAAhnQ,EAAwoQ;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAAxoQ,EAAgqQ;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAAhqQ,EAAwrQ;AAAC,UAAO,IAAR;AAAa,WAAQ;AAArB,CAAxrQ,EAAgtQ;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAhtQ,EAA6uQ;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA7uQ,EAA2wQ;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA3wQ,EAAsyQ;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAtyQ,EAA00Q;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAA10Q,EAA82Q;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA92Q,EAA64Q;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAA74Q,EAAo7Q;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAp7Q,EAAm9Q;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAn9Q,EAAm/Q;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAn/Q,EAAmhR;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAnhR,EAAojR;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAApjR,EAAolR;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAplR,EAA8mR;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA9mR,EAA2oR;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAA3oR,EAAoqR;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAApqR,EAAksR;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAlsR,EAA6tR;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA7tR,EAAuvR;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAvvR,EAAmxR;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAnxR,EAA+yR;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA/yR,EAA00R;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA10R,EAAo2R;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAp2R,EAAk4R;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAl4R,EAAm6R;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAn6R,EAAi8R;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAj8R,EAA+9R;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA/9R,EAAggS;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAhgS,EAAiiS;AAAC,UAAO,sBAAR;AAA+B,WAAQ;AAAvC,CAAjiS,EAA2kS;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA3kS,EAAgnS;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAhnS,EAA+oS;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA/oS,EAA8qS;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAA9qS,EAAktS;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAltS,EAAkvS;AAAC,UAAO,oBAAR;AAA6B,WAAQ;AAArC,CAAlvS,EAA0xS;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA1xS,EAAwzS;AAAC,UAAO,uBAAR;AAAgC,WAAQ;AAAxC,CAAxzS,EAAm2S;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAn2S,EAA+3S;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA/3S,EAAk6S;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAl6S,EAAi8S;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAj8S,EAAm+S;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAn+S,EAAwgT;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAxgT,EAAoiT;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAApiT,EAAykT;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAzkT,EAAomT;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAApmT,EAAkoT;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAloT,EAAuqT;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAvqT,EAA2sT;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA3sT,EAAsuT;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAtuT,EAAswT;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAtwT,EAAoyT;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAApyT,EAAi0T;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAj0T,EAA81T;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA91T,EAAg4T;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAh4T,EAAk6T;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAl6T,EAAg8T;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAh8T,EAA+9T;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA/9T,EAA+/T;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA//T,EAA+hU;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA/hU,EAAokU;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAApkU,EAA+lU;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA/lU,EAA4nU;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA5nU,EAA2pU;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA3pU,EAA0rU;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA1rU,EAA0tU;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA1tU,EAA0vU;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA1vU,EAAyxU;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAzxU,EAAszU;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAtzU,EAAo1U;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAp1U,EAA82U;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA92U,EAA04U;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA14U,EAAq6U;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAr6U,EAAg8U;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAh8U,EAA29U;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA39U,EAAq/U;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAr/U,EAAghV;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAhhV,EAA+iV;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA/iV,EAAglV;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAhlV,EAAonV;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAApnV,EAAopV;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAppV,EAAsrV;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAtrV,EAAwtV;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAxtV,EAAwvV;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAxvV,EAAsxV;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAtxV,EAAyzV;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAzzV,EAAm1V;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAn1V,EAAw3V;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAx3V,EAA05V;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA15V,EAAw7V;AAAC,UAAO,oBAAR;AAA6B,WAAQ;AAArC,CAAx7V,EAAg+V;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAh+V,EAA8/V;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA9/V,EAAwhW;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAxhW,EAAkjW;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAljW,EAA4kW;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA5kW,EAAsmW;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAtmW,EAAmoW;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAnoW,EAA+pW;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA/pW,EAA6rW;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA7rW,EAAytW;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAztW,EAAwvW;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAxvW,EAAoxW;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAApxW,EAAkzW;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAlzW,EAAo1W;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAp1W,EAAq3W;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAr3W,EAAi5W;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAj5W,EAAq7W;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAr7W,EAAi9W;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAj9W,EAAg/W;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAh/W,EAA2gX;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA3gX,EAAsiX;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAtiX,EAAikX;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAjkX,EAA4lX;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA5lX,EAAwnX;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAxnX,EAAwpX;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAxpX,EAA4rX;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA5rX,EAA8tX;AAAC,UAAO,uBAAR;AAAgC,WAAQ;AAAxC,CAA9tX,EAAywX;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAzwX,EAA2yX;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA3yX,EAA20X;AAAC,UAAO,oBAAR;AAA6B,WAAQ;AAArC,CAA30X,EAAm3X;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAAn3X,EAA05X;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA15X,EAAu7X;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAv7X,EAAo9X;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAp9X,EAAm/X;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAn/X,EAAqhY;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAArhY,EAAijY;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAjjY,EAAolY;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAplY,EAAynY;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAAznY,EAAgqY;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAhqY,EAAmsY;AAAC,UAAO,oBAAR;AAA6B,WAAQ;AAArC,CAAnsY,EAA2uY;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA3uY,EAA8wY;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA9wY,EAA6yY;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA7yY,EAA60Y;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA70Y,EAA22Y;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA32Y,EAA84Y;AAAC,UAAO,uBAAR;AAAgC,WAAQ;AAAxC,CAA94Y,EAAy7Y;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAz7Y,EAA29Y;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA39Y,EAA8/Y;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA9/Y,EAA4hZ;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAA5hZ,EAAkkZ;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAlkZ,EAAumZ;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAAvmZ,EAA8oZ;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA9oZ,EAAwqZ;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAxqZ,EAA0sZ;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA1sZ,EAAquZ;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAruZ,EAAqwZ;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAArwZ,EAAoyZ;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAApyZ,EAAm0Z;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAn0Z,EAAi2Z;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAAj2Z,EAAu4Z;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAv4Z,EAA46Z;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAA56Z,EAAk9Z;AAAC,UAAO,yBAAR;AAAkC,WAAQ;AAA1C,CAAl9Z,EAA+/Z;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA//Z,EAA2ha;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAA3ha,EAA+ja;AAAC,UAAO,wBAAR;AAAiC,WAAQ;AAAzC,CAA/ja,EAA2ma;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA3ma,EAA4oa;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAA5oa,EAAgra;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAhra,EAAota;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAApta,EAAwva;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAxva,EAA4xa;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA5xa,EAA4za;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAA5za,EAAg2a;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAh2a,EAAi4a;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAj4a,EAAg6a;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAh6a,EAAg8a;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAh8a,EAAg+a;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAh+a,EAAmgb;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAngb,EAAsib;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAtib,EAA0kb;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA1kb,EAAymb;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAzmb,EAAqob;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAArob,EAAkqb;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAlqb,EAA+rb;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA/rb,EAA8tb;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA9tb,EAA8vb;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA9vb,EAA+xb;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAA/xb,EAAs0b;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAt0b,EAAq2b;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAr2b,EAAo4b;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAp4b,EAAm6b;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAn6b,EAAm8b;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAn8b,EAAg+b;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAh+b,EAAkgc;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAlgc,EAAiic;AAAC,UAAO,oBAAR;AAA6B,WAAQ;AAArC,CAAjic,EAAykc;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAzkc,EAAomc;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAApmc,EAAmoc;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAnoc,EAAgqc;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAhqc,EAAisc;AAAC,UAAO,0BAAR;AAAmC,WAAQ;AAA3C,CAAjsc,EAA+uc;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAA/uc,EAAsxc;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAtxc,EAAszc;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAtzc,EAAm1c;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAn1c,EAAi3c;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAj3c,EAA+4c;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA/4c,EAAo7c;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAp7c,EAAy9c;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAz9c,EAAm/c;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAn/c,EAAshd;AAAC,UAAO,qBAAR;AAA8B,WAAQ;AAAtC,CAAthd,EAA+jd;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA/jd,EAA8ld;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA9ld,EAA+nd;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA/nd,EAAoqd;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAApqd,EAAmsd;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAnsd,EAA8td;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA9td,EAA6vd;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA7vd,EAA4xd;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA5xd,EAA+zd;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA/zd,EAAi2d;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAj2d,EAAo4d;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAp4d,EAAu6d;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAv6d,EAAo8d;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAp8d,EAAo+d;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAAp+d,EAA6/d;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA7/d,EAA0he;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAA1he,EAA8je;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAA9je,EAAome;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAApme,EAAyoe;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAzoe,EAA8qe;AAAC,UAAO,qBAAR;AAA8B,WAAQ;AAAtC,CAA9qe,EAAute;AAAC,UAAO,qBAAR;AAA8B,WAAQ;AAAtC,CAAvte,EAAgwe;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAhwe,EAAkye;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAAlye,EAA2ze;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA3ze,EAAg2e;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAh2e,EAAg4e;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAh4e,EAA85e;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA95e,EAA47e;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA57e,EAA89e;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA99e,EAA4/e;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA5/e,EAAwhf;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAxhf,EAA0jf;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA1jf,EAA4lf;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA5lf,EAAiof;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAjof,EAAkqf;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAlqf,EAAmsf;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAnsf,EAAouf;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAApuf,EAAkwf;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAlwf,EAAgyf;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAhyf,EAA8zf;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA9zf,EAA41f;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA51f,EAAy3f;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAz3f,EAAu5f;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAv5f,EAAk7f;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAl7f,EAA88f;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA98f,EAAw+f;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAx+f,EAAoggB;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAApggB,EAA6hgB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA7hgB,EAA8jgB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA9jgB,EAA4lgB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA5lgB,EAA0ngB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA1ngB,EAAwpgB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAxpgB,EAAsrgB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAtrgB,EAAstgB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAttgB,EAAqvgB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAArvgB,EAAkxgB;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAlxgB,EAAozgB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAApzgB,EAAm1gB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAn1gB,EAA+2gB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA/2gB,EAA44gB;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAA54gB,EAAk7gB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAl7gB,EAAq9gB;AAAC,UAAO,qBAAR;AAA8B,WAAQ;AAAtC,CAAr9gB,EAA8/gB;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAA9/gB,EAAwhhB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAxhhB,EAAyjhB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAzjhB,EAAslhB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAtlhB,EAAqnhB;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAArnhB,EAAuphB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAvphB,EAAmrhB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAnrhB,EAAithB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAjthB,EAA8uhB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA9uhB,EAA+whB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA/whB,EAA2yhB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA3yhB,EAA20hB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA30hB,EAA82hB;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA92hB,EAAg5hB;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAh5hB,EAA06hB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAA16hB,EAA88hB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAA98hB,EAAk/hB;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAl/hB,EAAuhiB;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAAvhiB,EAAgjiB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAhjiB,EAAoliB;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAApliB,EAA2niB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA3niB,EAAypiB;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAAzpiB,EAAgsiB;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAAhsiB,EAAsuiB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAtuiB,EAAmwiB;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAnwiB,EAAqyiB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAryiB,EAAs0iB;AAAC,UAAO,qBAAR;AAA8B,WAAQ;AAAtC,CAAt0iB,EAA+2iB;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA/2iB,EAAo5iB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAp5iB,EAAm7iB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAn7iB,EAAs9iB;AAAC,UAAO,qBAAR;AAA8B,WAAQ;AAAtC,CAAt9iB,EAA+/iB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA//iB,EAA4hjB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA5hjB,EAA+jjB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA/jjB,EAA+ljB;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA/ljB,EAAiojB;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAjojB,EAAmqjB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAnqjB,EAAmsjB;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAnsjB,EAA6tjB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA7tjB,EAA4vjB;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAA5vjB,EAAkyjB;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAAlyjB,EAAy0jB;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAAz0jB,EAA+2jB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA/2jB,EAA24jB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA34jB,EAAw6jB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAx6jB,EAAy8jB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAz8jB,EAAw+jB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAx+jB,EAA2gkB;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA3gkB,EAAgjkB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAhjkB,EAAglkB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAhlkB,EAAonkB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAApnkB,EAAkpkB;AAAC,UAAO,wBAAR;AAAiC,WAAQ;AAAzC,CAAlpkB,EAA8rkB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA9rkB,EAA2tkB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAA3tkB,EAAyvkB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAzvkB,EAA0xkB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAA1xkB,EAAuzkB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAvzkB,EAAs1kB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAt1kB,EAAo3kB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAp3kB,EAAo5kB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAp5kB,EAAo7kB;AAAC,UAAO,qBAAR;AAA8B,WAAQ;AAAtC,CAAp7kB,EAA69kB;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAA79kB,EAAmglB;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAnglB,EAAwilB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAxilB,EAA2klB;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA3klB,EAAsmlB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAtmlB,EAAkolB;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAlolB,EAA6plB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA7plB,EAAgslB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAhslB,EAAiulB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAjulB,EAA6vlB;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA7vlB,EAAwxlB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAxxlB,EAAszlB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAtzlB,EAAu1lB;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAv1lB,EAAk3lB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAl3lB,EAAk5lB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAl5lB,EAAi7lB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAj7lB,EAA88lB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA98lB,EAA8+lB;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA9+lB,EAAmhmB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAnhmB,EAAijmB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAjjmB,EAAqlmB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAArlmB,EAAqnmB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAArnmB,EAAypmB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAzpmB,EAA4rmB;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA5rmB,EAAutmB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAvtmB,EAAqvmB;AAAC,UAAO,mBAAR;AAA4B,WAAQ;AAApC,CAArvmB,EAA4xmB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA5xmB,EAAwzmB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAxzmB,EAAu1mB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAv1mB,EAAo3mB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAp3mB,EAAm5mB;AAAC,UAAO,kBAAR;AAA2B,WAAQ;AAAnC,CAAn5mB,EAAy7mB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAz7mB,EAAq9mB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAr9mB,EAAk/mB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAl/mB,EAA+gnB;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAA/gnB,EAAwinB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAxinB,EAAyknB;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAzknB,EAAomnB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAApmnB,EAAionB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAjonB,EAA8pnB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA9pnB,EAA0rnB;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAA1rnB,EAA4tnB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAA5tnB,EAA4vnB;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAA5vnB,EAAiynB;AAAC,UAAO,MAAR;AAAe,WAAQ;AAAvB,CAAjynB,EAA2znB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA3znB,EAAu1nB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAv1nB,EAAu3nB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAv3nB,EAAs5nB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAt5nB,EAAk7nB;AAAC,UAAO,KAAR;AAAc,WAAQ;AAAtB,CAAl7nB,EAA28nB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA38nB,EAA8+nB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAA9+nB,EAA0goB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAA1goB,EAAyioB;AAAC,UAAO,sBAAR;AAA+B,WAAQ;AAAvC,CAAzioB,EAAmloB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAnloB,EAAinoB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAjnoB,EAAgpoB;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAhpoB,EAA2qoB;AAAC,UAAO,qBAAR;AAA8B,WAAQ;AAAtC,CAA3qoB,EAAotoB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAptoB,EAAgvoB;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAhvoB,EAAkxoB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAAlxoB,EAAmzoB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAnzoB,EAAi1oB;AAAC,UAAO,GAAR;AAAY,WAAQ;AAApB,CAAj1oB,EAAw2oB;AAAC,UAAO,cAAR;AAAuB,WAAQ;AAA/B,CAAx2oB,EAA04oB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA14oB,EAA26oB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA36oB,EAA48oB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAA58oB,EAA++oB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA/+oB,EAAghpB;AAAC,UAAO,eAAR;AAAwB,WAAQ;AAAhC,CAAhhpB,EAAmjpB;AAAC,UAAO,YAAR;AAAqB,WAAQ;AAA7B,CAAnjpB,EAAmlpB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAnlpB,EAAunpB;AAAC,UAAO,iBAAR;AAA0B,WAAQ;AAAlC,CAAvnpB,EAA4ppB;AAAC,UAAO,aAAR;AAAsB,WAAQ;AAA9B,CAA5ppB,EAA6rpB;AAAC,UAAO,oBAAR;AAA6B,WAAQ;AAArC,CAA7rpB,EAAqupB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAArupB,EAAmwpB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAAnwpB,EAAuypB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAvypB,EAAq0pB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAr0pB,EAAi2pB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAj2pB,EAAg4pB;AAAC,UAAO,qBAAR;AAA8B,WAAQ;AAAtC,CAAh4pB,EAAy6pB;AAAC,UAAO,QAAR;AAAiB,WAAQ;AAAzB,CAAz6pB,EAAq8pB;AAAC,UAAO,SAAR;AAAkB,WAAQ;AAA1B,CAAr8pB,EAAk+pB;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAAl+pB,EAA6/pB;AAAC,UAAO,OAAR;AAAgB,WAAQ;AAAxB,CAA7/pB,EAAwhqB;AAAC,UAAO,UAAR;AAAmB,WAAQ;AAA3B,CAAxhqB,EAAsjqB;AAAC,UAAO,WAAR;AAAoB,WAAQ;AAA5B,CAAtjqB,EAAqlqB;AAAC,UAAO,gBAAR;AAAyB,WAAQ;AAAjC,CAArlqB,CAAjB,C;;;;;;;;;;;;;;;ACJP,IAAIC,SAAS,GAAI,YAAY;AACzB,WAASA,SAAT,CAAmBC,KAAnB,EAA0B;AACtB,QAAIC,GAAG,GAAG,KAAKA,GAAL,GAAW7F,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAArB;AACA4F,OAAG,CAACC,SAAJ,GAAgB,qBAAhB;AACAF,SAAK,GAAG9K,MAAM,CAACiL,MAAP,CAAc,EAAd,EAAkBH,KAAlB,CAAR;AACA9K,UAAM,CAACiL,MAAP,CAAcH,KAAd,EAAqB;AACjBI,qBAAe,EAAE,sBADA;AAEjBC,YAAM,EAAE;AAFS,KAArB;AAIAJ,OAAG,CAACD,KAAJ,CAAUM,OAAV,GAAoB,+FAApB;;AACA,SAAK,IAAIjL,GAAT,IAAgB2K,KAAhB,EAAuB;AACnB,UAAIA,KAAK,CAACO,cAAN,CAAqBlL,GAArB,CAAJ,EAA+B;AAC3B4K,WAAG,CAACD,KAAJ,CAAU3K,GAAV,IAAiB2K,KAAK,CAAC3K,GAAD,CAAtB;AACH;AACJ;AACJ;;AACD0K,WAAS,CAACS,SAAV,CAAoBC,MAApB,GAA6B,UAAUC,IAAV,EAAgB;AACzC,QAAIC,QAAQ,GAAG,KAAKV,GAAL,CAASD,KAAxB;AACAW,YAAQ,CAACrG,KAAT,GAAiBoG,IAAI,CAACpG,KAAL,GAAa,IAA9B;AACAqG,YAAQ,CAACpG,MAAT,GAAkBmG,IAAI,CAACnG,MAAL,GAAc,IAAhC;AACAoG,YAAQ,CAACC,IAAT,GAAgBF,IAAI,CAACG,CAAL,GAAS,IAAzB;AACAF,YAAQ,CAACG,GAAT,GAAeJ,IAAI,CAACK,CAAL,GAAS,IAAxB;AACH,GAND;;AAOAhB,WAAS,CAACS,SAAV,CAAoBQ,IAApB,GAA2B,YAAY;AACnC,SAAKf,GAAL,CAASD,KAAT,CAAeiB,OAAf,GAAyB,GAAzB;AACH,GAFD;;AAGAlB,WAAS,CAACS,SAAV,CAAoBU,IAApB,GAA2B,YAAY;AACnC,QAAIC,KAAK,GAAG,IAAZ;;AACAC,gBAAY,CAAC,KAAKC,YAAN,CAAZ;AACA,SAAKpB,GAAL,CAASD,KAAT,CAAeiB,OAAf,GAAyB,GAAzB;AACA,SAAKI,YAAL,GAAoBC,UAAU,CAAC,YAAY;AACvCH,WAAK,CAACH,IAAN;AACH,KAF6B,EAE3B,GAF2B,CAA9B;AAGH,GAPD;;AAQA,SAAOjB,SAAP;AACH,CAnCgB,EAAjB;;AAoCA,6BAAe,oCAAUwB,EAAV,EAAcC,IAAd,EAAoB;AAC/BA,MAAI,GAAGA,IAAI,IAAI,EAAf;AACA,MAAIC,OAAO,GAAGF,EAAE,CAACE,OAAjB;;AACA,MAAI,CAACA,OAAO,CAACC,SAAb,EAAwB;AACpB,UAAM,IAAIC,KAAJ,CAAU,yDAAV,CAAN;AACH;;AACD,MAAIF,OAAO,CAACG,cAAR,EAAJ,EAA8B;AAC1B,UAAM,IAAID,KAAJ,CAAU,uEAAV,CAAN;AACH;;AACD,MAAIE,aAAa,GAAGzH,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAApB;AACAwH,eAAa,CAAC7B,KAAd,CAAoBM,OAApB,GAA8B,oFAA9B;AACAuB,eAAa,CAAC3B,SAAd,GAA0B,+BAA1B;AACA,MAAI4B,UAAU,GAAG,EAAjB;AACA,MAAI7B,GAAG,GAAGsB,EAAE,CAACtB,GAAb;AACAA,KAAG,CAAC7D,WAAJ,CAAgByF,aAAhB;AACA,MAAIE,aAAa,GAAGC,gBAAgB,CAAC/B,GAAD,CAApC;;AACA,MAAI8B,aAAa,CAACE,QAAd,KAA2B,QAA/B,EAAyC;AACrChC,OAAG,CAACD,KAAJ,CAAUiC,QAAV,GAAqB,UAArB;AACH;;AACDV,IAAE,CAACW,EAAH,CAAM,UAAN,EAAkB,YAAY;AAC1B,QAAIT,OAAO,CAACC,SAAZ,EAAuB;AACnB,UAAIS,KAAK,GAAG,CAAZ;AACAV,aAAO,CAACW,gBAAR,CAAyB,UAAUC,KAAV,EAAiB;AACtC,YAAI,CAACA,KAAK,CAACC,kBAAX,EAA+B;AAC3B;AACH;;AACD,YAAIC,UAAU,GAAGF,KAAK,CAACC,kBAAN,EAAjB;;AACA,aAAK,IAAI5I,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAG6I,UAAU,CAACnM,MAA/B,EAAuCsD,CAAC,EAAxC,EAA4C;AACxC,cAAI,CAACoI,UAAU,CAACK,KAAD,CAAf,EAAwB;AACpBL,sBAAU,CAACK,KAAD,CAAV,GAAoB,IAAIpC,SAAJ,CAAcyB,IAAI,CAACxB,KAAnB,CAApB;AACA6B,yBAAa,CAACzF,WAAd,CAA0B0F,UAAU,CAACK,KAAD,CAAV,CAAkBlC,GAA5C;AACH;;AACD6B,oBAAU,CAACK,KAAD,CAAV,CAAkBjB,IAAlB;AACAY,oBAAU,CAACK,KAAD,CAAV,CAAkB1B,MAAlB,CAAyB8B,UAAU,CAAC7I,CAAD,CAAnC;AACAyI,eAAK;AACR;AACJ,OAdD;;AAeA,WAAK,IAAIzI,CAAC,GAAGyI,KAAb,EAAoBzI,CAAC,GAAGoI,UAAU,CAAC1L,MAAnC,EAA2CsD,CAAC,EAA5C,EAAgD;AAC5CoI,kBAAU,CAACpI,CAAD,CAAV,CAAcsH,IAAd;AACH;AACJ;AACJ,GAtBD;AAuBH,C;;;;;;;;;;;;;;;;;;AC9ED;AACA;AACA;AAEA,IAAMwB,WAAW,GAAGjE,mEAAA,CAAyB,WAAzB,KAAyC,CAA7D;AACA,IAAMkE,YAAY,GAAGD,WAAW,8BAAuBjE,wDAAvB,SAA0C,EAA1E;AAEO,SAASvB,QAAT,GAAoB;AACvB,MAAM2C,IAAI,wDACyBjD,MAAM,CAAC/C,QAAP,CAAgBC,IADzC,2RAWgCc,oEAXhC,8IAagCA,kEAbhC,wLAgBgCA,sEAhBhC,+JAmBgCA,wEAnBhC,gJAsBgCA,kEAtBhC,0FAuBgCA,kEAvBhC,oSA2BgCA,kEA3BhC,qOAqCZ+H,YArCY,iBAuCZlE,2DAvCY,wIAAV;AAiDA,MAAMmE,IAAI,GAAG,IAAIC,IAAJ,CAAS,CAAChD,IAAD,CAAT,EAAiB;AAC1BnJ,QAAI,EAAE,yBADoB;AAE1BoM,YAAQ,EAAE;AAFgB,GAAjB,CAAb,CAlDuB,CAsDvB;;AACArG,8DAAY,CAACmG,IAAD,EAAO7I,wDAAA,GAAe,OAAtB,CAAZ;AACH,C;;;;;;;;;;;;;;;;;;AC/DD;AAEO,SAASgJ,aAAT,CAAuBC,aAAvB,EAAsC;AACzC,MAAIC,MAAM,GAAG,EAAb;AACA,MAAIC,GAAJ;AAEA,MAAIC,eAAe,GAAG,EAAtB;AACA,MAAIC,cAAc,GAAG,EAArB;AAEA,MAAMC,cAAc,GAAGzG,MAAM,CAAC4E,UAA9B;AACA,MAAM8B,eAAe,GAAG1G,MAAM,CAAC2G,WAA/B;;AAEA,WAAS/B,UAAT,CAAoBgC,IAApB,EAA0BC,KAA1B,EAAiC;AAC7B,QAAIC,EAAE,GAAGL,cAAc,CAACG,IAAD,EAAOC,KAAP,CAAvB;;AACAL,kBAAc,CAAC7M,IAAf,CAAoBmN,EAApB;;AACA,WAAOA,EAAP;AACH;;AAAA;;AACD,WAASH,WAAT,CAAqBC,IAArB,EAA2BG,GAA3B,EAAgC;AAC5B,QAAID,EAAE,GAAGJ,eAAe,CAACE,IAAD,EAAOG,GAAP,CAAxB;;AACAR,mBAAe,CAAC5M,IAAhB,CAAqBmN,EAArB;;AACA,WAAOA,EAAP;AACH;;AAAA;;AACD,WAASE,iBAAT,GAA6B;AACzB,SAAK,IAAIhK,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGuJ,eAAe,CAAC7M,MAApC,EAA4CsD,CAAC,EAA7C,EAAiD;AAC7CiK,mBAAa,CAACV,eAAe,CAACvJ,CAAD,CAAhB,CAAb;AACH;;AACD,SAAK,IAAIA,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGwJ,cAAc,CAAC9M,MAAnC,EAA2CsD,CAAC,EAA5C,EAAgD;AAC5C0H,kBAAY,CAAC8B,cAAc,CAACxJ,CAAD,CAAf,CAAZ;AACH;;AACDuJ,mBAAe,GAAG,EAAlB;AACAC,kBAAc,GAAG,EAAjB;AACH;;AACD,MAAMU,OAAO,GAAG,EAAhB;;AACA,WAASC,cAAT,CAAwBC,KAAxB,EAA+B;AAC3B,QAAMC,KAAK,GAAGD,KAAK,CAAC5B,EAApB;AACA,QAAM8B,YAAY,GAAGF,KAAK,CAACG,SAA3B;;AACAH,SAAK,CAAC5B,EAAN,GAAW,UAAUgC,SAAV,EAAqB;AAC5B,UAAMC,GAAG,GAAGJ,KAAK,CAACK,KAAN,CAAYN,KAAZ,EAAmBO,SAAnB,CAAZ;;AACAT,aAAO,CAACvN,IAAR,CAAa6N,SAAb;;AACA,aAAOC,GAAP;AACH,KAJD;;AAKAL,SAAK,CAACG,SAAN,GAAkB,YAAY;AAC1B,UAAME,GAAG,GAAGH,YAAY,CAACI,KAAb,CAAmB,IAAnB,EAAyBC,SAAzB,CAAZ;AACAvB,mBAAa,IAAIA,aAAa,CAACgB,KAAD,CAA9B;AACA,aAAOK,GAAP;AACH,KAJD;AAKH;;AAED,WAASG,iBAAT,CAA2BR,KAA3B,EAAkC;AAC9BF,WAAO,CAACxO,OAAR,CAAgB,UAAU8O,SAAV,EAAqB;AACjC,UAAIJ,KAAJ,EAAW;AACPA,aAAK,CAACS,GAAN,CAAUL,SAAV;AACH;AACJ,KAJD;;AAMAN,WAAO,CAACxN,MAAR,GAAiB,CAAjB;AACH;;AAED,MAAIoO,aAAJ;AAEA,SAAO;AACHC,UADG,oBACM;AACL,UAAID,aAAJ,EAAmB;AACfA,qBAAa,CAACC,MAAd;AACH;AACJ,KALE;AAOHC,WAPG,qBAOO;AACN,UAAIF,aAAJ,EAAmB;AACfA,qBAAa,CAACE,OAAd;AACAF,qBAAa,GAAG,IAAhB;AACH;AACJ,KAZE;AAcHG,cAdG,wBAcU;AACT,aAAOH,aAAa,CAACG,UAAd,CAAyB;AAC5BC,kBAAU,EAAE,CADgB;AAE5BC,yBAAiB,EAAE,CAAC,SAAD;AAFS,OAAzB,CAAP;AAIH,KAnBE;AAqBHC,aArBG,uBAqBS;AACR,aAAON,aAAa,CAACM,SAAd,EAAP;AACH,KAvBE;AAyBHzH,OAzBG,eAyBC0H,EAzBD,EAyBKxG,KAzBL,EAyBY;AAEX,UAAI,CAACiG,aAAL,EAAoB;AAChBA,qBAAa,GAAGQ,OAAO,CAACC,IAAR,CAAaF,EAAb,EAAiBxG,KAAK,CAACf,QAAN,GAAiB,MAAjB,GAA0B,EAA3C,EAA+C;AAC3DG,kBAAQ,EAAEY,KAAK,CAACZ,QAD2C;AAE3DC,sBAAY,EAAEW,KAAK,CAACX;AAFuC,SAA/C,CAAhB;;AAIA,YAAIW,KAAK,CAACX,YAAN,IAAsBW,KAAK,CAACZ,QAAN,KAAmB,QAA7C,EAAuD;AACnD,cAAI;AACAuH,4EAAkB,CAACV,aAAa,CAACW,KAAd,EAAD,EAAwB;AACtCC,2BAAa,EAAE;AADuB,aAAxB,CAAlB;AAGH,WAJD,CAKA,OAAOC,CAAP,EAAU;AACNC,mBAAO,CAACC,KAAR,CAAcF,CAAd;AACH;AACJ;;AACDxB,sBAAc,CAACW,aAAD,CAAd;AACH,OAlBU,CAoBX;AACA;AACA;AACA;AAEA;;;AACAd,uBAAiB;;AACjBY,uBAAiB,CAACE,aAAD,CAAjB,CA3BW,CA4BX;;;AACAzB,YAAM,CAACyC,MAAP,GAAgB,IAAhB,CA7BW,CA+BX;;AAEA,UAAMC,YAAY,GAAGlH,KAAK,CAACK,OAA3B;AAEA,UAAM0E,IAAI,GAAG,IAAIoC,QAAJ,CACT,SADS,EACE,KADF,EACS,YADT,EACuB,aADvB,EACsC,WADtC,EAET,kBAAkBD,YAAlB,GAAiC,kBAFxB,CAAb;AAIA,UAAMhQ,MAAM,GAAG6N,IAAI,CAACkB,aAAD,EAAgBzB,MAAhB,EAAwBzB,UAAxB,EAAoC+B,WAApC,EAAiD9E,KAAK,CAACC,OAAvD,CAAnB;AACA,UAAImH,UAAU,GAAG,CAAjB;;AAEA,UAAIlQ,MAAM,IAAI,QAAOA,MAAP,MAAkB,QAAhC,EAA0C;AACtC,YAAMmQ,SAAS,GAAG,CAAC,IAAIC,IAAJ,EAAnB;AACArB,qBAAa,CAACP,SAAd,CAAwBxO,MAAxB,EAAgC,IAAhC;AACA,YAAMqQ,OAAO,GAAG,CAAC,IAAID,IAAJ,EAAjB;AACAF,kBAAU,GAAGG,OAAO,GAAGF,SAAvB;AACH;;AAED,UAAI5C,GAAJ,EAAS;AACL3D,SAAC,CAAC2D,GAAG,CAAC+C,UAAL,CAAD,CAAkBC,MAAlB;AACAhD,WAAG,CAACiD,OAAJ;AACAjD,WAAG,GAAG,IAAN;AACH;;AAED,UAAID,MAAM,CAACyC,MAAX,EAAmB;AACfxC,WAAG,GAAG,IAAIkD,GAAG,CAACC,GAAR,CAAY;AACdC,mBAAS,EAAE;AADG,SAAZ,CAAN;AAGA/G,SAAC,CAAC2D,GAAG,CAAC+C,UAAL,CAAD,CAAkBM,GAAlB,CAAsB;AAClBpE,kBAAQ,EAAE,UADQ;AAElBqE,eAAK,EAAE,CAFW;AAGlBxF,aAAG,EAAE,CAHa;AAIlByF,gBAAM,EAAE;AAJU,SAAtB;AAMAlH,SAAC,CAAC,kBAAD,CAAD,CAAsBmH,MAAtB,CAA6BxD,GAAG,CAAC+C,UAAjC;AAEA,YAAIU,gBAAgB,GAAG1D,MAAM,CAAC0D,gBAAP,IAA2B,EAAlD;;AACA,aAAK,IAAIC,IAAT,IAAiB3D,MAAM,CAACyC,MAAxB,EAAgC;AAC5B,cAAImB,KAAK,GAAG5D,MAAM,CAACyC,MAAP,CAAckB,IAAd,CAAZ;;AACA,cAAIA,IAAI,KAAK,UAAT,IAAuBA,IAAI,KAAK,gBAApC,EAAsD;AAClD,gBAAIE,OAAO,GAAG,KAAd,CADkD,CAElD;;AACA,gBAAIC,UAAU,GAAG,IAAjB;;AACA,gBAAIJ,gBAAgB,CAACC,IAAD,CAApB,EAA4B;AACxB,kBAAID,gBAAgB,CAACC,IAAD,CAAhB,CAAuB/Q,OAA3B,EAAoC;AAChCkR,0BAAU,GAAG7D,GAAG,CAAC8D,GAAJ,CAAQ/D,MAAM,CAACyC,MAAf,EAAuBkB,IAAvB,EAA6BD,gBAAgB,CAACC,IAAD,CAAhB,CAAuB/Q,OAApD,CAAb;AACH,eAFD,MAGK,IAAI8Q,gBAAgB,CAACC,IAAD,CAAhB,CAAuBK,GAAvB,IAA8B,IAAlC,EAAwC;AACzCF,0BAAU,GAAG7D,GAAG,CAAC8D,GAAJ,CAAQ/D,MAAM,CAACyC,MAAf,EAAuBkB,IAAvB,EAA6BD,gBAAgB,CAACC,IAAD,CAAhB,CAAuBK,GAApD,EAAyDN,gBAAgB,CAACC,IAAD,CAAhB,CAAuBM,GAAhF,CAAb;AACH;AACJ;;AACD,gBAAI,OAAOC,GAAP,KAAe,QAAnB,EAA6B;AACzB,kBAAI;AACA,oBAAIC,QAAQ,GAAGlC,OAAO,CAACmC,KAAR,CAAcC,KAAd,CAAoBT,KAApB,CAAf;AACAC,uBAAO,GAAG,CAAC,CAACM,QAAZ;;AACA,oBAAIN,OAAJ,EAAa;AACTD,uBAAK,GAAG3B,OAAO,CAACmC,KAAR,CAAcE,SAAd,CAAwBH,QAAxB,EAAkC,MAAlC,CAAR;AACH;AACJ,eAND,CAOA,OAAO7B,CAAP,EAAU,CAAE;AACf;;AACD,gBAAI,CAACwB,UAAL,EAAiB;AACbA,wBAAU,GAAG7D,GAAG,CAAC4D,OAAO,GAAG,UAAH,GAAgB,KAAxB,CAAH,CAAkC7D,MAAM,CAACyC,MAAzC,EAAiDkB,IAAjD,CAAb;AACH;;AACD3D,kBAAM,CAACyC,MAAP,CAAc8B,QAAd,IAA0BT,UAAU,CAACS,QAAX,CAAoBvE,MAAM,CAACyC,MAAP,CAAc8B,QAAlC,CAA1B;AACAvE,kBAAM,CAACyC,MAAP,CAAc+B,cAAd,IAAgCV,UAAU,CAACU,cAAX,CAA0BxE,MAAM,CAACyC,MAAP,CAAc+B,cAAxC,CAAhC;AACH;AACJ;AACJ;;AAED,aAAO5B,UAAP;AACH;AA/HE,GAAP;AAiIH;AAAA,C;;;;;;;;;;;;;;;;;;;;;;;;;AC7LD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA6B,8CAAA,CAAQC,yDAAR;AAEA;;;;;;;;;;AASO,SAASxC,IAAT,CAAcF,EAAd,EAAkBtP,MAAlB,EAA0B;AAC7B,MAAMiS,IAAI,GAAG,IAAIC,6CAAJ,CAAY;AACrBjJ,UAAM,EAAEjJ,MAAM,CAACiJ,MADM;AAErBkJ,kBAAc,EAAE,IAFK;AAGrBC,YAAQ,EAARA,iDAAQA;AAHa,GAAZ,CAAb;AAKAtJ,0DAAA,GAAgB9I,MAAM,CAAC+I,OAAvB;AACAD,0DAAA,GAAgB9I,MAAM,CAACgJ,OAAvB;AACAF,yDAAA,GAAe9I,MAAM,CAACiJ,MAAP,IAAiB,IAAhC;;AAGA,MAAI,OAAOqG,EAAP,KAAc,QAAlB,EAA4B;AACxBA,MAAE,GAAG3K,QAAQ,CAAC0N,aAAT,CAAuB/C,EAAvB,CAAL;AACH;;AACD,MAAI,CAACA,EAAL,EAAS;AACL,UAAM,IAAIpD,KAAJ,CAAU,iBAAV,CAAN;AACH;;AAED,MAAMoG,SAAS,GAAG3N,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAlB;AACA0K,IAAE,CAAC3I,WAAH,CAAe2L,SAAf;AAEA,MAAIP,4CAAJ,CAAQ;AACJE,QAAI,EAAJA,IADI;AAEJ3C,MAAE,EAAEgD,SAFA;AAGJC,UAAM,EAAE,gBAAAC,CAAC,EAAI;AACT,aAAOA,CAAC,CAAE;AACN7K,cAAM,EAAE8K,uDADF;AAENC,eAAO,EAAEC,yDAFH;AAGNC,YAAI,EAAEC,qDAAQA;AAHR,OAAD,CAIN7S,MAAM,CAAC8S,IAJD,KAIUH,yDAJX,CAAR;AAKH;AATG,GAAR;AAWH,C;;;;;;;;;;ACpDD,iBAAiB,qBAAuB,8B;;;;;;;;;;ACAxC;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA;AACA;AACA;AACA,sB;;;;;;;;;;ACHA,WAAW,mBAAO,CAAC,+CAAS;;AAE5B;AACA;;AAEA;;;;;;;;;;;ACLA,aAAa,mBAAO,CAAC,mDAAW;AAChC,gBAAgB,mBAAO,CAAC,yDAAc;AACtC,qBAAqB,mBAAO,CAAC,mEAAmB;;AAEhD;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,WAAW,EAAE;AACb,aAAa,OAAO;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;AC3BA;AACA,wBAAwB,qBAAM,gBAAgB,qBAAM,IAAI,qBAAM,sBAAsB,qBAAM;;AAE1F;;;;;;;;;;;ACHA,aAAa,mBAAO,CAAC,mDAAW;;AAEhC;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,WAAW,EAAE;AACb,aAAa,OAAO;AACpB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;;AAEH;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;AC7CA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,WAAW,EAAE;AACb,aAAa,OAAO;AACpB;AACA;AACA;AACA;;AAEA;;;;;;;;;;;ACrBA,iBAAiB,mBAAO,CAAC,2DAAe;;AAExC;AACA;;AAEA;AACA;;AAEA;;;;;;;;;;;ACRA,eAAe,mBAAO,CAAC,qDAAY;AACnC,UAAU,mBAAO,CAAC,2CAAO;AACzB,eAAe,mBAAO,CAAC,qDAAY;;AAEnC;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,SAAS;AACpB,WAAW,OAAO;AAClB,WAAW,OAAO,YAAY;AAC9B,WAAW,QAAQ;AACnB;AACA,WAAW,OAAO;AAClB;AACA,WAAW,QAAQ;AACnB;AACA,aAAa,SAAS;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA,8CAA8C,kBAAkB;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;AC9LA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,EAAE;AACb,aAAa,QAAQ;AACrB;AACA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;AC9BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,EAAE;AACb,aAAa,QAAQ;AACrB;AACA;AACA,oBAAoB;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;AC5BA,iBAAiB,mBAAO,CAAC,2DAAe;AACxC,mBAAmB,mBAAO,CAAC,6DAAgB;;AAE3C;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,EAAE;AACb,aAAa,QAAQ;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;AC5BA,WAAW,mBAAO,CAAC,+CAAS;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,OAAO;AACpB;AACA;AACA;AACA;AACA,IAAI;AACJ;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;ACtBA,eAAe,mBAAO,CAAC,qDAAY;AACnC,eAAe,mBAAO,CAAC,qDAAY;;AAEnC;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,EAAE;AACb,aAAa,OAAO;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;;;ACjEA;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;ACAA;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA,2CAA2C;AAC3C;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA,4BAA4B,kBAAkB,UAAU,oBAAoB,iGAAiG,aAAa,kBAAkB,MAAM,OAAO,YAAY,WAAW,gBAAgB,gDAAgD,gBAAgB,cAAc,gCAAgC,WAAW,YAAY;;AAErY;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,WAAW,4BAA4B;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;;AAEP;AACA,WAAW,qBAAqB;AAChC;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,OAAO,gBAAgB;AACvB,OAAO,4BAA4B;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,OAAO,qBAAqB;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,OAAO,gCAAgC;;AAEvC;AACA,OAAO,sCAAsC;AAC7C,OAAO,2EAA2E;;AAElF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEuC;;;;;;;;;;;;;;;;ACvSvC;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,wBAAwB;AACxB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwC,UAAU,WAAW,EAAE;AAC/D,EAAE;AACF;AACA;AACA,oDAAoD,WAAW;AAC/D;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACF;AACA,8BAA8B,4BAA4B;AAC1D;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,0BAA0B,oCAAoC;AAC9D;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,0CAA0C,aAAa;AACvD;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,EAAE;AACF;AACA;;AAEA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACF;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACF;;AAEA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACF;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;;AAEL;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA,KAAK;;AAEL;AACA;AACA,KAAK;;AAEL;AACA;AACA;AACA,SAAS;AACT;AACA;;AAEA;AACA;AACA;AACA;;AAEA,iEAAe,QAAQ,EAAC;;;;;;;;;;;;;;;;ACzexB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,UAAU;AACV;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,iBAAiB,sBAAsB;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,OAAO;AACP;AACA;AACA;AACA;AACA,SAAS;AACT,OAAO;AACP;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,4BAA4B;AAC5B,KAAK;AACL;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,uDAAuD;;AAEvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA,aAAa;AACb,WAAW;AACX,gBAAgB,IAAqC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA,WAAW;AACX,gBAAgB,IAAqC;AACrD;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,OAAO;AACP,YAAY,IAAqC;AACjD;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,GAAG;;AAEH;AACA;AACA,uDAAuD;;AAEvD;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,OAAO;AACP,YAAY,IAAqC;AACjD;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,GAAG;;AAEH;AACA,sBAAsB;;AAEtB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,UAAU,IAAqC;AAC/C;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,6BAA6B;AAC7B;AACA;AACA;;AAEA;AACA;;AAEA,kBAAkB;;AAElB;AACA;AACA;AACA,GAAG;;AAEH;AACA,MAAM,KAAqC;AAC3C;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,MAAM,IAAqC;AAC3C;AACA;;AAEA;AACA,wCAAwC;AACxC,sBAAsB;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;;AAEA;AACA,UAAU,IAAqC;AAC/C;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,iCAAiC,iBAAiB;AAClD;AACA;AACA,OAAO;AACP;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,mCAAmC;AACnC,KAAK;;AAEL;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;;AAEA;;AAEA;AACA,2BAA2B;;AAE3B;AACA;;AAEA;AACA,2BAA2B;;AAE3B;AACA;AACA;AACA,0EAA0E;;AAE1E;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA,UAAU;AACV;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA,MAAM,KAAqC;AAC3C;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA,MAAM,KAAqC;AAC3C;AACA;AACA;;AAEA;AACA;AACA,sBAAsB,6CAA6C;AACnE;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,mBAAmB;AACnB;AACA,qBAAqB,4BAA4B;AACjD;;AAEA;AACA;AACA;AACA,8CAA8C;AAC9C;AACA;AACA;AACA,gCAAgC;;AAEhC;AACA;AACA;AACA;AACA;AACA,mBAAmB,yBAAyB;AAC5C,KAAK;AACL;AACA,mCAAmC;AACnC;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA,uBAAuB,4BAA4B;;AAEnD;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,2BAA2B;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,cAAc,IAAqC;AACnD;AACA;AACA;AACA;AACA;AACA,YAAY,IAAqC;AACjD;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,wCAAwC;;AAExC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,8CAA8C;;AAE9C;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,8BAA8B;AAC9B;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;AAMA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,uBAAuB;;AAEvB;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;;;AAIA,sCAAsC;AACtC;AACA;AACA;AACA;AACA,2BAA2B,gCAAgC,EAAE;AAC7D,2BAA2B,gCAAgC,EAAE;AAC7D,gCAAgC,qEAAqE;AACrG;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,oBAAoB,OAAO;AAC3B,2BAA2B,OAAO;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,KAAK;AACL;AACA;AACA;;;AAGA;AACA,2BAA2B;AAC3B,2DAA2D;AAC3D;AACA,uBAAuB;AACvB;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;;AAEA,0BAA0B,MAAM,qBAAqB,YAAY,qBAAqB,mBAAmB,qBAAqB,iBAAiB,qBAAqB,oBAAoB,qBAAqB,UAAU,qBAAqB,kBAAkB,qBAAqB,0BAA0B,qBAAqB,WAAW,qBAAqB,aAAa,qBAAqB,yBAAyB,qBAAqB,sBAAsB,qBAAqB,4BAA4B,qBAAqB,qBAAqB,qBAAqB,mBAAmB,qBAAqB;;AAEhmB;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,OAAO;AACP,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,OAAO;AACP,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,sBAAsB,aAAa;AACnC;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA,GAAG,GAAG,aAAa;AACnB;;AAEA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA,GAAG,GAAG,kBAAkB;AACxB;;AAEA;AACA;AACA;AACA;AACA;;AAEA,yCAAyC;;AAEzC,+CAA+C;AAC/C,sDAAsD;AACtD,oDAAoD;AACpD,uDAAuD;;AAEvD,6CAA6C;AAC7C;AACA;AACA;;AAEA,qDAAqD;AACrD;AACA;AACA;AACA;;AAEA,6DAA6D;AAC7D,qEAAqE,yCAAyC;;AAE9G,8CAA8C;AAC9C,qDAAqD,yBAAyB;;AAE9E,gDAAgD;AAChD,yDAAyD,6BAA6B;;AAEtF,4DAA4D;AAC5D,kEAAkE,sCAAsC;;AAExG,yDAAyD;AACzD,+DAA+D,mCAAmC;;AAElG,+DAA+D;AAC/D,uEAAuE,2CAA2C;;AAElH,wDAAwD;AACxD;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA,sDAAsD;AACtD,6DAA6D,iCAAiC;;AAE9F,2DAA2D;AAC3D,yEAAyE;AACzE,qEAAqE;;AAErE;AACA,wBAAwB;AACxB;AACA;AACA;AACA;AACA;AACA,GAAG;AACH,QAAQ,KAAqC;AAC7C;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;;AAEjB;AACA,yDAAyD;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,KAAqC;AACjD;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,KAAK;AACL,UAAU,KAAqC;AAC/C;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,UAAU,IAAqC;AAC/C;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,UAAU,KAAqC;AAC/C;AACA;AACA;AACA,wBAAwB;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,KAAK;AACL;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA,iBAAiB,2CAA2C;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,qBAAqB;;AAErB;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,kBAAkB;AACnC;AACA;AACA;AACA;AACA,6BAA6B,aAAoB;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,aAAa;;AAEb;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,QAAQ,KAAqC;AAC7C;AACA;AACA;AACA,sBAAsB;AACtB;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,QAAQ,KAAqC;AAC7C;AACA;AACA,sBAAsB;AACtB;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA,aAAa;;AAEb;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,aAAa;AACb;AACA;AACA;;AAEA,oBAAoB;AACpB;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,uCAAuC;AACvC;;AAEA;AACA,yBAAyB;AACzB;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,mDAAmD;AACnD;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,mDAAmD,iCAAiC;AACpF;;AAEA;AACA,0DAA0D;AAC1D;;AAEA;AACA;AACA;AACA;;AAEA;AACA,8FAA8F;AAC9F;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,kBAAkB;AACnC;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,aAAoB;AACjD;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,MAAM,KAAqC;AAC3C;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,QAAQ,KAAqC;AAC7C;AACA;AACA;AACA,sBAAsB;AACtB;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,wDAAwD;AACxD;;AAEA;AACA;AACA;AACA;;AAEA;AACA,0FAA0F;AAC1F;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,iBAAiB,kBAAkB;AACnC;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,aAAoB;AACjD;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA,iEAAiE;AACjE,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,QAAQ,IAAqC;AAC7C;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,QAAQ,KAAqC;AAC7C;AACA;AACA;AACA,sBAAsB;AACtB,qDAAqD,GAAG,2BAA2B;AACnF,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,iCAAiC,iBAAiB;AAClD;AACA;AACA,OAAO;AACP;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,QAAQ,IAAqC;AAC7C;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,QAAQ,KAAqC;AAC7C;AACA;AACA;AACA,sBAAsB;AACtB;AACA,GAAG;AACH;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,CAAC;;AAED;AACA;;AAEA,iEAAe,OAAO,EAAC;;;;;;;;;;;;;;;;;;;;ACjlE+D;AAC3B;AACL;AACtD,CAAoE;;;AAGpE;AAC0F;AAC1F,gBAAgB,oGAAU;AAC1B,EAAE,0EAAM;AACR,EAAE,+EAAM;AACR,EAAE,wFAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACA,iEAAe,iB;;;;;;;;;;;;;;;;;;;ACvC0E;AAC3B;AACL;AACzD,CAAuE;;;AAGvE;AAC0F;AAC1F,gBAAgB,oGAAU;AAC1B,EAAE,6EAAM;AACR,EAAE,kFAAM;AACR,EAAE,2FAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACA,iEAAe,iB;;;;;;;;;;;;;;;;;;;ACvCsE;AAC3B;AACL;AACrD,CAAmE;;;AAGnE;AAC0F;AAC1F,gBAAgB,oGAAU;AAC1B,EAAE,yEAAM;AACR,EAAE,8EAAM;AACR,EAAE,uFAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACA,iEAAe,iB;;;;;;;;;;;;;;;;;;;ACvC+E;AAC3B;AACL;AAC9D,CAA4E;;;AAG5E;AAC0F;AAC1F,gBAAgB,oGAAU;AAC1B,EAAE,kFAAM;AACR,EAAE,uFAAM;AACR,EAAE,gGAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACA,iEAAe,iB;;;;;;;;;;;;;;;;;;;;ACvCuE;AAC3B;AACL;AACtD,CAAoE;;;AAGpE;AAC0F;AAC1F,gBAAgB,oGAAU;AAC1B,EAAE,0EAAM;AACR,EAAE,+EAAM;AACR,EAAE,wFAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACA,iEAAe,iB;;;;;;;;;;;;;;;;;;ACvCoE;AAC3B;AACL;;;AAGnD;AACA,CAA0F;AAC1F,gBAAgB,oGAAU;AAC1B,EAAE,uEAAM;AACR,EAAE,4EAAM;AACR,EAAE,qFAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACA,iEAAe,iB;;;;;;;;;;;;;;;;;;;ACtC2E;AAC3B;AACL;AAC1D,CAAwE;;;AAGxE;AAC0F;AAC1F,gBAAgB,oGAAU;AAC1B,EAAE,8EAAM;AACR,EAAE,mFAAM;AACR,EAAE,4FAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACA,iEAAe,iB;;;;;;;;;;;;;;;;;;;ACvCuE;AAC3B;AACL;AACtD,CAAoE;;;AAGpE;AAC0F;AAC1F,gBAAgB,oGAAU;AAC1B,EAAE,0EAAM;AACR,EAAE,+EAAM;AACR,EAAE,wFAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACA,iEAAe,iB;;;;;;;;;;;;;;;;ACvCwJ,CAAC,iEAAe,yKAAG,EAAC,C;;;;;;;;;;;;;;;;ACAjB,CAAC,iEAAe,4KAAG,EAAC,C;;;;;;;;;;;;;;;;ACAxB,CAAC,iEAAe,wKAAG,EAAC,C;;;;;;;;;;;;;;;;ACAX,CAAC,iEAAe,iLAAG,EAAC,C;;;;;;;;;;;;;;;;;ACA5B,CAAC,iEAAe,yKAAG,EAAC,C;;;;;;;;;;;;;;;;ACAvB,CAAC,iEAAe,sKAAG,EAAC,C;;;;;;;;;;;;;;;;ACAb,CAAC,iEAAe,6KAAG,EAAC,C;;;;;;;;;;;;;;;;ACAxB,CAAC,iEAAe,yKAAG,EAAC,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACA3L;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;;;;;;;;;;;;;;;;;ACjBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;;;;;;;;;;;;;;;;;ACjBA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK,SAAS,uBAAuB,EAAE;AACvC;AACA;AACA;AACA;AACA;AACA,sBAAsB,qCAAqC;AAC3D,sBAAsB;AACtB,aAAa;AACb;AACA;AACA;AACA;AACA,0BAA0B,sBAAsB;AAChD;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,SAAS,6BAA6B,EAAE;AACrE;AACA;AACA;AACA,iCAAiC,SAAS,kBAAkB,EAAE;AAC9D;AACA;AACA;AACA;AACA;AACA,2CAA2C,gCAAgC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2CAA2C;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC,iCAAiC;AAC1E;AACA;AACA;AACA;AACA,4CAA4C,oBAAoB,GAAG;AACnE,yCAAyC;AACzC,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA,yBAAyB,eAAe,gCAAgC,EAAE;AAC1E;AACA;AACA;AACA,6BAA6B,SAAS,kCAAkC,EAAE;AAC1E;AACA;AACA;AACA,+BAA+B;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC;AACjC;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA,+BAA+B;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC;AACjC;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA,+BAA+B;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwC;AACxC,+BAA+B;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB,gCAAgC,SAAS,uBAAuB,EAAE;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,oCAAoC;AACxD,oBAAoB,kBAAkB;AACtC,iBAAiB;AACjB,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,gBAAgB;AAChB,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;ACtOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;;;;;;;;;;;;;;;;;ACjBA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK,8DAA8D;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,kCAAkC;AACpD,kBAAkB;AAClB,SAAS;AACT,oBAAoB,iCAAiC;AACrD;AACA;AACA;AACA;AACA,SAAS,SAAS,mBAAmB,EAAE;AACvC;AACA;AACA;AACA,aAAa,4BAA4B;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA;AACA,uBAAuB;AACvB;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC,sBAAsB;AAC1D;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA,yBAAyB,yCAAyC;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B;AAC7B;AACA;AACA;AACA,iCAAiC,SAAS,WAAW,EAAE;AACvD;AACA,+CAA+C,4BAA4B;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uCAAuC;AACvC,8CAA8C,eAAe;AAC7D;AACA;AACA;AACA;AACA,yCAAyC;AACzC;AACA;AACA,qCAAqC;AACrC;AACA;AACA,gDAAgD;AAChD,uCAAuC;AACvC;AACA;AACA,gDAAgD;AAChD,uCAAuC;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,SAAS,WAAW,EAAE;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2CAA2C;AAC3C;AACA;AACA,uCAAuC;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC,oBAAoB;AACtD;AACA,yBAAyB;AACzB;AACA;AACA;AACA,2BAA2B;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B;AAC7B,uBAAuB;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,mBAAmB;AAC/C,yBAAyB;AACzB,mBAAmB;AACnB,4BAA4B,sCAAsC;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B;AAC1B,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;ACjOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;ACPA;AACA;AACA;AACA;AACA,oBAAoB,mCAAmC;AACvD;AACA;AACA;AACA;AACA,gBAAgB;AAChB,OAAO;AACP;AACA;AACA;AACA;AACA,iBAAiB,mBAAO,CAAC,6DAA0B;AACnD;AACA;AACA,SAAS;AACT;AACA,kBAAkB,+BAA+B;AACjD;AACA;AACA,sBAAsB,kCAAkC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;AChCA;AACA;AACA;AACA;AACA,oBAAoB,SAAS,wBAAwB,EAAE;AACvD,eAAe,SAAS,uBAAuB,EAAE;AACjD;AACA;AACA,SAAS,SAAS,uBAAuB,EAAE;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,mBAAmB;AACnB,aAAa;AACb;AACA;AACA;AACA;AACA,mCAAmC,gBAAgB;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB;AACvB;AACA;AACA;AACA,qCAAqC;AACrC,yBAAyB;AACzB;AACA,oCAAoC,4BAA4B;AAChE;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAAS,0BAA0B,EAAE;AACpD;AACA;AACA,SAAS,oCAAoC;AAC7C;AACA,4BAA4B,4BAA4B;AACxD;AACA;AACA;AACA;AACA,wBAAwB;AACxB,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB;AACxB,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB,sCAAsC,SAAS,uBAAuB,EAAE;AACxE;AACA;AACA,eAAe;AACf;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAAS,gBAAgB,EAAE;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;ACjIA;;AAEA;AACA;AACA;;AAEe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,yBAAyB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;;;;;;;;;ACjGA;AACA,EAAE,KAAuD;AACzD;AACA,MAAM,CAIyB;AAC/B,CAAC;AACD;AACA;AACA;AACA;AACA,uBAAuB,yBAAyB,EAAE;AAClD;AACA;AACA;AACA;AACA;AACA;AACA,kDAAkD,yBAAyB;AAC3E,OAAO;AACP;AACA;AACA;AACA,wDAAwD,kBAAkB;AAC1E,kDAAkD,YAAY;AAC9D,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+C,2BAA2B;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,OAAO;AACP;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qEAAqE,QAAQ;AAC7E;AACA;AACA,gCAAgC,uBAAuB;AACvD;AACA;AACA;AACA;AACA;AACA,+BAA+B,OAAO;AACtC;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,qFAAqF;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA,yCAAyC,OAAO;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA,gBAAgB;AAChB,OAAO;AACP;AACA;AACA,0BAA0B,qCAAqC;AAC/D,qBAAqB,4BAA4B;AACjD,2BAA2B,8BAA8B;AACzD,sCAAsC,4BAA4B;AAClE,4BAA4B,6BAA6B;AACzD,uBAAuB,6BAA6B;AACpD,0BAA0B,6BAA6B;AACvD,gCAAgC,sCAAsC;AACtE,wBAAwB,6BAA6B;AACrD,oBAAoB,6BAA6B;AACjD,iCAAiC,6BAA6B;AAC9D,kBAAkB,+BAA+B;AACjD,4BAA4B,6BAA6B;AACzD,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA,WAAW;AACX;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA,qBAAqB;AACrB,aAAa;AACb;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB;AACvB;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB,eAAe;AACf,aAAa;AACb;AACA,oCAAoC,GAAG;AACvC;AACA,aAAa;AACb;AACA;AACA;AACA;AACA,eAAe;AACf,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA,aAAa;AACb;AACA;AACA;AACA;AACA,aAAa;AACb,WAAW;AACX,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA,KAAK;AACL;AACA,CAAC;;;;;;;;;;;ACxZD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uE;;;;;;;;;;;ACjDA,qB;;;;;;UCAA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCxBA;WACA;WACA;WACA;WACA;WACA,gCAAgC,YAAY;WAC5C;WACA,E;;;;;WCPA;WACA;WACA;WACA;WACA,wCAAwC,yCAAyC;WACjF;WACA;WACA,E;;;;;WCPA;WACA;WACA;WACA;WACA,EAAE;WACF;WACA;WACA,CAAC,I;;;;;WCPD,sF;;;;;WCAA;WACA;WACA;WACA,sDAAsD,kBAAkB;WACxE;WACA,+CAA+C,cAAc;WAC7D,E;;;;;WCNA;WACA;WACA;WACA;WACA,E;;;;;WCJA,6B;;;;UCAA;UACA;UACA;UACA","file":"example-bundle.js","sourcesContent":["function e(e,n){const t=Object.create(null),r=e.split(\",\");for(let e=0;e<r.length;e++)t[r[e]]=!0;return n?e=>!!t[e.toLowerCase()]:e=>!!t[e]}const n=e(\"Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl\"),t=e(\"itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly\");function r(e){if(x(e)){const n={};for(let t=0;t<e.length;t++){const o=e[t],s=r(k(o)?l(o):o);if(s)for(const e in s)n[e]=s[e]}return n}if(E(e))return e}const o=/;(?![^(]*\\))/g,s=/:(.+)/;function l(e){const n={};return e.split(o).forEach((e=>{if(e){const t=e.split(s);t.length>1&&(n[t[0].trim()]=t[1].trim())}})),n}function a(e){let n=\"\";if(k(e))n=e;else if(x(e))for(let t=0;t<e.length;t++)n+=a(e[t])+\" \";else if(E(e))for(const t in e)e[t]&&(n+=t+\" \");return n.trim()}const i=e=>null==e?\"\":E(e)?JSON.stringify(e,c,2):String(e),c=(e,n)=>S(n)?{[`Map(${n.size})`]:[...n.entries()].reduce(((e,[n,t])=>(e[`${n} =>`]=t,e)),{})}:C(n)?{[`Set(${n.size})`]:[...n.values()]}:!E(n)||x(n)||T(n)?n:String(n),u={},d=[],p=()=>{},f=()=>!1,h=/^on[^a-z]/,g=e=>h.test(e),_=e=>e.startsWith(\"onUpdate:\"),y=Object.assign,m=(e,n)=>{const t=e.indexOf(n);t>-1&&e.splice(t,1)},v=Object.prototype.hasOwnProperty,b=(e,n)=>v.call(e,n),x=Array.isArray,S=e=>\"[object Map]\"===P(e),C=e=>\"[object Set]\"===P(e),O=e=>\"function\"==typeof e,k=e=>\"string\"==typeof e,w=e=>\"symbol\"==typeof e,E=e=>null!==e&&\"object\"==typeof e,A=e=>E(e)&&O(e.then)&&O(e.catch),U=Object.prototype.toString,P=e=>U.call(e),T=e=>\"[object Object]\"===P(e),N=e=>k(e)&&\"NaN\"!==e&&\"-\"!==e[0]&&\"\"+parseInt(e,10)===e,V=e(\",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted\"),F=e=>{const n=Object.create(null);return t=>n[t]||(n[t]=e(t))},j=/-(\\w)/g,R=F((e=>e.replace(j,((e,n)=>n?n.toUpperCase():\"\")))),I=/\\B([A-Z])/g,K=F((e=>e.replace(I,\"-$1\").toLowerCase())),M=F((e=>e.charAt(0).toUpperCase()+e.slice(1))),D=F((e=>e?`on${M(e)}`:\"\")),$=(e,n)=>e!==n&&(e==e||n==n),L=(e,n)=>{for(let t=0;t<e.length;t++)e[t](n)},q=(e,n,t)=>{Object.defineProperty(e,n,{configurable:!0,enumerable:!1,value:t})},B=e=>{const n=parseFloat(e);return isNaN(n)?e:n};let W;const z=()=>W||(W=\"undefined\"!=typeof globalThis?globalThis:\"undefined\"!=typeof self?self:\"undefined\"!=typeof window?window:\"undefined\"!=typeof global?global:{}),H=new WeakMap,J=[];let G;const Z=Symbol(\"\"),Q=Symbol(\"\");function X(e,n=u){(function(e){return e&&!0===e._isEffect})(e)&&(e=e.raw);const t=function(e,n){const t=function(){if(!t.active)return n.scheduler?void 0:e();if(!J.includes(t)){ne(t);try{return re.push(te),te=!0,J.push(t),G=t,e()}finally{J.pop(),se(),G=J[J.length-1]}}};return t.id=ee++,t.allowRecurse=!!n.allowRecurse,t._isEffect=!0,t.active=!0,t.raw=e,t.deps=[],t.options=n,t}(e,n);return n.lazy||t(),t}function Y(e){e.active&&(ne(e),e.options.onStop&&e.options.onStop(),e.active=!1)}let ee=0;function ne(e){const{deps:n}=e;if(n.length){for(let t=0;t<n.length;t++)n[t].delete(e);n.length=0}}let te=!0;const re=[];function oe(){re.push(te),te=!1}function se(){const e=re.pop();te=void 0===e||e}function le(e,n,t){if(!te||void 0===G)return;let r=H.get(e);r||H.set(e,r=new Map);let o=r.get(t);o||r.set(t,o=new Set),o.has(G)||(o.add(G),G.deps.push(o))}function ae(e,n,t,r,o,s){const l=H.get(e);if(!l)return;const a=new Set,i=e=>{e&&e.forEach((e=>{(e!==G||e.allowRecurse)&&a.add(e)}))};if(\"clear\"===n)l.forEach(i);else if(\"length\"===t&&x(e))l.forEach(((e,n)=>{(\"length\"===n||n>=r)&&i(e)}));else switch(void 0!==t&&i(l.get(t)),n){case\"add\":x(e)?N(t)&&i(l.get(\"length\")):(i(l.get(Z)),S(e)&&i(l.get(Q)));break;case\"delete\":x(e)||(i(l.get(Z)),S(e)&&i(l.get(Q)));break;case\"set\":S(e)&&i(l.get(Z))}a.forEach((e=>{e.options.scheduler?e.options.scheduler(e):e()}))}const ie=new Set(Object.getOwnPropertyNames(Symbol).map((e=>Symbol[e])).filter(w)),ce=he(),ue=he(!1,!0),de=he(!0),pe=he(!0,!0),fe={};function he(e=!1,n=!1){return function(t,r,o){if(\"__v_isReactive\"===r)return!e;if(\"__v_isReadonly\"===r)return e;if(\"__v_raw\"===r&&o===(e?$e:De).get(t))return t;const s=x(t);if(!e&&s&&b(fe,r))return Reflect.get(fe,r,o);const l=Reflect.get(t,r,o);if(w(r)?ie.has(r):\"__proto__\"===r||\"__v_isRef\"===r)return l;if(e||le(t,0,r),n)return l;if(Qe(l)){return!s||!N(r)?l.value:l}return E(l)?e?Be(l):qe(l):l}}[\"includes\",\"indexOf\",\"lastIndexOf\"].forEach((e=>{const n=Array.prototype[e];fe[e]=function(...e){const t=Ge(this);for(let e=0,n=this.length;e<n;e++)le(t,0,e+\"\");const r=n.apply(t,e);return-1===r||!1===r?n.apply(t,e.map(Ge)):r}})),[\"push\",\"pop\",\"shift\",\"unshift\",\"splice\"].forEach((e=>{const n=Array.prototype[e];fe[e]=function(...e){oe();const t=n.apply(this,e);return se(),t}}));function ge(e=!1){return function(n,t,r,o){const s=n[t];if(!e&&(r=Ge(r),!x(n)&&Qe(s)&&!Qe(r)))return s.value=r,!0;const l=x(n)&&N(t)?Number(t)<n.length:b(n,t),a=Reflect.set(n,t,r,o);return n===Ge(o)&&(l?$(r,s)&&ae(n,\"set\",t,r):ae(n,\"add\",t,r)),a}}const _e={get:ce,set:ge(),deleteProperty:function(e,n){const t=b(e,n),r=(e[n],Reflect.deleteProperty(e,n));return r&&t&&ae(e,\"delete\",n,void 0),r},has:function(e,n){const t=Reflect.has(e,n);return w(n)&&ie.has(n)||le(e,0,n),t},ownKeys:function(e){return le(e,0,x(e)?\"length\":Z),Reflect.ownKeys(e)}},ye={get:de,set:(e,n)=>!0,deleteProperty:(e,n)=>!0},me=y({},_e,{get:ue,set:ge(!0)}),ve=(y({},ye,{get:pe}),e=>E(e)?qe(e):e),be=e=>E(e)?Be(e):e,xe=e=>e,Se=e=>Reflect.getPrototypeOf(e);function Ce(e,n,t=!1,r=!1){const o=Ge(e=e.__v_raw),s=Ge(n);n!==s&&!t&&le(o,0,n),!t&&le(o,0,s);const{has:l}=Se(o),a=t?be:r?xe:ve;return l.call(o,n)?a(e.get(n)):l.call(o,s)?a(e.get(s)):void 0}function Oe(e,n=!1){const t=this.__v_raw,r=Ge(t),o=Ge(e);return e!==o&&!n&&le(r,0,e),!n&&le(r,0,o),e===o?t.has(e):t.has(e)||t.has(o)}function ke(e,n=!1){return e=e.__v_raw,!n&&le(Ge(e),0,Z),Reflect.get(e,\"size\",e)}function we(e){e=Ge(e);const n=Ge(this),t=Se(n).has.call(n,e);return n.add(e),t||ae(n,\"add\",e,e),this}function Ee(e,n){n=Ge(n);const t=Ge(this),{has:r,get:o}=Se(t);let s=r.call(t,e);s||(e=Ge(e),s=r.call(t,e));const l=o.call(t,e);return t.set(e,n),s?$(n,l)&&ae(t,\"set\",e,n):ae(t,\"add\",e,n),this}function Ae(e){const n=Ge(this),{has:t,get:r}=Se(n);let o=t.call(n,e);o||(e=Ge(e),o=t.call(n,e));r&&r.call(n,e);const s=n.delete(e);return o&&ae(n,\"delete\",e,void 0),s}function Ue(){const e=Ge(this),n=0!==e.size,t=e.clear();return n&&ae(e,\"clear\",void 0,void 0),t}function Pe(e,n){return function(t,r){const o=this,s=o.__v_raw,l=Ge(s),a=e?be:n?xe:ve;return!e&&le(l,0,Z),s.forEach(((e,n)=>t.call(r,a(e),a(n),o)))}}function Te(e,n,t){return function(...r){const o=this.__v_raw,s=Ge(o),l=S(s),a=\"entries\"===e||e===Symbol.iterator&&l,i=\"keys\"===e&&l,c=o[e](...r),u=n?be:t?xe:ve;return!n&&le(s,0,i?Q:Z),{next(){const{value:e,done:n}=c.next();return n?{value:e,done:n}:{value:a?[u(e[0]),u(e[1])]:u(e),done:n}},[Symbol.iterator](){return this}}}}function Ne(e){return function(...n){return\"delete\"!==e&&this}}const Ve={get(e){return Ce(this,e)},get size(){return ke(this)},has:Oe,add:we,set:Ee,delete:Ae,clear:Ue,forEach:Pe(!1,!1)},Fe={get(e){return Ce(this,e,!1,!0)},get size(){return ke(this)},has:Oe,add:we,set:Ee,delete:Ae,clear:Ue,forEach:Pe(!1,!0)},je={get(e){return Ce(this,e,!0)},get size(){return ke(this,!0)},has(e){return Oe.call(this,e,!0)},add:Ne(\"add\"),set:Ne(\"set\"),delete:Ne(\"delete\"),clear:Ne(\"clear\"),forEach:Pe(!0,!1)};function Re(e,n){const t=n?Fe:e?je:Ve;return(n,r,o)=>\"__v_isReactive\"===r?!e:\"__v_isReadonly\"===r?e:\"__v_raw\"===r?n:Reflect.get(b(t,r)&&r in n?t:n,r,o)}[\"keys\",\"values\",\"entries\",Symbol.iterator].forEach((e=>{Ve[e]=Te(e,!1,!1),je[e]=Te(e,!0,!1),Fe[e]=Te(e,!1,!0)}));const Ie={get:Re(!1,!1)},Ke={get:Re(!1,!0)},Me={get:Re(!0,!1)},De=new WeakMap,$e=new WeakMap;function Le(e){return e.__v_skip||!Object.isExtensible(e)?0:function(e){switch(e){case\"Object\":case\"Array\":return 1;case\"Map\":case\"Set\":case\"WeakMap\":case\"WeakSet\":return 2;default:return 0}}((e=>P(e).slice(8,-1))(e))}function qe(e){return e&&e.__v_isReadonly?e:We(e,!1,_e,Ie)}function Be(e){return We(e,!0,ye,Me)}function We(e,n,t,r){if(!E(e))return e;if(e.__v_raw&&(!n||!e.__v_isReactive))return e;const o=n?$e:De,s=o.get(e);if(s)return s;const l=Le(e);if(0===l)return e;const a=new Proxy(e,2===l?r:t);return o.set(e,a),a}function ze(e){return He(e)?ze(e.__v_raw):!(!e||!e.__v_isReactive)}function He(e){return!(!e||!e.__v_isReadonly)}function Je(e){return ze(e)||He(e)}function Ge(e){return e&&Ge(e.__v_raw)||e}const Ze=e=>E(e)?qe(e):e;function Qe(e){return Boolean(e&&!0===e.__v_isRef)}function Xe(e){return function(e,n=!1){if(Qe(e))return e;return new Ye(e,n)}(e)}class Ye{constructor(e,n=!1){this._rawValue=e,this._shallow=n,this.__v_isRef=!0,this._value=n?e:Ze(e)}get value(){return le(Ge(this),0,\"value\"),this._value}set value(e){$(Ge(e),this._rawValue)&&(this._rawValue=e,this._value=this._shallow?e:Ze(e),ae(Ge(this),\"set\",\"value\",e))}}const en={get:(e,n,t)=>function(e){return Qe(e)?e.value:e}(Reflect.get(e,n,t)),set:(e,n,t,r)=>{const o=e[n];return Qe(o)&&!Qe(t)?(o.value=t,!0):Reflect.set(e,n,t,r)}};function nn(e){return ze(e)?e:new Proxy(e,en)}class tn{constructor(e,n){this._object=e,this._key=n,this.__v_isRef=!0}get value(){return this._object[this._key]}set value(e){this._object[this._key]=e}}class rn{constructor(e,n,t){this._setter=n,this._dirty=!0,this.__v_isRef=!0,this.effect=X(e,{lazy:!0,scheduler:()=>{this._dirty||(this._dirty=!0,ae(Ge(this),\"set\",\"value\"))}}),this.__v_isReadonly=t}get value(){return this._dirty&&(this._value=this.effect(),this._dirty=!1),le(Ge(this),0,\"value\"),this._value}set value(e){this._setter(e)}}function on(e,n,t,r){let o;try{o=r?e(...r):e()}catch(e){ln(e,n,t)}return o}function sn(e,n,t,r){if(O(e)){const o=on(e,n,t,r);return o&&A(o)&&o.catch((e=>{ln(e,n,t)})),o}const o=[];for(let s=0;s<e.length;s++)o.push(sn(e[s],n,t,r));return o}function ln(e,n,t,r=!0){n&&n.vnode;if(n){let r=n.parent;const o=n.proxy,s=t;for(;r;){const n=r.ec;if(n)for(let t=0;t<n.length;t++)if(!1===n[t](e,o,s))return;r=r.parent}const l=n.appContext.config.errorHandler;if(l)return void on(l,null,10,[e,o,s])}!function(e,n,t,r=!0){console.error(e)}(e,0,0,r)}let an=!1,cn=!1;const un=[];let dn=0;const pn=[];let fn=null,hn=0;const gn=[];let _n=null,yn=0;const mn=Promise.resolve();let vn=null,bn=null;function xn(e){const n=vn||mn;return e?n.then(this?e.bind(this):e):n}function Sn(e){un.length&&un.includes(e,an&&e.allowRecurse?dn+1:dn)||e===bn||(un.push(e),Cn())}function Cn(){an||cn||(cn=!0,vn=mn.then(An))}function On(e,n,t,r){x(e)?t.push(...e):n&&n.includes(e,e.allowRecurse?r+1:r)||t.push(e),Cn()}function kn(e,n=null){if(pn.length){for(bn=n,fn=[...new Set(pn)],pn.length=0,hn=0;hn<fn.length;hn++)fn[hn]();fn=null,hn=0,bn=null,kn(e,n)}}function wn(e){if(gn.length){const e=[...new Set(gn)];if(gn.length=0,_n)return void _n.push(...e);for(_n=e,_n.sort(((e,n)=>En(e)-En(n))),yn=0;yn<_n.length;yn++)_n[yn]();_n=null,yn=0}}const En=e=>null==e.id?1/0:e.id;function An(e){cn=!1,an=!0,kn(e),un.sort(((e,n)=>En(e)-En(n)));try{for(dn=0;dn<un.length;dn++){const e=un[dn];e&&on(e,null,14)}}finally{dn=0,un.length=0,wn(),an=!1,vn=null,(un.length||gn.length)&&An(e)}}function Un(e,n,...t){const r=e.vnode.props||u;let o=t;const s=n.startsWith(\"update:\"),l=s&&n.slice(7);if(l&&l in r){const e=`${\"modelValue\"===l?\"model\":l}Modifiers`,{number:n,trim:s}=r[e]||u;s?o=t.map((e=>e.trim())):n&&(o=t.map(B))}__VUE_PROD_DEVTOOLS__;let a=D(R(n)),i=r[a];!i&&s&&(a=D(K(n)),i=r[a]),i&&sn(i,e,6,o);const c=r[a+\"Once\"];if(c){if(e.emitted){if(e.emitted[a])return}else(e.emitted={})[a]=!0;sn(c,e,6,o)}}function Pn(e,n,t=!1){if(!n.deopt&&void 0!==e.__emits)return e.__emits;const r=e.emits;let o={},s=!1;if(__VUE_OPTIONS_API__&&!O(e)){const r=e=>{s=!0,y(o,Pn(e,n,!0))};!t&&n.mixins.length&&n.mixins.forEach(r),e.extends&&r(e.extends),e.mixins&&e.mixins.forEach(r)}return r||s?(x(r)?r.forEach((e=>o[e]=null)):y(o,r),e.__emits=o):e.__emits=null}function Tn(e,n){return!(!e||!g(n))&&(n=n.slice(2).replace(/Once$/,\"\"),b(e,n[0].toLowerCase()+n.slice(1))||b(e,K(n))||b(e,n))}let Nn=null;function Vn(e){Nn=e}function Fn(e){const{type:n,vnode:t,proxy:r,withProxy:o,props:s,propsOptions:[l],slots:a,attrs:i,emit:c,render:u,renderCache:d,data:p,setupState:f,ctx:h}=e;let g;Nn=e;try{let e;if(4&t.shapeFlag){const n=o||r;g=Xt(u.call(n,n,d,s,f,p,h)),e=i}else{const t=n;0,g=Xt(t.length>1?t(s,{attrs:i,slots:a,emit:c}):t(s,null)),e=n.props?i:Rn(i)}let y=g;if(!1!==n.inheritAttrs&&e){const n=Object.keys(e),{shapeFlag:t}=y;n.length&&(1&t||6&t)&&(l&&n.some(_)&&(e=In(e,l)),y=Gt(y,e))}t.dirs&&(y.dirs=y.dirs?y.dirs.concat(t.dirs):t.dirs),t.transition&&(y.transition=t.transition),g=y}catch(n){ln(n,e,1),g=Jt(Rt)}return Nn=null,g}function jn(e){let n;for(let t=0;t<e.length;t++){const r=e[t];if(!qt(r))return;if(r.type!==Rt||\"v-if\"===r.children){if(n)return;n=r}}return n}const Rn=e=>{let n;for(const t in e)(\"class\"===t||\"style\"===t||g(t))&&((n||(n={}))[t]=e[t]);return n},In=(e,n)=>{const t={};for(const r in e)_(r)&&r.slice(9)in n||(t[r]=e[r]);return t};function Kn(e,n,t){const r=Object.keys(n);if(r.length!==Object.keys(e).length)return!0;for(let o=0;o<r.length;o++){const s=r[o];if(n[s]!==e[s]&&!Tn(t,s))return!0}return!1}function Mn(e){if(O(e)&&(e=e()),x(e)){e=jn(e)}return Xt(e)}let Dn=0;const $n=e=>Dn+=e;function Ln(e,n,t,r=!1){const o={},s={};q(s,Wt,1),qn(e,n,o,s),t?e.props=r?o:We(o,!1,me,Ke):e.type.props?e.props=o:e.props=s,e.attrs=s}function qn(e,n,t,r){const[o,s]=e.propsOptions;if(n)for(const s in n){const l=n[s];if(V(s))continue;let a;o&&b(o,a=R(s))?t[a]=l:Tn(e.emitsOptions,s)||(r[s]=l)}if(s){const n=Ge(t);for(let r=0;r<s.length;r++){const l=s[r];t[l]=Bn(o,n,l,n[l],e)}}}function Bn(e,n,t,r,o){const s=e[t];if(null!=s){const e=b(s,\"default\");if(e&&void 0===r){const e=s.default;s.type!==Function&&O(e)?(mr(o),r=e(n),mr(null)):r=e}s[0]&&(b(n,t)||e?!s[1]||\"\"!==r&&r!==K(t)||(r=!0):r=!1)}return r}function Wn(e,n,t=!1){if(!n.deopt&&e.__props)return e.__props;const r=e.props,o={},s=[];let l=!1;if(__VUE_OPTIONS_API__&&!O(e)){const r=e=>{l=!0;const[t,r]=Wn(e,n,!0);y(o,t),r&&s.push(...r)};!t&&n.mixins.length&&n.mixins.forEach(r),e.extends&&r(e.extends),e.mixins&&e.mixins.forEach(r)}if(!r&&!l)return e.__props=d;if(x(r))for(let e=0;e<r.length;e++){const n=R(r[e]);zn(n)&&(o[n]=u)}else if(r)for(const e in r){const n=R(e);if(zn(n)){const t=r[e],l=o[n]=x(t)||O(t)?{type:t}:t;if(l){const e=Gn(Boolean,l.type),t=Gn(String,l.type);l[0]=e>-1,l[1]=t<0||e<t,(e>-1||b(l,\"default\"))&&s.push(n)}}}return e.__props=[o,s]}function zn(e){return\"$\"!==e[0]}function Hn(e){const n=e&&e.toString().match(/^\\s*function (\\w+)/);return n?n[1]:\"\"}function Jn(e,n){return Hn(e)===Hn(n)}function Gn(e,n){if(x(n)){for(let t=0,r=n.length;t<r;t++)if(Jn(n[t],e))return t}else if(O(n))return Jn(n,e)?0:-1;return-1}function Zn(e,n,t=yr,r=!1){if(t){const o=t[e]||(t[e]=[]),s=n.__weh||(n.__weh=(...r)=>{if(t.isUnmounted)return;oe(),mr(t);const o=sn(n,t,e,r);return mr(null),se(),o});return r?o.unshift(s):o.push(s),s}}const Qn=e=>(n,t=yr)=>!vr&&Zn(e,n,t),Xn=Qn(\"bm\"),Yn=Qn(\"m\"),et=Qn(\"bu\"),nt=Qn(\"u\"),tt=Qn(\"bum\"),rt=Qn(\"um\"),ot=Qn(\"rtg\"),st=Qn(\"rtc\"),lt={};function at(e,n,t){return it(e,n,t)}function it(e,n,{immediate:t,deep:r,flush:o,onTrack:s,onTrigger:l}=u,a=yr){let i,c,d=!1;if(Qe(e)?(i=()=>e.value,d=!!e._shallow):ze(e)?(i=()=>e,r=!0):i=x(e)?()=>e.map((e=>Qe(e)?e.value:ze(e)?ut(e):O(e)?on(e,a,2):void 0)):O(e)?n?()=>on(e,a,2):()=>{if(!a||!a.isUnmounted)return c&&c(),on(e,a,3,[f])}:p,n&&r){const e=i;i=()=>ut(e())}const f=e=>{c=y.options.onStop=()=>{on(e,a,4)}};let h=x(e)?[]:lt;const g=()=>{if(y.active)if(n){const e=y();(r||d||$(e,h))&&(c&&c(),sn(n,a,3,[e,h===lt?void 0:h,f]),h=e)}else y()};let _;g.allowRecurse=!!n,_=\"sync\"===o?g:\"post\"===o?()=>kt(g,a&&a.suspense):()=>{!a||a.isMounted?function(e){On(e,fn,pn,hn)}(g):g()};const y=X(i,{lazy:!0,onTrack:s,onTrigger:l,scheduler:_});return Sr(y,a),n?t?g():h=y():\"post\"===o?kt(y,a&&a.suspense):y(),()=>{Y(y),a&&m(a.effects,y)}}function ct(e,n,t){const r=this.proxy;return it(k(e)?()=>r[e]:e.bind(r),n.bind(r),t,this)}function ut(e,n=new Set){if(!E(e)||n.has(e))return e;if(n.add(e),Qe(e))ut(e.value,n);else if(x(e))for(let t=0;t<e.length;t++)ut(e[t],n);else if(C(e)||S(e))e.forEach((e=>{ut(e,n)}));else for(const t in e)ut(e[t],n);return e}const dt=e=>e.type.__isKeepAlive;function pt(e,n,t=yr){const r=e.__wdc||(e.__wdc=()=>{let n=t;for(;n;){if(n.isDeactivated)return;n=n.parent}e()});if(Zn(n,r,t),t){let e=t.parent;for(;e&&e.parent;)dt(e.parent.vnode)&&ft(r,n,t,e),e=e.parent}}function ft(e,n,t,r){const o=Zn(n,e,r,!0);rt((()=>{m(r[n],o)}),t)}const ht=e=>\"_\"===e[0]||\"$stable\"===e,gt=e=>x(e)?e.map(Xt):[Xt(e)],_t=(e,n,t)=>function(e,n=Nn){if(!n)return e;const t=(...t)=>{Dn||Dt(!0);const r=Nn;Vn(n);const o=e(...t);return Vn(r),Dn||$t(),o};return t._c=!0,t}((e=>gt(n(e))),t),yt=(e,n)=>{const t=e._ctx;for(const r in e){if(ht(r))continue;const o=e[r];if(O(o))n[r]=_t(0,o,t);else if(null!=o){const e=gt(o);n[r]=()=>e}}},mt=(e,n)=>{const t=gt(n);e.slots.default=()=>t};function vt(e,n){if(null===Nn)return e;const t=Nn.proxy,r=e.dirs||(e.dirs=[]);for(let e=0;e<n.length;e++){let[o,s,l,a=u]=n[e];O(o)&&(o={mounted:o,updated:o}),r.push({dir:o,instance:t,value:s,oldValue:void 0,arg:l,modifiers:a})}return e}function bt(e,n,t,r){const o=e.dirs,s=n&&n.dirs;for(let l=0;l<o.length;l++){const a=o[l];s&&(a.oldValue=s[l].value);const i=a.dir[r];i&&sn(i,t,8,[e.el,a,e,n])}}function xt(){return{app:null,config:{isNativeTag:f,performance:!1,globalProperties:{},optionMergeStrategies:{},isCustomElement:f,errorHandler:void 0,warnHandler:void 0},mixins:[],components:{},directives:{},provides:Object.create(null)}}let St=0;function Ct(e,n){return function(t,r=null){null==r||E(r)||(r=null);const o=xt(),s=new Set;let l=!1;const a=o.app={_uid:St++,_component:t,_props:r,_container:null,_context:o,version:kr,get config(){return o.config},set config(e){},use:(e,...n)=>(s.has(e)||(e&&O(e.install)?(s.add(e),e.install(a,...n)):O(e)&&(s.add(e),e(a,...n))),a),mixin:e=>(__VUE_OPTIONS_API__&&(o.mixins.includes(e)||(o.mixins.push(e),(e.props||e.emits)&&(o.deopt=!0))),a),component:(e,n)=>n?(o.components[e]=n,a):o.components[e],directive:(e,n)=>n?(o.directives[e]=n,a):o.directives[e],mount(s,i){if(!l){const c=Jt(t,r);return c.appContext=o,i&&n?n(c,s):e(c,s),l=!0,a._container=s,s.__vue_app__=a,__VUE_PROD_DEVTOOLS__,c.component.proxy}},unmount(){l&&(e(null,a._container),__VUE_PROD_DEVTOOLS__)},provide:(e,n)=>(o.provides[e]=n,a)};return a}}const Ot={scheduler:Sn,allowRecurse:!0},kt=function(e,n){n&&n.pendingBranch?x(e)?n.effects.push(...e):n.effects.push(e):On(e,_n,gn,yn)},wt=(e,n,t,r)=>{if(x(e))return void e.forEach(((e,o)=>wt(e,n&&(x(n)?n[o]:n),t,r)));let o;o=!r||r.type.__asyncLoader?null:4&r.shapeFlag?r.component.exposed||r.component.proxy:r.el;const{i:s,r:l}=e,a=n&&n.r,i=s.refs===u?s.refs={}:s.refs,c=s.setupState;if(null!=a&&a!==l&&(k(a)?(i[a]=null,b(c,a)&&(c[a]=null)):Qe(a)&&(a.value=null)),k(l)){const e=()=>{i[l]=o,b(c,l)&&(c[l]=o)};o?(e.id=-1,kt(e,t)):e()}else if(Qe(l)){const e=()=>{l.value=o};o?(e.id=-1,kt(e,t)):e()}else O(l)&&on(l,s,12,[o,i])};function Et(e){return function(e,n){\"boolean\"!=typeof __VUE_OPTIONS_API__&&(z().__VUE_OPTIONS_API__=!0),\"boolean\"!=typeof __VUE_PROD_DEVTOOLS__&&(z().__VUE_PROD_DEVTOOLS__=!1);const{insert:t,remove:r,patchProp:o,forcePatchProp:s,createElement:l,createText:a,createComment:i,setText:c,setElementText:f,parentNode:h,nextSibling:g,setScopeId:_=p,cloneNode:m,insertStaticContent:v}=e,x=(e,n,t,r=null,o=null,s=null,l=!1,a=!1)=>{e&&!Bt(e,n)&&(r=le(e),Q(e,o,s,!0),e=null),-2===n.patchFlag&&(a=!1,n.dynamicChildren=null);const{type:i,ref:c,shapeFlag:u}=n;switch(i){case jt:S(e,n,t,r);break;case Rt:C(e,n,t,r);break;case It:null==e&&O(n,t,r,l);break;case Ft:I(e,n,t,r,o,s,l,a);break;default:1&u?E(e,n,t,r,o,s,l,a):6&u?M(e,n,t,r,o,s,l,a):(64&u||128&u)&&i.process(e,n,t,r,o,s,l,a,ce)}null!=c&&o&&wt(c,e&&e.ref,s,n)},S=(e,n,r,o)=>{if(null==e)t(n.el=a(n.children),r,o);else{const t=n.el=e.el;n.children!==e.children&&c(t,n.children)}},C=(e,n,r,o)=>{null==e?t(n.el=i(n.children||\"\"),r,o):n.el=e.el},O=(e,n,t,r)=>{[e.el,e.anchor]=v(e.children,n,t,r)},k=({el:e,anchor:n},r,o)=>{let s;for(;e&&e!==n;)s=g(e),t(e,r,o),e=s;t(n,r,o)},w=({el:e,anchor:n})=>{let t;for(;e&&e!==n;)t=g(e),r(e),e=t;r(n)},E=(e,n,t,r,o,s,l,a)=>{l=l||\"svg\"===n.type,null==e?U(n,t,r,o,s,l,a):N(e,n,o,s,l,a)},U=(e,n,r,s,a,i,c)=>{let u,d;const{type:p,props:h,shapeFlag:g,transition:_,scopeId:y,patchFlag:v,dirs:b}=e;if(e.el&&void 0!==m&&-1===v)u=e.el=m(e.el);else{if(u=e.el=l(e.type,i,h&&h.is),8&g?f(u,e.children):16&g&&T(e.children,u,null,s,a,i&&\"foreignObject\"!==p,c||!!e.dynamicChildren),b&&bt(e,null,s,\"created\"),h){for(const n in h)V(n)||o(u,n,null,h[n],i,e.children,s,a,re);(d=h.onVnodeBeforeMount)&&At(d,s,e)}P(u,y,e,s)}__VUE_PROD_DEVTOOLS__&&(Object.defineProperty(u,\"__vnode\",{value:e,enumerable:!1}),Object.defineProperty(u,\"__vueParentComponent\",{value:s,enumerable:!1})),b&&bt(e,null,s,\"beforeMount\");const x=(!a||a&&!a.pendingBranch)&&_&&!_.persisted;x&&_.beforeEnter(u),t(u,n,r),((d=h&&h.onVnodeMounted)||x||b)&&kt((()=>{d&&At(d,s,e),x&&_.enter(u),b&&bt(e,null,s,\"mounted\")}),a)},P=(e,n,t,r)=>{if(n&&_(e,n),r){const o=r.type.__scopeId;o&&o!==n&&_(e,o+\"-s\"),t===r.subTree&&P(e,r.vnode.scopeId,r.vnode,r.parent)}},T=(e,n,t,r,o,s,l,a=0)=>{for(let i=a;i<e.length;i++){const a=e[i]=l?Yt(e[i]):Xt(e[i]);x(null,a,n,t,r,o,s,l)}},N=(e,n,t,r,l,a)=>{const i=n.el=e.el;let{patchFlag:c,dynamicChildren:d,dirs:p}=n;c|=16&e.patchFlag;const h=e.props||u,g=n.props||u;let _;if((_=g.onVnodeBeforeUpdate)&&At(_,t,n,e),p&&bt(n,e,t,\"beforeUpdate\"),c>0){if(16&c)j(i,n,h,g,t,r,l);else if(2&c&&h.class!==g.class&&o(i,\"class\",null,g.class,l),4&c&&o(i,\"style\",h.style,g.style,l),8&c){const a=n.dynamicProps;for(let n=0;n<a.length;n++){const c=a[n],u=h[c],d=g[c];(d!==u||s&&s(i,c))&&o(i,c,u,d,l,e.children,t,r,re)}}1&c&&e.children!==n.children&&f(i,n.children)}else a||null!=d||j(i,n,h,g,t,r,l);const y=l&&\"foreignObject\"!==n.type;d?F(e.dynamicChildren,d,i,t,r,y):a||H(e,n,i,null,t,r,y),((_=g.onVnodeUpdated)||p)&&kt((()=>{_&&At(_,t,n,e),p&&bt(n,e,t,\"updated\")}),r)},F=(e,n,t,r,o,s)=>{for(let l=0;l<n.length;l++){const a=e[l],i=n[l],c=a.type===Ft||!Bt(a,i)||6&a.shapeFlag||64&a.shapeFlag?h(a.el):t;x(a,i,c,null,r,o,s,!0)}},j=(e,n,t,r,l,a,i)=>{if(t!==r){for(const c in r){if(V(c))continue;const u=r[c],d=t[c];(u!==d||s&&s(e,c))&&o(e,c,d,u,i,n.children,l,a,re)}if(t!==u)for(const s in t)V(s)||s in r||o(e,s,t[s],null,i,n.children,l,a,re)}},I=(e,n,r,o,s,l,i,c)=>{const u=n.el=e?e.el:a(\"\"),d=n.anchor=e?e.anchor:a(\"\");let{patchFlag:p,dynamicChildren:f}=n;p>0&&(c=!0),null==e?(t(u,r,o),t(d,r,o),T(n.children,r,d,s,l,i,c)):p>0&&64&p&&f?(F(e.dynamicChildren,f,r,s,l,i),(null!=n.key||s&&n===s.subTree)&&Ut(e,n,!0)):H(e,n,r,d,s,l,i,c)},M=(e,n,t,r,o,s,l,a)=>{null==e?512&n.shapeFlag?o.ctx.activate(n,t,r,l,a):D(n,t,r,o,s,l,a):$(e,n,a)},D=(e,n,t,r,o,s,l)=>{const a=e.component=function(e,n,t){const r=e.type,o=(n?n.appContext:e.appContext)||gr,s={uid:_r++,vnode:e,type:r,parent:n,appContext:o,root:null,next:null,subTree:null,update:null,render:null,proxy:null,exposed:null,withProxy:null,effects:null,provides:n?n.provides:Object.create(o.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:Wn(r,o),emitsOptions:Pn(r,o),emit:null,emitted:null,ctx:u,data:u,props:u,attrs:u,slots:u,refs:u,setupState:u,setupContext:null,suspense:t,suspenseId:t?t.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null};s.ctx={_:s},s.root=n?n.root:s,s.emit=Un.bind(null,s),__VUE_PROD_DEVTOOLS__;return s}(e,r,o);if(dt(e)&&(a.ctx.renderer=ce),function(e,n=!1){vr=n;const{props:t,children:r,shapeFlag:o}=e.vnode,s=4&o;Ln(e,t,s,n),((e,n)=>{if(32&e.vnode.shapeFlag){const t=n._;t?(e.slots=n,q(n,\"_\",t)):yt(n,e.slots={})}else e.slots={},n&&mt(e,n);q(e.slots,Wt,1)})(e,r);const l=s?function(e,n){const t=e.type;e.accessCache=Object.create(null),e.proxy=new Proxy(e.ctx,fr);const{setup:r}=t;if(r){const t=e.setupContext=r.length>1?function(e){const n=n=>{e.exposed=nn(n)};return{attrs:e.attrs,slots:e.slots,emit:e.emit,expose:n}}(e):null;yr=e,oe();const o=on(r,e,0,[e.props,t]);if(se(),yr=null,A(o)){if(n)return o.then((n=>{br(e,n)}));e.asyncDep=o}else br(e,o)}else xr(e)}(e,n):void 0;vr=!1}(a),a.asyncDep){if(o&&o.registerDep(a,B),!e.el){const e=a.subTree=Jt(Rt);C(null,e,n,t)}}else B(a,e,n,t,o,s,l)},$=(e,n,t)=>{const r=n.component=e.component;if(function(e,n,t){const{props:r,children:o,component:s}=e,{props:l,children:a,patchFlag:i}=n,c=s.emitsOptions;if(n.dirs||n.transition)return!0;if(!(t&&i>=0))return!(!o&&!a||a&&a.$stable)||r!==l&&(r?!l||Kn(r,l,c):!!l);if(1024&i)return!0;if(16&i)return r?Kn(r,l,c):!!l;if(8&i){const e=n.dynamicProps;for(let n=0;n<e.length;n++){const t=e[n];if(l[t]!==r[t]&&!Tn(c,t))return!0}}return!1}(e,n,t)){if(r.asyncDep&&!r.asyncResolved)return void W(r,n,t);r.next=n,function(e){const n=un.indexOf(e);n>-1&&un.splice(n,1)}(r.update),r.update()}else n.component=e.component,n.el=e.el,r.vnode=n},B=(e,n,t,r,o,s,l)=>{e.update=X((function(){if(e.isMounted){let n,{next:t,bu:r,u:a,parent:i,vnode:c}=e,u=t;t?(t.el=c.el,W(e,t,l)):t=c,r&&L(r),(n=t.props&&t.props.onVnodeBeforeUpdate)&&At(n,i,t,c);const d=Fn(e),p=e.subTree;e.subTree=d,x(p,d,h(p.el),le(p),e,o,s),t.el=d.el,null===u&&function({vnode:e,parent:n},t){for(;n&&n.subTree===e;)(e=n.vnode).el=t,n=n.parent}(e,d.el),a&&kt(a,o),(n=t.props&&t.props.onVnodeUpdated)&&kt((()=>{At(n,i,t,c)}),o),__VUE_PROD_DEVTOOLS__}else{let l;const{el:a,props:i}=n,{bm:c,m:u,parent:d}=e;c&&L(c),(l=i&&i.onVnodeBeforeMount)&&At(l,d,n);const p=e.subTree=Fn(e);a&&de?de(n.el,p,e,o):(x(null,p,t,r,e,o,s),n.el=p.el),u&&kt(u,o),(l=i&&i.onVnodeMounted)&&kt((()=>{At(l,d,n)}),o);const{a:f}=e;f&&256&n.shapeFlag&&kt(f,o),e.isMounted=!0}}),Ot)},W=(e,n,t)=>{n.component=e;const r=e.vnode.props;e.vnode=n,e.next=null,function(e,n,t,r){const{props:o,attrs:s,vnode:{patchFlag:l}}=e,a=Ge(o),[i]=e.propsOptions;if(!(r||l>0)||16&l){let r;qn(e,n,o,s);for(const s in a)n&&(b(n,s)||(r=K(s))!==s&&b(n,r))||(i?!t||void 0===t[s]&&void 0===t[r]||(o[s]=Bn(i,n||u,s,void 0,e)):delete o[s]);if(s!==a)for(const e in s)n&&b(n,e)||delete s[e]}else if(8&l){const t=e.vnode.dynamicProps;for(let r=0;r<t.length;r++){const l=t[r],c=n[l];if(i)if(b(s,l))s[l]=c;else{const n=R(l);o[n]=Bn(i,a,n,c,e)}else s[l]=c}}ae(e,\"set\",\"$attrs\")}(e,n.props,r,t),((e,n)=>{const{vnode:t,slots:r}=e;let o=!0,s=u;if(32&t.shapeFlag){const e=n._;e?1===e?o=!1:y(r,n):(o=!n.$stable,yt(n,r)),s=n}else n&&(mt(e,n),s={default:1});if(o)for(const e in r)ht(e)||e in s||delete r[e]})(e,n.children),kn(void 0,e.update)},H=(e,n,t,r,o,s,l,a=!1)=>{const i=e&&e.children,c=e?e.shapeFlag:0,u=n.children,{patchFlag:d,shapeFlag:p}=n;if(d>0){if(128&d)return void G(i,u,t,r,o,s,l,a);if(256&d)return void J(i,u,t,r,o,s,l,a)}8&p?(16&c&&re(i,o,s),u!==i&&f(t,u)):16&c?16&p?G(i,u,t,r,o,s,l,a):re(i,o,s,!0):(8&c&&f(t,\"\"),16&p&&T(u,t,r,o,s,l,a))},J=(e,n,t,r,o,s,l,a)=>{n=n||d;const i=(e=e||d).length,c=n.length,u=Math.min(i,c);let p;for(p=0;p<u;p++){const r=n[p]=a?Yt(n[p]):Xt(n[p]);x(e[p],r,t,null,o,s,l,a)}i>c?re(e,o,s,!0,!1,u):T(n,t,r,o,s,l,a,u)},G=(e,n,t,r,o,s,l,a)=>{let i=0;const c=n.length;let u=e.length-1,p=c-1;for(;i<=u&&i<=p;){const r=e[i],c=n[i]=a?Yt(n[i]):Xt(n[i]);if(!Bt(r,c))break;x(r,c,t,null,o,s,l,a),i++}for(;i<=u&&i<=p;){const r=e[u],i=n[p]=a?Yt(n[p]):Xt(n[p]);if(!Bt(r,i))break;x(r,i,t,null,o,s,l,a),u--,p--}if(i>u){if(i<=p){const e=p+1,u=e<c?n[e].el:r;for(;i<=p;)x(null,n[i]=a?Yt(n[i]):Xt(n[i]),t,u,o,s,l),i++}}else if(i>p)for(;i<=u;)Q(e[i],o,s,!0),i++;else{const f=i,h=i,g=new Map;for(i=h;i<=p;i++){const e=n[i]=a?Yt(n[i]):Xt(n[i]);null!=e.key&&g.set(e.key,i)}let _,y=0;const m=p-h+1;let v=!1,b=0;const S=new Array(m);for(i=0;i<m;i++)S[i]=0;for(i=f;i<=u;i++){const r=e[i];if(y>=m){Q(r,o,s,!0);continue}let c;if(null!=r.key)c=g.get(r.key);else for(_=h;_<=p;_++)if(0===S[_-h]&&Bt(r,n[_])){c=_;break}void 0===c?Q(r,o,s,!0):(S[c-h]=i+1,c>=b?b=c:v=!0,x(r,n[c],t,null,o,s,l,a),y++)}const C=v?function(e){const n=e.slice(),t=[0];let r,o,s,l,a;const i=e.length;for(r=0;r<i;r++){const i=e[r];if(0!==i){if(o=t[t.length-1],e[o]<i){n[r]=o,t.push(r);continue}for(s=0,l=t.length-1;s<l;)a=(s+l)/2|0,e[t[a]]<i?s=a+1:l=a;i<e[t[s]]&&(s>0&&(n[r]=t[s-1]),t[s]=r)}}s=t.length,l=t[s-1];for(;s-- >0;)t[s]=l,l=n[l];return t}(S):d;for(_=C.length-1,i=m-1;i>=0;i--){const e=h+i,a=n[e],u=e+1<c?n[e+1].el:r;0===S[i]?x(null,a,t,u,o,s,l):v&&(_<0||i!==C[_]?Z(a,t,u,2):_--)}}},Z=(e,n,r,o,s=null)=>{const{el:l,type:a,transition:i,children:c,shapeFlag:u}=e;if(6&u)return void Z(e.component.subTree,n,r,o);if(128&u)return void e.suspense.move(n,r,o);if(64&u)return void a.move(e,n,r,ce);if(a===Ft){t(l,n,r);for(let e=0;e<c.length;e++)Z(c[e],n,r,o);return void t(e.anchor,n,r)}if(a===It)return void k(e,n,r);if(2!==o&&1&u&&i)if(0===o)i.beforeEnter(l),t(l,n,r),kt((()=>i.enter(l)),s);else{const{leave:e,delayLeave:o,afterLeave:s}=i,a=()=>t(l,n,r),c=()=>{e(l,(()=>{a(),s&&s()}))};o?o(l,a,c):c()}else t(l,n,r)},Q=(e,n,t,r=!1,o=!1)=>{const{type:s,props:l,ref:a,children:i,dynamicChildren:c,shapeFlag:u,patchFlag:d,dirs:p}=e;if(null!=a&&wt(a,null,t,null),256&u)return void n.ctx.deactivate(e);const f=1&u&&p;let h;if((h=l&&l.onVnodeBeforeUnmount)&&At(h,n,e),6&u)te(e.component,t,r);else{if(128&u)return void e.suspense.unmount(t,r);f&&bt(e,null,n,\"beforeUnmount\"),c&&(s!==Ft||d>0&&64&d)?re(c,n,t,!1,!0):(s===Ft&&(128&d||256&d)||!o&&16&u)&&re(i,n,t),64&u&&(r||!Pt(e.props))&&e.type.remove(e,ce),r&&ee(e)}((h=l&&l.onVnodeUnmounted)||f)&&kt((()=>{h&&At(h,n,e),f&&bt(e,null,n,\"unmounted\")}),t)},ee=e=>{const{type:n,el:t,anchor:o,transition:s}=e;if(n===Ft)return void ne(t,o);if(n===It)return void w(e);const l=()=>{r(t),s&&!s.persisted&&s.afterLeave&&s.afterLeave()};if(1&e.shapeFlag&&s&&!s.persisted){const{leave:n,delayLeave:r}=s,o=()=>n(t,l);r?r(e.el,l,o):o()}else l()},ne=(e,n)=>{let t;for(;e!==n;)t=g(e),r(e),e=t;r(n)},te=(e,n,t)=>{const{bum:r,effects:o,update:s,subTree:l,um:a}=e;if(r&&L(r),o)for(let e=0;e<o.length;e++)Y(o[e]);s&&(Y(s),Q(l,e,n,t)),a&&kt(a,n),kt((()=>{e.isUnmounted=!0}),n),n&&n.pendingBranch&&!n.isUnmounted&&e.asyncDep&&!e.asyncResolved&&e.suspenseId===n.pendingId&&(n.deps--,0===n.deps&&n.resolve()),__VUE_PROD_DEVTOOLS__},re=(e,n,t,r=!1,o=!1,s=0)=>{for(let l=s;l<e.length;l++)Q(e[l],n,t,r,o)},le=e=>6&e.shapeFlag?le(e.component.subTree):128&e.shapeFlag?e.suspense.next():g(e.anchor||e.el),ie=(e,n)=>{null==e?n._vnode&&Q(n._vnode,null,null,!0):x(n._vnode||null,e,n),wn(),n._vnode=e},ce={p:x,um:Q,m:Z,r:ee,mt:D,mc:T,pc:H,pbc:F,n:le,o:e};let ue,de;n&&([ue,de]=n(ce));return{render:ie,hydrate:ue,createApp:Ct(ie,ue)}}(e)}function At(e,n,t,r=null){sn(e,n,7,[t,r])}function Ut(e,n,t=!1){const r=e.children,o=n.children;if(x(r)&&x(o))for(let e=0;e<r.length;e++){const n=r[e];let s=o[e];1&s.shapeFlag&&!s.dynamicChildren&&((s.patchFlag<=0||32===s.patchFlag)&&(s=o[e]=Yt(o[e]),s.el=n.el),t||Ut(n,s))}}const Pt=e=>e&&(e.disabled||\"\"===e.disabled);function Tt(e){return function(e,n,t=!0){const r=Nn||yr;if(r){const t=r.type;if(\"components\"===e){if(\"_self\"===n)return t;const e=t.displayName||t.name;if(e&&(e===n||e===R(n)||e===M(R(n))))return t}return Vt(r[e]||t[e],n)||Vt(r.appContext[e],n)}}(\"components\",e)||e}const Nt=Symbol();function Vt(e,n){return e&&(e[n]||e[R(n)]||e[M(R(n))])}const Ft=Symbol(void 0),jt=Symbol(void 0),Rt=Symbol(void 0),It=Symbol(void 0),Kt=[];let Mt=null;function Dt(e=!1){Kt.push(Mt=e?null:[])}function $t(){Kt.pop(),Mt=Kt[Kt.length-1]||null}function Lt(e,n,t,r,o){const s=Jt(e,n,t,r,o,!0);return s.dynamicChildren=Mt||d,$t(),Mt&&Mt.push(s),s}function qt(e){return!!e&&!0===e.__v_isVNode}function Bt(e,n){return e.type===n.type&&e.key===n.key}const Wt=\"__vInternal\",zt=({key:e})=>null!=e?e:null,Ht=({ref:e})=>null!=e?k(e)||Qe(e)||O(e)?{i:Nn,r:e}:e:null,Jt=function(e,n=null,t=null,o=0,s=null,l=!1){e&&e!==Nt||(e=Rt);if(qt(e)){const r=Gt(e,n,!0);return t&&er(r,t),r}i=e,O(i)&&\"__vccOpts\"in i&&(e=e.__vccOpts);var i;if(n){(Je(n)||Wt in n)&&(n=y({},n));let{class:e,style:t}=n;e&&!k(e)&&(n.class=a(e)),E(t)&&(Je(t)&&!x(t)&&(t=y({},t)),n.style=r(t))}const c=k(e)?1:(e=>e.__isSuspense)(e)?128:(e=>e.__isTeleport)(e)?64:E(e)?4:O(e)?2:0,u={__v_isVNode:!0,__v_skip:!0,type:e,props:n,key:n&&zt(n),ref:n&&Ht(n),scopeId:null,children:null,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:c,patchFlag:o,dynamicProps:s,dynamicChildren:null,appContext:null};if(er(u,t),128&c){const{content:e,fallback:n}=function(e){const{shapeFlag:n,children:t}=e;let r,o;return 32&n?(r=Mn(t.default),o=Mn(t.fallback)):(r=Mn(t),o=Xt(null)),{content:r,fallback:o}}(u);u.ssContent=e,u.ssFallback=n}!l&&Mt&&(o>0||6&c)&&32!==o&&Mt.push(u);return u};function Gt(e,n,t=!1){const{props:o,ref:s,patchFlag:l}=e,i=n?function(...e){const n=y({},e[0]);for(let t=1;t<e.length;t++){const o=e[t];for(const e in o)if(\"class\"===e)n.class!==o.class&&(n.class=a([n.class,o.class]));else if(\"style\"===e)n.style=r([n.style,o.style]);else if(g(e)){const t=n[e],r=o[e];t!==r&&(n[e]=t?[].concat(t,o[e]):r)}else\"\"!==e&&(n[e]=o[e])}return n}(o||{},n):o;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:i,key:i&&zt(i),ref:n&&n.ref?t&&s?x(s)?s.concat(Ht(n)):[s,Ht(n)]:Ht(n):s,scopeId:e.scopeId,children:e.children,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:n&&e.type!==Ft?-1===l?16:16|l:l,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&Gt(e.ssContent),ssFallback:e.ssFallback&&Gt(e.ssFallback),el:e.el,anchor:e.anchor}}function Zt(e=\" \",n=0){return Jt(jt,null,e,n)}function Qt(e=\"\",n=!1){return n?(Dt(),Lt(Rt,null,e)):Jt(Rt,null,e)}function Xt(e){return null==e||\"boolean\"==typeof e?Jt(Rt):x(e)?Jt(Ft,null,e):\"object\"==typeof e?null===e.el?e:Gt(e):Jt(jt,null,String(e))}function Yt(e){return null===e.el?e:Gt(e)}function er(e,n){let t=0;const{shapeFlag:r}=e;if(null==n)n=null;else if(x(n))t=16;else if(\"object\"==typeof n){if(1&r||64&r){const t=n.default;return void(t&&(t._c&&$n(1),er(e,t()),t._c&&$n(-1)))}{t=32;const r=n._;r||Wt in n?3===r&&Nn&&(1024&Nn.vnode.patchFlag?(n._=2,e.patchFlag|=1024):n._=1):n._ctx=Nn}}else O(n)?(n={default:n,_ctx:Nn},t=32):(n=String(n),64&r?(t=16,n=[Zt(n)]):t=8);e.children=n,e.shapeFlag|=t}function nr(e,n,t=!1){const r=yr||Nn;if(r){const o=null==r.parent?r.vnode.appContext&&r.vnode.appContext.provides:r.parent.provides;if(o&&e in o)return o[e];if(arguments.length>1)return t&&O(n)?n():n}}let tr=!1;function rr(e,n,t=[],r=[],o=[],s=!1){const{mixins:l,extends:a,data:i,computed:c,methods:d,watch:f,provide:h,inject:g,components:_,directives:m,beforeMount:v,mounted:b,beforeUpdate:S,updated:C,activated:k,deactivated:w,beforeDestroy:A,beforeUnmount:U,destroyed:P,unmounted:T,render:N,renderTracked:V,renderTriggered:F,errorCaptured:j,expose:R}=n,I=e.proxy,K=e.ctx,M=e.appContext.mixins;if(s&&N&&e.render===p&&(e.render=N),s||(tr=!0,or(\"beforeCreate\",\"bc\",n,e,M),tr=!1,ar(e,M,t,r,o)),a&&rr(e,a,t,r,o,!0),l&&ar(e,l,t,r,o),g)if(x(g))for(let e=0;e<g.length;e++){const n=g[e];K[n]=nr(n)}else for(const e in g){const n=g[e];E(n)?K[e]=nr(n.from||e,n.default,!0):K[e]=nr(n)}if(d)for(const e in d){const n=d[e];O(n)&&(K[e]=n.bind(I))}if(s?i&&t.push(i):(t.length&&t.forEach((n=>ir(e,n,I))),i&&ir(e,i,I)),c)for(const e in c){const n=c[e],t=Cr({get:O(n)?n.bind(I,I):O(n.get)?n.get.bind(I,I):p,set:!O(n)&&O(n.set)?n.set.bind(I):p});Object.defineProperty(K,e,{enumerable:!0,configurable:!0,get:()=>t.value,set:e=>t.value=e})}var D;if(f&&r.push(f),!s&&r.length&&r.forEach((e=>{for(const n in e)cr(e[n],K,I,n)})),h&&o.push(h),!s&&o.length&&o.forEach((e=>{const n=O(e)?e.call(I):e;Reflect.ownKeys(n).forEach((e=>{!function(e,n){if(yr){let t=yr.provides;const r=yr.parent&&yr.parent.provides;r===t&&(t=yr.provides=Object.create(r)),t[e]=n}}(e,n[e])}))})),s&&(_&&y(e.components||(e.components=y({},e.type.components)),_),m&&y(e.directives||(e.directives=y({},e.type.directives)),m)),s||or(\"created\",\"c\",n,e,M),v&&Xn(v.bind(I)),b&&Yn(b.bind(I)),S&&et(S.bind(I)),C&&nt(C.bind(I)),k&&pt(k.bind(I),\"a\",D),w&&function(e,n){pt(e,\"da\",n)}(w.bind(I)),j&&((e,n=yr)=>{Zn(\"ec\",e,n)})(j.bind(I)),V&&st(V.bind(I)),F&&ot(F.bind(I)),U&&tt(U.bind(I)),T&&rt(T.bind(I)),x(R)&&!s)if(R.length){const n=e.exposed||(e.exposed=nn({}));R.forEach((e=>{n[e]=function(e,n){return Qe(e[n])?e[n]:new tn(e,n)}(I,e)}))}else e.exposed||(e.exposed=u)}function or(e,n,t,r,o){lr(e,n,o,r);const{extends:s,mixins:l}=t;s&&sr(e,n,s,r),l&&lr(e,n,l,r);const a=t[e];a&&sn(a.bind(r.proxy),r,n)}function sr(e,n,t,r){t.extends&&sr(e,n,t.extends,r);const o=t[e];o&&sn(o.bind(r.proxy),r,n)}function lr(e,n,t,r){for(let o=0;o<t.length;o++){const s=t[o].mixins;s&&lr(e,n,s,r);const l=t[o][e];l&&sn(l.bind(r.proxy),r,n)}}function ar(e,n,t,r,o){for(let s=0;s<n.length;s++)rr(e,n[s],t,r,o,!0)}function ir(e,n,t){const r=n.call(t,t);E(r)&&(e.data===u?e.data=qe(r):y(e.data,r))}function cr(e,n,t,r){const o=r.includes(\".\")?function(e,n){const t=n.split(\".\");return()=>{let n=e;for(let e=0;e<t.length&&n;e++)n=n[t[e]];return n}}(t,r):()=>t[r];if(k(e)){const t=n[e];O(t)&&at(o,t)}else if(O(e))at(o,e.bind(t));else if(E(e))if(x(e))e.forEach((e=>cr(e,n,t,r)));else{const r=O(e.handler)?e.handler.bind(t):n[e.handler];O(r)&&at(o,r,e)}}function ur(e,n,t){const r=t.appContext.config.optionMergeStrategies,{mixins:o,extends:s}=n;s&&ur(e,s,t),o&&o.forEach((n=>ur(e,n,t)));for(const o in n)r&&b(r,o)?e[o]=r[o](e[o],n[o],t.proxy,o):e[o]=n[o]}const dr=e=>e&&(e.proxy?e.proxy:dr(e.parent)),pr=y(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>dr(e.parent),$root:e=>e.root&&e.root.proxy,$emit:e=>e.emit,$options:e=>__VUE_OPTIONS_API__?function(e){const n=e.type,{__merged:t,mixins:r,extends:o}=n;if(t)return t;const s=e.appContext.mixins;if(!s.length&&!r&&!o)return n;const l={};return s.forEach((n=>ur(l,n,e))),ur(l,n,e),n.__merged=l}(e):e.type,$forceUpdate:e=>()=>Sn(e.update),$nextTick:e=>xn.bind(e.proxy),$watch:e=>__VUE_OPTIONS_API__?ct.bind(e):p}),fr={get({_:e},n){const{ctx:t,setupState:r,data:o,props:s,accessCache:l,type:a,appContext:i}=e;if(\"__v_skip\"===n)return!0;let c;if(\"$\"!==n[0]){const a=l[n];if(void 0!==a)switch(a){case 0:return r[n];case 1:return o[n];case 3:return t[n];case 2:return s[n]}else{if(r!==u&&b(r,n))return l[n]=0,r[n];if(o!==u&&b(o,n))return l[n]=1,o[n];if((c=e.propsOptions[0])&&b(c,n))return l[n]=2,s[n];if(t!==u&&b(t,n))return l[n]=3,t[n];__VUE_OPTIONS_API__&&tr||(l[n]=4)}}const d=pr[n];let p,f;return d?(\"$attrs\"===n&&le(e,0,n),d(e)):(p=a.__cssModules)&&(p=p[n])?p:t!==u&&b(t,n)?(l[n]=3,t[n]):(f=i.config.globalProperties,b(f,n)?f[n]:void 0)},set({_:e},n,t){const{data:r,setupState:o,ctx:s}=e;if(o!==u&&b(o,n))o[n]=t;else if(r!==u&&b(r,n))r[n]=t;else if(n in e.props)return!1;return(\"$\"!==n[0]||!(n.slice(1)in e))&&(s[n]=t,!0)},has({_:{data:e,setupState:n,accessCache:t,ctx:r,appContext:o,propsOptions:s}},l){let a;return void 0!==t[l]||e!==u&&b(e,l)||n!==u&&b(n,l)||(a=s[0])&&b(a,l)||b(r,l)||b(pr,l)||b(o.config.globalProperties,l)}},hr=y({},fr,{get(e,n){if(n!==Symbol.unscopables)return fr.get(e,n,e)},has:(e,t)=>\"_\"!==t[0]&&!n(t)}),gr=xt();let _r=0;let yr=null;const mr=e=>{yr=e};let vr=!1;function br(e,n,t){O(n)?e.render=n:E(n)&&(__VUE_PROD_DEVTOOLS__&&(e.devtoolsRawSetupState=n),e.setupState=nn(n)),xr(e)}function xr(e,n){const t=e.type;e.render||(e.render=t.render||p,e.render._rc&&(e.withProxy=new Proxy(e.ctx,hr))),__VUE_OPTIONS_API__&&(yr=e,oe(),rr(e,t),se(),yr=null)}function Sr(e,n=yr){n&&(n.effects||(n.effects=[])).push(e)}function Cr(e){const n=function(e){let n,t;return O(e)?(n=e,t=p):(n=e.get,t=e.set),new rn(n,t,O(e)||!e.set)}(e);return Sr(n.effect),n}function Or(e,n){let t;if(x(e)||k(e)){t=new Array(e.length);for(let r=0,o=e.length;r<o;r++)t[r]=n(e[r],r)}else if(\"number\"==typeof e){t=new Array(e);for(let r=0;r<e;r++)t[r]=n(r+1,r)}else if(E(e))if(e[Symbol.iterator])t=Array.from(e,n);else{const r=Object.keys(e);t=new Array(r.length);for(let o=0,s=r.length;o<s;o++){const s=r[o];t[o]=n(e[s],s,o)}}else t=[];return t}const kr=\"3.0.4\",wr=\"http://www.w3.org/2000/svg\",Er=\"undefined\"!=typeof document?document:null;let Ar,Ur;const Pr={insert:(e,n,t)=>{n.insertBefore(e,t||null)},remove:e=>{const n=e.parentNode;n&&n.removeChild(e)},createElement:(e,n,t)=>n?Er.createElementNS(wr,e):Er.createElement(e,t?{is:t}:void 0),createText:e=>Er.createTextNode(e),createComment:e=>Er.createComment(e),setText:(e,n)=>{e.nodeValue=n},setElementText:(e,n)=>{e.textContent=n},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Er.querySelector(e),setScopeId(e,n){e.setAttribute(n,\"\")},cloneNode:e=>e.cloneNode(!0),insertStaticContent(e,n,t,r){const o=r?Ur||(Ur=Er.createElementNS(wr,\"svg\")):Ar||(Ar=Er.createElement(\"div\"));o.innerHTML=e;const s=o.firstChild;let l=s,a=l;for(;l;)a=l,Pr.insert(l,n,t),l=o.firstChild;return[s,a]}};const Tr=/\\s*!important$/;function Nr(e,n,t){if(x(t))t.forEach((t=>Nr(e,n,t)));else if(n.startsWith(\"--\"))e.setProperty(n,t);else{const r=function(e,n){const t=Fr[n];if(t)return t;let r=R(n);if(\"filter\"!==r&&r in e)return Fr[n]=r;r=M(r);for(let t=0;t<Vr.length;t++){const o=Vr[t]+r;if(o in e)return Fr[n]=o}return n}(e,n);Tr.test(t)?e.setProperty(K(r),t.replace(Tr,\"\"),\"important\"):e[r]=t}}const Vr=[\"Webkit\",\"Moz\",\"ms\"],Fr={};const jr=\"http://www.w3.org/1999/xlink\";let Rr=Date.now;\"undefined\"!=typeof document&&Rr()>document.createEvent(\"Event\").timeStamp&&(Rr=()=>performance.now());let Ir=0;const Kr=Promise.resolve(),Mr=()=>{Ir=0};function Dr(e,n,t,r,o=null){const s=e._vei||(e._vei={}),l=s[n];if(r&&l)l.value=r;else{const[t,a]=function(e){let n;if($r.test(e)){let t;for(n={};t=e.match($r);)e=e.slice(0,e.length-t[0].length),n[t[0].toLowerCase()]=!0}return[e.slice(2).toLowerCase(),n]}(n);if(r){!function(e,n,t,r){e.addEventListener(n,t,r)}(e,t,s[n]=function(e,n){const t=e=>{(e.timeStamp||Rr())>=t.attached-1&&sn(function(e,n){if(x(n)){const t=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{t.call(e),e._stopped=!0},n.map((e=>n=>!n._stopped&&e(n)))}return n}(e,t.value),n,5,[e])};return t.value=e,t.attached=(()=>Ir||(Kr.then(Mr),Ir=Rr()))(),t}(r,o),a)}else l&&(!function(e,n,t,r){e.removeEventListener(n,t,r)}(e,t,l,a),s[n]=void 0)}}const $r=/(?:Once|Passive|Capture)$/;const Lr=/^on[a-z]/;const qr={beforeMount(e,{value:n},{transition:t}){e._vod=\"none\"===e.style.display?\"\":e.style.display,t&&n?t.beforeEnter(e):Br(e,n)},mounted(e,{value:n},{transition:t}){t&&n&&t.enter(e)},updated(e,{value:n,oldValue:t},{transition:r}){r&&n!==t?n?(r.beforeEnter(e),Br(e,!0),r.enter(e)):r.leave(e,(()=>{Br(e,!1)})):Br(e,n)},beforeUnmount(e,{value:n}){Br(e,n)}};function Br(e,n){e.style.display=n?e._vod:\"none\"}const Wr=y({patchProp:(e,n,r,o,s=!1,l,a,i,c)=>{switch(n){case\"class\":!function(e,n,t){if(null==n&&(n=\"\"),t)e.setAttribute(\"class\",n);else{const t=e._vtc;t&&(n=(n?[n,...t]:[...t]).join(\" \")),e.className=n}}(e,o,s);break;case\"style\":!function(e,n,t){const r=e.style;if(t)if(k(t))n!==t&&(r.cssText=t);else{for(const e in t)Nr(r,e,t[e]);if(n&&!k(n))for(const e in n)null==t[e]&&Nr(r,e,\"\")}else e.removeAttribute(\"style\")}(e,r,o);break;default:g(n)?_(n)||Dr(e,n,0,o,a):function(e,n,t,r){if(r)return\"innerHTML\"===n||!!(n in e&&Lr.test(n)&&O(t));if(\"spellcheck\"===n||\"draggable\"===n)return!1;if(\"form\"===n&&\"string\"==typeof t)return!1;if(\"list\"===n&&\"INPUT\"===e.tagName)return!1;if(Lr.test(n)&&k(t))return!1;return n in e}(e,n,o,s)?function(e,n,t,r,o,s,l){if(\"innerHTML\"===n||\"textContent\"===n)return r&&l(r,o,s),void(e[n]=null==t?\"\":t);if(\"value\"!==n||\"PROGRESS\"===e.tagName){if(\"\"===t||null==t){const r=typeof e[n];if(\"\"===t&&\"boolean\"===r)return void(e[n]=!0);if(null==t&&\"string\"===r)return e[n]=\"\",void e.removeAttribute(n);if(\"number\"===r)return e[n]=0,void e.removeAttribute(n)}try{e[n]=t}catch(e){}}else{e._value=t;const n=null==t?\"\":t;e.value!==n&&(e.value=n)}}(e,n,o,l,a,i,c):(\"true-value\"===n?e._trueValue=o:\"false-value\"===n&&(e._falseValue=o),function(e,n,r,o){if(o&&n.startsWith(\"xlink:\"))null==r?e.removeAttributeNS(jr,n.slice(6,n.length)):e.setAttributeNS(jr,n,r);else{const o=t(n);null==r||o&&!1===r?e.removeAttribute(n):e.setAttribute(n,o?\"\":r)}}(e,n,o,s))}},forcePatchProp:(e,n)=>\"value\"===n},Pr);let zr;function Hr(){return zr||(zr=Et(Wr))}const Jr=(...e)=>{const n=Hr().createApp(...e),{mount:t}=n;return n.mount=e=>{const r=function(e){if(k(e)){return document.querySelector(e)}return e}(e);if(!r)return;const o=n._component;O(o)||o.render||o.template||(o.template=r.innerHTML),r.innerHTML=\"\";const s=t(r);return r.removeAttribute(\"v-cloak\"),r.setAttribute(\"data-v-app\",\"\"),s},n};const Gr=(...e)=>Object.prototype.toString.call(...e).slice(8,-1);var Zr={props:{data:{required:!0,validator:e=>\"Null\"===Gr(e)},name:{required:!0,type:String}}};const Qr={class:\"null\"},Xr={class:\"key\"},Yr={key:0,class:\"separator\"},eo=Jt(\"span\",{class:\"value\"},\"null\",-1);Zr.render=function(e,n,t,r,o,s){return Dt(),Lt(\"span\",Qr,[Jt(\"span\",Xr,i(t.name),1),\"\"!==t.name?(Dt(),Lt(\"span\",Yr,\": \")):Qt(\"v-if\",!0),eo])},Zr.__file=\"src/components/NullWrapper.vue\";var no={props:{data:{required:!0,validator:e=>\"Boolean\"===Gr(e)},name:{required:!0,type:String}}};const to={class:\"boolean\"},ro={class:\"key\"},oo={key:0,class:\"separator\"},so={class:\"value\"};no.render=function(e,n,t,r,o,s){return Dt(),Lt(\"span\",to,[Jt(\"span\",ro,i(t.name),1),\"\"!==t.name?(Dt(),Lt(\"span\",oo,\": \")):Qt(\"v-if\",!0),Jt(\"span\",so,i(t.data),1)])},no.__file=\"src/components/BooleanWrapper.vue\";var lo={props:{data:{required:!0,validator:e=>\"Number\"===Gr(e)},name:{required:!0,type:String}}};const ao={class:\"number\"},io={class:\"key\"},co={key:0,class:\"separator\"},uo={class:\"value\"};lo.render=function(e,n,t,r,o,s){return Dt(),Lt(\"span\",ao,[Jt(\"span\",io,i(t.name),1),\"\"!==t.name?(Dt(),Lt(\"span\",co,\": \")):Qt(\"v-if\",!0),Jt(\"span\",uo,i(t.data),1)])},lo.__file=\"src/components/NumberWrapper.vue\";var po={props:{data:{required:!0,validator:e=>\"String\"===Gr(e)},name:{required:!0,type:String}}};const fo={class:\"string\"},ho={class:\"key\"},go={key:0,class:\"separator\"},_o=Jt(\"span\",{class:\"quotes\"},'\"',-1),yo={class:\"value\"},mo=Jt(\"span\",{class:\"quotes\"},'\"',-1);po.render=function(e,n,t,r,o,s){return Dt(),Lt(\"span\",fo,[Jt(\"span\",ho,i(t.name),1),\"\"!==t.name?(Dt(),Lt(\"span\",go,\": \")):Qt(\"v-if\",!0),_o,Jt(\"span\",yo,i(t.data),1),mo])},po.__file=\"src/components/StringWrapper.vue\";const vo=new Set;function bo(e={collapseSignal:collapseSignal,expandSignal:expandSignal}){const n=Xe(!1),t=Xe(!1),r=()=>{n.value=!1,t.value=!t.value};at((()=>e.collapseSignal),r);const o=Xe(!1),s=()=>{n.value=!0,o.value=!o.value};at((()=>e.expandSignal),s);return at((()=>e.data),(()=>{e.expandOnCreatedAndUpdated(e.path)?s():r()}),{immediate:!0}),{isExpanding:n,innerCollapseSignal:t,innerExpandSignal:o,handleClick:e=>{vo.clear(),!0===e.metaKey&&!0===e.shiftKey?r():!0===e.metaKey?s():n.value=!n.value}}}var xo={name:\"array-wrapper\",props:{path:{required:!0,validator:e=>\"Array\"===Gr(e)&&e.every((e=>\"String\"===Gr(e)||\"Number\"===Gr(e)))},data:{required:!0,validator:e=>\"Array\"===Gr(e)},name:{required:!0,type:String},collapseSignal:{default:!1,type:Boolean},expandSignal:{default:!1,type:Boolean},expandOnCreatedAndUpdated:{required:!0,type:Function},getKeys:{required:!0,type:Function}},setup(e){const{isExpanding:n,innerExpandSignal:t,innerCollapseSignal:r,handleClick:o}=bo(e),s=Cr((()=>e.getKeys(e.data,e.path))),l=vo.has(e.data);return vo.add(e.data),{keys:s,isExpanding:n,innerExpandSignal:t,innerCollapseSignal:r,handleClick:o,isCircular:l}},components:{}};const So={class:\"array\"},Co={key:0,class:\"value\"},Oo={key:0,class:\"value\"};xo.render=function(e,n,t,r,o,s){const l=Tt(\"wrapper\");return Dt(),Lt(\"span\",So,[Jt(\"span\",{class:\"indicator\",onClick:n[1]||(n[1]=(...e)=>r.handleClick&&r.handleClick(...e))},i(r.isExpanding?\"▼\":\"▶\"),1),Jt(\"span\",{class:\"key\",onClick:n[2]||(n[2]=(...e)=>r.handleClick&&r.handleClick(...e))},i(\"\"===t.name?\"\":t.name),1),Jt(\"span\",{class:\"separator\",onClick:n[3]||(n[3]=(...e)=>r.handleClick&&r.handleClick(...e))},i(\"\"===t.name?\"\":\": \"),1),Jt(\"span\",{class:\"count\",onClick:n[4]||(n[4]=(...e)=>r.handleClick&&r.handleClick(...e))},i(!1===r.isExpanding&&t.data.length>=2?\"(\"+t.data.length+\")\":\"\"),1),Jt(\"span\",{class:\"preview\",onClick:n[5]||(n[5]=(...e)=>r.handleClick&&r.handleClick(...e))},i(r.isExpanding?\"Array(\"+t.data.length+\")\":\"[...]\"),1),r.isCircular?(Dt(),Lt(Ft,{key:0},[r.isExpanding?(Dt(),Lt(\"span\",Co,[(Dt(!0),Lt(Ft,null,Or(r.keys,(e=>(Dt(),Lt(l,{key:e,name:e,path:t.path.concat(e),data:t.data[e],\"expand-signal\":r.innerExpandSignal,\"collapse-signal\":r.innerCollapseSignal,expandOnCreatedAndUpdated:()=>!1,getKeys:t.getKeys},null,8,[\"name\",\"path\",\"data\",\"expand-signal\",\"collapse-signal\",\"expandOnCreatedAndUpdated\",\"getKeys\"])))),128))])):Qt(\"v-if\",!0)],64)):(Dt(),Lt(Ft,{key:1},[r.isExpanding?(Dt(),Lt(\"span\",Oo,[(Dt(!0),Lt(Ft,null,Or(r.keys,(e=>(Dt(),Lt(l,{key:e,name:e,path:t.path.concat(e),data:t.data[e],\"expand-signal\":r.innerExpandSignal,\"collapse-signal\":r.innerCollapseSignal,expandOnCreatedAndUpdated:t.expandOnCreatedAndUpdated,getKeys:t.getKeys},null,8,[\"name\",\"path\",\"data\",\"expand-signal\",\"collapse-signal\",\"expandOnCreatedAndUpdated\",\"getKeys\"])))),128))])):Qt(\"v-if\",!0)],64))])},xo.__file=\"src/components/ArrayWrapper.vue\";var ko={name:\"object-wrapper\",props:{path:{required:!0,validator:e=>\"Array\"===Gr(e)&&e.every((e=>\"String\"===Gr(e)||\"Number\"===Gr(e)))},data:{required:!0,validator:e=>\"Object\"===Gr(e)},name:{required:!0,type:String},collapseSignal:{default:!1,type:Boolean},expandSignal:{default:!1,type:Boolean},expandOnCreatedAndUpdated:{required:!0,type:Function},getKeys:{required:!0,type:Function}},setup(e){const{isExpanding:n,innerExpandSignal:t,innerCollapseSignal:r,handleClick:o}=bo(e),s=Cr((()=>e.getKeys(e.data,e.path))),l=vo.has(e.data);return vo.add(e.data),{keys:s,isExpanding:n,innerExpandSignal:t,innerCollapseSignal:r,handleClick:o,isCircular:l}},components:{}};const wo={class:\"object\"},Eo={key:0,class:\"value\"},Ao={key:1,class:\"value\"};ko.render=function(e,n,t,r,o,s){const l=Tt(\"wrapper\");return Dt(),Lt(\"span\",wo,[Jt(\"span\",{class:\"indicator\",onClick:n[1]||(n[1]=(...e)=>r.handleClick&&r.handleClick(...e))},i(r.isExpanding?\"▼\":\"▶\"),1),Jt(\"span\",{class:\"key\",onClick:n[2]||(n[2]=(...e)=>r.handleClick&&r.handleClick(...e))},i(\"\"===t.name?\"\":t.name),1),Jt(\"span\",{class:\"separator\",onClick:n[3]||(n[3]=(...e)=>r.handleClick&&r.handleClick(...e))},i(\"\"===t.name?\"\":\": \"),1),Jt(\"span\",{class:\"preview\",onClick:n[4]||(n[4]=(...e)=>r.handleClick&&r.handleClick(...e))},i(r.isExpanding?\"\":\"{...}\"),1),r.isCircular?(Dt(),Lt(Ft,{key:0},[r.isExpanding?(Dt(),Lt(\"span\",Eo,[(Dt(!0),Lt(Ft,null,Or(r.keys,(e=>(Dt(),Lt(l,{key:e,class:\"value\",name:e,path:t.path.concat(e),data:t.data[e],\"expand-signal\":r.innerExpandSignal,\"collapse-signal\":r.innerCollapseSignal,expandOnCreatedAndUpdated:()=>!1,getKeys:t.getKeys},null,8,[\"name\",\"path\",\"data\",\"expand-signal\",\"collapse-signal\",\"expandOnCreatedAndUpdated\",\"getKeys\"])))),128))])):Qt(\"v-if\",!0)],64)):vt((Dt(),Lt(\"span\",Ao,[(Dt(!0),Lt(Ft,null,Or(r.keys,(e=>(Dt(),Lt(l,{key:e,class:\"value\",name:e,path:t.path.concat(e),data:t.data[e],\"expand-signal\":r.innerExpandSignal,\"collapse-signal\":r.innerCollapseSignal,expandOnCreatedAndUpdated:t.expandOnCreatedAndUpdated,getKeys:t.getKeys},null,8,[\"name\",\"path\",\"data\",\"expand-signal\",\"collapse-signal\",\"expandOnCreatedAndUpdated\",\"getKeys\"])))),128))],512)),[[qr,r.isExpanding]])])},ko.__file=\"src/components/ObjectWrapper.vue\";const Uo={name:\"wrapper\",props:{path:{required:!0,validator:e=>\"Array\"===Gr(e)&&e.every((e=>\"String\"===Gr(e)||\"Number\"===Gr(e)))},data:{required:!0,validator:e=>\"Null\"===Gr(e)||\"Boolean\"===Gr(e)||\"Number\"===Gr(e)||\"String\"===Gr(e)||\"Array\"===Gr(e)||\"Object\"===Gr(e)},name:{required:!0,type:String},collapseSignal:{default:!1,type:Boolean},expandSignal:{default:!1,type:Boolean},expandOnCreatedAndUpdated:{required:!0,type:Function},getKeys:{required:!0,type:Function}},setup:()=>({objectToString:Gr}),components:{NullWrapper:Zr,BooleanWrapper:no,NumberWrapper:lo,StringWrapper:po,ArrayWrapper:xo,ObjectWrapper:ko}};xo.components.Wrapper=Uo,ko.components.Wrapper=Uo,Uo.render=function(e,n,t,r,o,s){const l=Tt(\"null-wrapper\"),a=Tt(\"boolean-wrapper\"),i=Tt(\"number-wrapper\"),c=Tt(\"string-wrapper\"),u=Tt(\"array-wrapper\"),d=Tt(\"object-wrapper\");return\"Null\"===e.objectToString(e.data)?(Dt(),Lt(l,{key:0,name:e.name,data:e.data},null,8,[\"name\",\"data\"])):\"Boolean\"===e.objectToString(e.data)?(Dt(),Lt(a,{key:1,name:e.name,data:e.data},null,8,[\"name\",\"data\"])):\"Number\"===e.objectToString(e.data)?(Dt(),Lt(i,{key:2,name:e.name,data:e.data},null,8,[\"name\",\"data\"])):\"String\"===e.objectToString(e.data)?(Dt(),Lt(c,{key:3,name:e.name,data:e.data},null,8,[\"name\",\"data\"])):\"Array\"===e.objectToString(e.data)?(Dt(),Lt(u,{key:4,name:e.name,path:e.path,data:e.data,\"collapse-signal\":e.collapseSignal,\"expand-signal\":e.expandSignal,expandOnCreatedAndUpdated:e.expandOnCreatedAndUpdated,getKeys:e.getKeys},null,8,[\"name\",\"path\",\"data\",\"collapse-signal\",\"expand-signal\",\"expandOnCreatedAndUpdated\",\"getKeys\"])):\"Object\"===e.objectToString(e.data)?(Dt(),Lt(d,{key:5,name:e.name,path:e.path,data:e.data,\"collapse-signal\":e.collapseSignal,\"expand-signal\":e.expandSignal,expandOnCreatedAndUpdated:e.expandOnCreatedAndUpdated,getKeys:e.getKeys},null,8,[\"name\",\"path\",\"data\",\"collapse-signal\",\"expand-signal\",\"expandOnCreatedAndUpdated\",\"getKeys\"])):Qt(\"v-if\",!0)},Uo.__file=\"src/components/Wrapper.vue\";const Po=Object.freeze({expandOnCreatedAndUpdated:e=>!1,getKeys:(e,n)=>Object.keys(e)});var To=(e,n,t={})=>{void 0===t.rootName&&(t.rootName=\"\"),void 0===t.getKeys&&(t.getKeys=Po.getKeys),void 0===t.expandOnCreatedAndUpdated&&(t.expandOnCreatedAndUpdated=Po.expandOnCreatedAndUpdated),n.classList.add(\"object-visualizer\"),((...e)=>{Hr().render(...e)})(null,n),Jr(Uo,{data:e,name:t.rootName,path:[],expandOnCreatedAndUpdated:t.expandOnCreatedAndUpdated,getKeys:t.getKeys}).mount(n)};export{To as mount,qe as reactive};\n","const COMPONENTS_MAP = {\n grid: 'GridComponent',\n polar: 'PolarComponent',\n geo: 'GeoComponent',\n singleAxis: 'SingleAxisComponent',\n parallel: 'ParallelComponent',\n calendar: 'CalendarComponent',\n graphic: 'GraphicComponent',\n toolbox: 'ToolboxComponent',\n tooltip: 'TooltipComponent',\n axisPointer: 'AxisPointerComponent',\n brush: 'BrushComponent',\n title: 'TitleComponent',\n timeline: 'TimelineComponent',\n markPoint: 'MarkPointComponent',\n markLine: 'MarkLineComponent',\n markArea: 'MarkAreaComponent',\n legend: 'LegendComponent',\n dataZoom: 'DataZoomComponent',\n visualMap: 'VisualMapComponent',\n aria: 'AriaComponent',\n dataset: 'DatasetComponent',\n\n // Dependencies\n xAxis: 'GridComponent',\n yAxis: 'GridComponent',\n angleAxis: 'PolarComponent',\n radiusAxis: 'PolarComponent'\n}\n\nconst CHARTS_MAP = {\n line: 'LineChart',\n bar: 'BarChart',\n pie: 'PieChart',\n scatter: 'ScatterChart',\n radar: 'RadarChart',\n map: 'MapChart',\n tree: 'TreeChart',\n treemap: 'TreemapChart',\n graph: 'GraphChart',\n gauge: 'GaugeChart',\n funnel: 'FunnelChart',\n parallel: 'ParallelChart',\n sankey: 'SankeyChart',\n boxplot: 'BoxplotChart',\n candlestick: 'CandlestickChart',\n effectScatter: 'EffectScatterChart',\n lines: 'LinesChart',\n heatmap: 'HeatmapChart',\n pictorialBar: 'PictorialBarChart',\n themeRiver: 'ThemeRiverChart',\n sunburst: 'SunburstChart',\n custom: 'CustomChart'\n}\nconst COMPONENTS_GL_MAP = {\n\n grid3D: 'Grid3DComponent',\n geo3D: 'Geo3DComponent',\n globe: 'GlobeComponent',\n mapbox3D: 'Mapbox3DComponent',\n maptalks3D: 'Maptalks3DComponent',\n\n // Dependencies\n xAxis3D: 'Grid3DComponent',\n yAxis3D: 'Grid3DComponent',\n zAxis3D: 'Grid3DComponent',\n}\nconst CHARTS_GL_MAP = {\n bar3D: 'Bar3DChart',\n line3D: 'Line3DChart',\n scatter3D: 'Scatter3DChart',\n lines3D: 'Lines3DChart',\n polygons3D: 'Polygons3DChart',\n surface: 'SurfaceChart',\n map3D: 'Map3DChart',\n\n scatterGL: 'ScatterGLChart',\n graphGL: 'GraphGLChart',\n flowGL: 'FlowGLChart',\n linesGL: 'LinesGLChart'\n}\n\nconst COMPONENTS_MAP_REVERSE = {};\nconst CHARTS_MAP_REVERSE = {};\nconst CHARTS_GL_MAP_REVERSE = {};\nconst COMPONENTS_GL_MAP_REVERSE = {};\n\nconst RENDERERS_MAP_REVERSE = {\n 'SVGRenderer': 'svg',\n 'CanvasRenderer': 'canvas'\n}\n\n// Component that will be injected automatically in preprocessor\n// These should be excluded util find they were used explicitly.\nconst MARKERS = ['markLine', 'markArea', 'markPoint'];\nconst INJECTED_COMPONENTS = [\n ...MARKERS, 'grid', 'axisPointer',\n 'aria' // TODO aria\n];\n\n// Component that was dependent.\nconst DEPENDENT_COMPONENTS = [\n 'xAxis', 'yAxis', 'angleAxis', 'radiusAxis',\n 'xAxis3D', 'yAxis3D', 'zAxis3D'\n];\n\nfunction createReverseMap(map, reverseMap) {\n Object.keys(map).forEach(key => {\n // Exclude dependencies.\n if (DEPENDENT_COMPONENTS.includes(key)) {\n return;\n }\n reverseMap[map[key]] = key;\n });\n}\n\ncreateReverseMap(COMPONENTS_MAP, COMPONENTS_MAP_REVERSE);\ncreateReverseMap(CHARTS_MAP, CHARTS_MAP_REVERSE);\ncreateReverseMap(COMPONENTS_GL_MAP, COMPONENTS_GL_MAP_REVERSE);\ncreateReverseMap(CHARTS_GL_MAP, CHARTS_GL_MAP_REVERSE);\n\nmodule.exports.collectDeps = function collectDeps(option) {\n let deps = [];\n if (option.options) {\n\n // TODO getOption() doesn't have baseOption and options.\n option.options.forEach((opt) => {\n deps = deps.concat(collectDeps(opt));\n });\n\n if (option.baseOption) {\n deps = deps.concat(collectDeps(option.baseOption))\n }\n\n // Remove duplicates\n return Array.from(new Set(deps));\n }\n\n Object.keys(option).forEach((key) => {\n if (INJECTED_COMPONENTS.includes(key)) {\n return;\n }\n const val = option[key];\n\n if (Array.isArray(val) && !val.length) {\n return;\n }\n\n if (COMPONENTS_MAP[key]) {\n deps.push(COMPONENTS_MAP[key]);\n }\n if (COMPONENTS_GL_MAP[key]) {\n deps.push(COMPONENTS_GL_MAP[key]);\n }\n });\n\n let series = option.series;\n if (!Array.isArray(series)) {\n series = [series];\n }\n\n series.forEach((seriesOpt) => {\n if (CHARTS_MAP[seriesOpt.type]) {\n deps.push(CHARTS_MAP[seriesOpt.type]);\n }\n if (CHARTS_GL_MAP[seriesOpt.type]) {\n deps.push(CHARTS_GL_MAP[seriesOpt.type]);\n }\n if (seriesOpt.type === 'map') {\n // Needs geo component when using map\n deps.push(COMPONENTS_MAP.geo);\n }\n MARKERS.forEach(markerType => {\n if (seriesOpt[markerType]) {\n deps.push(COMPONENTS_MAP[markerType]);\n }\n });\n });\n\n // Remove duplicates\n return Array.from(new Set(deps));\n}\n\nfunction buildMinimalBundleCode(deps, includeType) {\n const chartsImports = [];\n const componentsImports = [];\n const chartsGLImports = [];\n const componentsGLImports = [];\n const renderersImports = [];\n deps.forEach(function (dep) {\n if (dep.endsWith('Renderer')) {\n renderersImports.push(dep);\n }\n else if (CHARTS_MAP_REVERSE[dep]) {\n chartsImports.push(dep);\n if (includeType) {\n chartsImports.push(dep.replace(/Chart$/, 'SeriesOption'));\n }\n }\n else if (COMPONENTS_MAP_REVERSE[dep]) {\n componentsImports.push(dep);\n if (includeType) {\n componentsImports.push(dep.replace(/Component$/, 'ComponentOption'));\n }\n }\n else if (CHARTS_GL_MAP_REVERSE[dep]) {\n chartsGLImports.push(dep)\n }\n else if (COMPONENTS_GL_MAP_REVERSE[dep]) {\n componentsGLImports.push(dep);\n }\n });\n\n function getImportsPartCode(imports) {\n return `${imports.map(str => `\n ${str}`).join(',')}`;\n }\n\n const allImports = [\n ...componentsImports,\n ...chartsImports,\n ...componentsGLImports,\n ...chartsGLImports,\n ...renderersImports\n ];\n\n const ECOptionTypeCode = `\ntype ECOption = echarts.ComposeOption<\n ${allImports.filter(a => a.endsWith('Option')).join(' | ')}\n>`;\n const importsCodes = [\n [componentsImports, 'echarts/components'],\n [chartsImports, 'echarts/charts'],\n [renderersImports, 'echarts/renderers'],\n [chartsGLImports, 'echarts-gl/charts'],\n [componentsGLImports, 'echarts-gl/components']\n ].filter(a => a[0].length > 0).map(item => `\nimport {${getImportsPartCode(item[0])}\n} from '${item[1]}';\n `.trim()).join('\\n');\n\n return `import * as echarts from 'echarts/core';\n${importsCodes}\n\necharts.use(\n [${allImports.filter(a => !a.endsWith('Option')).join(', ')}]\n);\n` + (includeType ? ECOptionTypeCode : '')\n}\n\nmodule.exports.buildMinimalBundleCode = buildMinimalBundleCode;\n\nfunction buildLegacyMinimalBundleCode(deps, isESM) {\n const modules = [];\n deps.forEach(function (dep) {\n if (dep.endsWith('Renderer') && dep !== 'CanvasRenderer') {\n modules.push(`zrender/lib/${RENDERERS_MAP_REVERSE[dep]}/${RENDERERS_MAP_REVERSE[dep]}`);\n }\n else if (CHARTS_MAP_REVERSE[dep]) {\n modules.push(`echarts/lib/chart/${CHARTS_MAP_REVERSE[dep]}`);\n }\n else if (COMPONENTS_MAP_REVERSE[dep]) {\n modules.push(`echarts/lib/component/${COMPONENTS_MAP_REVERSE[dep]}`);\n }\n else if (CHARTS_GL_MAP_REVERSE[dep]) {\n modules.push(`echarts-gl/lib/chart/${CHARTS_GL_MAP_REVERSE[dep]}`);\n }\n else if (COMPONENTS_GL_MAP_REVERSE[dep]) {\n modules.push(`echarts-gl/lib/component/${COMPONENTS_GL_MAP_REVERSE[dep]}`);\n }\n });\n\n return isESM ? `import * as echarts from 'echarts/lib/echarts';\n${modules.map(mod => {\n return `import '${mod}';`;\n}).join('\\n')}\n` : `const echarts = require('echarts/lib/echarts');\n${modules.map(mod => {\n return `require('${mod}');`;\n}).join('\\n')}\n`\n}\n\nfunction hasGLInDeps(deps) {\n return !!deps.find(dep => !!(CHARTS_GL_MAP_REVERSE[dep] || COMPONENTS_GL_MAP_REVERSE[dep]));\n}\n\nmodule.buildLegacyMinimalBundleCode = buildLegacyMinimalBundleCode;\n\nmodule.exports.buildExampleCode = function (\n jsCode, deps, {\n // If enable minimal import\n minimal,\n // If is ESM module or CommonJS module\n // Force to be true in ts mode or minimal mode.\n esm = true,\n // If use legacy minimal import, like:\n // import 'echarts/lib/chart/bar';\n // Only available when minimal is true.\n legacy,\n // If is ts code\n ts,\n // Theme\n theme,\n ROOT_PATH,\n // Other imports code code string\n // For example\n // `import 'echarts-liquidfill'`\n extraImports\n }\n) {\n // if (minimal && !legacy) {\n // // ESM must be used when use the new minimal import\n // esm = true;\n // }\n\n if (ts) {\n esm = true;\n }\n\n if (minimal && !esm) {\n // Only legacy mode can be used when use require in mimimal bundle.\n legacy = true;\n }\n\n\n const hasECStat = jsCode.indexOf('ecStat') >= 0;\n const usedRootPath = jsCode.indexOf('ROOT_PATH') >= 0;\n const usedApp = jsCode.indexOf('app') >= 0;\n\n const DEP_CODE = `\n${hasECStat ?\n esm ? `import ecStat from 'echarts-stat';`\n : `var ecStat = require('echarts-stat');`\n : ''\n}\n`;\n const IMPORT_CODE = [\n !minimal\n ? esm\n ? `import * as echarts from 'echarts';${hasGLInDeps(deps) ? `\\nimport 'echarts-gl';` : ''}`\n : `var echarts = require('echarts');${hasGLInDeps(deps) ? `\\nrequire('echarts-gl');` : ''}`\n : legacy\n ? buildLegacyMinimalBundleCode(deps, esm)\n : buildMinimalBundleCode(deps, ts),\n (theme && theme !== 'dark')\n ? esm\n ? `import 'echarts/theme/${theme}'`\n : `require('echarts/theme/${theme}')`\n : '',\n extraImports\n ].filter(a => !!a).join('\\n');\n\n const ENV_CODE = [\n usedRootPath ? `var ROOT_PATH = '${ROOT_PATH}';` : '',\n usedApp ? `var app${ts ? ': any' : ''} = {};` : '',\n ts && !minimal ? 'type ECOption = echarts.EChartsOption' : ''\n ].filter(a => !!a).join('\\n');\n\n const PREPARE_CODE = [\n IMPORT_CODE.trim(), DEP_CODE.trim(), ENV_CODE.trim()\n ].filter(a => !!a).join('\\n\\n');\n\n return `${PREPARE_CODE}\n\nvar chartDom = document.getElementById('main')${ts ? '!' : ''};\nvar myChart = echarts.init(chartDom${theme ? `, '${theme}'` : ''});\nvar option${ts ? ': ECOption' : ''};\n\n${jsCode.trim()}\n\noption && myChart.setOption(option);\n`;\n}","<template>\n<div class=\"ace-editor-main\" v-loading=\"loading\"></div>\n</template>\n\n<script>\n\nimport {keywords} from '../data/option-keywords';\nimport {loadScriptsAsync} from '../common/helper';\nimport {store} from '../common/store';\nimport {SCRIPT_URLS} from '../common/config';\n\nfunction ensureACE() {\n if (typeof ace === 'undefined') {\n return loadScriptsAsync([\n SCRIPT_URLS.aceDir + '/ace.js',\n SCRIPT_URLS.aceDir + '/ext-language_tools.js'\n ]).then(function () {\n const lnTools = ace.require('ace/ext/language_tools');\n\n const completions = [];\n keywords.forEach(keyword => {\n completions.push({\n caption: keyword.name,\n value: keyword.name,\n score: keyword.count,\n metal: 'local'\n });\n });\n\n lnTools.addCompleter({\n getCompletions: function (editor, session, pos, prefix, callback) {\n callback(null, completions);\n }\n });\n })\n }\n return Promise.resolve();\n}\n\nexport default {\n\n props: ['initialCode'],\n\n data() {\n return {\n shared: store,\n loading: false\n }\n },\n\n mounted() {\n this.loading = true;\n ensureACE().then(() => {\n this.loading = false;\n const editor = ace.edit(this.$el);\n editor.getSession().setMode('ace/mode/javascript');\n editor.setOptions({\n enableBasicAutocompletion: true,\n enableSnippets: true,\n enableLiveAutocompletion: true\n });\n\n this._editor = editor;\n\n editor.on('change', () => {\n store.sourceCode =\n store.runCode = editor.getValue();\n });\n\n if (this.initialCode) {\n this.setInitialCode(this.initialCode);\n }\n });\n },\n\n methods: {\n setInitialCode(code) {\n if (this._editor && code) {\n this._editor.setValue(code || '');\n this._editor.selection.setSelectionRange({\n start: {\n row:1,\n column: 4\n }, end: {\n row:1,\n column: 4\n }\n });\n }\n }\n },\n\n watch: {\n initialCode(newVal) {\n this.setInitialCode(newVal);\n }\n }\n}\n</script>\n\n<style lang=\"scss\">\n.ace-editor-main {\n font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;\n font-size: 12px;\n line-height: 18px;\n padding: 10px;\n // height: 100%;\n\n // Fix safari\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n}\n</style>","<template>\n<div class=\"monaco-editor-main\" v-loading=\"loading\"></div>\n</template>\n\n<script>\n\nimport {keywords, fullKeywordsList} from '../data/option-keywords';\nimport {loadScriptsAsync} from '../common/helper';\nimport {store} from '../common/store';\nimport {SCRIPT_URLS} from '../common/config';\nimport { ensureECharts } from './Preview.vue';\n\nfunction loadTypes() {\n return fetch(store.cdnRoot + '/types/echarts.d.ts', {\n mode: 'cors'\n }).then(response => response.text()).then(code => {\n\n // validation settings\n monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n noSemanticValidation: false,\n noSyntaxValidation: false\n });\n\n // compiler options\n monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n target: monaco.languages.typescript.ScriptTarget.ES6,\n allowNonTsExtensions: true,\n noResolve: false\n });\n\n // console.log('file:///node_modules/@types/' + res[i].path);\n monaco.languages.typescript.typescriptDefaults.addExtraLib(\n code,\n // https://github.com/microsoft/monaco-editor/issues/667#issuecomment-468164794\n 'file:///node_modules/@types/echarts/index.d.ts'\n );\n\n monaco.languages.typescript.typescriptDefaults.addExtraLib(\n`import {init, EChartsOption} from 'echarts';\n// Declare to global namespace.\ndeclare global {\ndeclare const $: any;\ndeclare const ROOT_PATH: string;\ndeclare const app: {\n configParameters: {\n [key: string]: ({\n options: { [key: string]: string\n }) | ({\n min?: number\n max?: number\n })\n }\n config: {\n onChange: () => void\n [key: string]: string | number | function\n }\n [key: string]: any\n};\ndeclare const myChart: ReturnType<typeof init>;\ndeclare var option: EChartsOption;\n}\n`,\n 'file:///example.d.ts'\n );\n return;\n });\n}\n\nfunction ensureMonacoAndTsTransformer() {\n function loadMonaco() {\n if (typeof monaco === 'undefined') {\n return loadScriptsAsync([\n SCRIPT_URLS.monacoDir + '/loader.js',\n // Prebuilt TS transformer with surcrase\n store.cdnRoot + '/js/example-transform-ts-bundle.js'\n ]).then(function () {\n window.require.config({ paths: { 'vs': SCRIPT_URLS.monacoDir }});\n return new Promise(resolve => {\n window.require([\n 'vs/editor/editor.main'\n ], function () {\n loadTypes().then(() => {\n resolve();\n });\n })\n });\n })\n }\n return Promise.resolve();\n }\n\n // Must load echarts before monaco. Or the AMD loader will affect loading of echarts.\n return ensureECharts().then(loadMonaco);\n}\n\nexport default {\n\n props: ['initialCode'],\n\n data() {\n return {\n shared: store,\n loading: false\n }\n },\n\n mounted() {\n this.loading = true;\n ensureMonacoAndTsTransformer().then(() => {\n this.loading = false;\n const model = monaco.editor.createModel(\n this.initialCode || '',\n 'typescript',\n // Should also be a file path so it can resolve the lib.\n monaco.Uri.parse('file:///main.ts')\n );\n const editor = monaco.editor.create(this.$el, {\n model,\n fontFamily: `'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace`,\n minimap: {\n enabled: false\n },\n automaticLayout: true\n });\n\n this._editor = editor;\n\n if (this.initialCode) {\n store.sourceCode = this.initialCode;\n store.runCode = echartsExampleTransformTs(store.sourceCode);\n }\n editor.onDidChangeModelContent(() => {\n store.sourceCode = editor.getValue();\n store.runCode = echartsExampleTransformTs(store.sourceCode);\n });\n });\n },\n\n destroyed() {\n if (this._editor) {\n this._editor.getModel().dispose();\n this._editor.dispose();\n }\n },\n\n methods: {\n setInitialCode(code) {\n if (this._editor && code) {\n this._editor.setValue(code || '');\n }\n }\n },\n\n watch: {\n initialCode(newVal) {\n this.setInitialCode(newVal);\n }\n }\n}\n</script>\n\n<style lang=\"scss\">\n.monaco-editor-main {\n font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;\n font-size: 12px;\n padding: 0;\n overflow-y: hidden;\n // height: 100%;\n // Fix safari\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n}\n</style>","<template>\n<div id=\"main-container\">\n <div id=\"editor-left-container\" :style=\"{width: leftContainerSize + '%'}\" v-if=\"!shared.isMobile\">\n <el-tabs v-model=\"currentTab\" type=\"border-card\">\n <el-tab-pane :label=\"$t('editor.tabEditor')\" name=\"code-editor\">\n <el-container>\n <el-header id=\"editor-control-panel\">\n <div id=\"code-info\">\n <template v-if=\"shared.editorStatus.message\">\n <span class=\"code-info-time\">{{currentTime}}</span>\n <span :class=\"'code-info-type-' + shared.editorStatus.type\">{{shared.editorStatus.message}}</span>\n </template>\n </div>\n <div class=\"editor-controls\">\n <!-- <el-switch v-model=\"shared.typeCheck\"\n :active-text=\"$t('editor.monacoMode')\"\n :inactive-text=\"''\"\n ></el-switch> -->\n <a href=\"javascript:;\" class='btn btn-default btn-sm' @click='disposeAndRun'>{{$t('editor.run')}}</a>\n </div>\n </el-header>\n <el-main>\n <CodeMonaco v-if=\"shared.typeCheck\" id=\"code-panel\" :initialCode=\"initialCode\"></CodeMonaco>\n <CodeAce v-else id=\"code-panel\" :initialCode=\"initialCode\"></CodeAce>\n </el-main>\n </el-container>\n </el-tab-pane>\n\n <el-tab-pane :label=\"$t('editor.tabFullCodePreview')\" name=\"full-code\" :lazy=\"true\">\n <el-container style=\"width: 100%; height: 100%\">\n <el-header id=\"full-code-generate-config\">\n <span class=\"full-code-generate-config-label\">\n <!-- <i class=\"el-icon-setting\"></i> 配置 -->\n </span>\n <el-switch\n class=\"enable-decal\"\n v-model=\"fullCodeConfig.minimal\"\n :active-text=\"$t('editor.minimalBundle')\"\n :inactive-text=\"''\">\n </el-switch>\n <el-switch\n class=\"enable-decal\"\n v-model=\"fullCodeConfig.esm\"\n active-text=\"ES Modules\"\n :inactive-text=\"''\">\n </el-switch>\n </el-header>\n <el-main>\n <FullCodePreview :code=\"fullCode\"></FullCodePreview>\n </el-main>\n </el-container>\n </el-tab-pane>\n <el-tab-pane :label=\"$t('editor.tabOptionPreview')\" name=\"full-option\">\n <div id=\"option-outline\"></div>\n </el-tab-pane>\n </el-tabs>\n </div>\n <div class=\"handler\" id=\"h-handler\" @mousedown=\"onSplitterDragStart\" :style=\"{left: leftContainerSize + '%'}\" v-if=\"!shared.isMobile\"></div>\n <Preview :inEditor=\"true\" class=\"right-container\" ref=\"preview\" :style=\"{\n width: (100 - leftContainerSize) + '%',\n left: leftContainerSize + '%'\n }\"></Preview>\n</div>\n</template>\n\n<script>\n\nimport CodeAce from './CodeAce.vue';\nimport CodeMonaco from './CodeMonaco.vue';\nimport FullCodePreview from './FullCodePreview.vue';\nimport Preview from './Preview.vue';\nimport {URL_PARAMS} from '../common/config';\nimport {store, loadExampleCode, parseSourceCode} from '../common/store';\nimport {collectDeps, buildExampleCode} from '../../common/buildCode';\nimport { mount } from \"@lang/object-visualizer\";\n\nimport './object-visualizer.css';\n\nexport default {\n components: {\n CodeAce,\n CodeMonaco,\n FullCodePreview,\n Preview\n },\n\n data() {\n return {\n mousedown: false,\n leftContainerSize: 40,\n mobileMode: false,\n shared: store,\n initialCode: '',\n\n currentTab: 'code-editor',\n\n fullCode: '',\n\n fullCodeConfig: {\n mimimal: false,\n esm: true,\n node: false // If is in node\n }\n };\n },\n\n computed: {\n currentTime() {\n // Update time when message updated.\n const message = this.shared.message;\n\n const time = new Date();\n const digits = [time.getHours(), time.getMinutes(), time.getSeconds()];\n let timeStr = '';\n for (let i = 0, len = digits.length; i < len; ++i) {\n timeStr += (digits[i] < 10 ? '0' : '') + digits[i];\n if (i < len - 1) {\n timeStr += ':';\n }\n }\n return timeStr;\n }\n },\n\n mounted() {\n\n if (store.isMobile) {\n this.leftContainerSize = 0;\n loadExampleCode().then(code => {\n // No editor available. Set to runCode directly.\n store.runCode = parseSourceCode(code);\n });\n }\n else {\n loadExampleCode().then(code => {\n // Only set the code in editor. editor will sync to the store.\n this.initialCode = parseSourceCode(code);\n });\n\n window.addEventListener('mousemove', (e) => {\n if (this.mousedown) {\n let percentage = e.clientX / window.innerWidth;\n percentage = Math.min(0.9, Math.max(0.1, percentage));\n this.leftContainerSize = percentage * 100;\n }\n });\n\n window.addEventListener('mouseup', (e) => {\n this.mousedown = false;\n });\n }\n },\n\n methods: {\n onSplitterDragStart() {\n this.mousedown = true;\n },\n disposeAndRun() {\n this.$refs.preview.refreshAll();\n },\n updateFullCode() {\n const option = this.$refs.preview.getOption();\n if (!option) {\n return;\n }\n const deps = collectDeps(option);\n deps.push(store.renderer === 'svg' ? 'SVGRenderer' : 'CanvasRenderer');\n this.fullCode = buildExampleCode(store.sourceCode, deps, {\n minimal: this.fullCodeConfig.minimal,\n ts: false,\n esm: this.fullCodeConfig.esm,\n // legacy: true,\n theme: store.darkMode ? 'dark' : '',\n ROOT_PATH: store.cdnRoot\n });\n },\n updateOptionOutline() {\n const option = Object.freeze(this.$refs.preview.getOption());\n if (!option) {\n return;\n }\n mount(\n option,\n this.$el.querySelector('#option-outline'),\n {\n getKeys(object, path) {\n return Object.keys(object).filter(key => {\n if (Array.isArray(object[key]) && !object[key].length) {\n return false;\n }\n return true;\n });\n },\n expandOnCreatedAndUpdated(path) {\n return path.length === 0\n || (path[0] === 'series' && path.length <= 1);\n },\n }\n );\n },\n updateTabContent(tab) {\n if (tab === 'full-code') {\n this.updateFullCode();\n }\n else if (tab === 'full-option') {\n this.updateOptionOutline();\n }\n }\n },\n\n watch: {\n 'shared.typeCheck'(enableTypeCheck) {\n // Update initialCode to avoid code changed when switching editor\n this.initialCode = store.sourceCode;\n this.updateFullCode();\n },\n 'currentTab'(tab) {\n this.updateTabContent(tab);\n },\n 'shared.runHash'() {\n this.updateTabContent(this.currentTab);\n },\n fullCodeConfig: {\n deep: true,\n handler() {\n this.updateFullCode();\n }\n }\n }\n}\n</script>\n\n<style lang=\"scss\">\n\n@import '../style/color.scss';\n\n$code-info-height: 25px;\n$control-panel-height: 30px;\n$pd-basic: 10px;\n$handler-width: 5px;\n\n#main-container {\n .handler {\n position: absolute;\n left: 50%;\n\n top: 0;\n bottom: 0;\n width: $handler-width;\n\n cursor: col-resize;\n z-index: 100;\n background-color: transparent;\n border-left: 1px solid #ececec;\n // border-right: 1px solid $clr-border;\n }\n\n}\n\n#editor-left-container {\n position: absolute;\n left: 0;\n bottom: 0;\n top: 0;\n\n width: 50%;\n\n .el-tab-pane {\n height: 100%;\n\n .el-container {\n width: 100%;\n height: 100%;\n }\n\n .el-header {\n height: $control-panel-height!important;\n position: relative;\n z-index: 10;\n padding: 0;\n }\n .el-main {\n padding: 0;\n position: relative;\n\n ::-webkit-scrollbar {\n height:8px;\n width:8px;\n transition:all 0.3s ease-in-out;\n border-radius:2px;\n }\n\n ::-webkit-scrollbar-button {\n display:none;\n }\n\n ::-webkit-scrollbar-thumb {\n width:8px;\n min-height:15px;\n background:rgba(50, 50, 50, 0.6) !important;\n transition:all 0.3s ease-in-out;border-radius:2px;\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background:rgba(0, 0, 0, 0.5) !important;\n }\n }\n }\n\n .el-tabs {\n box-shadow: none;\n }\n\n .el-tabs--border-card>.el-tabs__header {\n border-bottom: none;\n }\n\n .el-tabs__content {\n position: absolute;\n top: 34px;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 0;\n }\n\n .el-tabs__item {\n height: 34px;\n line-height: 34px;\n }\n}\n\n#editor-control-panel, #full-code-generate-config {\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n\n#option-outline {\n // height: 100%;\n // Fix safari\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n\n font-size: 13px;\n\n font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;\n}\n\n#full-code-generate-config {\n .full-code-generate-config-label {\n height: $control-panel-height;\n line-height: $control-panel-height;\n vertical-align: middle;\n margin: 0 0 0 20px;\n }\n\n .el-switch {\n margin-right: 10px;\n }\n\n .el-switch__label {\n margin-left: 8px;\n margin-top: -2px;\n }\n .el-switch__label * {\n font-size: 12px;\n }\n}\n\n#editor-control-panel {\n .setting-panel {\n display: inline-block;\n\n .btn-group + .btn-group {\n margin-left: $pd-basic;\n }\n }\n\n .editor-controls {\n float: right;\n\n .el-switch__label {\n margin-top: -3px;\n }\n .el-switch__label * {\n font-size: 12px;\n }\n\n .btn {\n color: #FFF;\n border-radius: 0;\n background-color: #409eff;\n margin-left: $pd-basic;\n border: none;\n height: 30px;\n width: 50px;\n }\n .btn:hover {\n background-color: lighten($color: #409eff, $amount: 5);\n }\n }\n}\n\n#code-info {\n position: absolute;\n bottom: 0;\n overflow: hidden;\n\n height: $control-panel-height;\n line-height: $control-panel-height;\n padding: 0px 10px;\n\n // border-top: 1px solid $clr-border;\n font-size: 0.9rem;\n\n .code-info-time {\n color: $clr-text;\n display: inline-block;\n margin-right: 10px;\n font-size: 12px;\n }\n\n .code-info-type-info {\n color: $clr-text;\n font-size: 12px;\n }\n\n .code-info-type-warn {\n color: $clr-warn;\n }\n\n .code-info-type-error {\n color: $clr-error;\n }\n}\n\n.right-container {\n position: absolute;\n right: 0;\n\n width: 50%;\n height: 100%;\n padding: 0;\n padding-left: $handler-width;\n border: none;\n z-index: 30;\n\n background: $clr-bg;\n}\n\n\n</style>","<template>\n<div class=\"full-code-preview\" v-loading=\"loading\"></div>\n</template>\n\n<script>\n\nimport {loadScriptsAsync} from '../common/helper';\nimport {store} from '../common/store';\nimport {SCRIPT_URLS} from '../common/config';\n\nfunction ensureACE() {\n if (typeof ace === 'undefined') {\n return loadScriptsAsync([\n SCRIPT_URLS.aceDir + '/ace.js'\n ]);\n }\n return Promise.resolve();\n}\n\nexport default {\n\n props: ['code'],\n\n data() {\n return {\n shared: store,\n loading: false\n }\n },\n\n mounted() {\n this.loading = true;\n ensureACE().then(() => {\n this.loading = false;\n const editor = ace.edit(this.$el);\n editor.getSession().setMode('ace/mode/javascript');\n // https://stackoverflow.com/questions/32806060/is-there-a-programmatic-way-to-hide-the-cursor-in-ace-editor\n editor.setOptions({\n readOnly: true,\n showLineNumbers: false,\n showFoldWidgets: false,\n highlightActiveLine: false,\n highlightGutterLine: false\n });\n // editor.renderer.setShowGutter(false);\n editor.renderer.$cursorLayer.element.style.display = 'none';\n\n this._editor = editor;\n\n this.setCode(this.code);\n\n });\n },\n\n methods: {\n setCode(code) {\n if (this._editor) {\n this._editor.setValue(code);\n this._editor.selection.setSelectionRange({\n start: {\n row:1,\n column: 4\n }, end: {\n row:1,\n column: 4\n }\n });\n }\n }\n },\n\n watch: {\n code(newVal) {\n this.setCode(newVal);\n }\n }\n}\n</script>\n\n<style lang=\"scss\">\n.full-code-preview {\n font-family: 'Source Code Pro', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;\n font-size: 12px;\n line-height: 18px;\n // height: 100%;\n\n // Fix safari\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n}\n</style>","<template>\n<div :class=\"[(inEditor && !shared.isMobile) ? '' : 'full']\">\n <div v-loading=\"loading\"\n class=\"right-panel\"\n id=\"chart-panel\"\n :style=\"{background: backgroundColor}\"\n >\n <div class=\"chart-container\"></div>\n </div>\n <div id=\"tool-panel\">\n <div class=\"left-panel\">\n <el-switch\n class=\"dark-mode\"\n v-model=\"shared.darkMode\"\n active-color=\"#181432\"\n :active-text=\"$t('editor.darkMode')\"\n :inactive-text=\"''\">\n </el-switch>\n <el-switch\n v-if=\"!isGL\"\n\n class=\"enable-decal\"\n v-model=\"shared.enableDecal\"\n :active-text=\"$t('editor.enableDecal')\"\n :inactive-text=\"''\">\n </el-switch>\n\n <el-popover\n placement=\"bottom\"\n width=\"450\"\n trigger=\"click\"\n style=\"margin-top:3px;\"\n\n v-if=\"!isGL\"\n >\n <div class=\"render-config-container\">\n <el-row :gutter=\"2\" type=\"flex\" align=\"middle\">\n <el-col :span=\"12\">\n <label class=\"tool-label\">{{ $t('editor.renderer') }}</label>\n <el-radio-group v-model=\"shared.renderer\" size=\"mini\" style=\"text-transform: uppercase\">\n <el-radio-button label=\"svg\"></el-radio-button>\n <el-radio-button label=\"canvas\"></el-radio-button>\n </el-radio-group>\n </el-col>\n <el-col :span=\"12\">\n <el-switch\n v-if=\"shared.renderer==='canvas'\"\n v-model=\"shared.useDirtyRect\"\n :active-text=\"$t('editor.useDirtyRect')\"\n :inactive-text=\"''\">\n </el-switch>\n </el-col>\n </el-row>\n </div>\n <span class=\"render-config-trigger\" slot=\"reference\"><i class=\"el-icon-setting el-icon--left\"></i>{{$t('editor.renderCfgTitle')}}</span>\n </el-popover>\n </div>\n <template v-if=\"inEditor\">\n <button v-if=\"!shared.isMobile\" class=\"download btn btn-sm\" @click=\"downloadExample\">{{ $t('editor.download') }}</button>\n <a class=\"screenshot\" @click=\"screenshot\" target=\"_blank\"><i class=\"el-icon-camera-solid\"></i></a>\n </template>\n <a :href=\"editLink\" target=\"_blank\" v-else class=\"edit btn btn-sm\">{{ $t('editor.edit') }}</a>\n </div>\n</div>\n</template>\n\n<script>\n\nimport {store, updateRunHash} from '../common/store';\nimport {SCRIPT_URLS, URL_PARAMS} from '../common/config';\nimport {loadScriptsAsync} from '../common/helper';\nimport {createSandbox} from './sandbox';\nimport debounce from 'lodash/debounce';\nimport { addListener, removeListener } from 'resize-detector';\nimport CHART_LIST from '../data/chart-list-data';\nimport CHART_LIST_GL from '../data/chart-list-data-gl';\nimport {download} from './downloadExample';\n\nfunction findExample(item) {\n return URL_PARAMS.c === item.id;\n}\nconst example = CHART_LIST.concat(CHART_LIST_GL).find(findExample);\nconst isGL = CHART_LIST_GL.find(findExample);\n\nfunction addDecalIfNecessary(option) {\n if (store.enableDecal) {\n option.aria = option.aria || {};\n option.aria.decal = option.aria.decal || {};\n option.aria.decal.show = true;\n option.aria.show = option.aria.enabled = true;\n }\n}\n\nexport function ensureECharts() {\n if (typeof echarts === 'undefined') {\n\n const hasBmap = example && example.tags.indexOf('bmap') >= 0;\n\n // Code from https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu\n if (hasBmap) {\n window.HOST_TYPE = \"2\";\n window.BMap_loadScriptTime = (new Date).getTime();\n }\n\n return loadScriptsAsync([\n SCRIPT_URLS.datGUIMinJS,\n 'local' in URL_PARAMS\n ? SCRIPT_URLS.localEChartsMinJS : SCRIPT_URLS.echartsMinJS,\n SCRIPT_URLS.echartsDir + '/dist/extension/dataTool.js',\n 'https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js',\n SCRIPT_URLS.echartsStatMinJS,\n ...URL_PARAMS.gl ? [SCRIPT_URLS.echartsGLMinJS] : [],\n ...hasBmap ? [\n 'https://api.map.baidu.com/getscript?v=3.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&services=&t=20200327103013',\n SCRIPT_URLS.echartsDir + '/dist/extension/bmap.js'\n ] : []\n ]).then(() => {\n echarts.registerPreprocessor(addDecalIfNecessary)\n });\n }\n return Promise.resolve();\n}\n\n\nfunction log(text, type) {\n if (type !== 'warn' && type !== 'error') {\n type = 'info';\n }\n store.editorStatus.message = text;\n store.editorStatus.type = type;\n}\n\n\nfunction run() {\n\n if (typeof echarts === 'undefined') {\n return;\n }\n if (!this.sandbox) {\n this.sandbox = createSandbox((chart) => {\n const option = chart.getOption();\n if (typeof option.backgroundColor === 'string' && option.backgroundColor !== 'transparent') {\n this.backgroundColor = option.backgroundColor;\n }\n else {\n this.backgroundColor = '#fff';\n }\n });\n }\n\n try {\n const updateTime = this.sandbox.run(this.$el.querySelector('.chart-container'), store);\n\n log(this.$t('editor.chartOK') + updateTime + 'ms');\n\n // Find the appropriate throttle time\n const debounceTime = 500;\n const debounceTimeQuantities = [0, 500, 2000, 5000, 10000];\n for (let i = debounceTimeQuantities.length - 1; i >= 0; i--) {\n const quantity = debounceTimeQuantities[i];\n const preferredDebounceTime = debounceTimeQuantities[i + 1] || 1000000;\n if (updateTime >= quantity && this.debouncedTime !== preferredDebounceTime) {\n this.debouncedRun = debounce(run, preferredDebounceTime, {\n trailing: true\n });\n this.debouncedTime = preferredDebounceTime;\n break;\n }\n }\n\n // Update run hash to let others known chart has been changed.\n updateRunHash();\n\n }\n catch (e) {\n log(this.$t('editor.errorInEditor'), 'error');\n console.error(e);\n }\n}\n\n\nexport default {\n\n props: ['inEditor'],\n\n data() {\n return {\n shared: store,\n debouncedTime: undefined,\n backgroundColor: '',\n autoRun: true,\n loading: false,\n\n isGL\n }\n },\n\n mounted() {\n this.loading = true;\n ensureECharts().then(() => {\n this.loading = false;\n if (store.runCode) {\n this.run();\n }\n });\n\n addListener(this.$el, () => {\n if (this.sandbox) {\n this.sandbox.resize();\n }\n })\n },\n\n computed: {\n editLink() {\n const params = ['c=' + URL_PARAMS.c];\n if (URL_PARAMS.theme) {\n params.push(['theme=' + URL_PARAMS.theme]);\n }\n if (URL_PARAMS.gl) {\n params.push(['gl=' + URL_PARAMS.gl]);\n }\n return './editor.html?' + params.join('&');\n }\n },\n\n watch: {\n 'shared.runCode'(val) {\n if (this.autoRun || !this.sandbox) {\n if (!this.debouncedRun) {\n // First run\n this.run();\n }\n else {\n this.debouncedRun();\n }\n }\n },\n 'shared.renderer'() {\n this.refreshAll();\n },\n 'shared.darkMode'() {\n this.refreshAll();\n },\n 'shared.enableDecal'() {\n this.refreshAll();\n },\n 'shared.useDirtyRect'() {\n this.refreshAll();\n }\n },\n\n methods: {\n run,\n // debouncedRun will be created at first run\n // debouncedRun: null,\n refreshAll() {\n this.dispose();\n this.run();\n },\n dispose() {\n if (this.sandbox) {\n this.sandbox.dispose();\n }\n },\n downloadExample() {\n download();\n },\n screenshot() {\n if (this.sandbox) {\n const url = this.sandbox.getDataURL();\n const $a = document.createElement('a');\n $a.download = URL_PARAMS.c + '.' + (store.renderer === 'svg' ? 'svg' : 'png');\n $a.target = '_blank';\n $a.href = url;\n const evt = new MouseEvent('click', {\n bubbles: true,\n cancelable: false\n });\n $a.dispatchEvent(evt);\n }\n },\n getOption() {\n return this.sandbox && this.sandbox.getOption();\n }\n // hasEditorError() {\n // const annotations = this.editor.getSession().getAnnotations();\n // for (let aid = 0, alen = annotations.length; aid < alen; ++aid) {\n // if (annotations[aid].type === 'error') {\n // return true;\n // }\n // }\n // return false;\n // }\n }\n}\n</script>\n\n<style lang=\"scss\">\n\n#chart-panel {\n position: absolute;\n // top: $control-panel-height;\n top: 42px;\n right: 15px;\n bottom: 15px;\n left: 15px;\n box-sizing: border-box;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;\n border-radius: 5px;\n background: #fff;\n overflow: hidden;\n\n padding: 10px;\n\n .ec-debug-dirty-rect-container {\n left: 10px!important;\n top: 10px!important;\n right: 10px!important;\n bottom: 10px!important;\n\n .ec-debug-dirty-rect {\n background-color: rgba(255, 0, 0, 0.2)!important;\n border: 1px solid red!important;\n }\n }\n\n .chart-container {\n position: relative;\n height: 100%;\n }\n}\n\n.render-config-container {\n .el-radio-group {\n label {\n margin-bottom: 0;\n }\n }\n}\n\n#tool-panel {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n padding-top: 5px;\n padding-left: 15px;\n\n // .el-switch__label * {\n // font-size: 12px;\n // }\n\n .render-config-trigger {\n margin-left: 10px;\n cursor: pointer;\n font-weight: 500;\n // font-size: 12px;\n }\n\n label {\n margin-bottom: 0;\n }\n\n .left-panel {\n float: left;\n }\n\n .left-panel>* {\n vertical-align: middle;\n display: inline-block;\n }\n\n .tool-label {\n font-weight: bold;\n text-transform: uppercase;\n margin-left: 20px;\n }\n\n .screenshot, .download, .edit {\n float: right;\n margin-right: 15px;\n cursor: pointer;\n }\n .screenshot {\n font-size: 22px;\n margin-right: 10px;\n }\n}\n\n.full {\n #chart-panel {\n top: 40px;\n right: 5px;\n bottom: 5px;\n left: 5px;\n box-shadow: rgba(10, 9, 9, 0.1) 0px 0px 5px;\n }\n #tool-panel {\n padding-left: 5px;\n .download, .edit {\n margin-right: 5px;\n }\n }\n}\n\n.dg.main * {\n box-sizing: content-box;\n}\n.dg.main input {\n line-height: normal;\n}\n\n.dg.main.a {\n overflow-x: visible;\n}\n\n.dg.main .c {\n select {\n color: #000;\n }\n}\n\n</style>","<template>\n<preview></Preview>\n</template>\n\n<script>\n\nimport Preview from './Preview.vue';\nimport {store, loadExampleCode, parseSourceCode} from '../common/store';\n\nexport default {\n components: {\n Preview\n },\n\n mounted() {\n loadExampleCode().then(code => {\n store.runCode = parseSourceCode(code);\n });\n }\n}\n</script>\n\n<style lang=\"scss\">\n\n</style>","<template>\n<div class=\"example-list-item\">\n <a target=\"_blank\" class=\"example-link\" :href=\"exampleLink\">\n <img class=\"chart-area\" src=\"../asset/placeholder.jpg\" :data-src=\"screenshotURL\" />\n <h4 class=\"example-title\">{{title}}</h4>\n <h5 class=\"example-subtitle\" v-if=\"showSubtitle\">{{subtitle}}</h5>\n </a>\n</div>\n</template>\n\n<script>\n\nimport {store} from '../common/store';\nimport {SUPPORT_WEBP, URL_PARAMS} from '../common/config';\n\nexport default {\n props: ['example'],\n\n computed: {\n\n title() {\n return (store.locale === 'zh' ? this.example.titleCN : this.example.title)\n || this.example.title || '';\n },\n\n showSubtitle() {\n return store.locale === 'zh';\n },\n\n subtitle() {\n return this.example.title || '';\n },\n\n exampleTheme() {\n const example = this.example;\n return example.theme || (store.darkMode ? 'dark' : '');\n },\n\n exampleLink() {\n const example = this.example;\n const hash = ['c=' + example.id];\n const exampleTheme = this.exampleTheme;\n if (example.isGL) {\n hash.push('gl=1');\n }\n if (exampleTheme) {\n hash.push('theme=' + exampleTheme);\n }\n if ('local' in URL_PARAMS) {\n hash.push('local');\n }\n if ('useDirtyRect' in URL_PARAMS) {\n hash.push('useDirtyRect');\n }\n return './editor.html?' + hash.join('&');\n },\n\n screenshotURL() {\n const example = this.example;\n const themePostfix = this.exampleTheme ? ('-' + this.exampleTheme) : '';\n const ext = SUPPORT_WEBP ? 'webp' : 'png';\n const folder = example.isGL ? 'data-gl' : 'data';\n return `${store.cdnRoot}/${folder}/thumb${themePostfix}/${example.id}.${ext}?_v_=${store.version}`;\n }\n }\n}\n</script>\n\n<style lang=\"scss\">\n\n@import \"../style/color.scss\";\n\n.example-list-item {\n width: 100%;\n max-width: 350px;\n margin-bottom: 30px;\n\n border-radius: 2px;\n\n .example-link {\n position: relative;\n display: block;\n\n .chart-area {\n width: 100%;\n height: 100%;\n border-radius: 5px;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);\n margin-top: 10px;\n }\n\n .example-title {\n color: $clr-primary;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n padding: 10px 10px 2px 10px;\n margin: 0;\n font-weight: normal;\n font-size: 14px;\n text-align: center;\n }\n\n .example-subtitle {\n font-size: 12px;\n text-align: center;\n color: #aaa;\n font-weight: normal;\n // font-weight: 200;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n margin: 3px 0 0 0;\n }\n }\n\n .example-info {\n padding: 5px 0;\n\n font-weight: bold;\n\n .chart-icon {\n float: right;\n\n .chart-delete {\n display: none;\n\n transition: 1s;\n }\n }\n }\n\n &:hover .example-info .chart-icon .chart-delete {\n display: block;\n\n text-decoration: none;\n }\n}\n</style>","<template>\n<div id=\"example-explore\">\n <div id=\"left-container\">\n <div id=\"left-chart-nav\">\n <scrollactive\n active-class=\"active\"\n :offset=\"80\"\n :duration=\"500\"\n :scroll-container-selector=\"'#example-explore'\"\n bezier-easing-value=\".5,0,.35,1\"\n @itemchanged=\"onActiveNavChanged\"\n >\n <ul>\n <li v-for=\"category in EXAMPLE_CATEGORIES\" :key=\"category\">\n <a class=\"left-chart-nav-link scrollactive-item\" :id=\"'left-chart-nav-' + category\"\n :href=\"'#chart-type-' + category\"\n >\n <span class=\"chart-icon\" v-html=\"icons[category]\"></span>\n <span class=\"chart-name\">{{$t('chartTypes.' + category)}}</span>\n </a>\n </li>\n </ul>\n </scrollactive>\n </div>\n </div>\n <div id=\"explore-container\">\n <div class=\"example-list-panel\">\n <div v-for=\"categoryObj in exampleList\" :key=\"categoryObj.category\">\n <h3 class=\"chart-type-head\" :id=\"'chart-type-' + categoryObj.category\">\n {{$t('chartTypes.' + categoryObj.category)}}\n <span>{{categoryObj.category}}</span>\n </h3>\n\n <div class=\"row\" :id=\"'chart-row-' + categoryObj.category\">\n <div class=\"col-xl-2 col-lg-3 col-md-4 col-sm-6\"\n v-for=\"exampleItem in categoryObj.examples\"\n :key=\"exampleItem.id\"\n >\n <ExampleCard :example=\"exampleItem\"></ExampleCard>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div id=\"toolbar\">\n <el-switch\n v-model=\"shared.darkMode\"\n active-color=\"#181432\"\n :active-text=\"$t('editor.darkMode')\"\n :inactive-text=\"''\">\n </el-switch>\n </div>\n</div>\n</template>\n\n<script>\n\nimport CHART_LIST from '../data/chart-list-data';\nimport CHART_LIST_GL from '../data/chart-list-data-gl';\nimport {EXAMPLE_CATEGORIES, BLACK_MAP, URL_PARAMS} from '../common/config';\nimport {store} from '../common/store';\nimport ExampleCard from './ExampleCard.vue';\nimport LazyLoad from 'vanilla-lazyload/dist/lazyload.esm';\n// import scrollIntoView from 'scroll-into-view';\n\nconst icons = {};\n\n['line', 'bar', 'scatter', 'pie', 'radar', 'funnel', 'gauge', 'map',\n 'graph', 'treemap', 'parallel', 'sankey', 'candlestick', 'boxplot', 'heatmap',\n 'pictorialBar', 'themeRiver', 'calendar', 'custom', 'sunburst', 'tree', 'dataset', 'geo', 'lines',\n 'dataZoom', 'rich', 'drag'\n].forEach(function (category) {\n icons[category] = require('../asset/icon/' + category + '.svg');\n});\n\nconst glIcon = require('../asset/icon/gl.svg');\n['globe', 'bar3D', 'scatter3D', 'surface', 'map3D', 'lines3D', 'line3D',\n 'scatterGL', 'linesGL', 'flowGL', 'graphGL', 'geo3D'].forEach(function (category) {\n icons[category] = glIcon;\n});\n\nconst LAZY_LOADED_CLASS = 'ec-shot-loaded';\n\nexport default {\n\n components: {\n ExampleCard\n },\n\n data() {\n const exampleListByCategory = {};\n\n function addExamples(list, isGL) {\n let categoryOrder = 0;\n // Add by category order in each example.\n do {\n let added = false;\n for (let i = 0; i < list.length; i++) {\n const example = list[i];\n if (BLACK_MAP.hasOwnProperty(example.id)) {\n continue;\n }\n if (typeof example.category === 'string') {\n example.category = [example.category];\n }\n\n const categoryStr = (example.category || [])[categoryOrder];\n if (categoryStr) {\n added = true;\n let categoryObj = exampleListByCategory[categoryStr];\n if (!categoryObj) {\n categoryObj = {\n category: categoryStr,\n examples: []\n }\n exampleListByCategory[categoryStr] = categoryObj;\n }\n example.isGL = isGL;\n\n categoryObj.examples.push(example);\n }\n }\n\n if (!added) {\n break;\n }\n } while (++categoryOrder && categoryOrder < 4) // At most 4 category\n }\n\n addExamples(CHART_LIST, false);\n addExamples(CHART_LIST_GL, true);\n\n return {\n shared: store,\n\n icons,\n\n EXAMPLE_CATEGORIES,\n // [{\n // category: '',\n // isGL: false\n // examples: []\n // }]\n exampleListByCategory\n }\n },\n\n watch: {\n \"shared.darkMode\"() {\n const imgs = this.$el.querySelectorAll('img.chart-area');\n for (let i = 0; i < imgs.length; i++) {\n // Force lazyload to update\n imgs[i].classList.remove(LAZY_LOADED_CLASS);\n imgs[i].setAttribute('data-was-processed', 'false');\n }\n this._lazyload.update();\n }\n },\n\n computed: {\n exampleList() {\n const list = [];\n for (let i = 0; i < EXAMPLE_CATEGORIES.length; i++) {\n const category = EXAMPLE_CATEGORIES[i];\n const categoryObj = this.exampleListByCategory[category];\n if (categoryObj && categoryObj.examples.length > 0) {\n list.push({\n category,\n examples: categoryObj.examples\n });\n }\n }\n return list;\n }\n },\n\n mounted() {\n this._lazyload = new LazyLoad({\n // Container should be the scroll viewport.\n // container: this.$el.querySelector('#explore-container .example-list-panel'),\n elements_selector: 'img.chart-area',\n load_delay: 400,\n class_loaded: LAZY_LOADED_CLASS\n });\n },\n\n methods: {\n onActiveNavChanged(event, currentItem, lastActiveItem) {\n // currentItem && currentItem.scrollIntoView && currentItem.parentNode.scrollIntoView();\n // scrollIntoView(currentItem, {\n // time: 100,\n // cancellable: false,\n // align: {\n // top: 0,\n // topOffset: 50\n // }\n // });\n }\n }\n}\n</script>\n\n<style lang=\"scss\">\n\n@import \"../style/color.scss\";\n@import \"../style/config.xl.scss\";\n\n$chart-nav-width: 200px;\n$chart-icon-width: 25px;\n$chart-icon-border: 1px;\n\n$toolbar-height: 30px;\n\n$nav-height: 50px;\n$nav-active-bg: #5470C6;\n$nav-hover-border: $nav-active-bg;\n\n$nav-text-color: #6E7079;\n$nav-hover-text-color: #464646;\n\n$pd-basic: 10px;\n$pd-sm: 6px;\n$pd-lg: 20px;\n\n#example-explore {\n background: $clr-bg;\n\n // Use this as scrollable viewport insteadof window because echarts-www has a viewport.\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow-y: auto;\n\n ::-webkit-scrollbar {\n height: 4px;\n width: 4px;\n -webkit-transition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n border-radius: 2px;\n background: #fff;\n }\n\n ::-webkit-scrollbar-button {\n display: none\n }\n\n ::-webkit-scrollbar-thumb {\n width: 4px;\n min-height: 15px;\n background: rgba(50, 50, 50, 0.2) !important;\n -webkit-transition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n border-radius: 2px\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 0, 0, 0.5) !important\n }\n}\n\n#explore-container {\n margin-left: $chart-nav-width + 20px;\n padding: 10px 10px;\n // background-color: $clr-bg;\n}\n\n.example-list-panel {\n margin: 30px 15px 30px 15px;\n\n h3 {\n margin-bottom: 20px;\n padding-bottom: 10px;\n border-bottom: 1px solid #E1E5F2;\n font-weight: normal;\n color: #464646;\n font-size: 20px;\n }\n .chart-type-head span {\n font-size: 16px;\n padding-left: 5px;\n color: #949CB1;\n font-weight: 200;\n }\n}\n\n#left-container {\n position: sticky;\n left: 0;\n top: 0;\n float: left;\n height: calc(100%);\n width: $chart-nav-width;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n overflow-y: auto;\n\n}\n\n#toolbar {\n position: fixed;\n right: 30px;\n top: 20px;\n height: $toolbar-height;\n background-color: #fff;\n border-radius: $toolbar-height / 2;\n // color: #fff;\n padding: 4px 15px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n\n .el-switch__label * {\n font-size: 12px;\n // color: #fff;\n text-transform: uppercase;\n }\n .el-switch__label.is-active {\n color: #181432;\n }\n}\n\n#left-chart-nav {\n background-color: #fff;\n overflow-y: hidden;\n color: #111;\n box-shadow: 0 0 20px rgba(0,0,0,0.2);\n\n &:hover {\n overflow-y: auto;\n\n a {\n text-decoration: none;\n }\n }\n\n li {\n // transition: background-color 0.5s;\n cursor: pointer;\n\n a {\n height: 45px;\n padding: 10px 0 10px 20px;\n display: block;\n // transition: background-color 0.5s;\n text-decoration: none;\n color: $nav-text-color;\n\n .chart-name {\n display: inline-block;\n position: relative;\n vertical-align: middle;\n margin-left: 10px;\n }\n\n .chart-icon {\n content: '';\n width: 20px;\n display: inline-block;\n border-radius: 50%;\n vertical-align: middle;\n\n svg {\n width: 100%!important;\n height: auto!important;\n }\n }\n\n &.active {\n background-color: $nav-active-bg;\n color: #fff;\n\n .chart-icon * {\n fill: #fff;\n }\n }\n\n &.active:hover {\n color: #fff;\n }\n }\n\n &:hover {\n border-right: 4px solid $nav-hover-border;\n\n a {\n color: $nav-hover-text-color;\n }\n }\n }\n}\n\n@media (max-width: 768px) {\n #left-container {\n display: none;\n }\n #explore-container {\n margin-left: 0;\n }\n}\n\n</style>","\nexport const EXAMPLE_CATEGORIES = [\n 'line',\n 'bar',\n 'pie',\n 'scatter',\n 'map',\n 'candlestick',\n 'radar',\n 'boxplot',\n 'heatmap',\n 'graph',\n 'lines',\n 'tree',\n 'treemap',\n 'sunburst',\n 'parallel',\n 'sankey',\n 'funnel',\n 'gauge',\n 'pictorialBar',\n 'themeRiver',\n 'calendar',\n 'custom',\n\n 'dataset',\n 'dataZoom',\n 'drag',\n 'rich',\n\n 'globe',\n 'bar3D',\n 'scatter3D',\n 'surface',\n 'map3D',\n 'lines3D',\n 'line3D',\n 'scatterGL',\n 'linesGL',\n 'flowGL',\n 'graphGL'\n];\n\nexport const THEMES = {\n default: [\n '#5470c6',\n '#91cc75',\n '#fac858',\n '#ee6666',\n '#73c0de',\n '#3ba272',\n '#fc8452',\n '#9a60b4',\n '#ea7ccc'\n ],\n dark: [\n '#4992ff',\n '#7cffb2',\n '#fddd60',\n '#ff6e76',\n '#58d9f9',\n '#05c091',\n '#ff8a45',\n '#8d48e3',\n '#dd79ff'\n ]\n};\n\nexport const BLACK_MAP = (function (list) {\n const map = {};\n for (var i = 0; i < list.length; i++) {\n map[list[i]] = 1;\n }\n return location.href.indexOf('github.io') >= 0 ? {} : map;\n})([\n 'effectScatter-map',\n 'geo-lines',\n 'geo-map-scatter',\n 'heatmap-map',\n 'lines-airline',\n 'map-china',\n 'map-china-dataRange',\n 'map-labels',\n 'map-locate',\n 'map-province',\n 'map-world',\n 'map-world-dataRange',\n 'scatter-map',\n 'scatter-map-brush',\n 'scatter-weibo',\n 'scatter-world-population',\n 'geo3d',\n 'geo3d-with-different-height',\n 'globe-country-carousel',\n 'globe-with-echarts-surface',\n 'map3d-alcohol-consumption',\n 'map3d-wood-map',\n 'scattergl-weibo'\n]);\n\n\nconst URL_PARAMS = {};\n(location.search || '').substr(1).split('&').forEach(function (item) {\n const kv = item.split('=');\n URL_PARAMS[kv[0]] = kv[1];\n});\n\nexport {URL_PARAMS};\n\nexport const SUPPORT_WEBP = (function () {\n var elem = document.createElement('canvas');\n elem.width = elem.height = 1;\n if (!!(elem.getContext && elem.getContext('2d'))) {\n // was able or not to get WebP representation\n return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;\n }\n // very old browser like IE 8, canvas not supported\n return false;\n})();\n\nexport const SCRIPT_URLS = {\n localEChartsMinJS: 'http://localhost/echarts/dist/echarts.js',\n echartsMinJS: 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js',\n echartsDir: 'https://cdn.jsdelivr.net/npm/echarts@5',\n echartsStatMinJS: 'https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js',\n // echartsGLMinJS: 'http://localhost/echarts-gl/dist/echarts-gl.min.js',\n echartsGLMinJS: 'https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js',\n datGUIMinJS: 'https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js',\n monacoDir: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.21.2/min/vs',\n aceDir: 'https://cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-min-noconflict'\n};\n","\nconst promisesCache = {};\n\nexport function loadScriptsAsync(scripts) {\n return Promise.all(scripts.map(function (scriptUrl) {\n if (typeof scriptUrl === 'string') {\n scriptUrl = {\n url: scriptUrl,\n // TODO Not supported type\n type: scriptUrl.match(/\\.css$/) ? 'css' : 'js'\n };\n }\n if (promisesCache[scriptUrl.url]) {\n return promisesCache[scriptUrl.url];\n }\n const promise = new Promise((resolve, reject) => {\n if (scriptUrl.type === 'js') {\n const script = document.createElement('script');\n script.src = scriptUrl.url;\n script.async = false;\n script.onload = function () {\n resolve();\n };\n script.onerror = function () {\n reject();\n };\n document.body.appendChild(script);\n }\n else if (scriptUrl.type === 'css') {\n const link = document.createElement('link');\n link.rel = 'stylesheet';\n link.href = scriptUrl.url;\n link.onload = function () {\n resolve();\n };\n link.onerror = function () {\n reject();\n };\n document.body.appendChild(link);\n }\n });\n promisesCache[scriptUrl.url] = promise;\n return promise;\n }));\n}\n\nexport function downloadBlob(blob, fileName) {\n // for IE\n if (typeof window.navigator.msSaveBlob === 'function') {\n window.navigator.msSaveOrOpenBlob(blob, fileName);\n }\n else {\n const a = document.createElement('a');\n a.href = URL.createObjectURL(blob);\n a.download = fileName;\n a.click();\n // should revoke the blob url after the download\n URL.revokeObjectURL(a.href);\n }\n}","export default {\n en: {\n editor: {\n run: 'Run',\n errorInEditor: 'Errors exist in code!',\n chartOK: 'Chart has been generated successfully, ',\n\n darkMode: 'Dark Mode',\n enableDecal: 'Decal Pattern',\n // lightMode: 'Light Mode',\n\n renderCfgTitle: 'Render',\n renderer: 'Renderer',\n useDirtyRect: 'Use Dirty Rect',\n\n download: 'Download',\n\n edit: 'Edit',\n monacoMode: 'Enable Type Checking',\n\n tabEditor: 'Edit Example',\n tabFullCodePreview: 'Full Code',\n tabOptionPreview: 'Option Preview',\n minimalBundle: 'Minimal Bundle'\n },\n\n chartTypes: {\n line: 'Line',\n bar: 'Bar',\n pie: 'Pie',\n scatter: 'Scatter',\n map: 'GEO/Map',\n candlestick: 'Candlestick',\n radar: 'Radar',\n boxplot: 'Boxplot',\n heatmap: 'Heatmap',\n graph: 'Graph',\n lines: 'Lines',\n tree: 'Tree',\n treemap: 'Treemap',\n sunburst: 'Sunburst',\n parallel: 'Parallel',\n sankey: 'Sankey',\n funnel: 'Funnel',\n gauge: 'Gauge',\n pictorialBar: 'PictorialBar',\n themeRiver: 'ThemeRiver',\n calendar: 'Calendar',\n custom: 'Custom',\n\n dataset: 'Dataset',\n dataZoom: 'DataZoom',\n drag: 'Drag',\n rich: 'Rich Text',\n\n globe: '3D Globe',\n bar3D: '3D Bar',\n scatter3D: '3D Scatter',\n surface: '3D Surface',\n map3D: '3D Map',\n lines3D: '3D Lines',\n line3D: '3D Line',\n scatterGL: 'Scatter GL',\n linesGL: 'Lines GL',\n flowGL: 'Flow GL',\n graphGL: 'Graph GL'\n }\n },\n zh: {\n editor: {\n run: '运行',\n errorInEditor: '编辑器内容有误!',\n chartOK: '图表已生成, ',\n\n darkMode: '深色模式',\n enableDecal: '无障碍花纹',\n // lightMode: '浅色模式',\n\n renderCfgTitle: '渲染设置',\n useDirtyRect: '开启脏矩形优化',\n renderer: '渲染模式',\n download: '下载示例',\n\n edit: '编辑',\n monacoMode: '开启类型检查',\n\n tabEditor: '示例编辑',\n tabFullCodePreview: '完整代码',\n tabOptionPreview: '配置项',\n minimalBundle: '按需引入'\n },\n\n chartTypes: {\n line: '折线图',\n bar: '柱状图',\n pie: '饼图',\n scatter: '散点图',\n map: '地理坐标/地图',\n candlestick: 'K 线图',\n radar: '雷达图',\n boxplot: '盒须图',\n heatmap: '热力图',\n graph: '关系图',\n lines: '路径图',\n tree: '树图',\n treemap: '矩形树图',\n sunburst: '旭日图',\n parallel: '平行坐标系',\n sankey: '桑基图',\n funnel: '漏斗图',\n gauge: '仪表盘',\n pictorialBar: '象形柱图',\n themeRiver: '主题河流图',\n calendar: '日历坐标系',\n custom: '自定义系列',\n\n dataset: '数据集',\n dataZoom: '数据区域缩放',\n drag: '拖拽',\n rich: '富文本',\n\n globe: '3D 地球',\n bar3D: '3D 柱状图',\n scatter3D: '3D 散点图',\n surface: '3D 曲面',\n map3D: '3D 地图',\n lines3D: '3D 路径图',\n line3D: '3D 折线图',\n scatterGL: 'GL 散点图',\n linesGL: 'GL 路径图',\n flowGL: 'GL 矢量场图',\n graphGL: 'GL 关系图'\n }\n }\n};","\n// import * as matter from 'gray-matter';\nimport {URL_PARAMS} from '../common/config';\n\nexport const store = {\n cdnRoot: '',\n version: '',\n locale: '',\n\n darkMode: URL_PARAMS.theme === 'dark',\n enableDecal: 'decal' in URL_PARAMS,\n renderer: URL_PARAMS.renderer || 'canvas',\n\n typeCheck: URL_PARAMS.editor === 'monaco',\n useDirtyRect: 'useDirtyRect' in URL_PARAMS,\n\n runCode: '',\n sourceCode: '',\n\n runHash: '',\n\n isMobile: window.innerWidth < 600,\n\n editorStatus: {\n type: '',\n message: ''\n }\n};\n\nexport function loadExampleCode() {\n return new Promise(resolve => {\n const dataRoot = URL_PARAMS.gl ? 'data-gl' : 'data';\n $.ajax(`${store.cdnRoot}/${dataRoot}/${URL_PARAMS.c}.js?_v_${store.version}`, {\n dataType: 'text',\n success: (data) => {\n resolve(data);\n }\n });\n });\n}\n\nexport function parseSourceCode(code) {\n return code.replace(/\\/\\*[\\w\\W]*?\\*\\//, '').trim();\n}\n\nlet hashId = 123;\nexport function updateRunHash() {\n store.runHash = hashId++;\n}","\n/* eslint-disable */\n// THIS FILE IS GENERATED, DON'T MODIFY */\nexport default [\n {\n \"category\": [\n \"globe\"\n ],\n \"id\": \"animating-contour-on-globe\",\n \"tags\": [],\n \"title\": \"Animating Contour on Globe\",\n \"titleCN\": \"Animating Contour on Globe\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"bar3d-dataset\",\n \"tags\": [],\n \"title\": \"3D Bar with Dataset\",\n \"titleCN\": \"使用 dataset 为三维柱状图设置数据\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"bar3d-global-population\",\n \"tags\": [],\n \"title\": \"Bar3D - Global Population\",\n \"titleCN\": \"Bar3D - Global Population\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"bar3d-myth\",\n \"tags\": [],\n \"title\": \"星云\",\n \"titleCN\": \"星云\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"bar3d-noise-modified-from-marpi-demo\",\n \"tags\": [],\n \"title\": \"Noise modified from marpi's demo\",\n \"titleCN\": \"Noise modified from marpi's demo\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"bar3d-punch-card\",\n \"tags\": [],\n \"title\": \"Bar3D - Punch Card\",\n \"titleCN\": \"Bar3D - Punch Card\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"bar3d-simplex-noise\",\n \"tags\": [],\n \"theme\": \"dark\",\n \"title\": \"Bar3D - Simplex Noise\",\n \"titleCN\": \"Bar3D - Simplex Noise\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"bar3d-voxelize-image\",\n \"tags\": [],\n \"title\": \"Voxelize image\",\n \"titleCN\": \"Voxelize image\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"flowGL\"\n ],\n \"id\": \"flowGL-noise\",\n \"tags\": [],\n \"theme\": \"dark\",\n \"title\": \"Flow on the cartesian\",\n \"titleCN\": \"直角坐标系上的向量场\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"geo3D\"\n ],\n \"id\": \"geo3d\",\n \"tags\": [],\n \"title\": \"Geo3D\",\n \"titleCN\": \"Geo3D\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"geo3D\"\n ],\n \"id\": \"geo3d-with-different-height\",\n \"tags\": [],\n \"title\": \"Geo3D with Different Height\",\n \"titleCN\": \"Geo3D with Different Height\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"global-population-bar3d-on-globe\",\n \"tags\": [],\n \"title\": \"Global Population - Bar3D on Globe\",\n \"titleCN\": \"Global Population - Bar3D on Globe\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"flowGL\"\n ],\n \"id\": \"global-wind-visualization\",\n \"tags\": [\n \"bmap\"\n ],\n \"title\": \"Global wind visualization\",\n \"titleCN\": \"Global wind visualization\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"flowGL\"\n ],\n \"id\": \"global-wind-visualization-2\",\n \"tags\": [\n \"bmap\"\n ],\n \"title\": \"Global Wind Visualization 2\",\n \"titleCN\": \"Global Wind Visualization 2\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"globe\"\n ],\n \"id\": \"globe-atmosphere\",\n \"tags\": [],\n \"title\": \"Globe with Atmosphere\",\n \"titleCN\": \"大气层显示\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"globe\"\n ],\n \"id\": \"globe-contour-paint\",\n \"tags\": [],\n \"title\": \"Contour Paint\",\n \"titleCN\": \"Contour Paint\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"globe\"\n ],\n \"id\": \"globe-country-carousel\",\n \"tags\": [],\n \"title\": \"Country Carousel\",\n \"titleCN\": \"Country Carousel\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"globe\"\n ],\n \"id\": \"globe-displacement\",\n \"tags\": [],\n \"title\": \"Globe Displacement\",\n \"titleCN\": \"Globe Displacement\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"globe\"\n ],\n \"id\": \"globe-echarts-gl-hello-world\",\n \"tags\": [],\n \"title\": \"ECharts-GL Hello World\",\n \"titleCN\": \"ECharts-GL Hello World\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"globe\"\n ],\n \"id\": \"globe-layers\",\n \"tags\": [],\n \"title\": \"Globe Layers\",\n \"titleCN\": \"Globe Layers\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"globe\"\n ],\n \"id\": \"globe-moon\",\n \"tags\": [],\n \"title\": \"Moon\",\n \"titleCN\": \"Moon\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"globe\"\n ],\n \"id\": \"globe-with-echarts-surface\",\n \"tags\": [],\n \"title\": \"Globe with ECharts Surface\",\n \"titleCN\": \"Globe with ECharts Surface\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"graphGL\"\n ],\n \"id\": \"graphgl-gpu-layout\",\n \"tags\": [],\n \"theme\": \"dark\",\n \"title\": \"GraphGL GPU Layout\",\n \"titleCN\": \"GraphGL GPU Layout\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"graphGL\"\n ],\n \"id\": \"graphgl-large-internet\",\n \"tags\": [],\n \"theme\": \"dark\",\n \"title\": \"GraphGL - Large Internet\",\n \"titleCN\": \"GraphGL - Large Internet\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"graphGL\"\n ],\n \"id\": \"graphgl-npm-dep\",\n \"tags\": [],\n \"theme\": \"dark\",\n \"title\": \"NPM Dependencies with graphGL\",\n \"titleCN\": \"1w 节点 2w7 边的NPM 依赖图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"image-surface-sushuang\",\n \"tags\": [],\n \"title\": \"Image Surface Sushuang\",\n \"titleCN\": \"Image Surface Sushuang\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"image-to-bar3d\",\n \"tags\": [],\n \"title\": \"Image to Bar3D\",\n \"titleCN\": \"Image to Bar3D\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"globe\"\n ],\n \"id\": \"iron-globe\",\n \"tags\": [],\n \"title\": \"Iron globe\",\n \"titleCN\": \"Iron globe\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"line3D\"\n ],\n \"id\": \"line3d-orthographic\",\n \"tags\": [],\n \"title\": \"三维折线图正交投影\",\n \"titleCN\": \"三维折线图正交投影\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"lines3D\"\n ],\n \"id\": \"lines3d-airline-on-globe\",\n \"tags\": [],\n \"title\": \"Airline on Globe\",\n \"titleCN\": \"Airline on Globe\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"lines3D\"\n ],\n \"id\": \"lines3d-flights\",\n \"tags\": [],\n \"title\": \"Flights\",\n \"titleCN\": \"Flights\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"lines3D\"\n ],\n \"id\": \"lines3d-flights-gl\",\n \"tags\": [],\n \"title\": \"Flights GL\",\n \"titleCN\": \"Flights GL\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"lines3D\"\n ],\n \"id\": \"lines3d-flights-on-geo3d\",\n \"tags\": [],\n \"title\": \"Flights on Geo3D\",\n \"titleCN\": \"Flights on Geo3D\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"linesGL\"\n ],\n \"id\": \"linesGL-ny\",\n \"tags\": [],\n \"title\": \"Use linesGL to draw 1 million ny streets.\",\n \"titleCN\": \"实时交互的纽约街道可视化\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map3D\"\n ],\n \"id\": \"map3d-alcohol-consumption\",\n \"tags\": [],\n \"title\": \"Map3D - Alcohol Consumption\",\n \"titleCN\": \"Map3D - Alcohol Consumption\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map3D\"\n ],\n \"id\": \"map3d-buildings\",\n \"tags\": [],\n \"title\": \"Buildings\",\n \"titleCN\": \"Buildings\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map3D\"\n ],\n \"id\": \"map3d-wood-city\",\n \"tags\": [],\n \"title\": \"Wood City\",\n \"titleCN\": \"Wood City\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map3D\"\n ],\n \"id\": \"map3d-wood-map\",\n \"tags\": [],\n \"title\": \"木质世界地图\",\n \"titleCN\": \"木质世界地图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"metal-bar3d\",\n \"tags\": [],\n \"title\": \"Metal Bar3D\",\n \"titleCN\": \"Metal Bar3D\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"metal-surface\",\n \"tags\": [],\n \"title\": \"Metal Surface\",\n \"titleCN\": \"Metal Surface\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"parametric-surface-rose\",\n \"tags\": [],\n \"title\": \"Parametric Surface Rose\",\n \"titleCN\": \"Parametric Surface Rose\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter3D\"\n ],\n \"id\": \"scatter3d\",\n \"tags\": [],\n \"theme\": \"dark\",\n \"title\": \"Scatter3D\",\n \"titleCN\": \"Scatter3D\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter3D\"\n ],\n \"id\": \"scatter3D-dataset\",\n \"tags\": [],\n \"title\": \"3D Scatter with Dataset\",\n \"titleCN\": \"使用 dataset 为三维散点图设置数据\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter3D\"\n ],\n \"id\": \"scatter3d-globe-population\",\n \"tags\": [],\n \"title\": \"Scatter3D - Globe Population\",\n \"titleCN\": \"Scatter3D - Globe Population\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter3D\"\n ],\n \"id\": \"scatter3d-orthographic\",\n \"tags\": [],\n \"theme\": \"dark\",\n \"title\": \"三维散点图正交投影\",\n \"titleCN\": \"三维散点图正交投影\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter3D\"\n ],\n \"id\": \"scatter3d-scatter\",\n \"tags\": [],\n \"title\": \"3D Scatter with Scatter Matrix\",\n \"titleCN\": \"三维散点图和散点矩阵结合使用\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter3D\"\n ],\n \"id\": \"scatter3d-simplex-noise\",\n \"tags\": [],\n \"theme\": \"dark\",\n \"title\": \"Scatter3D - Simplex Noise\",\n \"titleCN\": \"Scatter3D - Simplex Noise\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatterGL\"\n ],\n \"id\": \"scatterGL-gps\",\n \"tags\": [],\n \"title\": \"10 million Bulk GPS points\",\n \"titleCN\": \"1 千万 GPS 点可视化\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatterGL\"\n ],\n \"id\": \"scattergl-weibo\",\n \"tags\": [],\n \"theme\": \"dark\",\n \"title\": \"微博签到数据点亮中国\",\n \"titleCN\": \"微博签到数据点亮中国\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"simple-surface\",\n \"tags\": [],\n \"title\": \"Simple Surface\",\n \"titleCN\": \"Simple Surface\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"sphere-parametric-surface\",\n \"tags\": [],\n \"title\": \"Sphere Parametric Surface\",\n \"titleCN\": \"Sphere Parametric Surface\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"stacked-bar3d\",\n \"tags\": [],\n \"title\": \"Stacked Bar3D\",\n \"titleCN\": \"Stacked Bar3D\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"surface-breather\",\n \"tags\": [],\n \"title\": \"Breather\",\n \"titleCN\": \"Breather\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"surface-golden-rose\",\n \"tags\": [],\n \"title\": \"Golden Rose\",\n \"titleCN\": \"Golden Rose\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"surface-leather\",\n \"tags\": [],\n \"title\": \"皮革材质\",\n \"titleCN\": \"皮革材质\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"surface-mollusc-shell\",\n \"tags\": [],\n \"title\": \"Mollusc Shell\",\n \"titleCN\": \"Mollusc Shell\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"surface-theme-roses\",\n \"tags\": [],\n \"title\": \"Theme Roses\",\n \"titleCN\": \"Theme Roses\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"surface\"\n ],\n \"id\": \"surface-wave\",\n \"tags\": [],\n \"title\": \"Surface Wave\",\n \"titleCN\": \"Surface Wave\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"bar3D\"\n ],\n \"id\": \"transparent-bar3d\",\n \"tags\": [],\n \"title\": \"Transparent Bar3D\",\n \"titleCN\": \"Transparent Bar3D\",\n \"difficulty\": 10\n }\n]","\n/* eslint-disable */\n// THIS FILE IS GENERATED, DON'T MODIFY */\nexport default [\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-background\",\n \"tags\": [],\n \"title\": \"Bar with Background\",\n \"titleCN\": \"带背景色的柱状图\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"bar-histogram\",\n \"tags\": [],\n \"title\": \"Histogram with Custom Series\",\n \"titleCN\": \"直方图(自定义系列)\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-simple\",\n \"tags\": [],\n \"title\": \"Basic Bar\",\n \"titleCN\": \"基础柱状图\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-tick-align\",\n \"tags\": [],\n \"title\": \"Axis Align with Tick\",\n \"titleCN\": \"坐标轴刻度与标签对齐\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"calendar\"\n ],\n \"id\": \"calendar-simple\",\n \"tags\": [],\n \"title\": \"Simple Calendar\",\n \"titleCN\": \"基础日历图\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"candlestick\"\n ],\n \"id\": \"candlestick-simple\",\n \"tags\": [],\n \"title\": \"Basic Candlestick\",\n \"titleCN\": \"基础 K 线图\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"dataset\",\n \"bar\",\n \"transform\"\n ],\n \"id\": \"data-transform-sort-bar\",\n \"tags\": [],\n \"title\": \"Sort Data in Bar Chart\",\n \"titleCN\": \"柱状图排序\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"heatmap\"\n ],\n \"id\": \"heatmap-cartesian\",\n \"tags\": [],\n \"title\": \"Heatmap on Cartesian\",\n \"titleCN\": \"笛卡尔坐标系上的热力图\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-simple\",\n \"tags\": [],\n \"title\": \"Basic Line Chart\",\n \"titleCN\": \"基础折线图\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-smooth\",\n \"tags\": [],\n \"title\": \"Smoothed Line Chart\",\n \"titleCN\": \"基础平滑折线图\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"pie\"\n ],\n \"id\": \"pie-simple\",\n \"tags\": [],\n \"title\": \"Referer of a website\",\n \"titleCN\": \"某站点用户访问来源\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"radar\"\n ],\n \"id\": \"radar\",\n \"tags\": [],\n \"title\": \"Basic Radar Chart\",\n \"titleCN\": \"基础雷达图\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"sankey\"\n ],\n \"id\": \"sankey-simple\",\n \"tags\": [],\n \"title\": \"Basic Sankey\",\n \"titleCN\": \"基础桑基图\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-simple\",\n \"tags\": [],\n \"title\": \"Basic Scatter Chart\",\n \"titleCN\": \"基础散点图\",\n \"difficulty\": 0\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"area-basic\",\n \"tags\": [],\n \"title\": \"Basic area chart\",\n \"titleCN\": \"基础面积图\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-data-color\",\n \"tags\": [],\n \"title\": \"Set Style of Single Bar.\",\n \"titleCN\": \"自定义单个柱子颜色\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-waterfall\",\n \"tags\": [],\n \"title\": \"Waterfall Chart\",\n \"titleCN\": \"瀑布图(柱状图模拟)\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"calendar\",\n \"heatmap\"\n ],\n \"id\": \"calendar-heatmap\",\n \"tags\": [],\n \"title\": \"Calendar Heatmap\",\n \"titleCN\": \"日历热力图\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"calendar\",\n \"heatmap\"\n ],\n \"id\": \"calendar-vertical\",\n \"tags\": [],\n \"title\": \"Calendar Heatmap Vertical\",\n \"titleCN\": \"纵向日历图\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"candlestick\"\n ],\n \"id\": \"custom-ohlc\",\n \"tags\": [],\n \"title\": \"OHLC Chart\",\n \"titleCN\": \"OHLC 图(使用自定义系列)\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"custom-profit\",\n \"tags\": [],\n \"title\": \"Profit\",\n \"titleCN\": \"利润分布直方图\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"dataset\",\n \"bar\"\n ],\n \"id\": \"dataset-encode0\",\n \"tags\": [],\n \"title\": \"Simple Encode\",\n \"titleCN\": \"指定数据到坐标轴的映射\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge\",\n \"tags\": [],\n \"title\": \"Gauge Basic chart\",\n \"titleCN\": \"基础仪表盘\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-simple\",\n \"tags\": [],\n \"title\": \"Simple Gauge\",\n \"titleCN\": \"带标签数字动画的基础仪表盘\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph-force2\",\n \"tags\": [],\n \"title\": \"Force Layout\",\n \"titleCN\": \"力引导布局\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-stack\",\n \"tags\": [],\n \"title\": \"Stacked Line Chart\",\n \"titleCN\": \"折线图堆叠\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"parallel\"\n ],\n \"id\": \"parallel-simple\",\n \"tags\": [],\n \"title\": \"Basic Parallel\",\n \"titleCN\": \"基础平行坐标\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"pie\"\n ],\n \"id\": \"pie-borderRadius\",\n \"tags\": [],\n \"title\": \"Doughnut Chart with Rounded Corner\",\n \"titleCN\": \"圆角环形图\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"pie\"\n ],\n \"id\": \"pie-doughnut\",\n \"tags\": [],\n \"title\": \"Doughnut Chart\",\n \"titleCN\": \"环形图\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"radar\"\n ],\n \"id\": \"radar-aqi\",\n \"tags\": [],\n \"title\": \"AQI - Radar Chart\",\n \"titleCN\": \"AQI - 雷达图\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"sankey\"\n ],\n \"id\": \"sankey-vertical\",\n \"tags\": [],\n \"title\": \"Sankey Orient Vertical\",\n \"titleCN\": \"垂直方向的桑基图\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-anscombe-quartet\",\n \"tags\": [],\n \"title\": \"Anscomb's quartet\",\n \"titleCN\": \"Anscomb's quartet\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-clustering\",\n \"tags\": [],\n \"title\": \"Clustering Process\",\n \"titleCN\": \"数据聚合\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-clustering-process\",\n \"tags\": [],\n \"title\": \"Clustering Process\",\n \"titleCN\": \"聚合过程可视化\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-exponential-regression\",\n \"tags\": [],\n \"title\": \"Exponential Regression\",\n \"titleCN\": \"指数回归(使用统计插件)\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"sunburst\"\n ],\n \"id\": \"sunburst-simple\",\n \"tags\": [],\n \"title\": \"Basic Sunburst\",\n \"titleCN\": \"基础旭日图\",\n \"difficulty\": 1\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"area-stack\",\n \"tags\": [],\n \"title\": \"Stacked area chart\",\n \"titleCN\": \"堆叠面积图\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"area-stack-gradient\",\n \"tags\": [],\n \"title\": \"Gradient Stacked area chart\",\n \"titleCN\": \"渐变堆叠面积图\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-negative2\",\n \"tags\": [],\n \"title\": \"Bar Chart with Negative Value\",\n \"titleCN\": \"交错正负轴标签\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-y-category\",\n \"tags\": [],\n \"title\": \"World Total Population\",\n \"titleCN\": \"世界人口总量 - 条形图\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"calendar\"\n ],\n \"id\": \"calendar-horizontal\",\n \"tags\": [],\n \"title\": \"Calendar Heatmap Horizontal\",\n \"titleCN\": \"横向日力图\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"candlestick\"\n ],\n \"id\": \"candlestick-sh\",\n \"tags\": [],\n \"title\": \"ShangHai Index\",\n \"titleCN\": \"上证指数\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"custom\",\n \"dataZoom\"\n ],\n \"id\": \"custom-error-scatter\",\n \"tags\": [],\n \"title\": \"Error Scatter on Catesian\",\n \"titleCN\": \"使用自定系列给散点图添加误差范围\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"effectScatter-map\",\n \"tags\": [],\n \"title\": \"Air Quality\",\n \"titleCN\": \"全国主要城市空气质量\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-speed\",\n \"tags\": [],\n \"title\": \"Speed Gauge\",\n \"titleCN\": \"速度仪表盘\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph-grid\",\n \"tags\": [],\n \"title\": \"Graph on Cartesian\",\n \"titleCN\": \"笛卡尔坐标系上的 Graph\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph-simple\",\n \"tags\": [],\n \"title\": \"Simple Graph\",\n \"titleCN\": \"Graph 简单示例\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"heatmap\"\n ],\n \"id\": \"heatmap-large\",\n \"tags\": [],\n \"title\": \"Heatmap - 2w data\",\n \"titleCN\": \"热力图 - 2w 数据\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"heatmap\"\n ],\n \"id\": \"heatmap-large-piecewise\",\n \"tags\": [],\n \"title\": \"Heatmap - Discrete Mapping of Color\",\n \"titleCN\": \"热力图 - 颜色的离散映射\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-marker\",\n \"tags\": [],\n \"title\": \"Temperature Change in the coming week\",\n \"titleCN\": \"未来一周气温变化\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"parallel\"\n ],\n \"id\": \"parallel-aqi\",\n \"tags\": [],\n \"title\": \"Parallel Aqi\",\n \"titleCN\": \"AQI 分布(平行坐标)\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"pie\"\n ],\n \"id\": \"pie-custom\",\n \"tags\": [],\n \"title\": \"Customized Pie\",\n \"titleCN\": \"饼图自定义样式\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"pie\"\n ],\n \"id\": \"pie-pattern\",\n \"tags\": [],\n \"title\": \"Texture on Pie Chart\",\n \"titleCN\": \"饼图纹理\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"pie\"\n ],\n \"id\": \"pie-roseType\",\n \"tags\": [],\n \"title\": \"Nightingale's Rose Diagram\",\n \"titleCN\": \"南丁格尔玫瑰图\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"pie\"\n ],\n \"id\": \"pie-roseType-simple\",\n \"tags\": [],\n \"title\": \"Nightingale's Rose Diagram\",\n \"titleCN\": \"基础南丁格尔玫瑰图\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"radar\"\n ],\n \"id\": \"radar-custom\",\n \"tags\": [],\n \"title\": \"Customized Radar Chart\",\n \"titleCN\": \"自定义雷达图\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"sankey\"\n ],\n \"id\": \"sankey-itemstyle\",\n \"tags\": [],\n \"title\": \"Specify ItemStyle for Each Node in Sankey\",\n \"titleCN\": \"桑基图节点自定义样式\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"sankey\"\n ],\n \"id\": \"sankey-levels\",\n \"tags\": [],\n \"title\": \"Sankey with Levels Setting\",\n \"titleCN\": \"桑基图层级自定义样式\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-effect\",\n \"tags\": [],\n \"title\": \"Effect Scatter Chart\",\n \"titleCN\": \"涟漪特效散点图\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-linear-regression\",\n \"tags\": [],\n \"title\": \"Linear Regression\",\n \"titleCN\": \"线性回归(使用统计插件)\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-polynomial-regression\",\n \"tags\": [],\n \"title\": \"Polynomial Regression\",\n \"titleCN\": \"多项式回归(使用统计插件)\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"sunburst\"\n ],\n \"id\": \"sunburst-borderRadius\",\n \"tags\": [],\n \"title\": \"Sunburst with Rounded Corner\",\n \"titleCN\": \"圆角旭日图\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"sunburst\"\n ],\n \"id\": \"sunburst-label-rotate\",\n \"tags\": [],\n \"title\": \"Sunburst Label Rotate\",\n \"titleCN\": \"旭日图标签旋转\",\n \"difficulty\": 2\n },\n {\n \"category\": [\n \"line\",\n \"visualMap\"\n ],\n \"id\": \"area-pieces\",\n \"tags\": [],\n \"title\": \"Area Pieces\",\n \"titleCN\": \"折线图区域高亮\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-gradient\",\n \"tags\": [],\n \"title\": \"Clickable Column Chart with Gradient\",\n \"titleCN\": \"特性示例:渐变色 阴影 点击缩放\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-label-rotation\",\n \"tags\": [],\n \"title\": \"Bar Label Rotation\",\n \"titleCN\": \"柱状图标签旋转\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-stack\",\n \"tags\": [],\n \"title\": \"Stacked Column Chart\",\n \"titleCN\": \"堆叠柱状图\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-waterfall2\",\n \"tags\": [],\n \"title\": \"Waterfall Chart\",\n \"titleCN\": \"阶梯瀑布图(柱状图模拟)\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-y-category-stack\",\n \"tags\": [],\n \"title\": \"Stacked Horizontal Bar\",\n \"titleCN\": \"堆叠条形图\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"candlestick\"\n ],\n \"id\": \"candlestick-large\",\n \"tags\": [],\n \"title\": \"Large Scale Candlestick\",\n \"titleCN\": \"大数据量K线图\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"custom-bar-trend\",\n \"tags\": [],\n \"title\": \"Custom Bar Trend\",\n \"titleCN\": \"使用自定义系列添加柱状图趋势\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"custom-cartesian-polygon\",\n \"tags\": [],\n \"title\": \"Custom Cartesian Polygon\",\n \"titleCN\": \"自定义多边形图\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"custom-error-bar\",\n \"tags\": [],\n \"title\": \"Error Bar on Catesian\",\n \"titleCN\": \"使用自定系列给柱状图添加误差范围\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"custom-profile\",\n \"tags\": [],\n \"title\": \"Profile\",\n \"titleCN\": \"性能分析图\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"cycle-plot\",\n \"tags\": [],\n \"title\": \"Cycle Plot\",\n \"titleCN\": \"Cycle Plot\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"data-transform-filter\",\n \"tags\": [],\n \"title\": \"Data Transform Fitler\",\n \"titleCN\": \"数据过滤\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"dataset\",\n \"pie\",\n \"transform\"\n ],\n \"id\": \"data-transform-multiple-pie\",\n \"tags\": [],\n \"title\": \"Partition Data to Pies\",\n \"titleCN\": \"分割数据到数个饼图\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"dataset\",\n \"pie\"\n ],\n \"id\": \"dataset-default\",\n \"tags\": [],\n \"title\": \"Default arrangement\",\n \"titleCN\": \"默认 encode 设置\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"dataset\"\n ],\n \"id\": \"dataset-encode1\",\n \"tags\": [],\n \"title\": \"Encode and Matrix\",\n \"titleCN\": \"指定数据到坐标轴的映射\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-progress\",\n \"tags\": [],\n \"title\": \"Grogress Gauge\",\n \"titleCN\": \"进度仪表盘\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-stage\",\n \"tags\": [],\n \"title\": \"Stage Speed Gauge\",\n \"titleCN\": \"阶段速度仪表盘\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph-force\",\n \"tags\": [],\n \"title\": \"Force Layout\",\n \"titleCN\": \"力引导布局\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph-label-overlap\",\n \"tags\": [],\n \"title\": \"Hide Overlapped Label\",\n \"titleCN\": \"关系图自动隐藏重叠标签\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"heatmap\"\n ],\n \"id\": \"heatmap-bmap\",\n \"tags\": [\n \"bmap\"\n ],\n \"title\": \"Heatmap on Baidu Map Extension\",\n \"titleCN\": \"热力图与百度地图扩展\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"heatmap\"\n ],\n \"id\": \"heatmap-map\",\n \"tags\": [],\n \"title\": \"Air Qulity\",\n \"titleCN\": \"全国主要城市空气质量\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-gradient\",\n \"tags\": [],\n \"title\": \"Line Gradient\",\n \"titleCN\": \"折线图的渐变\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-sections\",\n \"tags\": [],\n \"title\": \"Distribution of Electricity\",\n \"titleCN\": \"一天用电量分布\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"pie\"\n ],\n \"id\": \"pie-alignTo\",\n \"tags\": [],\n \"title\": \"Pie Label Align\",\n \"titleCN\": \"饼图标签对齐\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"pie\"\n ],\n \"id\": \"pie-labelLine-adjust\",\n \"tags\": [],\n \"title\": \"Label Line Adjust\",\n \"titleCN\": \"饼图引导线调整\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"radar\"\n ],\n \"id\": \"radar2\",\n \"tags\": [],\n \"title\": \"Proportion of Browsers\",\n \"titleCN\": \"浏览器占比变化\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"sankey\"\n ],\n \"id\": \"sankey-energy\",\n \"tags\": [],\n \"title\": \"Gradient Edge\",\n \"titleCN\": \"桑基图渐变色边\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"sankey\"\n ],\n \"id\": \"sankey-nodeAlign-left\",\n \"tags\": [],\n \"title\": \"Node Align Left in Sankey\",\n \"titleCN\": \"桑基图左对齐布局\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"sankey\"\n ],\n \"id\": \"sankey-nodeAlign-right\",\n \"tags\": [],\n \"title\": \"Node Align Right in Sankey\",\n \"titleCN\": \"桑基图右对齐布局\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-punchCard\",\n \"tags\": [],\n \"title\": \"Punch Card of Github\",\n \"titleCN\": \"GitHub 打卡气泡图\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-single-axis\",\n \"tags\": [],\n \"title\": \"Scatter on Single Axis\",\n \"titleCN\": \"单轴散点图\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-weight\",\n \"tags\": [],\n \"title\": \"Distribution of Height and Weight\",\n \"titleCN\": \"男性女性身高体重分布\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"sunburst\"\n ],\n \"id\": \"sunburst-monochrome\",\n \"tags\": [],\n \"title\": \"Monochrome Sunburst\",\n \"titleCN\": \"Monochrome Sunburst\",\n \"difficulty\": 3\n },\n {\n \"category\": [\n \"line\",\n \"dataZoom\"\n ],\n \"id\": \"area-simple\",\n \"tags\": [],\n \"title\": \"Large scale area chart\",\n \"titleCN\": \"大数据量面积图\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-brush\",\n \"tags\": [],\n \"title\": \"Brush Select on Column Chart\",\n \"titleCN\": \"柱状图框选\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-negative\",\n \"tags\": [],\n \"title\": \"Bar Chart with Negative Value\",\n \"titleCN\": \"正负条形图\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar1\",\n \"tags\": [],\n \"title\": \"Rainfall and Evaporation\",\n \"titleCN\": \"某地区蒸发量和降水量\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"calendar\",\n \"graph\"\n ],\n \"id\": \"calendar-graph\",\n \"tags\": [],\n \"title\": \"Calendar Graph\",\n \"titleCN\": \"日历关系图\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"calendar\"\n ],\n \"id\": \"calendar-lunar\",\n \"tags\": [],\n \"title\": \"Calendar Lunar\",\n \"titleCN\": \"农历日历图\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"candlestick\"\n ],\n \"id\": \"candlestick-touch\",\n \"tags\": [],\n \"title\": \"Axis Pointer Link and Touch\",\n \"titleCN\": \"触屏上的坐标轴指示器\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"confidence-band\",\n \"tags\": [],\n \"title\": \"Confidence Band\",\n \"titleCN\": \"Confidence Band\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"custom\",\n \"dataZoom\",\n \"drag\"\n ],\n \"id\": \"custom-gantt-flight\",\n \"tags\": [],\n \"title\": \"Gantt Chart of Airport Flights\",\n \"titleCN\": \"机场航班甘特图\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"custom-polar-heatmap\",\n \"tags\": [],\n \"title\": \"Polar Heatmap\",\n \"titleCN\": \"极坐标热力图(自定义系列)\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"boxplot\"\n ],\n \"id\": \"data-transform-aggregate\",\n \"tags\": [],\n \"title\": \"Data Transform Simple Aggregate\",\n \"titleCN\": \"简单的数据聚合\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-grade\",\n \"tags\": [],\n \"title\": \"Grade Gauge\",\n \"titleCN\": \"等级仪表盘\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-multi-title\",\n \"tags\": [],\n \"title\": \"Multi Title Gauge\",\n \"titleCN\": \"多标题仪表盘\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-temperature\",\n \"tags\": [],\n \"title\": \"Temperature Gauge chart\",\n \"titleCN\": \"气温仪表盘\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph\",\n \"tags\": [],\n \"title\": \"Les Miserables\",\n \"titleCN\": \"悲惨世界人物关系图\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"grid-multiple\",\n \"tags\": [],\n \"title\": \"Rainfall and Water Flow\",\n \"titleCN\": \"雨量流量关系图\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-aqi\",\n \"tags\": [],\n \"title\": \"Beijing AQI\",\n \"titleCN\": \"北京 AQI 可视化\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"mix-line-bar\",\n \"tags\": [],\n \"title\": \"Mixed Line and Bar\",\n \"titleCN\": \"折柱混合\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"mix-zoom-on-value\",\n \"tags\": [],\n \"title\": \"Mix Zoom On Value\",\n \"titleCN\": \"多数值轴轴缩放\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"multiple-x-axis\",\n \"tags\": [],\n \"title\": \"Multiple X Axes\",\n \"titleCN\": \"多 X 轴\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"multiple-y-axis\",\n \"tags\": [],\n \"title\": \"Multiple Y Axes\",\n \"titleCN\": \"多 Y 轴示例\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"parallel\"\n ],\n \"id\": \"parallel-nutrients\",\n \"tags\": [],\n \"title\": \"Parallel Nutrients\",\n \"titleCN\": \"营养结构(平行坐标)\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"pictorialBar\",\n \"animation\"\n ],\n \"id\": \"pictorialBar-bar-transition\",\n \"tags\": [],\n \"title\": \"Transition between pictorialBar and bar\",\n \"titleCN\": \"象形主图变形为柱状图\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"pie\"\n ],\n \"id\": \"pie-legend\",\n \"tags\": [],\n \"title\": \"Pie with Scrollable Legend\",\n \"titleCN\": \"可滚动的图例\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"pie\",\n \"rich\"\n ],\n \"id\": \"pie-rich-text\",\n \"tags\": [],\n \"title\": \"Pie Special Label\",\n \"titleCN\": \"富文本标签\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"scatter\",\n \"animation\"\n ],\n \"id\": \"scatter-aggregate-bar\",\n \"tags\": [],\n \"title\": \"Aggregate Scatter to Bar\",\n \"titleCN\": \"散点图聚合为柱状图动画\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-label-align-right\",\n \"tags\": [],\n \"title\": \"Align Label on the Top\",\n \"titleCN\": \"散点图标签顶部对齐\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-label-align-top\",\n \"tags\": [],\n \"title\": \"Align Label on the Top\",\n \"titleCN\": \"散点图标签顶部对齐\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-symbol-morph\",\n \"tags\": [],\n \"title\": \"Symbol Shape Morph\",\n \"titleCN\": \"散点图变形动画\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"sunburst\"\n ],\n \"id\": \"sunburst-visualMap\",\n \"tags\": [],\n \"title\": \"Sunburst VisualMap\",\n \"titleCN\": \"旭日图使用视觉编码\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"treemap\"\n ],\n \"id\": \"treemap-sunburst-transition\",\n \"tags\": [],\n \"title\": \"Transition between Treemap and Sunburst\",\n \"titleCN\": \"矩形树图和旭日图的动画过渡\",\n \"difficulty\": 4\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"area-rainfall\",\n \"tags\": [],\n \"title\": \"Rainfall\",\n \"titleCN\": \"雨量流量关系图\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"area-time-axis\",\n \"tags\": [],\n \"title\": \"Area Chart with Time Axis\",\n \"titleCN\": \"时间轴折线图\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-animation-delay\",\n \"tags\": [],\n \"title\": \"Animation Delay\",\n \"titleCN\": \"柱状图动画延迟\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-drilldown\",\n \"tags\": [],\n \"title\": \"Bar Chart Drilldown Animation.\",\n \"titleCN\": \"柱状图下钻动画\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-large\",\n \"tags\": [],\n \"title\": \"Large Scale Bar Chart\",\n \"titleCN\": \"大数据量柱图\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-race\",\n \"tags\": [],\n \"title\": \"Bar Race\",\n \"titleCN\": \"动态排序柱状图\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"dataset\",\n \"line\",\n \"pie\"\n ],\n \"id\": \"dataset-link\",\n \"tags\": [],\n \"title\": \"Share Dataset\",\n \"titleCN\": \"联动和共享数据集\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"dataset\",\n \"bar\"\n ],\n \"id\": \"dataset-series-layout-by\",\n \"tags\": [],\n \"title\": \"Series Layout By Column or Row\",\n \"titleCN\": \"系列按行和按列排布\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"dataset\",\n \"bar\"\n ],\n \"id\": \"dataset-simple0\",\n \"tags\": [],\n \"title\": \"Simple Example of Dataset\",\n \"titleCN\": \"最简单的数据集(dataset)\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"dataset\",\n \"bar\"\n ],\n \"id\": \"dataset-simple1\",\n \"tags\": [],\n \"title\": \"Dataset in Object Array\",\n \"titleCN\": \"对象数组的输入格式\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"dynamic-data2\",\n \"tags\": [],\n \"title\": \"Dynamic Data + Time Axis\",\n \"titleCN\": \"动态数据 + 时间坐标轴\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-ring\",\n \"tags\": [],\n \"title\": \"Ring Gauge\",\n \"titleCN\": \"得分环\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph-circular-layout\",\n \"tags\": [],\n \"title\": \"Les Miserables\",\n \"titleCN\": \"悲惨世界人物关系图(环形布局)\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-function\",\n \"tags\": [],\n \"title\": \"Function Plot\",\n \"titleCN\": \"函数绘图\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-race\",\n \"tags\": [],\n \"title\": \"Line Race\",\n \"titleCN\": \"动态排序折线图\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"pie\",\n \"rich\"\n ],\n \"id\": \"pie-nest\",\n \"tags\": [],\n \"title\": \"Nested Pies\",\n \"titleCN\": \"嵌套环形图\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-large\",\n \"tags\": [],\n \"title\": \"Large Scatter\",\n \"titleCN\": \"大规模散点图\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-nebula\",\n \"tags\": [],\n \"title\": \"Scatter Nebula\",\n \"titleCN\": \"大规模星云散点图\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-stream-visual\",\n \"tags\": [],\n \"title\": \"Visual interaction with stream\",\n \"titleCN\": \"流式渲染和视觉映射操作\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"sunburst\"\n ],\n \"id\": \"sunburst-drink\",\n \"tags\": [],\n \"title\": \"Drink Flavors\",\n \"titleCN\": \"Drink Flavors\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"custom\",\n \"dataZoom\"\n ],\n \"id\": \"wind-barb\",\n \"tags\": [],\n \"title\": \"Wind Barb\",\n \"titleCN\": \"风向图\",\n \"difficulty\": 5\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-race-country\",\n \"tags\": [],\n \"title\": \"Bar Race\",\n \"titleCN\": \"动态排序柱状图 - 人均收入\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"bar\",\n \"rich\"\n ],\n \"id\": \"bar-rich-text\",\n \"tags\": [],\n \"title\": \"Wheater Statistics\",\n \"titleCN\": \"天气统计(富文本)\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"bubble-gradient\",\n \"tags\": [],\n \"title\": \"Bubble Chart\",\n \"titleCN\": \"气泡图\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"calendar\",\n \"pie\"\n ],\n \"id\": \"calendar-pie\",\n \"tags\": [],\n \"title\": \"Calendar Pie\",\n \"titleCN\": \"日历饼图\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"custom\",\n \"map\"\n ],\n \"id\": \"custom-hexbin\",\n \"tags\": [],\n \"title\": \"Hexagonal Binning\",\n \"titleCN\": \"六边形分箱图(自定义系列)\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"dynamic-data\",\n \"tags\": [],\n \"title\": \"Dynamic Data\",\n \"titleCN\": \"动态数据\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-barometer\",\n \"tags\": [],\n \"title\": \"Gauge Barometer chart\",\n \"titleCN\": \"气压表\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph-force-dynamic\",\n \"tags\": [],\n \"title\": \"Graph Dynamic\",\n \"titleCN\": \"动态增加图节点\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-markline\",\n \"tags\": [],\n \"title\": \"Line with Marklines\",\n \"titleCN\": \"折线图的标记线\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-style\",\n \"tags\": [],\n \"title\": \"Line Style and Item Style\",\n \"titleCN\": \"自定义折线图样式\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"mix-timeline-finance\",\n \"tags\": [],\n \"title\": \"Finance Indices 2002\",\n \"titleCN\": \"2002全国宏观经济指标\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"sunburst\"\n ],\n \"id\": \"sunburst-book\",\n \"tags\": [],\n \"title\": \"Book Records\",\n \"titleCN\": \"书籍分布\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"watermark\",\n \"tags\": [],\n \"title\": \"Watermark - ECharts Download\",\n \"titleCN\": \"水印 - ECharts 下载统计\",\n \"difficulty\": 6\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-polar-real-estate\",\n \"tags\": [],\n \"title\": \"Bar Chart on Polar\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-polar-stack\",\n \"tags\": [],\n \"title\": \"Stacked Bar Chart on Polar\",\n \"titleCN\": \"极坐标系下的堆叠柱状图\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"bar-polar-stack-radial\",\n \"tags\": [],\n \"title\": \"Stacked Bar Chart on Polar(Radial)\",\n \"titleCN\": \"极坐标系下的堆叠柱状图\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"custom\",\n \"calendar\"\n ],\n \"id\": \"custom-calendar-icon\",\n \"tags\": [],\n \"title\": \"Custom Calendar Icon\",\n \"titleCN\": \"日历图自定义图标\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"custom-wind\",\n \"tags\": [],\n \"title\": \"Use custom series to draw wind vectors\",\n \"titleCN\": \"使用自定义系列绘制风场\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-clock\",\n \"tags\": [],\n \"title\": \"Clock\",\n \"titleCN\": \"时钟仪表盘\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph-life-expectancy\",\n \"tags\": [],\n \"title\": \"Graph Life Expectancy\",\n \"titleCN\": \"Graph Life Expectancy\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-in-cartesian-coordinate-system\",\n \"tags\": [],\n \"title\": \"Line Chart in Cartesian Coordinate System\",\n \"titleCN\": \"双数值轴折线图\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-log\",\n \"tags\": [],\n \"title\": \"Log Axis\",\n \"titleCN\": \"对数轴示例\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-step\",\n \"tags\": [],\n \"title\": \"Step Line\",\n \"titleCN\": \"阶梯折线图\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"bar\"\n ],\n \"id\": \"polar-roundCap\",\n \"tags\": [],\n \"title\": \"Rounded Bar on Polar\",\n \"titleCN\": \"圆角环形图\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-aqi-color\",\n \"tags\": [],\n \"title\": \"Scatter Aqi Color\",\n \"titleCN\": \"AQI 气泡图\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-nutrients\",\n \"tags\": [],\n \"title\": \"Scatter Nutrients\",\n \"titleCN\": \"营养分布散点图\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-nutrients-matrix\",\n \"tags\": [],\n \"title\": \"Scatter Nutrients Matrix\",\n \"titleCN\": \"营养分布散点矩阵\",\n \"difficulty\": 7\n },\n {\n \"category\": [\n \"gauge\"\n ],\n \"id\": \"gauge-car\",\n \"tags\": [],\n \"title\": \"Gauge Car\",\n \"titleCN\": \"Gauge Car\",\n \"difficulty\": 8\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph-webkit-dep\",\n \"tags\": [],\n \"title\": \"Graph Webkit Dep\",\n \"titleCN\": \"WebKit 模块关系依赖图\",\n \"difficulty\": 8\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-easing\",\n \"tags\": [],\n \"title\": \"Line Easing Visualizing\",\n \"titleCN\": \"缓动函数可视化\",\n \"difficulty\": 8\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-y-category\",\n \"tags\": [],\n \"title\": \"Line Y Category\",\n \"titleCN\": \"垂直折线图(Y轴为类目轴)\",\n \"difficulty\": 8\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-polar-punchCard\",\n \"tags\": [],\n \"title\": \"Punch Card of Github\",\n \"titleCN\": \"GitHub 打卡气泡图(极坐标)\",\n \"difficulty\": 8\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"custom-gauge\",\n \"tags\": [],\n \"title\": \"Custom Gauge\",\n \"titleCN\": \"自定义仪表\",\n \"difficulty\": 9\n },\n {\n \"category\": [\n \"graph\"\n ],\n \"id\": \"graph-npm\",\n \"tags\": [],\n \"title\": \"NPM Dependencies\",\n \"titleCN\": \"NPM 依赖关系图\",\n \"difficulty\": 9\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-graphic\",\n \"tags\": [],\n \"title\": \"Custom Graphic Component\",\n \"titleCN\": \"自定义图形组件\",\n \"difficulty\": 9\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-pen\",\n \"tags\": [],\n \"title\": \"Click to Add Points\",\n \"titleCN\": \"点击添加折线图拐点\",\n \"difficulty\": 9\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-life-expectancy-timeline\",\n \"tags\": [],\n \"title\": \"Life Expectancy and GDP\",\n \"titleCN\": \"各国人均寿命与GDP关系演变\",\n \"difficulty\": 9\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-painter-choice\",\n \"tags\": [],\n \"title\": \"Master Painter Color Choices Throughout History\",\n \"titleCN\": \"Master Painter Color Choices Throughout History\",\n \"difficulty\": 9\n },\n {\n \"category\": [],\n \"id\": \"bar-polar-label-radial\",\n \"tags\": [],\n \"difficulty\": 10\n },\n {\n \"category\": [],\n \"id\": \"bar-polar-label-tangential\",\n \"tags\": [],\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"boxplot\"\n ],\n \"id\": \"boxplot-light-velocity\",\n \"tags\": [],\n \"title\": \"Boxplot Light Velocity\",\n \"titleCN\": \"基础盒须图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"boxplot\"\n ],\n \"id\": \"boxplot-light-velocity2\",\n \"tags\": [],\n \"title\": \"Boxplot Light Velocity2\",\n \"titleCN\": \"垂直方向盒须图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"boxplot\"\n ],\n \"id\": \"boxplot-multi\",\n \"tags\": [],\n \"title\": \"Multiple Categories\",\n \"titleCN\": \"多系列盒须图\",\n \"difficulty\": 10\n },\n {\n \"category\": [],\n \"id\": \"calendar-effectscatter\",\n \"tags\": [],\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"candlestick\"\n ],\n \"id\": \"candlestick-brush\",\n \"tags\": [],\n \"title\": \"Candlestick Brush\",\n \"titleCN\": \"日力图刷选\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"candlestick\"\n ],\n \"id\": \"candlestick-sh-2015\",\n \"tags\": [],\n \"title\": \"ShangHai Index, 2015\",\n \"titleCN\": \"2015 年上证指数\",\n \"difficulty\": 10\n },\n {\n \"category\": [],\n \"id\": \"covid-america\",\n \"tags\": [],\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter\",\n \"map\"\n ],\n \"id\": \"effectScatter-bmap\",\n \"tags\": [\n \"bmap\"\n ],\n \"title\": \"Air Quality - Baidu Map\",\n \"titleCN\": \"全国主要城市空气质量 - 百度地图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"funnel\"\n ],\n \"id\": \"funnel\",\n \"tags\": [],\n \"title\": \"Funnel Chart\",\n \"titleCN\": \"漏斗图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"funnel\"\n ],\n \"id\": \"funnel-align\",\n \"tags\": [],\n \"title\": \"Funnel (align)\",\n \"titleCN\": \"漏斗图(对比)\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"funnel\"\n ],\n \"id\": \"funnel-customize\",\n \"tags\": [],\n \"title\": \"Customized Funnel\",\n \"titleCN\": \"漏斗图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"funnel\"\n ],\n \"id\": \"funnel-mutiple\",\n \"tags\": [],\n \"title\": \"Multiple Funnels\",\n \"titleCN\": \"漏斗图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"geo-beef-cuts\",\n \"tags\": [],\n \"title\": \"GEO Beef Cuts\",\n \"titleCN\": \"庖丁解牛\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"geo-lines\",\n \"tags\": [],\n \"title\": \"Migration\",\n \"titleCN\": \"模拟迁徙\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"geo-map-scatter\",\n \"tags\": [],\n \"title\": \"map and scatter share a geo\",\n \"titleCN\": \"map and scatter share a geo\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"geo-organ\",\n \"tags\": [],\n \"title\": \"Organ Data with SVG\",\n \"titleCN\": \"内脏数据(SVG)\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"geo-seatmap-flight\",\n \"tags\": [],\n \"title\": \"Flight Seatmap with SVG\",\n \"titleCN\": \"航班选座(SVG)\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"geo-svg-lines\",\n \"tags\": [],\n \"title\": \"GEO SVG Lines\",\n \"titleCN\": \"GEO 路径图(SVG)\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"geo-svg-map\",\n \"tags\": [],\n \"title\": \"GEO SVG Map\",\n \"titleCN\": \"地图(SVG)\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"geo-svg-scatter-simple\",\n \"tags\": [],\n \"title\": \"GEO SVG Scatter\",\n \"titleCN\": \"散点图(SVG)\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"geo-svg-traffic\",\n \"tags\": [],\n \"title\": \"GEO SVG Traffic\",\n \"titleCN\": \"交通(SVG)\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"line\",\n \"drag\"\n ],\n \"id\": \"line-draggable\",\n \"tags\": [],\n \"title\": \"Try Dragging these Points\",\n \"titleCN\": \"可拖拽点\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-polar\",\n \"tags\": [],\n \"title\": \"Two Value-Axes in Polar\",\n \"titleCN\": \"极坐标双数值轴\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"line\"\n ],\n \"id\": \"line-polar2\",\n \"tags\": [],\n \"title\": \"Two Value-Axes in Polar\",\n \"titleCN\": \"极坐标双数值轴\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"line\",\n \"dataZoom\"\n ],\n \"id\": \"line-tooltip-touch\",\n \"tags\": [],\n \"title\": \"Tooltip and DataZoom on Mobile\",\n \"titleCN\": \"移动端上的 dataZoom 和 tooltip\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\",\n \"lines\"\n ],\n \"id\": \"lines-airline\",\n \"tags\": [],\n \"title\": \"65k+ Airline\",\n \"titleCN\": \"65k+ 飞机航线\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\",\n \"lines\"\n ],\n \"id\": \"lines-bmap\",\n \"tags\": [\n \"bmap\"\n ],\n \"title\": \"A Hiking Trail in Hangzhou - Baidu Map\",\n \"titleCN\": \"杭州热门步行路线 - 百度地图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\",\n \"lines\"\n ],\n \"id\": \"lines-bmap-bus\",\n \"tags\": [\n \"bmap\"\n ],\n \"title\": \"Bus Lines of Beijing - Baidu Map\",\n \"titleCN\": \"北京公交路线 - 百度地图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\",\n \"lines\"\n ],\n \"id\": \"lines-bmap-effect\",\n \"tags\": [\n \"bmap\"\n ],\n \"title\": \"Bus Lines of Beijing - Line Effect\",\n \"titleCN\": \"北京公交路线 - 线特效\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\",\n \"lines\"\n ],\n \"id\": \"lines-ny\",\n \"tags\": [],\n \"title\": \"Use lines to draw 1 million ny streets.\",\n \"titleCN\": \"使用线图绘制近 100 万的纽约街道数据\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\",\n \"animation\"\n ],\n \"id\": \"map-bar-morph\",\n \"tags\": [],\n \"title\": \"Morphing between Map and Bar\",\n \"titleCN\": \"地图柱状图变形动画\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-bin\",\n \"tags\": [\n \"bmap\"\n ],\n \"title\": \"Binning on Map\",\n \"titleCN\": \"Binning on Map\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-china\",\n \"tags\": [],\n \"title\": \"Map China\",\n \"titleCN\": \"Map China\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-china-dataRange\",\n \"tags\": [],\n \"title\": \"Sales of iphone\",\n \"titleCN\": \"iphone销量\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-HK\",\n \"tags\": [],\n \"title\": \"Population Density of HongKong (2011)\",\n \"titleCN\": \"香港18区人口密度 (2011)\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-labels\",\n \"tags\": [],\n \"title\": \"Rich Text Labels on Map\",\n \"titleCN\": \"地图上的富文本标签\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-locate\",\n \"tags\": [],\n \"title\": \"Map Locate\",\n \"titleCN\": \"Map Locate\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-polygon\",\n \"tags\": [\n \"bmap\"\n ],\n \"title\": \"Draw Polygon on Map\",\n \"titleCN\": \"在地图上绘制多边形\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-province\",\n \"tags\": [],\n \"title\": \"Switch among 34 Provinces\",\n \"titleCN\": \"34 省切换查看\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-usa\",\n \"tags\": [],\n \"title\": \"USA Population Estimates (2012)\",\n \"titleCN\": \"2012 年美国人口统计\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-world\",\n \"tags\": [],\n \"title\": \"Map World\",\n \"titleCN\": \"Map World\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"map\"\n ],\n \"id\": \"map-world-dataRange\",\n \"tags\": [],\n \"title\": \"World Population (2010)\",\n \"titleCN\": \"World Population (2010)\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"pictorialBar\"\n ],\n \"id\": \"pictorialBar-body-fill\",\n \"tags\": [],\n \"title\": \"Water Content\",\n \"titleCN\": \"人体含水量\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"pictorialBar\"\n ],\n \"id\": \"pictorialBar-dotted\",\n \"tags\": [],\n \"title\": \"Dotted bar\",\n \"titleCN\": \"虚线柱状图效果\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"pictorialBar\"\n ],\n \"id\": \"pictorialBar-forest\",\n \"tags\": [],\n \"title\": \"Expansion of forest\",\n \"titleCN\": \"森林的增长\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"pictorialBar\"\n ],\n \"id\": \"pictorialBar-hill\",\n \"tags\": [],\n \"title\": \"Wish List and Mountain Height\",\n \"titleCN\": \"圣诞愿望清单和山峰高度\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"pictorialBar\"\n ],\n \"id\": \"pictorialBar-spirit\",\n \"tags\": [],\n \"title\": \"Spirits\",\n \"titleCN\": \"精灵\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"pictorialBar\"\n ],\n \"id\": \"pictorialBar-vehicle\",\n \"tags\": [],\n \"title\": \"Vehicles\",\n \"titleCN\": \"交通工具\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"pictorialBar\"\n ],\n \"id\": \"pictorialBar-velocity\",\n \"tags\": [],\n \"title\": \"Velocity of Christmas Reindeers\",\n \"titleCN\": \"驯鹿的速度\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"custom\",\n \"animtion\"\n ],\n \"id\": \"pie-parliament-transition\",\n \"tags\": [],\n \"title\": \"Transition of Parliament and Pie Chart\",\n \"titleCN\": \"自定义议会图与饼图过渡动画\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"radar\"\n ],\n \"id\": \"radar-multiple\",\n \"tags\": [],\n \"title\": \"Multiple Radar\",\n \"titleCN\": \"多雷达图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-map\",\n \"tags\": [],\n \"title\": \"Air Quality\",\n \"titleCN\": \"全国主要城市空气质量\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-map-brush\",\n \"tags\": [],\n \"title\": \"Scatter Map Brush\",\n \"titleCN\": \"Scatter Map Brush\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"parallel\",\n \"scatter\"\n ],\n \"id\": \"scatter-matrix\",\n \"tags\": [],\n \"title\": \"Scatter Matrix\",\n \"titleCN\": \"散点矩阵和平行坐标\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-weibo\",\n \"tags\": [],\n \"title\": \"Sign in of weibo\",\n \"titleCN\": \"微博签到数据点亮中国\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-world-population\",\n \"tags\": [],\n \"title\": \"World Population (2011)\",\n \"titleCN\": \"World Population (2011)\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"themeRiver\"\n ],\n \"id\": \"themeRiver-basic\",\n \"tags\": [],\n \"title\": \"ThemeRiver\",\n \"titleCN\": \"主题河流图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"themeRiver\"\n ],\n \"id\": \"themeRiver-lastfm\",\n \"tags\": [],\n \"title\": \"ThemeRiver Lastfm\",\n \"titleCN\": \"ThemeRiver Lastfm\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"tree\"\n ],\n \"id\": \"tree-basic\",\n \"tags\": [],\n \"title\": \"From Left to Right Tree\",\n \"titleCN\": \"从左到右树状图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"tree\"\n ],\n \"id\": \"tree-legend\",\n \"tags\": [],\n \"title\": \"Multiple Trees\",\n \"titleCN\": \"多棵树\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"tree\"\n ],\n \"id\": \"tree-orient-bottom-top\",\n \"tags\": [],\n \"title\": \"From Bottom to Top Tree\",\n \"titleCN\": \"从下到上树状图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"tree\"\n ],\n \"id\": \"tree-orient-right-left\",\n \"tags\": [],\n \"title\": \"From Right to Left Tree\",\n \"titleCN\": \"从右到左树状图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"tree\"\n ],\n \"id\": \"tree-polyline\",\n \"tags\": [],\n \"title\": \"Tree with Polyline Edge\",\n \"titleCN\": \"折线树图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"tree\"\n ],\n \"id\": \"tree-radial\",\n \"tags\": [],\n \"title\": \"Radial Tree\",\n \"titleCN\": \"径向树状图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"tree\"\n ],\n \"id\": \"tree-vertical\",\n \"tags\": [],\n \"title\": \"From Top to Bottom Tree\",\n \"titleCN\": \"从上到下树状图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"treemap\"\n ],\n \"id\": \"treemap-disk\",\n \"tags\": [],\n \"title\": \"Disk Usage\",\n \"titleCN\": \"磁盘占用\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"treemap\"\n ],\n \"id\": \"treemap-drill-down\",\n \"tags\": [],\n \"title\": \"ECharts Option Query\",\n \"titleCN\": \"ECharts 配置项查询分布\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"treemap\"\n ],\n \"id\": \"treemap-obama\",\n \"tags\": [],\n \"title\": \"How $3.7 Trillion is Spent\",\n \"titleCN\": \"How $3.7 Trillion is Spent\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"treemap\"\n ],\n \"id\": \"treemap-show-parent\",\n \"tags\": [],\n \"title\": \"Show Parent Labels\",\n \"titleCN\": \"显示父层级标签\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"treemap\"\n ],\n \"id\": \"treemap-simple\",\n \"tags\": [],\n \"title\": \"Basic Treemap\",\n \"titleCN\": \"基础矩形树图\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"treemap\"\n ],\n \"id\": \"treemap-visual\",\n \"tags\": [],\n \"title\": \"Gradient Mapping\",\n \"titleCN\": \"映射为渐变色\",\n \"difficulty\": 10\n },\n {\n \"category\": [\n \"calendar\",\n \"scatter\"\n ],\n \"id\": \"calendar-charts\",\n \"tags\": [],\n \"title\": \"Calendar Charts\",\n \"titleCN\": \"日力图\",\n \"difficulty\": 11\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"circle-packing-with-d3\",\n \"tags\": [],\n \"title\": \"Circle Packing with d3\",\n \"titleCN\": \"Circle Packing with d3\",\n \"difficulty\": 11\n },\n {\n \"category\": [\n \"custom\"\n ],\n \"id\": \"custom-spiral-race\",\n \"tags\": [],\n \"title\": \"Custom Spiral Race\",\n \"titleCN\": \"自定义螺旋线竞速\",\n \"difficulty\": 11\n },\n {\n \"category\": [\n \"scatter\"\n ],\n \"id\": \"scatter-logarithmic-regression\",\n \"tags\": [],\n \"title\": \"Logarithmic Regression\",\n \"titleCN\": \"对数回归(使用统计插件)\",\n \"difficulty\": 16\n }\n]","\n// THIS FILE IS GENERATED, DON'T MODIFY */\n\n/* eslint-disable */\nexport const keywords = [{\"name\":\"color\",\"count\":1835},{\"name\":\"shadowColor\",\"count\":1770},{\"name\":\"shadowBlur\",\"count\":1770},{\"name\":\"shadowOffsetX\",\"count\":1770},{\"name\":\"shadowOffsetY\",\"count\":1770},{\"name\":\"borderColor\",\"count\":1451},{\"name\":\"borderWidth\",\"count\":1450},{\"name\":\"width\",\"count\":1411},{\"name\":\"borderType\",\"count\":1385},{\"name\":\"borderDashOffset\",\"count\":1373},{\"name\":\"height\",\"count\":1120},{\"name\":\"backgroundColor\",\"count\":1111},{\"name\":\"fontSize\",\"count\":1098},{\"name\":\"fontStyle\",\"count\":1081},{\"name\":\"fontWeight\",\"count\":1081},{\"name\":\"fontFamily\",\"count\":1081},{\"name\":\"lineHeight\",\"count\":1081},{\"name\":\"textBorderColor\",\"count\":1081},{\"name\":\"textBorderWidth\",\"count\":1081},{\"name\":\"textBorderType\",\"count\":1081},{\"name\":\"textBorderDashOffset\",\"count\":1081},{\"name\":\"textShadowColor\",\"count\":1081},{\"name\":\"textShadowBlur\",\"count\":1081},{\"name\":\"textShadowOffsetX\",\"count\":1081},{\"name\":\"textShadowOffsetY\",\"count\":1081},{\"name\":\"padding\",\"count\":1079},{\"name\":\"borderRadius\",\"count\":1051},{\"name\":\"align\",\"count\":916},{\"name\":\"verticalAlign\",\"count\":913},{\"name\":\"opacity\",\"count\":692},{\"name\":\"show\",\"count\":664},{\"name\":\"overflow\",\"count\":567},{\"name\":\"ellipsis\",\"count\":567},{\"name\":\"lineOverflow\",\"count\":567},{\"name\":\"position\",\"count\":528},{\"name\":\"rich\",\"count\":514},{\"name\":\"<style_name>\",\"count\":514},{\"name\":\"distance\",\"count\":472},{\"name\":\"label\",\"count\":468},{\"name\":\"type\",\"count\":389},{\"name\":\"rotate\",\"count\":365},{\"name\":\"offset\",\"count\":357},{\"name\":\"itemStyle\",\"count\":356},{\"name\":\"borderCap\",\"count\":347},{\"name\":\"borderJoin\",\"count\":347},{\"name\":\"borderMiterLimit\",\"count\":347},{\"name\":\"formatter\",\"count\":331},{\"name\":\"lineStyle\",\"count\":298},{\"name\":\"dashOffset\",\"count\":278},{\"name\":\"cap\",\"count\":278},{\"name\":\"join\",\"count\":278},{\"name\":\"miterLimit\",\"count\":278},{\"name\":\"emphasis\",\"count\":175},{\"name\":\"blur\",\"count\":143},{\"name\":\"name\",\"count\":133},{\"name\":\"curveness\",\"count\":124},{\"name\":\"symbol\",\"count\":119},{\"name\":\"symbolSize\",\"count\":119},{\"name\":\"x\",\"count\":115},{\"name\":\"y\",\"count\":115},{\"name\":\"value\",\"count\":101},{\"name\":\"symbolKeepAspect\",\"count\":94},{\"name\":\"silent\",\"count\":93},{\"name\":\"labelLine\",\"count\":81},{\"name\":\"rotation\",\"count\":78},{\"name\":\"symbolOffset\",\"count\":75},{\"name\":\"id\",\"count\":71},{\"name\":\"data\",\"count\":71},{\"name\":\"symbolRotate\",\"count\":67},{\"name\":\"animationDuration\",\"count\":66},{\"name\":\"animationEasing\",\"count\":66},{\"name\":\"animationDelay\",\"count\":65},{\"name\":\"z\",\"count\":64},{\"name\":\"animation\",\"count\":64},{\"name\":\"animationDurationUpdate\",\"count\":63},{\"name\":\"animationThreshold\",\"count\":62},{\"name\":\"animationEasingUpdate\",\"count\":62},{\"name\":\"animationDelayUpdate\",\"count\":62},{\"name\":\"style\",\"count\":60},{\"name\":\"select\",\"count\":56},{\"name\":\"textStyle\",\"count\":54},{\"name\":\"zlevel\",\"count\":52},{\"name\":\"transition\",\"count\":48},{\"name\":\"focus\",\"count\":41},{\"name\":\"blurScope\",\"count\":41},{\"name\":\"coord\",\"count\":41},{\"name\":\"tooltip\",\"count\":40},{\"name\":\"inside\",\"count\":40},{\"name\":\"valueIndex\",\"count\":40},{\"name\":\"valueDim\",\"count\":40},{\"name\":\"extraCssText\",\"count\":38},{\"name\":\"interval\",\"count\":34},{\"name\":\"left\",\"count\":33},{\"name\":\"top\",\"count\":33},{\"name\":\"right\",\"count\":33},{\"name\":\"bottom\",\"count\":33},{\"name\":\"draggable\",\"count\":31},{\"name\":\"decal\",\"count\":28},{\"name\":\"dashArrayX\",\"count\":28},{\"name\":\"dashArrayY\",\"count\":28},{\"name\":\"maxTileWidth\",\"count\":28},{\"name\":\"maxTileHeight\",\"count\":28},{\"name\":\"margin\",\"count\":27},{\"name\":\"xAxis\",\"count\":27},{\"name\":\"yAxis\",\"count\":27},{\"name\":\"origin\",\"count\":26},{\"name\":\"0\",\"count\":26},{\"name\":\"1\",\"count\":26},{\"name\":\"precision\",\"count\":25},{\"name\":\"scaleX\",\"count\":25},{\"name\":\"scaleY\",\"count\":25},{\"name\":\"originX\",\"count\":25},{\"name\":\"originY\",\"count\":25},{\"name\":\"info\",\"count\":25},{\"name\":\"invisible\",\"count\":25},{\"name\":\"ignore\",\"count\":25},{\"name\":\"textContent\",\"count\":25},{\"name\":\"textConfig\",\"count\":25},{\"name\":\"layoutRect\",\"count\":25},{\"name\":\"local\",\"count\":25},{\"name\":\"insideFill\",\"count\":25},{\"name\":\"insideStroke\",\"count\":25},{\"name\":\"outsideFill\",\"count\":25},{\"name\":\"outsideStroke\",\"count\":25},{\"name\":\"smooth\",\"count\":24},{\"name\":\"selectedMode\",\"count\":23},{\"name\":\"fill\",\"count\":23},{\"name\":\"stroke\",\"count\":23},{\"name\":\"lineWidth\",\"count\":23},{\"name\":\"length\",\"count\":21},{\"name\":\"areaStyle\",\"count\":20},{\"name\":\"shape\",\"count\":20},{\"name\":\"cursor\",\"count\":19},{\"name\":\"showAbove\",\"count\":19},{\"name\":\"splitNumber\",\"count\":18},{\"name\":\"progressive\",\"count\":18},{\"name\":\"length2\",\"count\":18},{\"name\":\"minTurnAngle\",\"count\":18},{\"name\":\"labelLayout\",\"count\":18},{\"name\":\"hideOverlap\",\"count\":17},{\"name\":\"moveOverlap\",\"count\":17},{\"name\":\"dx\",\"count\":17},{\"name\":\"dy\",\"count\":17},{\"name\":\"labelLinePoints\",\"count\":17},{\"name\":\"icon\",\"count\":16},{\"name\":\"xAxisIndex\",\"count\":15},{\"name\":\"yAxisIndex\",\"count\":15},{\"name\":\"min\",\"count\":14},{\"name\":\"max\",\"count\":14},{\"name\":\"scale\",\"count\":14},{\"name\":\"coordinateSystem\",\"count\":13},{\"name\":\"markPoint\",\"count\":13},{\"name\":\"markLine\",\"count\":13},{\"name\":\"markArea\",\"count\":13},{\"name\":\"z2\",\"count\":13},{\"name\":\"during\",\"count\":13},{\"name\":\"extra\",\"count\":13},{\"name\":\"orient\",\"count\":12},{\"name\":\"iconStyle\",\"count\":12},{\"name\":\"areaColor\",\"count\":12},{\"name\":\"$action\",\"count\":12},{\"name\":\"bounding\",\"count\":12},{\"name\":\"onclick\",\"count\":12},{\"name\":\"onmouseover\",\"count\":12},{\"name\":\"onmouseout\",\"count\":12},{\"name\":\"onmousemove\",\"count\":12},{\"name\":\"onmousewheel\",\"count\":12},{\"name\":\"onmousedown\",\"count\":12},{\"name\":\"onmouseup\",\"count\":12},{\"name\":\"ondrag\",\"count\":12},{\"name\":\"ondragstart\",\"count\":12},{\"name\":\"ondragend\",\"count\":12},{\"name\":\"ondragenter\",\"count\":12},{\"name\":\"ondragleave\",\"count\":12},{\"name\":\"ondragover\",\"count\":12},{\"name\":\"ondrop\",\"count\":12},{\"name\":\"legendHoverLink\",\"count\":12},{\"name\":\"upperLabel\",\"count\":12},{\"name\":\"dimensions\",\"count\":11},{\"name\":\"axisPointer\",\"count\":10},{\"name\":\"snap\",\"count\":10},{\"name\":\"shadowStyle\",\"count\":10},{\"name\":\"r\",\"count\":10},{\"name\":\"encode\",\"count\":10},{\"name\":\"minAngle\",\"count\":10},{\"name\":\"morph\",\"count\":10},{\"name\":\"title\",\"count\":9},{\"name\":\"textAlign\",\"count\":9},{\"name\":\"triggerEvent\",\"count\":9},{\"name\":\"inverse\",\"count\":9},{\"name\":\"axisLine\",\"count\":9},{\"name\":\"axisTick\",\"count\":9},{\"name\":\"axisLabel\",\"count\":9},{\"name\":\"boundaryGap\",\"count\":8},{\"name\":\"showMinLabel\",\"count\":8},{\"name\":\"showMaxLabel\",\"count\":8},{\"name\":\"splitLine\",\"count\":8},{\"name\":\"size\",\"count\":8},{\"name\":\"throttle\",\"count\":8},{\"name\":\"center\",\"count\":8},{\"name\":\"startAngle\",\"count\":8},{\"name\":\"geoIndex\",\"count\":8},{\"name\":\"cx\",\"count\":8},{\"name\":\"cy\",\"count\":8},{\"name\":\"seriesLayoutBy\",\"count\":8},{\"name\":\"datasetIndex\",\"count\":8},{\"name\":\"color0\",\"count\":8},{\"name\":\"borderColor0\",\"count\":8},{\"name\":\"nameGap\",\"count\":7},{\"name\":\"minInterval\",\"count\":7},{\"name\":\"maxInterval\",\"count\":7},{\"name\":\"logBase\",\"count\":7},{\"name\":\"alignWithLabel\",\"count\":7},{\"name\":\"minorTick\",\"count\":7},{\"name\":\"polarIndex\",\"count\":7},{\"name\":\"clockwise\",\"count\":7},{\"name\":\"clip\",\"count\":7},{\"name\":\"text\",\"count\":6},{\"name\":\"nameLocation\",\"count\":6},{\"name\":\"nameTextStyle\",\"count\":6},{\"name\":\"nameRotate\",\"count\":6},{\"name\":\"splitArea\",\"count\":6},{\"name\":\"triggerTooltip\",\"count\":6},{\"name\":\"status\",\"count\":6},{\"name\":\"handle\",\"count\":6},{\"name\":\"textPosition\",\"count\":6},{\"name\":\"textFill\",\"count\":6},{\"name\":\"textBackgroundColor\",\"count\":6},{\"name\":\"textBorderRadius\",\"count\":6},{\"name\":\"textPadding\",\"count\":6},{\"name\":\"line\",\"count\":6},{\"name\":\"layout\",\"count\":6},{\"name\":\"r0\",\"count\":6},{\"name\":\"progressiveThreshold\",\"count\":6},{\"name\":\"colorAlpha\",\"count\":6},{\"name\":\"colorSaturation\",\"count\":6},{\"name\":\"offsetCenter\",\"count\":6},{\"name\":\"target\",\"count\":5},{\"name\":\"itemGap\",\"count\":5},{\"name\":\"minorSplitLine\",\"count\":5},{\"name\":\"radius\",\"count\":5},{\"name\":\"realtime\",\"count\":5},{\"name\":\"zoom\",\"count\":5},{\"name\":\"bar\",\"count\":5},{\"name\":\"stack\",\"count\":5},{\"name\":\"roam\",\"count\":5},{\"name\":\"endAngle\",\"count\":5},{\"name\":\"valueAnimation\",\"count\":5},{\"name\":\"calendarIndex\",\"count\":5},{\"name\":\"link\",\"count\":4},{\"name\":\"selected\",\"count\":4},{\"name\":\"trigger\",\"count\":4},{\"name\":\"axis\",\"count\":4},{\"name\":\"crossStyle\",\"count\":4},{\"name\":\"end\",\"count\":4},{\"name\":\"seriesIndex\",\"count\":4},{\"name\":\"inRange\",\"count\":4},{\"name\":\"outOfRange\",\"count\":4},{\"name\":\"nameMap\",\"count\":4},{\"name\":\"points\",\"count\":4},{\"name\":\"smoothConstraint\",\"count\":4},{\"name\":\"x1\",\"count\":4},{\"name\":\"y1\",\"count\":4},{\"name\":\"x2\",\"count\":4},{\"name\":\"y2\",\"count\":4},{\"name\":\"percent\",\"count\":4},{\"name\":\"endLabel\",\"count\":4},{\"name\":\"large\",\"count\":4},{\"name\":\"largeThreshold\",\"count\":4},{\"name\":\"hoverAnimation\",\"count\":4},{\"name\":\"edgeLabel\",\"count\":4},{\"name\":\"textVerticalAlign\",\"count\":3},{\"name\":\"itemWidth\",\"count\":3},{\"name\":\"itemHeight\",\"count\":3},{\"name\":\"filterMode\",\"count\":3},{\"name\":\"handleStyle\",\"count\":3},{\"name\":\"brushStyle\",\"count\":3},{\"name\":\"rect\",\"count\":3},{\"name\":\"polygon\",\"count\":3},{\"name\":\"map\",\"count\":3},{\"name\":\"children\",\"count\":3},{\"name\":\"image\",\"count\":3},{\"name\":\"font\",\"count\":3},{\"name\":\"source\",\"count\":3},{\"name\":\"config\",\"count\":3},{\"name\":\"print\",\"count\":3},{\"name\":\"sort\",\"count\":3},{\"name\":\"withName\",\"count\":3},{\"name\":\"withoutName\",\"count\":3},{\"name\":\"roundCap\",\"count\":3},{\"name\":\"barWidth\",\"count\":3},{\"name\":\"barMaxWidth\",\"count\":3},{\"name\":\"barMinWidth\",\"count\":3},{\"name\":\"progressiveChunkMode\",\"count\":3},{\"name\":\"visualDimension\",\"count\":3},{\"name\":\"visualMin\",\"count\":3},{\"name\":\"visualMax\",\"count\":3},{\"name\":\"colorMappingBy\",\"count\":3},{\"name\":\"visibleMin\",\"count\":3},{\"name\":\"childrenVisibleMin\",\"count\":3},{\"name\":\"gapWidth\",\"count\":3},{\"name\":\"borderColorSaturation\",\"count\":3},{\"name\":\"levels\",\"count\":3},{\"name\":\"selectorLabel\",\"count\":2},{\"name\":\"gridIndex\",\"count\":2},{\"name\":\"realtimeSort\",\"count\":2},{\"name\":\"sortSeriesIndex\",\"count\":2},{\"name\":\"onZero\",\"count\":2},{\"name\":\"onZeroAxisIndex\",\"count\":2},{\"name\":\"radar\",\"count\":2},{\"name\":\"dataZoom\",\"count\":2},{\"name\":\"radiusAxisIndex\",\"count\":2},{\"name\":\"angleAxisIndex\",\"count\":2},{\"name\":\"start\",\"count\":2},{\"name\":\"startValue\",\"count\":2},{\"name\":\"endValue\",\"count\":2},{\"name\":\"minSpan\",\"count\":2},{\"name\":\"maxSpan\",\"count\":2},{\"name\":\"minValueSpan\",\"count\":2},{\"name\":\"maxValueSpan\",\"count\":2},{\"name\":\"zoomLock\",\"count\":2},{\"name\":\"rangeMode\",\"count\":2},{\"name\":\"handleIcon\",\"count\":2},{\"name\":\"handleSize\",\"count\":2},{\"name\":\"moveHandleStyle\",\"count\":2},{\"name\":\"range\",\"count\":2},{\"name\":\"textGap\",\"count\":2},{\"name\":\"dimension\",\"count\":2},{\"name\":\"hoverLink\",\"count\":2},{\"name\":\"controller\",\"count\":2},{\"name\":\"categories\",\"count\":2},{\"name\":\"triggerOn\",\"count\":2},{\"name\":\"toolbox\",\"count\":2},{\"name\":\"itemSize\",\"count\":2},{\"name\":\"back\",\"count\":2},{\"name\":\"option\",\"count\":2},{\"name\":\"brush\",\"count\":2},{\"name\":\"lineX\",\"count\":2},{\"name\":\"lineY\",\"count\":2},{\"name\":\"keep\",\"count\":2},{\"name\":\"clear\",\"count\":2},{\"name\":\"brushType\",\"count\":2},{\"name\":\"aspectScale\",\"count\":2},{\"name\":\"boundingCoords\",\"count\":2},{\"name\":\"scaleLimit\",\"count\":2},{\"name\":\"nameProperty\",\"count\":2},{\"name\":\"layoutCenter\",\"count\":2},{\"name\":\"layoutSize\",\"count\":2},{\"name\":\"parallel\",\"count\":2},{\"name\":\"parallelIndex\",\"count\":2},{\"name\":\"loop\",\"count\":2},{\"name\":\"checkpointStyle\",\"count\":2},{\"name\":\"controlStyle\",\"count\":2},{\"name\":\"progress\",\"count\":2},{\"name\":\"diffChildrenByName\",\"count\":2},{\"name\":\"polyline\",\"count\":2},{\"name\":\"cpx1\",\"count\":2},{\"name\":\"cpy1\",\"count\":2},{\"name\":\"cpx2\",\"count\":2},{\"name\":\"cpy2\",\"count\":2},{\"name\":\"enabled\",\"count\":2},{\"name\":\"series\",\"count\":2},{\"name\":\"maxCount\",\"count\":2},{\"name\":\"prefix\",\"count\":2},{\"name\":\"separator\",\"count\":2},{\"name\":\"middle\",\"count\":2},{\"name\":\"sampling\",\"count\":2},{\"name\":\"barMinHeight\",\"count\":2},{\"name\":\"barMinAngle\",\"count\":2},{\"name\":\"barGap\",\"count\":2},{\"name\":\"barCategoryGap\",\"count\":2},{\"name\":\"period\",\"count\":2},{\"name\":\"nodeClick\",\"count\":2},{\"name\":\"nodes\",\"count\":2},{\"name\":\"links\",\"count\":2},{\"name\":\"edges\",\"count\":2},{\"name\":\"depth\",\"count\":2},{\"name\":\"detail\",\"count\":2},{\"name\":\"keepAspect\",\"count\":2},{\"name\":\"symbolPosition\",\"count\":2},{\"name\":\"symbolRepeat\",\"count\":2},{\"name\":\"symbolRepeatDirection\",\"count\":2},{\"name\":\"symbolMargin\",\"count\":2},{\"name\":\"symbolClip\",\"count\":2},{\"name\":\"symbolBoundingData\",\"count\":2},{\"name\":\"symbolPatternSize\",\"count\":2},{\"name\":\"subtext\",\"count\":1},{\"name\":\"sublink\",\"count\":1},{\"name\":\"subtarget\",\"count\":1},{\"name\":\"subtextStyle\",\"count\":1},{\"name\":\"legend\",\"count\":1},{\"name\":\"inactiveColor\",\"count\":1},{\"name\":\"scrollDataIndex\",\"count\":1},{\"name\":\"pageButtonItemGap\",\"count\":1},{\"name\":\"pageButtonGap\",\"count\":1},{\"name\":\"pageButtonPosition\",\"count\":1},{\"name\":\"pageFormatter\",\"count\":1},{\"name\":\"pageIcons\",\"count\":1},{\"name\":\"horizontal\",\"count\":1},{\"name\":\"vertical\",\"count\":1},{\"name\":\"pageIconColor\",\"count\":1},{\"name\":\"pageIconInactiveColor\",\"count\":1},{\"name\":\"pageIconSize\",\"count\":1},{\"name\":\"pageTextStyle\",\"count\":1},{\"name\":\"selector\",\"count\":1},{\"name\":\"selectorPosition\",\"count\":1},{\"name\":\"selectorItemGap\",\"count\":1},{\"name\":\"selectorButtonGap\",\"count\":1},{\"name\":\"grid\",\"count\":1},{\"name\":\"containLabel\",\"count\":1},{\"name\":\"polar\",\"count\":1},{\"name\":\"radiusAxis\",\"count\":1},{\"name\":\"angleAxis\",\"count\":1},{\"name\":\"indicator\",\"count\":1},{\"name\":\"disabled\",\"count\":1},{\"name\":\"zoomOnMouseWheel\",\"count\":1},{\"name\":\"moveOnMouseMove\",\"count\":1},{\"name\":\"moveOnMouseWheel\",\"count\":1},{\"name\":\"preventDefaultMouseMove\",\"count\":1},{\"name\":\"slider\",\"count\":1},{\"name\":\"dataBackground\",\"count\":1},{\"name\":\"selectedDataBackground\",\"count\":1},{\"name\":\"fillerColor\",\"count\":1},{\"name\":\"moveHandleIcon\",\"count\":1},{\"name\":\"moveHandleSize\",\"count\":1},{\"name\":\"labelPrecision\",\"count\":1},{\"name\":\"labelFormatter\",\"count\":1},{\"name\":\"showDetail\",\"count\":1},{\"name\":\"showDataShadow\",\"count\":1},{\"name\":\"brushSelect\",\"count\":1},{\"name\":\"visualMap\",\"count\":1},{\"name\":\"continuous\",\"count\":1},{\"name\":\"calculable\",\"count\":1},{\"name\":\"indicatorIcon\",\"count\":1},{\"name\":\"indicatorSize\",\"count\":1},{\"name\":\"indicatorStyle\",\"count\":1},{\"name\":\"piecewise\",\"count\":1},{\"name\":\"pieces\",\"count\":1},{\"name\":\"minOpen\",\"count\":1},{\"name\":\"maxOpen\",\"count\":1},{\"name\":\"showLabel\",\"count\":1},{\"name\":\"itemSymbol\",\"count\":1},{\"name\":\"showContent\",\"count\":1},{\"name\":\"alwaysShowContent\",\"count\":1},{\"name\":\"showDelay\",\"count\":1},{\"name\":\"hideDelay\",\"count\":1},{\"name\":\"enterable\",\"count\":1},{\"name\":\"renderMode\",\"count\":1},{\"name\":\"confine\",\"count\":1},{\"name\":\"appendToBody\",\"count\":1},{\"name\":\"className\",\"count\":1},{\"name\":\"transitionDuration\",\"count\":1},{\"name\":\"order\",\"count\":1},{\"name\":\"showTitle\",\"count\":1},{\"name\":\"feature\",\"count\":1},{\"name\":\"saveAsImage\",\"count\":1},{\"name\":\"connectedBackgroundColor\",\"count\":1},{\"name\":\"excludeComponents\",\"count\":1},{\"name\":\"pixelRatio\",\"count\":1},{\"name\":\"restore\",\"count\":1},{\"name\":\"dataView\",\"count\":1},{\"name\":\"readOnly\",\"count\":1},{\"name\":\"optionToContent\",\"count\":1},{\"name\":\"contentToOption\",\"count\":1},{\"name\":\"lang\",\"count\":1},{\"name\":\"textareaColor\",\"count\":1},{\"name\":\"textareaBorderColor\",\"count\":1},{\"name\":\"textColor\",\"count\":1},{\"name\":\"buttonColor\",\"count\":1},{\"name\":\"buttonTextColor\",\"count\":1},{\"name\":\"magicType\",\"count\":1},{\"name\":\"tiled\",\"count\":1},{\"name\":\"brushLink\",\"count\":1},{\"name\":\"brushMode\",\"count\":1},{\"name\":\"transformable\",\"count\":1},{\"name\":\"throttleType\",\"count\":1},{\"name\":\"throttleDelay\",\"count\":1},{\"name\":\"removeOnClick\",\"count\":1},{\"name\":\"inBrush\",\"count\":1},{\"name\":\"outOfBrush\",\"count\":1},{\"name\":\"geo\",\"count\":1},{\"name\":\"regions\",\"count\":1},{\"name\":\"axisExpandable\",\"count\":1},{\"name\":\"axisExpandCenter\",\"count\":1},{\"name\":\"axisExpandCount\",\"count\":1},{\"name\":\"axisExpandWidth\",\"count\":1},{\"name\":\"axisExpandTriggerOn\",\"count\":1},{\"name\":\"parallelAxisDefault\",\"count\":1},{\"name\":\"parallelAxis\",\"count\":1},{\"name\":\"dim\",\"count\":1},{\"name\":\"areaSelectStyle\",\"count\":1},{\"name\":\"singleAxis\",\"count\":1},{\"name\":\"timeline\",\"count\":1},{\"name\":\"axisType\",\"count\":1},{\"name\":\"currentIndex\",\"count\":1},{\"name\":\"autoPlay\",\"count\":1},{\"name\":\"rewind\",\"count\":1},{\"name\":\"playInterval\",\"count\":1},{\"name\":\"replaceMerge\",\"count\":1},{\"name\":\"controlPosition\",\"count\":1},{\"name\":\"showPlayBtn\",\"count\":1},{\"name\":\"showPrevBtn\",\"count\":1},{\"name\":\"showNextBtn\",\"count\":1},{\"name\":\"playIcon\",\"count\":1},{\"name\":\"stopIcon\",\"count\":1},{\"name\":\"prevIcon\",\"count\":1},{\"name\":\"nextIcon\",\"count\":1},{\"name\":\"graphic\",\"count\":1},{\"name\":\"elements\",\"count\":1},{\"name\":\"group\",\"count\":1},{\"name\":\"circle\",\"count\":1},{\"name\":\"ring\",\"count\":1},{\"name\":\"sector\",\"count\":1},{\"name\":\"arc\",\"count\":1},{\"name\":\"bezierCurve\",\"count\":1},{\"name\":\"calendar\",\"count\":1},{\"name\":\"cellSize\",\"count\":1},{\"name\":\"dayLabel\",\"count\":1},{\"name\":\"firstDay\",\"count\":1},{\"name\":\"monthLabel\",\"count\":1},{\"name\":\"yearLabel\",\"count\":1},{\"name\":\"dataset\",\"count\":1},{\"name\":\"sourceHeader\",\"count\":1},{\"name\":\"transform\",\"count\":1},{\"name\":\"filter\",\"count\":1},{\"name\":\"xxx:xxx\",\"count\":1},{\"name\":\"fromDatasetIndex\",\"count\":1},{\"name\":\"fromDatasetId\",\"count\":1},{\"name\":\"fromTransformResult\",\"count\":1},{\"name\":\"aria\",\"count\":1},{\"name\":\"description\",\"count\":1},{\"name\":\"general\",\"count\":1},{\"name\":\"withTitle\",\"count\":1},{\"name\":\"withoutTitle\",\"count\":1},{\"name\":\"single\",\"count\":1},{\"name\":\"multiple\",\"count\":1},{\"name\":\"allData\",\"count\":1},{\"name\":\"partialData\",\"count\":1},{\"name\":\"decals\",\"count\":1},{\"name\":\"showSymbol\",\"count\":1},{\"name\":\"showAllSymbol\",\"count\":1},{\"name\":\"connectNulls\",\"count\":1},{\"name\":\"step\",\"count\":1},{\"name\":\"smoothMonotone\",\"count\":1},{\"name\":\"showBackground\",\"count\":1},{\"name\":\"backgroundStyle\",\"count\":1},{\"name\":\"pie\",\"count\":1},{\"name\":\"selectedOffset\",\"count\":1},{\"name\":\"minShowLabelAngle\",\"count\":1},{\"name\":\"roseType\",\"count\":1},{\"name\":\"avoidLabelOverlap\",\"count\":1},{\"name\":\"stillShowZeroSum\",\"count\":1},{\"name\":\"alignTo\",\"count\":1},{\"name\":\"edgeDistance\",\"count\":1},{\"name\":\"bleedMargin\",\"count\":1},{\"name\":\"distanceToLabelLine\",\"count\":1},{\"name\":\"maxSurfaceAngle\",\"count\":1},{\"name\":\"scaleSize\",\"count\":1},{\"name\":\"animationType\",\"count\":1},{\"name\":\"animationTypeUpdate\",\"count\":1},{\"name\":\"scatter\",\"count\":1},{\"name\":\"effectScatter\",\"count\":1},{\"name\":\"effectType\",\"count\":1},{\"name\":\"showEffectOn\",\"count\":1},{\"name\":\"rippleEffect\",\"count\":1},{\"name\":\"radarIndex\",\"count\":1},{\"name\":\"tree\",\"count\":1},{\"name\":\"edgeShape\",\"count\":1},{\"name\":\"edgeForkPosition\",\"count\":1},{\"name\":\"expandAndCollapse\",\"count\":1},{\"name\":\"initialTreeDepth\",\"count\":1},{\"name\":\"leaves\",\"count\":1},{\"name\":\"treemap\",\"count\":1},{\"name\":\"squareRatio\",\"count\":1},{\"name\":\"leafDepth\",\"count\":1},{\"name\":\"drillDownIcon\",\"count\":1},{\"name\":\"zoomToNodeRatio\",\"count\":1},{\"name\":\"breadcrumb\",\"count\":1},{\"name\":\"emptyItemWidth\",\"count\":1},{\"name\":\"sunburst\",\"count\":1},{\"name\":\"renderLabelForZeroData\",\"count\":1},{\"name\":\"boxplot\",\"count\":1},{\"name\":\"boxWidth\",\"count\":1},{\"name\":\"candlestick\",\"count\":1},{\"name\":\"heatmap\",\"count\":1},{\"name\":\"pointSize\",\"count\":1},{\"name\":\"blurSize\",\"count\":1},{\"name\":\"minOpacity\",\"count\":1},{\"name\":\"maxOpacity\",\"count\":1},{\"name\":\"mapValueCalculation\",\"count\":1},{\"name\":\"showLegendSymbol\",\"count\":1},{\"name\":\"inactiveOpacity\",\"count\":1},{\"name\":\"activeOpacity\",\"count\":1},{\"name\":\"lines\",\"count\":1},{\"name\":\"effect\",\"count\":1},{\"name\":\"delay\",\"count\":1},{\"name\":\"constantSpeed\",\"count\":1},{\"name\":\"trailLength\",\"count\":1},{\"name\":\"coords\",\"count\":1},{\"name\":\"graph\",\"count\":1},{\"name\":\"circular\",\"count\":1},{\"name\":\"rotateLabel\",\"count\":1},{\"name\":\"force\",\"count\":1},{\"name\":\"initLayout\",\"count\":1},{\"name\":\"repulsion\",\"count\":1},{\"name\":\"gravity\",\"count\":1},{\"name\":\"edgeLength\",\"count\":1},{\"name\":\"layoutAnimation\",\"count\":1},{\"name\":\"friction\",\"count\":1},{\"name\":\"nodeScaleRatio\",\"count\":1},{\"name\":\"edgeSymbol\",\"count\":1},{\"name\":\"edgeSymbolSize\",\"count\":1},{\"name\":\"autoCurveness\",\"count\":1},{\"name\":\"fixed\",\"count\":1},{\"name\":\"category\",\"count\":1},{\"name\":\"ignoreForceLayout\",\"count\":1},{\"name\":\"sankey\",\"count\":1},{\"name\":\"nodeWidth\",\"count\":1},{\"name\":\"nodeGap\",\"count\":1},{\"name\":\"nodeAlign\",\"count\":1},{\"name\":\"layoutIterations\",\"count\":1},{\"name\":\"funnel\",\"count\":1},{\"name\":\"minSize\",\"count\":1},{\"name\":\"maxSize\",\"count\":1},{\"name\":\"gap\",\"count\":1},{\"name\":\"funnelAlign\",\"count\":1},{\"name\":\"gauge\",\"count\":1},{\"name\":\"overlap\",\"count\":1},{\"name\":\"pointer\",\"count\":1},{\"name\":\"anchor\",\"count\":1},{\"name\":\"pictorialBar\",\"count\":1},{\"name\":\"themeRiver\",\"count\":1},{\"name\":\"singleAxisIndex\",\"count\":1},{\"name\":\"date\",\"count\":1},{\"name\":\"custom\",\"count\":1},{\"name\":\"renderItem\",\"count\":1},{\"name\":\"arguments\",\"count\":1},{\"name\":\"params\",\"count\":1},{\"name\":\"api\",\"count\":1},{\"name\":\"styleEmphasis\",\"count\":1},{\"name\":\"visual\",\"count\":1},{\"name\":\"barLayout\",\"count\":1},{\"name\":\"currentSeriesIndices\",\"count\":1},{\"name\":\"getWidth\",\"count\":1},{\"name\":\"getHeight\",\"count\":1},{\"name\":\"getZr\",\"count\":1},{\"name\":\"getDevicePixelRatio\",\"count\":1},{\"name\":\"return\",\"count\":1},{\"name\":\"return_group\",\"count\":1},{\"name\":\"return_path\",\"count\":1},{\"name\":\"pathData\",\"count\":1},{\"name\":\"d\",\"count\":1},{\"name\":\"return_image\",\"count\":1},{\"name\":\"return_text\",\"count\":1},{\"name\":\"return_rect\",\"count\":1},{\"name\":\"return_circle\",\"count\":1},{\"name\":\"return_ring\",\"count\":1},{\"name\":\"return_sector\",\"count\":1},{\"name\":\"return_arc\",\"count\":1},{\"name\":\"return_polygon\",\"count\":1},{\"name\":\"return_polyline\",\"count\":1},{\"name\":\"return_line\",\"count\":1},{\"name\":\"return_bezierCurve\",\"count\":1},{\"name\":\"darkMode\",\"count\":1},{\"name\":\"stateAnimation\",\"count\":1},{\"name\":\"duration\",\"count\":1},{\"name\":\"easing\",\"count\":1},{\"name\":\"blendMode\",\"count\":1},{\"name\":\"hoverLayerThreshold\",\"count\":1},{\"name\":\"useUTC\",\"count\":1},{\"name\":\"options\",\"count\":1},{\"name\":\"media\",\"count\":1},{\"name\":\"query\",\"count\":1},{\"name\":\"minWidth\",\"count\":1},{\"name\":\"maxHeight\",\"count\":1},{\"name\":\"minAspectRatio\",\"count\":1}];","var DebugRect = (function () {\n function DebugRect(style) {\n var dom = this.dom = document.createElement('div');\n dom.className = 'ec-debug-dirty-rect';\n style = Object.assign({}, style);\n Object.assign(style, {\n backgroundColor: 'rgba(0, 0, 255, 0.2)',\n border: '1px solid #00f'\n });\n dom.style.cssText = \"\\nposition: absolute;\\nopacity: 0;\\ntransition: opacity 0.5s linear;\\npointer-events: none;\\n\";\n for (var key in style) {\n if (style.hasOwnProperty(key)) {\n dom.style[key] = style[key];\n }\n }\n }\n DebugRect.prototype.update = function (rect) {\n var domStyle = this.dom.style;\n domStyle.width = rect.width + 'px';\n domStyle.height = rect.height + 'px';\n domStyle.left = rect.x + 'px';\n domStyle.top = rect.y + 'px';\n };\n DebugRect.prototype.hide = function () {\n this.dom.style.opacity = '0';\n };\n DebugRect.prototype.show = function () {\n var _this = this;\n clearTimeout(this._hideTimeout);\n this.dom.style.opacity = '1';\n this._hideTimeout = setTimeout(function () {\n _this.hide();\n }, 500);\n };\n return DebugRect;\n}());\nexport default function (zr, opts) {\n opts = opts || {};\n var painter = zr.painter;\n if (!painter.getLayers) {\n throw new Error('Debug dirty rect can only been used on canvas renderer.');\n }\n if (painter.isSingleCanvas()) {\n throw new Error('Debug dirty rect can only been used on zrender inited with container.');\n }\n var debugViewRoot = document.createElement('div');\n debugViewRoot.style.cssText = \"\\nposition:absolute;\\nleft:0;\\ntop:0;\\nright:0;\\nbottom:0;\\npointer-events:none;\\n\";\n debugViewRoot.className = 'ec-debug-dirty-rect-container';\n var debugRects = [];\n var dom = zr.dom;\n dom.appendChild(debugViewRoot);\n var computedStyle = getComputedStyle(dom);\n if (computedStyle.position === 'static') {\n dom.style.position = 'relative';\n }\n zr.on('rendered', function () {\n if (painter.getLayers) {\n var idx_1 = 0;\n painter.eachBuiltinLayer(function (layer) {\n if (!layer.debugGetPaintRects) {\n return;\n }\n var paintRects = layer.debugGetPaintRects();\n for (var i = 0; i < paintRects.length; i++) {\n if (!debugRects[idx_1]) {\n debugRects[idx_1] = new DebugRect(opts.style);\n debugViewRoot.appendChild(debugRects[idx_1].dom);\n }\n debugRects[idx_1].show();\n debugRects[idx_1].update(paintRects[i]);\n idx_1++;\n }\n });\n for (var i = idx_1; i < debugRects.length; i++) {\n debugRects[i].hide();\n }\n }\n });\n}\n","import {store} from '../common/store';\nimport {URL_PARAMS, SCRIPT_URLS} from '../common/config';\nimport {downloadBlob} from '../common/helper';\n\nconst hasRootPath = store.sourceCode.indexOf('ROOT_PATH') >= 0;\nconst rootPathCode = hasRootPath ? `var ROOT_PATH = '${store.cdnRoot}'` : '';\n\nexport function download() {\n const code = `<!--\n THIS EXAMPLE WAS DOWNLOADED FROM ${window.location.href}\n-->\n<!DOCTYPE html>\n<html style=\"height: 100%\">\n <head>\n <meta charset=\"utf-8\">\n </head>\n <body style=\"height: 100%; margin: 0\">\n <div id=\"container\" style=\"height: 100%\"></div>\n\n <script type=\"text/javascript\" src=\"${SCRIPT_URLS.echartsMinJS}\"></script>\n <!-- Uncomment this line if you want to dataTool extension\n <script type=\"text/javascript\" src=\"${SCRIPT_URLS.echartsDir}/dist/extension/dataTool.min.js\"></script>\n -->\n <!-- Uncomment this line if you want to use gl extension\n <script type=\"text/javascript\" src=\"${SCRIPT_URLS.echartsGLMinJS}\"></script>\n -->\n <!-- Uncomment this line if you want to echarts-stat extension\n <script type=\"text/javascript\" src=\"${SCRIPT_URLS.echartsStatMinJS}\"></script>\n -->\n <!-- Uncomment this line if you want to use map\n <script type=\"text/javascript\" src=\"${SCRIPT_URLS.echartsDir}/map/js/china.js\"></script>\n <script type=\"text/javascript\" src=\"${SCRIPT_URLS.echartsDir}/map/js/world.js\"></script>\n -->\n <!-- Uncomment these two lines if you want to use bmap extension\n <script type=\"text/javascript\" src=\"https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>\"></script>\n <script type=\"text/javascript\" src=\"${SCRIPT_URLS.echartsDir}/dist/extension/bmap.min.js\"></script>\n -->\n\n <script type=\"text/javascript\">\nvar dom = document.getElementById(\"container\");\nvar myChart = echarts.init(dom);\nvar app = {};\n\nvar option;\n\n${rootPathCode}\n\n${store.sourceCode}\n\nif (option && typeof option === 'object') {\n myChart.setOption(option);\n}\n\n </script>\n </body>\n</html>\n `;\n const file = new Blob([code], {\n type: 'text/html;charset=UTF-8',\n encoding: 'UTF-8'\n });\n // download the blob\n downloadBlob(file, URL_PARAMS.c + '.html');\n}","import showDebugDirtyRect from '../dep/showDebugDirtyRect';\n\nexport function createSandbox(optionUpdated) {\n let appEnv = {};\n let gui;\n\n let _intervalIdList = [];\n let _timeoutIdList = [];\n\n const _oldSetTimeout = window.setTimeout;\n const _oldSetInterval = window.setInterval;\n\n function setTimeout(func, delay) {\n var id = _oldSetTimeout(func, delay);\n _timeoutIdList.push(id);\n return id;\n };\n function setInterval(func, gap) {\n var id = _oldSetInterval(func, gap);\n _intervalIdList.push(id);\n return id;\n };\n function _clearTimeTickers() {\n for (var i = 0; i < _intervalIdList.length; i++) {\n clearInterval(_intervalIdList[i]);\n }\n for (var i = 0; i < _timeoutIdList.length; i++) {\n clearTimeout(_timeoutIdList[i]);\n }\n _intervalIdList = [];\n _timeoutIdList = [];\n }\n const _events = [];\n function _wrapOnMethods(chart) {\n const oldOn = chart.on;\n const oldSetOption = chart.setOption;\n chart.on = function (eventName) {\n const res = oldOn.apply(chart, arguments);\n _events.push(eventName);\n return res;\n };\n chart.setOption = function () {\n const res = oldSetOption.apply(this, arguments);\n optionUpdated && optionUpdated(chart);\n return res;\n };\n }\n\n function _clearChartEvents(chart) {\n _events.forEach(function (eventName) {\n if (chart) {\n chart.off(eventName);\n }\n });\n\n _events.length = 0;\n }\n\n let chartInstance;\n\n return {\n resize() {\n if (chartInstance) {\n chartInstance.resize();\n }\n },\n\n dispose() {\n if (chartInstance) {\n chartInstance.dispose();\n chartInstance = null;\n }\n },\n\n getDataURL() {\n return chartInstance.getDataURL({\n pixelRatio: 2,\n excludeComponents: ['toolbox']\n });\n },\n\n getOption() {\n return chartInstance.getOption();\n },\n\n run(el, store) {\n\n if (!chartInstance) {\n chartInstance = echarts.init(el, store.darkMode ? 'dark' : '', {\n renderer: store.renderer,\n useDirtyRect: store.useDirtyRect\n });\n if (store.useDirtyRect && store.renderer === 'canvas') {\n try {\n showDebugDirtyRect(chartInstance.getZr(), {\n autoHideDelay: 500\n });\n }\n catch (e) {\n console.error(e);\n }\n }\n _wrapOnMethods(chartInstance);\n }\n\n // if (this.hasEditorError()) {\n // log(this.$t('editor.errorInEditor'), 'error');\n // return;\n // }\n\n // TODO Scope the variables in component.\n _clearTimeTickers();\n _clearChartEvents(chartInstance);\n // Reset\n appEnv.config = null;\n\n // run the code\n\n const compiledCode = store.runCode;\n\n const func = new Function(\n 'myChart', 'app', 'setTimeout', 'setInterval', 'ROOT_PATH',\n 'var option;\\n' + compiledCode + '\\nreturn option;'\n );\n const option = func(chartInstance, appEnv, setTimeout, setInterval, store.cdnRoot);\n let updateTime = 0;\n\n if (option && typeof option === 'object') {\n const startTime = +new Date();\n chartInstance.setOption(option, true);\n const endTime = +new Date();\n updateTime = endTime - startTime;\n }\n\n if (gui) {\n $(gui.domElement).remove();\n gui.destroy();\n gui = null;\n }\n\n if (appEnv.config) {\n gui = new dat.GUI({\n autoPlace: false\n });\n $(gui.domElement).css({\n position: 'absolute',\n right: 5,\n top: 0,\n zIndex: 1000\n });\n $('.right-container').append(gui.domElement);\n\n var configParameters = appEnv.configParameters || {};\n for (var name in appEnv.config) {\n var value = appEnv.config[name];\n if (name !== 'onChange' && name !== 'onFinishChange') {\n var isColor = false;\n // var value = obj;\n var controller = null;\n if (configParameters[name]) {\n if (configParameters[name].options) {\n controller = gui.add(appEnv.config, name, configParameters[name].options);\n }\n else if (configParameters[name].min != null) {\n controller = gui.add(appEnv.config, name, configParameters[name].min, configParameters[name].max);\n }\n }\n if (typeof obj === 'string') {\n try {\n var colorArr = echarts.color.parse(value);\n isColor = !!colorArr;\n if (isColor) {\n value = echarts.color.stringify(colorArr, 'rgba');\n }\n }\n catch (e) {}\n }\n if (!controller) {\n controller = gui[isColor ? 'addColor' : 'add'](appEnv.config, name);\n }\n appEnv.config.onChange && controller.onChange(appEnv.config.onChange);\n appEnv.config.onFinishChange && controller.onFinishChange(appEnv.config.onFinishChange);\n }\n }\n }\n\n return updateTime;\n }\n };\n};","import Vue from 'vue';\nimport VueI18n from 'vue-i18n';\nimport messages from './common/i18n';\nimport EditorPage from './editor/Editor.vue';\nimport ExplorePage from './explore/Explore.vue';\nimport ViewPage from './editor/View.vue';\nimport {store} from './common/store';\nimport VueScrollactive from 'vue-scrollactive';\n\nVue.use(VueScrollactive);\n\n/**\n *\n * @param {*} el\n * @param {Object} option\n * @param {string} [option.cdnRoot]\n * @param {string} [option.page] editor | explore\n * @param {string} [option.locale] zh | en\n * @param {string} [option.version]\n */\nexport function init(el, option) {\n const i18n = new VueI18n({\n locale: option.locale,\n fallbackLocale: 'en',\n messages\n });\n store.cdnRoot = option.cdnRoot;\n store.version = option.version;\n store.locale = option.locale || 'en';\n\n\n if (typeof el === 'string') {\n el = document.querySelector(el);\n }\n if (!el) {\n throw new Error('Can\\'t find el.');\n }\n\n const container = document.createElement('div');\n el.appendChild(container);\n\n new Vue({\n i18n,\n el: container,\n render: h => {\n return h(({\n editor: EditorPage,\n explore: ExplorePage,\n view: ViewPage\n })[option.page] || ExplorePage);\n }\n });\n}","module.exports = __webpack_public_path__ + \"../asset/placeholder.jpg\";","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"138px\\\" viewBox=\\\"0 0 175 138\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>bar</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"bar\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M121.488231,0 L102.050114,0 C99.36627,-1.1969592e-16 97.1905846,2.17568537 97.1905846,4.85952929 L97.1905846,133.140471 C97.1905846,135.824315 99.36627,138 102.050114,138 L121.488231,138 C124.172075,138 126.34776,135.824315 126.34776,133.140471 L126.34776,4.85952929 C126.34776,2.17568537 124.172075,1.1969592e-16 121.488231,0 Z M170.083523,30.1571753 L150.645406,30.1571753 C147.961562,30.1571753 145.785877,32.3328607 145.785877,35.0167046 L145.785877,132.207289 C145.785877,134.891133 147.961562,137.066819 150.645406,137.066819 L170.083523,137.066819 C172.767367,137.066819 174.943052,134.891133 174.943052,132.207289 L174.943052,35.0167046 C174.943052,32.3328607 172.767367,30.1571753 170.083523,30.1571753 Z M53.4548215,39.8762339 C50.7709777,39.876234 48.5952924,42.0519193 48.5952924,44.7357631 L48.5952924,132.207289 C48.5952924,134.891133 50.7709777,137.066818 53.4548215,137.066819 L72.8929386,137.066819 C75.5767824,137.066818 77.7524677,134.891133 77.7524677,132.207289 L77.7524677,44.7357631 C77.7524676,42.0519193 75.5767824,39.876234 72.8929386,39.8762339 L53.4548215,39.8762339 Z M29.1571753,67.17388 L29.1571753,132.207289 C29.1571753,134.891133 26.9814901,137.066818 24.2976462,137.066819 L4.85952929,137.066819 C2.17568537,137.066819 3.28676086e-16,134.891133 0,132.207289 L0,67.17388 C7.33863613e-08,64.4900361 2.17568542,62.3143508 4.85952929,62.3143508 L24.2976462,62.3143508 C26.98149,62.3143509 29.1571753,64.4900362 29.1571753,67.17388 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"98px\\\" viewBox=\\\"0 0 175 98\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>boxplot</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"boxplot\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M165.206074,4.85900217 L165.206074,43.7310195 L145.770065,43.7310195 L145.770065,14.5770065 C145.770065,11.8934537 143.594616,9.71800434 140.911063,9.71800434 L72.8850325,9.71800434 C70.2014797,9.71800434 68.0260304,11.8934537 68.0260304,14.5770065 L68.0260304,82.6030369 C68.0260304,85.2865897 70.2014797,87.462039 72.8850325,87.462039 L140.911063,87.462039 C143.594616,87.462039 145.770065,85.2865897 145.770065,82.6030369 L145.770065,53.4490239 L165.206074,53.4490239 L165.206074,92.3210412 C165.206074,95.004594 167.381523,97.1800434 170.065076,97.1800434 C172.748629,97.1800434 174.924078,95.004594 174.924078,92.3210412 L174.924078,4.85900217 C174.924078,2.17544937 172.748629,1.43751749e-14 170.065076,1.42108547e-14 C167.381523,-1.05827854e-15 165.206074,2.17544937 165.206074,4.85900217 Z M58.308026,14.5770065 L58.308026,82.6030369 C58.308026,83.8917244 57.7960969,85.1276306 56.8848572,86.0388703 C55.9736176,86.9501099 54.7377114,87.462039 53.4490239,87.462039 L34.0130152,87.462039 C31.3294624,87.462039 29.154013,85.2865897 29.154013,82.6030369 L29.154013,53.4490239 L9.71800434,53.4490239 L9.71800434,92.3210412 C9.71800434,95.004594 7.54255497,97.1800434 4.85900217,97.1800434 C2.17544937,97.1800434 3.28640434e-16,95.004594 0,92.3210412 L0,4.85900217 C-3.28640434e-16,2.17544937 2.17544937,4.31255248e-14 4.85900217,4.26325641e-14 C7.54255497,4.21396035e-14 9.71800434,2.17544937 9.71800434,4.85900217 L9.71800434,43.7310195 L29.154013,43.7310195 L29.154013,14.5770065 C29.154013,11.8934537 31.3294624,9.71800434 34.0130152,9.71800434 L53.4490239,9.71800434 C56.1325767,9.71800434 58.308026,11.8934537 58.308026,14.5770065 L58.308026,14.5770065 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"164px\\\" height=\\\"138px\\\" viewBox=\\\"0 0 164 138\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>calendar </title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"calendar-\\\" transform=\\\"translate(-0.500000, -0.315789)\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M147.236842,56.3782895 C147.236842,53.9965615 145.304597,52.0657895 142.921053,52.0657895 L125.657895,52.0657895 C123.27435,52.0657895 121.342105,53.9965615 121.342105,56.3782895 L121.342105,65.0032895 C121.342105,67.3850175 123.27435,69.3157895 125.657895,69.3157895 L142.921053,69.3157895 C145.304597,69.3157895 147.236842,67.3850175 147.236842,65.0032895 L147.236842,56.3782895 Z M147.236842,82.2532895 C147.236842,79.8715615 145.304597,77.9407895 142.921053,77.9407895 L125.657895,77.9407895 C123.27435,77.9407895 121.342105,79.8715615 121.342105,82.2532895 L121.342105,90.8782895 C121.342105,93.2600175 123.27435,95.1907895 125.657895,95.1907895 L142.921053,95.1907895 C145.304597,95.1907895 147.236842,93.2600175 147.236842,90.8782895 L147.236842,82.2532895 Z M112.710526,56.3782895 C112.710526,53.9965615 110.778282,52.0657895 108.394737,52.0657895 L91.1315789,52.0657895 C88.7480342,52.0657895 86.8157895,53.9965615 86.8157895,56.3782895 L86.8157895,65.0032895 C86.8157895,67.3850175 88.7480342,69.3157895 91.1315789,69.3157895 L108.394737,69.3157895 C110.778282,69.3157895 112.710526,67.3850175 112.710526,65.0032895 L112.710526,56.3782895 Z M112.710526,82.2532895 C112.710526,79.8715615 110.778282,77.9407895 108.394737,77.9407895 L91.1315789,77.9407895 C88.7480342,77.9407895 86.8157895,79.8715615 86.8157895,82.2532895 L86.8157895,90.8782895 C86.8157895,93.2600175 88.7480342,95.1907895 91.1315789,95.1907895 L108.394737,95.1907895 C110.778282,95.1907895 112.710526,93.2600175 112.710526,90.8782895 L112.710526,82.2532895 Z M112.710526,108.128289 C112.710526,105.746561 110.778282,103.815789 108.394737,103.815789 L91.1315789,103.815789 C88.7480342,103.815789 86.8157895,105.746561 86.8157895,108.128289 L86.8157895,116.753289 C86.8157895,119.135017 88.7480342,121.065789 91.1315789,121.065789 L108.394737,121.065789 C110.778282,121.065789 112.710526,119.135017 112.710526,116.753289 L112.710526,108.128289 Z M78.1842105,56.3782895 C78.1842105,53.9965615 76.2519658,52.0657895 73.8684211,52.0657895 L56.6052632,52.0657895 C54.2217184,52.0657895 52.2894737,53.9965615 52.2894737,56.3782895 L52.2894737,65.0032895 C52.2894737,67.3850175 54.2217184,69.3157895 56.6052632,69.3157895 L73.8684211,69.3157895 C76.2519658,69.3157895 78.1842105,67.3850175 78.1842105,65.0032895 L78.1842105,56.3782895 Z M78.1842105,82.2532895 C78.1842105,79.8715615 76.2519658,77.9407895 73.8684211,77.9407895 L56.6052632,77.9407895 C54.2217184,77.9407895 52.2894737,79.8715615 52.2894737,82.2532895 L52.2894737,90.8782895 C52.2894737,93.2600175 54.2217184,95.1907895 56.6052632,95.1907895 L73.8684211,95.1907895 C76.2519658,95.1907895 78.1842105,93.2600175 78.1842105,90.8782895 L78.1842105,82.2532895 Z M78.1842105,108.128289 C78.1842105,105.746561 76.2519658,103.815789 73.8684211,103.815789 L56.6052632,103.815789 C54.2217184,103.815789 52.2894737,105.746561 52.2894737,108.128289 L52.2894737,116.753289 C52.2894737,119.135017 54.2217184,121.065789 56.6052632,121.065789 L73.8684211,121.065789 C76.2519658,121.065789 78.1842105,119.135017 78.1842105,116.753289 L78.1842105,108.128289 Z M43.6578947,82.2532895 C43.6578947,79.8715615 41.72565,77.9407895 39.3421053,77.9407895 L22.0789474,77.9407895 C19.6954027,77.9407895 17.7631579,79.8715615 17.7631579,82.2532895 L17.7631579,90.8782895 C17.7631579,93.2600175 19.6954027,95.1907895 22.0789474,95.1907895 L39.3421053,95.1907895 C41.72565,95.1907895 43.6578947,93.2600175 43.6578947,90.8782895 L43.6578947,82.2532895 Z M43.6578947,108.128289 C43.6578947,105.746561 41.72565,103.815789 39.3421053,103.815789 L22.0789474,103.815789 C19.6954027,103.815789 17.7631579,105.746561 17.7631579,108.128289 L17.7631579,116.753289 C17.7631579,119.135017 19.6954027,121.065789 22.0789474,121.065789 L39.3421053,121.065789 C41.72565,121.065789 43.6578947,119.135017 43.6578947,116.753289 L43.6578947,108.128289 Z M164.5,39.1282895 L164.5,134.003289 C164.5,136.385017 162.567755,138.315789 160.184211,138.315789 L4.81578947,138.315789 C2.43224476,138.315789 0.5,136.385017 0.5,134.003289 L0.5,39.1282895 C0.5,36.7465615 2.43224476,34.8157895 4.81578947,34.8157895 L160.184211,34.8157895 C162.567755,34.8157895 164.5,36.7465615 164.5,39.1282895 Z M164.5,4.62828947 L164.5,21.8782895 C164.5,24.2600175 162.567755,26.1907895 160.184211,26.1907895 L4.81578947,26.1907895 C2.43224476,26.1907895 0.5,24.2600175 0.5,21.8782895 L0.5,4.62828947 C0.5,2.24656149 2.43224476,0.315789474 4.81578947,0.315789474 L160.184211,0.315789474 C162.567755,0.315789474 164.5,2.24656149 164.5,4.62828947 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"138px\\\" viewBox=\\\"0 0 175 138\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>Candlestick (1)</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"Candlestick-(1)\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M121.508001,34.0222403 L116.647681,33.0222403 L116.647681,4.86032 C116.647681,2.17603934 114.471642,-7.11961547e-08 111.787361,-7.11961549e-08 C109.10308,-7.1196155e-08 106.927041,2.17603934 106.927041,4.86032 L106.927041,33.0222403 L102.066721,33.0222403 C100.777684,33.0222403 99.5414424,33.5343082 98.6299556,34.4457951 C97.7184688,35.3572819 97.2064009,36.5935234 97.2064009,37.8825604 L97.2064009,105.927041 C97.2064009,107.216078 97.7184688,108.452319 98.6299556,109.363806 C99.5414424,110.275293 100.777684,110.787361 102.066721,110.787361 L106.927041,110.787361 L106.927041,125.572455 C106.927041,128.256735 109.10308,130.432775 111.787361,130.432775 C114.471642,130.432775 116.647681,128.256735 116.647681,125.572455 L116.647681,110.787361 L121.508001,110.787361 C122.797038,110.787361 124.03328,110.275293 124.944766,109.363806 C125.856253,108.452319 126.368321,107.216078 126.368321,105.927041 L126.368321,37.8825604 C126.368321,36.5935233 125.856253,35.3572819 124.944766,34.445795 C124.03328,33.5343082 122.797038,33.0222402 121.508001,33.0222403 L121.508001,34.0222403 Z M170.111202,41.6032004 L165.250881,41.6032004 L165.250881,27.0222403 C165.250881,24.3379598 163.074842,22.1619207 160.390561,22.1619207 C157.706281,22.1619207 155.530242,24.3379598 155.530241,27.0222403 L155.530241,41.6032004 L150.669921,41.6032004 C149.380884,41.6032004 148.144643,42.1152684 147.233156,43.0267552 C146.321669,43.938242 145.809601,45.1744835 145.809601,46.4635205 L145.809601,75.6254408 C145.809601,78.3097214 147.985641,80.4857608 150.669921,80.4857608 L155.530241,80.4857608 L155.530241,104.729037 C155.530241,107.413318 157.706281,109.589357 160.390561,109.589357 C163.074842,109.589357 165.250881,107.413318 165.250881,104.729037 L165.250881,80.4857608 L170.111202,80.4857608 C172.795482,80.4857608 174.971522,78.3097214 174.971522,75.6254408 L174.971522,46.4635205 C174.971522,45.1744835 174.459454,43.938242 173.547967,43.0267552 C172.63648,42.1152684 171.400239,41.6032004 170.111202,41.6032004 L170.111202,41.6032004 Z M72.9048007,84.3460808 L68.0444807,84.3460808 L68.0444807,55.1841605 C68.0444805,52.4998799 65.8684412,50.3238407 63.1841606,50.3238407 C60.49988,50.3238407 58.3238406,52.4998799 58.3238405,55.1841605 L58.3238405,84.3460808 L53.4635205,84.3460808 C52.1744835,84.3460807 50.938242,84.8581487 50.0267552,85.7696355 C49.1152683,86.6811224 48.6032003,87.9173639 48.6032004,89.2064009 L48.6032004,118.368321 C48.6032004,119.657358 49.1152684,120.8936 50.0267552,121.805086 C50.938242,122.716573 52.1744835,123.228641 53.4635205,123.228641 L58.3238405,123.228641 L58.3238405,132.949281 C58.3238406,135.633562 60.49988,137.809601 63.1841606,137.809601 C65.8684412,137.809601 68.0444805,135.633562 68.0444807,132.949281 L68.0444807,123.228641 L72.9048007,123.228641 C75.5890813,123.228641 77.7651206,121.052602 77.7651206,118.368321 L77.7651206,89.2064009 C77.7651207,87.9173639 77.2530527,86.6811224 76.3415659,85.7696356 C75.4300791,84.8581488 74.1938377,84.3460808 72.9048007,84.3460808 Z M29.1619203,41.6032004 L29.1619203,90.2064009 C29.1619203,92.8906815 26.9858809,95.0667209 24.3016003,95.0667209 L19.4412801,95.0667209 L19.4412801,119.572455 C19.4412801,122.256735 17.2652407,124.432775 14.5809601,124.432775 C11.8966795,124.432775 9.72064013,122.256735 9.72064013,119.572455 L9.72064013,95.0667209 L4.86032,95.0667209 C2.17603938,95.0667209 3.28729566e-16,92.8906815 0,90.2064009 L0,41.6032004 C-3.28729566e-16,38.9189198 2.17603938,36.7428804 4.86032,36.7428804 L9.72064013,36.7428804 L9.72064013,12.4412801 C9.72064013,9.75699951 11.8966795,7.58096013 14.5809601,7.58096013 C17.2652407,7.58096013 19.4412801,9.75699951 19.4412801,12.4412801 L19.4412801,36.7428804 L24.3016003,36.7428804 C26.9858809,36.7428804 29.1619203,38.9189198 29.1619203,41.6032004 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"159px\\\" height=\\\"142px\\\" viewBox=\\\"0 0 159 142\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>custom</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"custom\\\" transform=\\\"translate(0.000000, -0.825151)\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M74.8235294,81.2918174 L74.8235294,138.091817 C74.8235294,140.705965 72.7298022,142.825151 70.1470588,142.825151 L4.67647054,142.825151 C2.09372718,142.825151 3.16294839e-16,140.705965 0,138.091817 L0,81.2918174 C-3.63362476e-08,80.0364594 0.492698108,78.8325175 1.36970646,77.9448453 C2.24671482,77.0571731 3.43619342,76.558484 4.67647054,76.558484 L70.1470588,76.558484 C71.387336,76.558484 72.5768146,77.0571731 73.4538229,77.9448453 C74.3308313,78.8325175 74.8235294,80.0364594 74.8235294,81.2918174 Z M74.8235294,5.55848402 L74.8235294,62.358484 C74.8235294,63.6138421 74.3308313,64.817784 73.4538229,65.7054562 C72.5768146,66.5931284 71.387336,67.0918174 70.1470588,67.0918174 L4.67647054,67.0918174 C3.43619342,67.0918174 2.24671482,66.5931284 1.36970646,65.7054562 C0.492698108,64.817784 -3.63362423e-08,63.6138421 0,62.358484 L0,5.55848402 C-2.35506485e-15,4.30312598 0.492698161,3.09918414 1.36970651,2.21151195 C2.24671486,1.32383977 3.43619344,0.825150732 4.67647054,0.825150732 L70.1470588,0.825150732 C72.7298022,0.825150732 74.8235294,2.94433623 74.8235294,5.55848402 Z M159,10.2918174 L159,57.6251507 C159,62.8534463 154.812546,67.0918174 149.647059,67.0918174 L93.5294118,67.0918174 C88.363925,67.0918174 84.1764706,62.8534464 84.1764706,57.6251507 L84.1764706,10.2918174 C84.1764706,5.06352179 88.363925,0.825150732 93.5294118,0.825150732 L149.647059,0.825150732 C154.812546,0.825150809 159,5.06352184 159,10.2918174 Z M154.323529,76.558484 C155.563807,76.558484 156.753285,77.0571731 157.630294,77.9448453 C158.507302,78.8325175 159,80.0364594 159,81.2918174 L159,138.091817 C159,140.705965 156.906273,142.825151 154.323529,142.825151 L88.8529412,142.825151 C86.2701978,142.825151 84.1764706,140.705965 84.1764706,138.091817 L84.1764706,81.2918174 C84.1764706,80.0364594 84.6691687,78.8325175 85.5461771,77.9448453 C86.4231854,77.0571731 87.612664,76.558484 88.8529412,76.558484 L154.323529,76.558484 L154.323529,76.558484 Z M93.5294118,133.358484 L149.647059,133.358484 L149.647059,86.0251507 L93.5294118,86.0251507 L93.5294118,133.358484 L93.5294118,133.358484 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"83px\\\" viewBox=\\\"0 0 175 83\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>dataZoom</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"dataZoom\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M9.20037003,18.4191593 L9.20957963,13.8143694 L9.20957963,18.4191593 L41.4431082,18.4191593 L41.4431082,64.4670572 L9.20957963,64.4670572 L9.20957963,18.4191593 L9.20037003,18.4191593 Z M133.538904,64.4670572 L133.538904,18.4191593 L165.772433,18.4191593 L165.772433,64.4670572 L133.538904,64.4670572 L133.538904,64.4670572 Z M165.772433,9.20957963 L133.538904,9.20957963 L133.538904,4.60478981 C133.538904,2.06163473 131.47727,2.74466854e-07 128.934115,2.74466854e-07 C126.390959,2.74466855e-07 124.329325,2.06163473 124.329325,4.60478981 L124.329325,9.20957963 L50.6526879,9.20957963 L50.6526879,4.60478981 C50.6526879,2.06163462 48.5910532,-6.1602121e-15 46.047898,-6.31593544e-15 C43.5047429,-6.47165878e-15 41.4431082,2.06163462 41.4431082,4.60478981 L41.4431082,9.20957963 L9.20957963,9.20957963 C4.13510123,9.20957963 0,13.3446809 0,18.4191593 L0,64.4670572 C0,69.5507451 4.13510123,73.6766368 9.20957963,73.6766368 L41.4431082,73.6766368 L41.4431082,78.2814267 C41.4431082,80.8245818 43.5047429,82.8862165 46.047898,82.8862165 C48.5910532,82.8862165 50.6526879,80.8245818 50.6526879,78.2814267 L50.6526879,73.6766368 L124.329325,73.6766368 L124.329325,78.2814267 C124.329325,80.8245818 126.390959,82.8862165 128.934115,82.8862165 C131.47727,82.8862165 133.538904,80.8245818 133.538904,78.2814267 L133.538904,73.6766368 L165.772433,73.6766368 C170.858743,73.6766368 174.982013,69.5533676 174.982013,64.4670572 L174.982013,18.4191593 C174.982013,13.3446809 170.856121,9.20957963 165.772433,9.20957963 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"145px\\\" height=\\\"157px\\\" viewBox=\\\"0 0 145 157\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>dataset</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"dataset\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M77,133.051622 C77,135.720999 74.7614237,137.884956 72,137.884956 C69.2385763,137.884956 67,135.720999 67,133.051622 L67,92.7182891 C67,90.0489128 69.2385763,87.8849558 72,87.8849558 C74.7614237,87.8849558 77,90.0489128 77,92.7182891 L77,133.051622 Z M87,92.7182888 C87.0000002,90.0489126 89.2385764,87.8849558 92,87.8849558 C94.7614236,87.8849558 96.9999998,90.0489126 97,92.7182888 L97,133.051623 C96.9999998,135.720999 94.7614236,137.884956 92,137.884956 C89.2385764,137.884956 87.0000002,135.720999 87,133.051623 L87,92.7182888 Z M58,133.072456 C58,135.730326 55.7614237,137.884956 53,137.884956 C50.2385763,137.884956 48,135.730326 48,133.072456 L48,73.6974557 C48,71.0395854 50.2385763,68.8849558 53,68.8849558 C55.7614237,68.8849558 58,71.0395854 58,73.6974557 L58,133.072456 Z M39,133.066774 C38.9999999,135.727782 36.7614237,137.884956 34,137.884956 C31.2385763,137.884956 29.0000001,135.727782 29,133.066774 L29,44.7031376 C29,42.0421293 31.2385763,39.8849558 34,39.8849558 C36.7614237,39.8849558 39,42.0421293 39,44.7031376 L39,133.066774 Z M126.3,132.884956 L126.3,63.9913737 C126.403893,62.6917747 125.897136,61.4145164 124.9129,60.4952543 L83.0962,21.7192841 C82.9895,21.6282393 82.8537001,21.5918214 82.7469999,21.5098811 C81.8447692,20.5509026 80.5501183,19.997952 79.1870999,19.9894333 L39,19.9894333 L39,10.8849558 L135.9903,10.8849558 L136,132.884956 L126.3,132.884956 Z M116,146.884956 L10,146.884956 L10,28.8849558 L74.0143636,28.8849558 L74.0143636,58.8841865 C74.0143636,63.8855711 78.3314545,67.9611095 83.6507272,67.9611097 L116,67.9611097 L116,146.884956 Z M144.990333,10.0614263 C144.990333,5.00519104 140.659667,0.884955752 135.323667,0.884955752 L38.6666667,0.884955752 C33.3403334,0.884955752 29.0000001,5.00519104 28.9999999,10.0614263 L28.9999999,19.2378969 L9.66666665,19.2378969 C4.34033332,19.2378969 0,23.3581322 0,28.4143675 L0,147.708485 C0,152.773897 4.34033332,156.884956 9.66666665,156.884956 L116,156.884956 C121.338753,156.884956 125.666667,152.77651 125.666667,147.708485 L125.666667,142.202603 L135.333333,142.202603 C140.672086,142.202603 145,138.094157 145,133.026132 L144.990333,10.0614263 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"159px\\\" viewBox=\\\"0 0 175 159\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>drag</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"drag\\\" transform=\\\"translate(0.000000, 0.000000)\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M174.799112,77.2243509 C175.141784,80.4933122 173.860538,83.7226514 171.369927,85.8675022 L145.821493,107.665891 C143.704571,109.29545 140.681703,108.978807 138.948417,106.945941 C137.215132,104.913075 137.380357,101.878162 139.32409,100.045479 L158.345038,83.8019696 L92.4385031,83.8019696 L92.4385031,144.173679 L109.273597,130.085944 C111.397298,128.30558 114.562167,128.583909 116.342532,130.70761 C118.122896,132.83131 117.844567,135.99618 115.720867,137.776544 L93.3308935,156.516741 C89.5429956,159.697467 83.9995074,159.633553 80.2859517,156.366338 L59.0490671,137.706356 C57.140269,135.840194 57.0244102,132.80703 58.7852891,130.800695 C60.546168,128.79436 63.5687212,128.515654 65.6667932,130.166159 L82.4116455,144.885586 L82.4116455,83.8019696 L16.5051101,83.8019696 L35.5360859,100.045479 C36.9700273,101.186546 37.6671397,103.019075 37.3541473,104.824694 C37.041155,106.630312 35.7679333,108.121296 34.0335988,108.713163 C32.2992644,109.305031 30.380183,108.903467 29.0286553,107.665891 L3.52032945,85.8975828 C1.25557692,83.9644222 -0.0328273042,81.1246883 0.00397844461,78.147297 C0.0407841935,75.1699056 1.39899211,72.3628885 3.71083975,70.4863026 L29.118897,49.820949 C31.2816477,48.328475 34.2285594,48.7508003 35.8850928,50.7906204 C37.5416262,52.8304405 37.3503183,55.8013071 35.4458442,57.6118174 L15.5625855,73.7751119 L82.4116455,73.7751119 L82.4116455,14.1153089 L65.6667932,28.8347359 C64.3276607,30.0598688 62.43094,30.4655542 60.7078175,29.8954003 C58.9846951,29.3252464 57.7042897,27.8683002 57.360198,26.0862151 C57.0161064,24.30413 57.662069,22.4752334 59.0490671,21.3045658 L80.2759248,2.65461056 C83.9853287,-0.629787191 89.5418994,-0.698070701 93.3308935,2.49418084 L115.720867,21.2243509 C117.320514,22.5881211 117.904229,24.8023516 117.184781,26.777481 C116.465334,28.7526104 114.594242,30.0726692 112.492218,30.0880931 C111.314421,30.0896881 110.174126,29.6740664 109.273597,28.9149508 L92.4385031,14.8272158 L92.4385031,73.7751119 L159.29759,73.7751119 L139.414331,57.6118174 C138.022627,56.4816171 137.339593,54.6948034 137.622523,52.9244518 C137.905453,51.1541001 139.111362,49.669169 140.785997,49.0290176 C142.460631,48.3888662 144.349574,48.6907487 145.741278,49.820949 L171.149336,70.4863026 C173.218763,72.1532673 174.533435,74.5803549 174.799112,77.2243509\\\" id=\\\"Path\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"137px\\\" viewBox=\\\"0 0 175 137\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>funnel </title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"funnel-\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M116.331467,108.325366 L60.5285591,108.325366 C58.9291301,108.325102 57.4459378,109.160985 56.6178211,110.52934 C55.7897045,111.897695 55.7371711,113.5994 56.4793063,115.016231 L66.3876358,133.863994 C67.1750739,135.367321 68.7306799,136.310539 70.4277481,136.313655 L106.432278,136.313655 C108.129346,136.310539 109.684952,135.367321 110.47239,133.863994 L120.380719,115.016231 C121.122854,113.5994 121.070321,111.897695 120.242204,110.52934 C119.414088,109.160985 117.930896,108.325102 116.331467,108.325366 L116.331467,108.325366 Z M134.968998,71.0137414 L41.9001683,71.0137414 C40.2925309,71.0025161 38.7981975,71.8401445 37.9688482,73.2173896 C37.139499,74.5946346 37.098146,76.3072185 37.8600561,77.722887 L47.8415098,96.5706503 C48.6348072,98.0648166 50.1899261,98.9971843 51.881622,98.9928896 L125.024106,98.9928896 C126.716211,98.9981743 128.270437,98.0607046 129.055078,96.5615098 L139.00911,77.7137465 C139.754942,76.2976526 139.705659,74.5945859 138.879188,73.2239903 C138.052717,71.8533948 136.569493,71.014997 134.968998,71.0137414 L134.968998,71.0137414 Z M153.63395,35.5759245 L23.2352156,35.5759245 C21.6347203,35.5771801 20.151496,36.4155778 19.325025,37.7861734 C18.498554,39.156769 18.4492717,40.8598357 19.1951033,42.2759296 L29.1491354,61.1145524 C29.9359394,62.6172637 31.4930184,63.5578521 33.1892477,63.5550727 L143.70734,63.5550727 C145.402425,63.5537423 146.957543,62.6143387 147.747452,61.1145524 L157.674063,42.266789 C158.415446,40.8514003 158.363824,39.1515952 157.537917,37.7838041 C156.712011,36.4160129 155.231751,35.5788553 153.63395,35.5759245 L153.63395,35.5759245 Z M174.995358,4.69922974 C174.994253,5.44166711 174.81229,6.17265769 174.465208,6.82897225 L164.538597,25.6767355 C163.746223,27.1729824 162.191592,28.108575 160.498485,28.1081153 L14.4968732,28.1081153 C12.8031994,28.1106197 11.2475937,27.1744407 10.4567611,25.6767355 L0.530150516,6.82897225 C-0.215681017,5.41287837 -0.166398756,3.70981169 0.660072225,2.33921611 C1.48654321,0.96862053 2.96976742,0.130222778 4.57026264,0.1289671 L170.425096,0.1289671 C172.949182,0.1289671 174.995358,2.17514338 174.995358,4.69922974 L174.995358,4.69922974 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"100px\\\" viewBox=\\\"0 0 175 100\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>gange</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"gange\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M143.698895,82.9089367 C142.437361,67.6655629 135.026556,53.5920156 123.171797,43.9267897 L135.7146,25.9137777 C153.409366,39.7333892 164.305583,60.4959162 165.625777,82.9089367 L143.698895,82.9089367 L143.698895,82.9089367 Z M115.601912,38.6960173 C112.342946,36.8541942 108.909619,35.339582 105.352176,34.174346 L107.654453,22.8655635 C107.981818,21.2534161 107.424245,19.5890834 106.191766,18.4995036 C104.959288,17.4099237 103.239147,17.0606298 101.679304,17.5831975 C100.119461,18.1057651 98.9568933,19.4208039 98.6295287,21.0329513 L96.4193432,31.8996968 C93.4676767,31.3974455 90.4804994,31.132603 87.4865101,31.1077136 C77.1817177,31.1042083 67.0761605,33.9468942 58.284434,39.3222365 L45.5021944,21.4934066 C70.6181595,5.43266895 102.701308,5.12868193 128.117087,20.7106326 L115.601912,38.6960173 L115.601912,38.6960173 Z M31.2649159,82.9089367 L9.34724295,82.9089367 C10.6455448,61.0475255 21.0636813,40.7358347 38.0612364,26.9267794 L50.843476,44.7464001 C39.5322634,54.3814577 32.493597,68.101229 31.2649159,82.9089367 L31.2649159,82.9089367 Z M87.4865101,0.0269797767 C39.2492112,0.0269797767 0,39.276191 0,87.5134899 C5.46353103e-08,90.0565144 2.06152873,92.118043 4.60455321,92.118043 L35.685287,92.118043 C38.2283115,92.118043 40.2898401,90.0565144 40.2898401,87.5134899 C40.315223,61.4580101 61.4310302,40.3422029 87.4865101,40.31682 C89.908505,40.31682 92.2384089,40.6759751 94.5683128,41.0351302 L86.9247546,78.6451205 C82.0531374,79.4923583 78.2774037,83.5443651 78.2774037,88.6646282 C78.2774037,94.3864333 82.9158433,99.0248728 88.6376484,99.0248728 C94.3594535,99.0248728 98.997893,94.3864333 98.997893,88.6646282 C98.997893,85.7361324 97.7546637,83.102328 95.793124,81.2236703 L103.501146,43.3005704 C121.633876,49.8942906 134.68318,67.1337376 134.68318,87.5134899 C134.68318,90.0565144 136.744709,92.118043 139.287733,92.118043 L170.368467,92.118043 C172.911491,92.118043 174.97302,90.0565144 174.97302,87.5134899 C174.97302,39.276191 135.723809,0.0269798756 87.4865101,0.0269797767 L87.4865101,0.0269797767 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"142px\\\" viewBox=\\\"0 0 175 142\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>geo</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"geo\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M9.20332621,34.019885 L55.2181167,56.861627 L55.2181167,128.571076 L9.20332621,103.207724 L9.20332621,34.019885 Z M171.819596,50.2815119 L151.996424,43.1124076 C149.63126,42.3318353 147.074346,43.5747977 146.227189,45.9169373 C145.380032,48.2590769 146.550177,50.8501245 148.867418,51.7631882 L165.653614,57.8371405 L165.653614,131.138702 L119.638823,119.625801 L119.638823,87.4706656 C119.638823,84.9293389 117.578671,82.8691865 115.037344,82.8691865 C112.496018,82.8691865 110.435865,84.9293389 110.435865,87.4706656 L110.435865,119.644207 L64.4210748,131.41479 L64.4210748,58.2236647 L81.060023,51.7263763 C83.2914479,50.7138845 84.3410975,48.1328302 83.4496557,45.8503474 C82.5582139,43.5678645 80.037126,42.3813901 77.7101463,43.1492194 L61.2460542,49.5820871 L6.64490386,22.4793755 C5.21943693,21.7614379 3.52312776,21.8367966 2.16693957,22.6783095 C0.810751382,23.5198224 -0.00997312356,25.0062796 0.000368118324,26.6023007 L0.000368118324,105.913394 C0.000368118324,107.597535 0.91146097,109.134429 2.38393426,109.944289 L58.8072703,141.059491 C59.8287987,141.620871 61.0435892,141.795727 62.16635,141.49203 L115.046547,127.963681 L169.141535,141.501233 C170.516378,141.840666 171.970958,141.532118 173.089604,140.663763 C174.206625,139.788526 174.858383,138.44767 174.856572,137.028595 L174.856572,54.6069022 C174.855748,52.6695411 173.64154,50.9402146 171.819596,50.2815119 Z M115.037344,16.5986853 C121.13907,16.6012266 126.083435,21.5497125 126.080894,27.651438 C126.078353,33.7531634 121.129867,38.697529 115.028141,38.6949877 C108.926416,38.6924463 103.98205,33.7439604 103.984592,27.642235 C103.987133,21.5405096 108.935619,16.596144 115.037344,16.5986853 L115.037344,16.5986853 Z M99.5763747,54.7173377 C102.208421,58.3341002 105.00612,61.9140509 107.813022,65.199507 C108.806942,66.3866886 109.718035,67.4358258 110.491083,68.3285127 C111.04326,68.8806902 111.402176,69.2856204 111.558626,69.4512736 C112.438859,70.4713636 113.723372,71.0524431 115.07068,71.0400337 C116.417988,71.0276243 117.69158,70.4229833 118.552874,69.3868529 C118.72773,69.2211997 119.06824,68.8254725 119.555997,68.264092 C120.506081,67.2663872 121.406012,66.2220982 122.252463,65.1350863 C125.059366,61.8496302 127.866268,58.2788825 130.498314,54.6437141 C133.121157,51.0177486 135.412694,47.4470008 137.262488,44.0879211 C140.741206,37.8851274 142.646219,32.5382087 142.646219,28.1207888 C142.701436,12.5861956 130.314255,0.0425636812 115.028141,0.0425636812 C99.7604339,0.0425636812 87.42847,12.5861956 87.42847,28.1207888 C87.42847,32.5382087 89.3334823,37.9403451 92.8029975,44.1523418 C94.7172128,47.5114215 97.0087494,51.0729663 99.5763747,54.7173377 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"120px\\\" viewBox=\\\"0 0 175 120\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>gl</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"gl\\\" fill=\\\"#5067A2\\\"> <path d=\\\"M170.394737,101.315789 L119.736842,101.315789 L119.736842,4.60526316 C119.736842,2.06315789 117.673684,0 115.131579,0 L105.921053,0 C103.378947,0 101.315789,2.06315789 101.315789,4.60526316 L101.315789,115.131579 C101.315789,117.673684 103.378947,119.736842 105.921053,119.736842 L170.394737,119.736842 C172.936842,119.736842 175,117.673684 175,115.131579 L175,105.921053 C175,103.378947 172.936842,101.315789 170.394737,101.315789\\\" id=\\\"Fill-1\\\"></path> <path d=\\\"M78.2894737,0 L4.60526316,0 C2.06315789,0 0,2.06315789 0,4.60526316 L0,115.131579 C0,117.673684 2.06315789,119.736842 4.60526316,119.736842 L78.2894737,119.736842 C80.8315789,119.736842 82.8947368,117.673684 82.8947368,115.131579 L82.8947368,59.8684211 C82.8947368,57.3263158 80.8315789,55.2631579 78.2894737,55.2631579 L41.4473684,55.2631579 C38.9052632,55.2631579 36.8421053,57.3263158 36.8421053,59.8684211 L36.8421053,69.0789474 C36.8421053,71.6210526 38.9052632,73.6842105 41.4473684,73.6842105 L64.4736842,73.6842105 L64.4736842,101.315789 L18.4210526,101.315789 L18.4210526,18.4210526 L64.4736842,18.4210526 L64.4736842,32.2368421 C64.4736842,34.7789474 66.5368421,36.8421053 69.0789474,36.8421053 L78.2894737,36.8421053 C80.8315789,36.8421053 82.8947368,34.7789474 82.8947368,32.2368421 L82.8947368,4.60526316 C82.8947368,2.06315789 80.8315789,0 78.2894737,0\\\" id=\\\"Fill-3\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"171px\\\" height=\\\"146px\\\" viewBox=\\\"0 0 171 146\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>graph</title> <desc>Created with Sketch.</desc> <defs> <polygon id=\\\"path-1\\\" points=\\\"0.06 0 171 0 171 146 0.06 146\\\"></polygon> </defs> <g id=\\\"graph\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <mask id=\\\"mask-2\\\" fill=\\\"white\\\"> <use xlink:href=\\\"#path-1\\\"></use> </mask> <g id=\\\"Clip-2\\\"></g> <path d=\\\"M171,100 C171,106.075 166.075,111 160,111 C154.016,111 149.158,106.219 149.014,100.27 L114.105,83.503 C111.564,86.693 108.179,89.18 104.282,90.616 L108.698,124.651 C112.951,126.172 116,130.225 116,135 C116,141.075 111.075,146 105,146 C98.925,146 94,141.075 94,135 C94,131.233 95.896,127.912 98.781,125.93 L94.364,91.896 C82.94,90.82 74,81.206 74,69.5 C74,69.479 74.001,69.46 74.001,69.439 L53.719,64.759 C50.642,70.269 44.76,74 38,74 C36.07,74 34.215,73.689 32.472,73.127 L20.624,90.679 C21.499,92.256 22,94.068 22,96 C22,102.075 17.075,107 11,107 C4.925,107 0,102.075 0,96 C0,89.925 4.925,85 11,85 C11.452,85 11.895,85.035 12.332,85.089 L24.184,67.531 C21.574,64.407 20,60.389 20,56 C20,48.496 24.594,42.07 31.121,39.368 L29.111,21.279 C24.958,19.707 22,15.704 22,11 C22,4.925 26.925,0 33,0 C39.075,0 44,4.925 44,11 C44,14.838 42.031,18.214 39.051,20.182 L41.061,38.279 C49.223,39.681 55.49,46.564 55.95,55.011 L76.245,59.694 C79.889,52.181 87.589,47 96.5,47 C100.902,47 105.006,48.269 108.475,50.455 L131.538,27.391 C131.192,26.322 131,25.184 131,24 C131,17.925 135.925,13 142,13 C148.075,13 153,17.925 153,24 C153,30.075 148.075,35 142,35 C140.816,35 139.678,34.808 138.609,34.461 L115.546,57.525 C117.73,60.994 119,65.098 119,69.5 C119,71.216 118.802,72.884 118.438,74.49 L153.345,91.257 C155.193,89.847 157.495,89 160,89 C166.075,89 171,93.925 171,100\\\" id=\\\"Fill-1\\\" fill=\\\"#4F608A\\\" mask=\\\"url(#mask-2)\\\"></path> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"165px\\\" height=\\\"137px\\\" viewBox=\\\"0 0 165 137\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>heatmap</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"heatmap\\\" transform=\\\"translate(-0.500000, -0.474277)\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M44.5999999,89.4742765 L5.40000005,89.4742765 C2.6938048,89.4742765 0.500000074,87.2916647 0.5,84.5992766 L0.5,55.3492765 C0.500000074,52.6568883 2.6938048,50.4742765 5.40000005,50.4742765 L44.5999999,50.4742765 C47.3061952,50.4742765 49.4999999,52.6568883 49.5,55.3492765 L49.5,84.5992766 C49.4999999,87.2916647 47.3061952,89.4742765 44.5999999,89.4742765\\\" id=\\\"Path\\\" fill=\\\"#687DB0\\\"></path> <path d=\\\"M102.6,89.4742765 L63.3999999,89.4742765 C60.6938047,89.4742765 58.5000001,87.2916647 58.5,84.5992766 L58.5,55.3492765 C58.5000001,52.6568884 60.6938047,50.4742766 63.3999999,50.4742765 L102.6,50.4742765 C105.306195,50.4742765 107.5,52.6568883 107.5,55.3492765 L107.5,84.5992766 C107.5,87.2916647 105.306195,89.4742765 102.6,89.4742765\\\" id=\\\"Path\\\" fill=\\\"#8497C0\\\"></path> <path d=\\\"M160.6,89.4742765 L121.4,89.4742765 C118.693805,89.4742765 116.5,87.2916647 116.5,84.5992766 L116.5,55.3492765 C116.5,52.6568884 118.693805,50.4742766 121.4,50.4742765 L160.6,50.4742765 C163.306195,50.4742766 165.5,52.6568884 165.5,55.3492765 L165.5,84.5992766 C165.5,87.2916647 163.306195,89.4742765 160.6,89.4742765\\\" id=\\\"Path\\\" fill=\\\"#A7B4D1\\\"></path> <path d=\\\"M44.5999999,137.474277 L5.40000005,137.474277 C2.69380475,137.474277 0.5,135.291665 0.5,132.599276 L0.5,103.349277 C0.5,100.656888 2.69380475,98.4742765 5.40000005,98.4742765 L44.5999999,98.4742765 C45.8995608,98.4742765 47.1458949,98.9878911 48.0648232,99.902131 C48.9837515,100.816371 49.5,102.056346 49.5,103.349277 L49.5,132.599276 C49.5,135.291665 47.3061953,137.474277 44.5999999,137.474277\\\" id=\\\"Path\\\" fill=\\\"#8497C0\\\"></path> <path d=\\\"M102.6,137.474277 L63.3999999,137.474277 C60.6938047,137.474276 58.5,135.291665 58.5,132.599276 L58.5,103.349277 C58.5,100.656888 60.6938047,98.4742766 63.3999999,98.4742765 L102.6,98.4742765 C105.306195,98.4742765 107.5,100.656888 107.5,103.349277 L107.5,132.599276 C107.5,135.291665 105.306195,137.474277 102.6,137.474277\\\" id=\\\"Path\\\" fill=\\\"#A7B4D1\\\"></path> <path d=\\\"M160.6,137.474277 L121.4,137.474277 C118.693805,137.474276 116.5,135.291665 116.5,132.599276 L116.5,103.349277 C116.5,100.656888 118.693805,98.4742766 121.4,98.4742765 L160.6,98.4742765 C163.306195,98.4742766 165.5,100.656888 165.5,103.349277 L165.5,132.599276 C165.5,135.291665 163.306195,137.474276 160.6,137.474277\\\" id=\\\"Path\\\" fill=\\\"#CDD5E3\\\"></path> <path d=\\\"M5.40000005,0.474276527 L44.5999999,0.474276527 C47.3061953,0.474276527 49.5,2.65688839 49.5,5.34927658 L49.5,34.5992765 C49.5,37.2916647 47.3061953,39.4742765 44.5999999,39.4742765 L5.40000005,39.4742765 C2.69380475,39.4742765 0.5,37.2916647 0.5,34.5992765 L0.5,5.34927658 C0.5,2.65688839 2.69380475,0.474276527 5.40000005,0.474276527\\\" id=\\\"Path\\\" fill=\\\"#5067A2\\\"></path> <path d=\\\"M102.6,39.4742765 L63.3999999,39.4742765 C60.6938047,39.4742765 58.5,37.2916646 58.5,34.5992765 L58.5,5.34927658 C58.5,2.65688845 60.6938047,0.474276601 63.3999999,0.474276527 L102.6,0.474276527 C105.306195,0.474276527 107.5,2.65688839 107.5,5.34927658 L107.5,34.5992765 C107.5,37.2916647 105.306195,39.4742765 102.6,39.4742765\\\" id=\\\"Path\\\" fill=\\\"#687DB0\\\"></path> <path d=\\\"M160.6,39.4742765 L121.4,39.4742765 C118.693805,39.4742765 116.5,37.2916646 116.5,34.5992765 L116.5,5.34927658 C116.5,2.65688845 118.693805,0.474276601 121.4,0.474276527 L160.6,0.474276527 C163.306195,0.474276601 165.5,2.65688845 165.5,5.34927658 L165.5,34.5992765 C165.5,37.2916646 163.306195,39.4742765 160.6,39.4742765\\\" id=\\\"Path\\\" fill=\\\"#8497C0\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"138px\\\" viewBox=\\\"0 0 175 138\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>line</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"line\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M25.2739189,111.655778 C26.7855309,111.657407 28.2007506,110.913642 29.0567232,109.667735 L69.3606163,51.4346379 L108.642876,94.5825372 C109.596174,95.6275458 110.977093,96.1760957 112.387618,96.0700817 C113.798143,95.9640677 115.081554,95.2152689 115.86794,94.0395069 L167.15209,17.582681 C168.126301,16.2187314 168.281888,14.4329668 167.558237,12.9210891 C166.834585,11.4092114 165.346152,10.4103472 163.672804,10.3136363 C161.999456,10.2169253 160.40586,11.0376639 159.512851,12.4561069 L111.496086,84.0348638 L72.2782537,40.9605957 C71.3313898,39.926718 69.968454,39.3754562 68.5690807,39.4603596 C67.1694417,39.5586882 65.8899144,40.2864616 65.0900052,41.4391988 L21.4911146,104.439918 C20.5200574,105.846972 20.4090348,107.676368 21.202809,109.190526 C21.9965833,110.704685 23.5643138,111.65402 25.2739189,111.655778\\\" id=\\\"Path\\\"></path> <path d=\\\"M170.272214,127.854648 L9.20390349,127.854648 L9.20390349,5.00465881 C9.20390349,2.46307104 7.14353951,0.402707066 4.60195174,0.402707066 C2.06036398,0.402707066 3.11254732e-16,2.46307104 0,5.00465881 L0,132.4566 C3.11254728e-16,134.998188 2.06036395,137.058552 4.60195168,137.058552 L170.272214,137.058552 C172.813801,137.058552 174.874165,134.998188 174.874165,132.4566 C174.874165,129.915012 172.813801,129.257355 170.272214,129.257355\\\" id=\\\"Path\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"163px\\\" height=\\\"137px\\\" viewBox=\\\"0 0 163 137\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>lines</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"lines\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M118.024118,118.8 C120.522388,118.8 122.566427,120.8475 122.566427,123.35 C122.566427,125.8525 120.522388,127.9 118.024118,127.9 C115.517543,127.894993 113.486807,125.860819 113.481809,123.35 C113.481809,120.8475 115.525848,118.8 118.024118,118.8 Z M142.434485,46 L64.9673569,46 C62.4587091,46 60.4250482,48.0371044 60.4250482,50.55 C60.4250482,53.0628956 62.4587091,55.1 64.9673569,55.1 L142.034762,55.0909 C149.519307,56.1087027 154.7743,62.9956941 153.790257,70.4972 C152.963556,76.6852 148.066948,81.5264 142.434485,82.2544 L20.6642736,82.2726 C14.6272756,82.8301001 9.06337697,85.7822231 5.21133949,90.4717 C0.0521031846,96.7506172 -1.39663076,105.298969 1.40493936,112.931618 C4.20650947,120.564268 10.8382585,126.136619 18.8291809,127.5724 L105.232977,127.8909 C107.143393,133.33221 112.265894,136.980155 118.024118,137 C125.537097,137 131.651044,130.8757 131.651044,123.35 C131.651044,115.8243 125.537097,109.7 118.024118,109.7 C112.110032,109.7 107.113492,113.5129 105.232977,118.8 L21.8634431,118.8728 L20.4099043,118.618 C14.3307333,117.521702 9.72082575,112.509885 9.12680957,106.3512 C8.77445503,102.712306 9.88625731,99.0830035 12.2155795,96.2684 C14.5594108,93.4383 17.8571269,91.6911 21.0912506,91.3544 L142.988646,91.3271 C153.280464,90.058092 161.421536,81.9929721 162.802197,71.6984 C164.446513,59.2314 155.679857,47.729 142.434485,46 Z\\\" id=\\\"Shape\\\"></path> <path d=\\\"M31.9999101,18.2496933 C36.9704563,18.2496933 40.9998801,22.3350263 40.9998801,27.37454 C40.9998801,32.4140537 36.9704563,36.4993867 31.9999101,36.4993867 C27.0293639,36.4993867 22.9999401,32.4140537 22.9999401,27.37454 C22.9999401,22.3350263 27.0293639,18.2496933 31.9999101,18.2496933 Z M16.8799604,56.2181803 C19.4539519,59.9411177 22.1809428,63.6184309 24.9259336,66.9946242 C25.9069304,68.2173537 26.7979274,69.3032104 27.5539249,70.2156951 C28.1029231,70.7814356 28.435922,71.1920537 28.5979214,71.3654258 C30.4699152,73.555389 33.5839048,73.555389 35.4378986,71.3015518 C35.617898,71.1373046 35.932897,70.7266865 36.4188954,70.1518212 C37.2648925,69.2393365 38.1288897,68.1443549 39.0558866,66.9307503 C41.8008774,63.554557 44.5368683,59.8863687 47.1108598,56.1451815 C49.6758512,52.4131192 51.9258437,48.7449309 53.7348377,45.2957388 C57.1368264,38.917471 58.9998202,33.4243133 58.9998202,28.8710148 C59.05382,12.911658 46.9398603,0 31.9909101,0 C17.0509599,0 5,12.911658 5,28.8710148 C5,33.4243133 6.8629938,38.9722201 10.2559825,45.3596128 C12.1279763,48.8088048 14.3689688,52.4678683 16.8799604,56.2181803 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"142px\\\" viewBox=\\\"0 0 175 142\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>geo</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"geo\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M9.20332621,34.019885 L55.2181167,56.861627 L55.2181167,128.571076 L9.20332621,103.207724 L9.20332621,34.019885 Z M171.819596,50.2815119 L151.996424,43.1124076 C149.63126,42.3318353 147.074346,43.5747977 146.227189,45.9169373 C145.380032,48.2590769 146.550177,50.8501245 148.867418,51.7631882 L165.653614,57.8371405 L165.653614,131.138702 L119.638823,119.625801 L119.638823,87.4706656 C119.638823,84.9293389 117.578671,82.8691865 115.037344,82.8691865 C112.496018,82.8691865 110.435865,84.9293389 110.435865,87.4706656 L110.435865,119.644207 L64.4210748,131.41479 L64.4210748,58.2236647 L81.060023,51.7263763 C83.2914479,50.7138845 84.3410975,48.1328302 83.4496557,45.8503474 C82.5582139,43.5678645 80.037126,42.3813901 77.7101463,43.1492194 L61.2460542,49.5820871 L6.64490386,22.4793755 C5.21943693,21.7614379 3.52312776,21.8367966 2.16693957,22.6783095 C0.810751382,23.5198224 -0.00997312356,25.0062796 0.000368118324,26.6023007 L0.000368118324,105.913394 C0.000368118324,107.597535 0.91146097,109.134429 2.38393426,109.944289 L58.8072703,141.059491 C59.8287987,141.620871 61.0435892,141.795727 62.16635,141.49203 L115.046547,127.963681 L169.141535,141.501233 C170.516378,141.840666 171.970958,141.532118 173.089604,140.663763 C174.206625,139.788526 174.858383,138.44767 174.856572,137.028595 L174.856572,54.6069022 C174.855748,52.6695411 173.64154,50.9402146 171.819596,50.2815119 Z M115.037344,16.5986853 C121.13907,16.6012266 126.083435,21.5497125 126.080894,27.651438 C126.078353,33.7531634 121.129867,38.697529 115.028141,38.6949877 C108.926416,38.6924463 103.98205,33.7439604 103.984592,27.642235 C103.987133,21.5405096 108.935619,16.596144 115.037344,16.5986853 L115.037344,16.5986853 Z M99.5763747,54.7173377 C102.208421,58.3341002 105.00612,61.9140509 107.813022,65.199507 C108.806942,66.3866886 109.718035,67.4358258 110.491083,68.3285127 C111.04326,68.8806902 111.402176,69.2856204 111.558626,69.4512736 C112.438859,70.4713636 113.723372,71.0524431 115.07068,71.0400337 C116.417988,71.0276243 117.69158,70.4229833 118.552874,69.3868529 C118.72773,69.2211997 119.06824,68.8254725 119.555997,68.264092 C120.506081,67.2663872 121.406012,66.2220982 122.252463,65.1350863 C125.059366,61.8496302 127.866268,58.2788825 130.498314,54.6437141 C133.121157,51.0177486 135.412694,47.4470008 137.262488,44.0879211 C140.741206,37.8851274 142.646219,32.5382087 142.646219,28.1207888 C142.701436,12.5861956 130.314255,0.0425636812 115.028141,0.0425636812 C99.7604339,0.0425636812 87.42847,12.5861956 87.42847,28.1207888 C87.42847,32.5382087 89.3334823,37.9403451 92.8029975,44.1523418 C94.7172128,47.5114215 97.0087494,51.0729663 99.5763747,54.7173377 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"148px\\\" viewBox=\\\"0 0 175 148\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>parallel</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"parallel\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M119.966527,90.2642567 L119.966527,71.4595035 L164.953975,91.1040224 L164.953975,117.16675 L119.966527,90.2642567 Z M99.5422259,68.8202399 L109.969317,68.8202399 L109.969317,80.2370544 L99.5422259,68.8202399 Z M64.9818688,58.8230293 L64.9818688,45.8666444 L76.8485579,58.8230293 L64.9818688,58.8230293 L64.9818688,58.8230293 Z M9.99721065,95.6627504 L9.99721065,37.9888424 L54.9846583,37.9888424 L54.9846583,61.3523236 L9.99721065,95.6627504 Z M170,2.04051565e-11 C167.238576,2.04245402e-11 165,2.23857623 165,4.99999995 L165,80.2194419 L120,60.5694419 L120,5.00139509 C120,2.23997133 117.761424,0.00139506489 115,0.00139506489 C112.238576,0.00139506489 110,2.23997133 110,5.00139509 L110,58.8394419 L90.42,58.8394419 L64.9999999,31.059442 L64.9999999,5.00139509 C64.9999999,2.23997137 62.7614237,0.00139513813 60,0.00139513813 C57.2385763,0.00139513813 55,2.23997137 55,5.00139509 L55,27.999442 L10,27.999442 L10,4.99999995 C10,2.23857619 7.76142378,-7.3221713e-08 5.00000002,-7.32217131e-08 C2.23857626,-7.32217133e-08 3.38176877e-16,2.23857619 0,4.99999995 L0,142.999442 C3.38176877e-16,145.760866 2.23857626,147.999442 5.00000002,147.999442 C7.76142378,147.999442 10,145.760866 10,142.999442 L10,108.249442 L55,73.9494419 L55,142.999442 C55,145.760866 57.2385763,147.999442 60,147.999442 C62.7614237,147.999442 64.9999999,145.760866 64.9999999,142.999442 L64.9999999,68.839442 L86.01,68.839442 L110,95.0694419 L110,142.999442 C110,145.760866 112.238576,147.999442 115,147.999442 C117.761424,147.999442 120,145.760866 120,142.999442 L120,101.939442 L165,128.839442 L165,142.999442 C165,145.760866 167.238576,147.999442 170,147.999442 C172.761424,147.999442 175,145.760866 175,142.999442 L175,4.99999995 C175,3.67391749 174.473216,2.40214791 173.535534,1.46446603 C172.597852,0.526784141 171.326082,-3.88296707e-08 170,2.04051565e-11 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"141px\\\" viewBox=\\\"0 0 175 141\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>pictorialBar</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"pictorialBar\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M165.182447,113.123194 C161.75364,113.169204 158.605604,115.027549 156.908673,118.007359 L62.4782339,118.007359 C59.7807842,118.007359 57.5940692,120.194074 57.5940692,122.891524 C57.5940692,125.588973 59.7807842,127.775688 62.4782339,127.775688 L156.908673,127.775688 C158.605604,130.755498 161.75364,132.613843 165.182447,132.659853 C170.576885,132.6592 174.949595,128.285961 174.949595,122.891524 C174.949595,117.497086 170.576885,113.123847 165.182447,113.123194 L165.182447,113.123194 Z M165.182447,78.9340419 C161.75364,78.980052 158.605603,80.8383969 156.908673,83.8182066 L77.2674843,83.8182066 C74.5700347,83.8182066 72.3833197,86.0049216 72.3833197,88.7023712 C72.3833197,91.3998208 74.5700347,93.5865358 77.2674843,93.5865358 L156.908673,93.5865358 C158.605603,96.5663455 161.75364,98.4246904 165.182447,98.4707005 C170.577347,98.4707005 174.950777,94.0972705 174.950777,88.7023712 C174.950777,83.3074719 170.577347,78.9340419 165.182447,78.9340419 L165.182447,78.9340419 Z M165.182447,44.7448896 C170.407595,44.9786234 174.523583,49.2828462 174.523583,54.5132188 C174.523583,59.7435915 170.407595,64.0478142 165.182447,64.2815481 C161.75364,64.235538 158.605604,62.3771932 156.908673,59.3973835 L77.2674843,59.3973835 C74.5700346,59.3973835 72.3833196,57.2106685 72.3833196,54.5132188 C72.3833196,51.8157692 74.5700346,49.6290542 77.2674843,49.6290542 L156.908673,49.6290542 C158.605604,46.6492445 161.75364,44.7908997 165.182447,44.7448896 Z M62.6149904,20.3240665 C62.6149904,19.0287054 63.1295706,17.7863991 64.0455291,16.8704405 C64.9614877,15.954482 66.2037941,15.4399018 67.4991551,15.4399019 L156.908673,15.4399019 C158.605604,12.4600922 161.75364,10.6017474 165.182447,10.5557373 C170.407595,10.7894711 174.523583,15.0936938 174.523583,20.3240665 C174.523583,25.5544392 170.407595,29.8586619 165.182447,30.0923957 C161.75364,30.0463857 158.605604,28.1880408 156.908673,25.2082312 L67.4991551,25.2082312 C66.2037941,25.2082312 64.9614877,24.6936511 64.0455291,23.7776925 C63.1295705,22.8617339 62.6149904,21.6194275 62.6149904,20.3240665 Z M23.5416735,29.3240665 C31.6340224,29.3240665 38.1941674,22.7639215 38.1941674,14.6715726 C38.1941674,6.57922368 31.6340224,0.0190787204 23.5416735,0.0190787204 C15.4493246,0.0190787204 8.88917966,6.57922368 8.88917966,14.6715726 C8.88917966,22.7639215 15.4493246,29.3240665 23.5416735,29.3240665 Z M34.0523957,34.2082312 L13.0211829,34.2082312 C10.6337153,34.2093302 8.59694107,35.9362503 8.20539657,38.2913927 L0.0683783524,87.133039 C-0.166957522,88.5485838 0.232108973,89.996 1.15960938,91.0909397 C2.08710979,92.1858793 3.44919091,92.8175461 4.88416457,92.8182066 L8.88917966,92.8182066 L9.0426883,136.115835 C9.0426883,138.813285 11.2294033,141 13.9268529,141 L33.4635113,141 C34.7588723,141 36.0011787,140.48542 36.9171373,139.569461 C37.8330959,138.653503 38.347676,137.411196 38.347676,136.115835 L38.1941674,92.8182066 L42.189414,92.8182066 C43.6255482,92.8209447 44.9898051,92.1902296 45.9180572,91.0944026 C46.8463094,89.9985755 47.2440794,88.5491696 47.0052003,87.133039 L38.8681821,38.2913927 C38.4766376,35.9362503 36.4398634,34.2093302 34.0523957,34.2082312 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"144px\\\" height=\\\"152px\\\" viewBox=\\\"0 0 144 152\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>pie (2)</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"pie-(2)\\\" transform=\\\"translate(0.000000, -0.612903)\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M72.1778824,12.9606446 L72.1778824,73.6462877 C72.1779317,75.129331 72.9386663,76.5065116 74.1881954,77.2856176 C75.4377246,78.0647237 76.9977039,78.1345538 78.3105882,77.4701504 L128.354824,52.1402676 L132.666353,49.9503148 C134.757503,48.8920984 137.302156,49.7461658 138.350118,51.857969 L138.468706,52.1060495 L138.782118,52.8930638 C140.942118,58.6416896 144,65.8873535 144,83.8518095 C144,116.316148 115.123765,152.612903 73.2282353,152.612903 C31.3242354,152.612903 0,119.994584 0,80.8406245 C0,44.5353146 27.216,13.7391044 62.2588236,9.22232682 C64.122353,8.98280072 65.9265883,8.80315611 67.6715294,8.69194766 C68.8395088,8.61630135 69.986418,9.03213213 70.8400527,9.84074781 C71.6936873,10.6493635 72.1779411,11.7786714 72.1778824,12.9606446 Z M90.0254118,0.659269609 C88.9814749,0.488081123 87.9163292,0.795987208 87.1201941,1.49909291 C86.324059,2.20219861 85.8798887,3.22724309 85.9087059,4.29493319 L85.9087059,54.6039644 C85.9087059,56.9393437 87.6028236,57.8717845 89.5680001,56.7511446 L133.149176,31.9088684 C134.092985,31.4117209 134.762111,30.50855 134.968019,29.4538349 C135.173928,28.3991197 134.894328,27.3070442 134.208,26.4853136 C134.208,26.4853136 133.538824,25.5357637 132.446118,24.3381334 C127.296,18.6921614 122.832,14.7399812 116.860235,10.9417819 C109.345997,6.07770841 100.978781,2.71218494 92.2108235,1.0271132 C89.9745882,0.599388123 90.0254118,0.659269609 90.0254118,0.659269609 L90.0254118,0.659269609 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"151px\\\" height=\\\"170px\\\" viewBox=\\\"0 0 151 170\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>radar</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"radar\\\" transform=\\\"translate(0.500000, 0.000000)\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M79.573911,32.0195055 C79.7511468,32.0807796 79.9252225,32.1507623 80.0954971,32.2291958 L126.376239,53.5077701 C128.225278,54.3572545 129.374745,56.2354539 129.285085,58.2607506 L126.927916,110.733256 C126.832633,112.851954 125.405699,114.680595 123.367088,115.296516 L76.444394,129.315811 C75.5054275,129.595861 74.5046062,129.595861 73.5656397,129.315811 L32.4706683,117.053921 C30.8367372,116.566659 29.5635821,115.286115 29.0909814,113.654618 C28.6183807,112.023122 29.0111288,110.264354 30.133561,108.985836 L59.2822032,75.635091 C59.7218624,75.142978 60.0532763,74.5647698 60.2551619,73.937598 L73.2246026,35.1848307 C74.1062345,32.570839 76.9431645,31.1565423 79.573911,32.0195055 L79.573911,32.0195055 Z M139.476076,121.926724 L75.0000016,158.991984 L10.5239274,121.926724 L10.5239274,47.816176 L75.0000016,10.7509165 L139.476076,47.816176 L139.476076,121.926724 Z M146.998953,40.6068232 L77.5076273,0.665810956 C75.9548023,-0.221936985 74.0452007,-0.221936985 72.4923757,0.665810956 L3.00105014,40.6068232 C1.44784731,41.4971353 0.491395456,43.1462367 0.493424274,44.9304378 L0.493424274,124.812462 C0.493424274,126.599823 1.44632208,128.247389 3.00105014,129.136077 L72.4923757,169.077089 C74.047355,169.95676 75.9526481,169.95676 77.5076273,169.077089 L146.998953,129.136077 C148.550638,128.244253 149.506533,126.596111 149.506579,124.812462 L149.506579,44.9304378 C149.506533,43.1467894 148.550638,41.4986473 146.998953,40.6068232 L146.998953,40.6068232 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"167px\\\" height=\\\"162px\\\" viewBox=\\\"0 0 167 162\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>rich</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"rich\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M5.52634288,101.24857 L96.0005147,101.24857 C98.7764873,101.24857 101.026858,98.9820436 101.026858,96.1861415 C101.026858,93.3902395 98.7764873,91.123713 96.0005147,91.123713 L5.52634288,91.123713 C2.75037036,91.123713 0.5,93.3902395 0.5,96.1861415 C0.5,98.9820436 2.75037036,101.24857 5.52634288,101.24857 Z M75.8951432,121.498284 L5.52634288,121.498284 C2.75037036,121.498284 0.5,123.76481 0.5,126.560713 C0.5,129.356615 2.75037036,131.623141 5.52634288,131.623141 L75.8951432,131.623141 C78.6711157,131.623141 80.9214861,129.356615 80.9214861,126.560713 C80.9214861,123.76481 78.6711157,121.498284 75.8951432,121.498284 Z M146.394628,92.0653247 L128.923061,116.435856 L146.394628,116.435856 L146.394628,92.0653247 Z M166.5,60.749142 L166.5,151.872855 C166.5,157.464659 161.999259,161.997712 156.447314,161.997712 C150.895369,161.997712 146.394628,157.464659 146.394628,151.872855 L146.394628,136.68557 L114.406982,136.68557 L99.2575849,157.806021 C96.0041451,162.338178 89.7188607,163.355849 85.2190093,160.079052 C80.7191578,156.802254 79.7087415,150.471846 82.9621813,145.939689 L148.304639,54.8261007 C148.455429,54.6033538 148.706746,54.4919804 148.867589,54.2894832 C149.318111,53.7697312 149.823755,53.3011987 150.375492,52.892253 C150.857637,52.4854402 151.379728,52.1292264 151.933658,51.829143 C152.481136,51.5631055 153.053631,51.3528145 153.642615,51.2014019 C154.31205,50.9842108 155.003114,50.8416105 155.703415,50.7761579 C155.954733,50.7559082 156.185944,50.624285 156.447314,50.624285 C156.819264,50.624285 157.130897,50.7964076 157.492794,50.836907 C158.850886,50.9717079 160.164137,51.3999382 161.342972,52.0923893 C161.674711,52.2746367 162.036608,52.3151361 162.338188,52.537883 C162.559347,52.7100056 162.659874,52.9428773 162.87098,53.1251247 C163.403773,53.5807433 163.836038,54.0869861 164.268304,54.6337284 C164.650306,55.1399712 165.022255,55.6259644 165.30373,56.1929564 C165.585206,56.7498235 165.766154,57.3370652 165.947102,57.9546815 C166.138103,58.6330469 166.298946,59.2709129 166.34921,59.969528 C166.369315,60.2428992 166.5,60.4757709 166.5,60.749142 L166.5,60.749142 Z M55.7897717,151.872855 L5.52634288,151.872855 C2.75037036,151.872855 0.5,154.139381 0.5,156.935284 C0.5,159.731186 2.75037036,161.997712 5.52634288,161.997712 L55.7897717,161.997712 C58.5657442,161.997712 60.8161146,159.731186 60.8161146,156.935284 C60.8161146,154.139381 58.5657442,151.872855 55.7897717,151.872855 Z M86.3887335,40.499428 L161.100608,40.499428 C164.04791,40.499428 166.437171,38.2329016 166.437171,35.4369995 C166.437171,32.6410974 164.04791,30.374571 161.100608,30.374571 L86.3887335,30.374571 C83.4414314,30.374571 81.052171,32.6410974 81.052171,35.4369995 C81.052171,38.2329016 83.4414314,40.499428 86.3887335,40.499428 Z M86.3887335,10.124857 L161.100608,10.124857 C164.04791,10.124857 166.437171,7.85833056 166.437171,5.0624285 C166.437171,2.26652644 164.04791,1.71199625e-16 161.100608,0 L86.3887335,0 C83.4414314,-1.71199625e-16 81.052171,2.26652644 81.052171,5.0624285 C81.052171,7.85833056 83.4414314,10.124857 86.3887335,10.124857 Z M5.6570278,70.873999 L60.9467995,70.873999 C63.722772,70.873999 65.9731424,68.6074726 65.9731424,65.8115705 L65.9731424,5.0624285 C65.9731424,2.26652644 63.722772,1.71199625e-16 60.9467995,0 L5.6570278,0 C2.88105528,-1.71199625e-16 0.630684915,2.26652644 0.630684915,5.0624285 L0.630684915,65.8115705 C0.630684915,68.6074726 2.88105528,70.873999 5.6570278,70.873999 Z M81.052171,65.8115705 C81.052171,63.0156685 83.3025414,60.749142 86.0785139,60.749142 L116.236571,60.749142 C119.012544,60.749142 121.262914,63.0156685 121.262914,65.8115705 C121.262914,68.6074726 119.012544,70.873999 116.236571,70.873999 L86.0785139,70.873999 C83.3025414,70.873999 81.052171,68.6074726 81.052171,65.8115705 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"139px\\\" viewBox=\\\"0 0 175 139\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>sankey</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"sankey\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M4.60195168,138.058552 C2.06036395,138.058552 3.11254728e-16,135.998188 0,133.4566 L0,115.048793 C-3.11254732e-16,112.507205 2.06036398,110.446841 4.60195174,110.446841 C7.14353951,110.446841 9.20390349,112.507205 9.20390349,115.048793 L9.20390349,133.4566 C9.20390349,134.677113 8.71905638,135.847638 7.856023,136.710671 C6.99298962,137.573705 5.82246517,138.058552 4.60195168,138.058552 M4.60195168,106.820503 C2.06036395,106.820503 3.11254728e-16,104.760139 0,102.218552 L0,4.60195168 C-3.11254732e-16,2.06036391 2.06036398,-6.74114049e-08 4.60195174,-6.74114054e-08 C7.14353951,-6.74114058e-08 9.20390349,2.06036391 9.20390349,4.60195168 L9.20390349,102.218552 C9.20390349,103.439065 8.71905638,104.60959 7.856023,105.472623 C6.99298962,106.335656 5.82246517,106.820503 4.60195168,106.820503\\\" id=\\\"Shape\\\" fill=\\\"#5067A2\\\"></path> <path d=\\\"M4.60195168,106.820503 C2.06036395,106.820503 3.11254728e-16,104.760139 0,102.218552 L0,4.60195168 C-3.11254732e-16,2.06036391 2.06036398,-6.74114049e-08 4.60195174,-6.74114054e-08 C7.14353951,-6.74114058e-08 9.20390349,2.06036391 9.20390349,4.60195168 L9.20390349,102.218552 C9.20390349,103.439065 8.71905638,104.60959 7.856023,105.472623 C6.99298962,106.335656 5.82246517,106.820503 4.60195168,106.820503\\\" id=\\\"Path\\\" fill=\\\"#5067A2\\\"></path> <path d=\\\"M87.4370826,64.4273241 C86.2165692,64.4273241 85.0460447,63.942477 84.1830114,63.0794436 C83.319978,62.2164103 82.8351309,61.0458858 82.835131,59.8253723 L82.835131,4.60195168 C82.835131,2.06036391 84.8954949,-6.74113054e-08 87.4370827,-6.74113059e-08 C89.9786705,-6.74113063e-08 92.0390345,2.06036391 92.0390345,4.60195168 L92.0390345,59.8253723 C92.0390345,61.0458858 91.5541874,62.2164103 90.691154,63.0794437 C89.8281206,63.9424771 88.6575962,64.4273242 87.4370826,64.4273241 M170.272214,38.2054031 C167.730626,38.2054031 165.670262,36.1450392 165.670262,33.6034515 L165.670262,4.60195168 C165.670262,2.06036391 167.730626,-6.74114049e-08 170.272214,-6.74114054e-08 C172.813801,-6.74114058e-08 174.874165,2.06036391 174.874165,4.60195168 L174.874165,33.6034515 C174.874165,34.823965 174.389318,35.9944894 173.526285,36.8575227 C172.663252,37.7205561 171.492727,38.2054032 170.272214,38.2054031 M105.84489,138.058552 C104.624376,138.058552 103.453852,137.573705 102.590818,136.710671 C101.727785,135.847638 101.242938,134.677113 101.242938,133.4566 L101.242938,78.2331793 C101.242938,75.6915915 103.303302,73.6312276 105.84489,73.6312276 C108.386477,73.6312276 110.446841,75.6915915 110.446841,78.2331793 L110.446841,133.4566 C110.446841,135.998188 108.386477,138.058552 105.84489,138.058552 M170.272214,138.058552 C167.730626,138.058552 165.670262,135.998188 165.670262,133.4566 L165.670262,48.3020853 C165.670262,45.7604975 167.730626,43.7001336 170.272214,43.7001336 C172.813801,43.7001336 174.874165,45.7604975 174.874165,48.3020853 L174.874165,133.4566 C174.874165,134.677113 174.389318,135.847638 173.526285,136.710671 C172.663252,137.573705 171.492727,138.058552 170.272214,138.058552\\\" id=\\\"Shape\\\" fill=\\\"#5067A2\\\"></path> <polygon id=\\\"Path\\\" fill=\\\"#95A5C8\\\" points=\\\"110.446841 133.4566 165.670262 133.4566 165.670262 78.2331793 110.446841 78.2331793\\\"></polygon> <polygon id=\\\"Path\\\" fill=\\\"#5067A2\\\" points=\\\"165.670262 133.4566 174.874165 133.4566 174.874165 78.2331793 165.670262 78.2331793\\\"></polygon> <path d=\\\"M165.670262,77.9478582 C124.491998,75.6100668 130.198418,59.8345763 92.0390345,59.8253723 L92.0390345,32.213662 C124.832542,32.2228659 136.825229,48.0167643 165.670262,48.6242219 L165.670262,77.9478582\\\" id=\\\"Path\\\" fill=\\\"#95A5C8\\\"></path> <path d=\\\"M92.0390345,59.8253723 L92.0022188,59.8253723 L92.0022188,32.213662 L92.0390345,32.213662 L92.0390345,59.8253723 M174.874165,78.2331793 C171.56076,78.2055676 168.505064,78.1135285 165.670262,77.9478582 L165.670262,48.6242219 L167.400596,48.6426296 C169.765999,48.6426296 172.260257,48.5413867 174.874165,48.3204931 L174.874165,78.2331793\\\" id=\\\"Shape\\\" fill=\\\"#5067A2\\\"></path> <polygon id=\\\"Path\\\" fill=\\\"#95A5C8\\\" points=\\\"92.0390345 32.213662 165.670262 32.213662 165.670262 4.60195168 92.0390345 4.60195168\\\"></polygon> <path d=\\\"M82.835131,32.213662 L92.0390345,32.213662 L92.0390345,4.60195168 L82.835131,4.60195168 L82.835131,32.213662 Z M165.670262,32.213662 L174.506009,32.213662 L174.506009,4.60195168 L165.670262,4.60195168 L165.670262,32.213662 Z\\\" id=\\\"Shape\\\" fill=\\\"#5067A2\\\"></path> <polygon id=\\\"Path\\\" fill=\\\"#95A5C8\\\" points=\\\"9.20390349 59.8253723 82.835131 59.8253723 82.835131 4.60195168 9.20390349 4.60195168\\\"></polygon> <polyline id=\\\"Path\\\" fill=\\\"#5067A2\\\" points=\\\"82.835131 59.8253723 82.835131 4.60195168 82.835131 59.8253723\\\"></polyline> <polygon id=\\\"Path\\\" fill=\\\"#95A5C8\\\" points=\\\"9.20390349 133.4566 101.242938 133.4566 101.242938 115.048793 9.20390349 115.048793\\\"></polygon> <polygon id=\\\"Path\\\" fill=\\\"#5067A2\\\" points=\\\"101.242938 133.4566 110.446841 133.4566 110.446841 115.048793 101.242938 115.048793\\\"></polygon> <path d=\\\"M101.242938,115.048793 C43.4792398,114.699045 52.1585208,101.445424 9.20390349,101.445424 L9.20390349,59.8253723 C56.5579867,59.8253723 47.7682589,78.1319363 101.242938,78.2331793 L101.242938,115.048793\\\" id=\\\"Path\\\" fill=\\\"#95A5C8\\\"></path> <path d=\\\"M101.675521,115.048793 L101.242938,115.048793 L101.242938,78.2331793 L101.675521,78.2331793 C104.335449,78.2331793 100.46981,113.723431 101.675521,115.048793\\\" id=\\\"Path\\\" fill=\\\"#5067A2\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"138px\\\" viewBox=\\\"0 0 175 138\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>scatter</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"scatter\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M173.526285,129.202529 C172.663252,128.339495 171.492727,127.854648 170.272214,127.854648 L9.20390349,127.854648 L9.20390349,4.60195168 C9.20390349,2.06036391 7.14353951,-6.74112924e-08 4.60195174,-6.74112925e-08 C2.06036398,-6.74112927e-08 3.11254732e-16,2.06036391 0,4.60195168 L0,132.4566 C3.11254728e-16,134.998188 2.06036395,137.058552 4.60195168,137.058552 L170.272214,137.058552 C171.492727,137.058552 172.663252,136.573705 173.526285,135.710671 C174.389318,134.847638 174.874165,133.677113 174.874165,132.4566 C174.874165,131.236086 174.389318,130.065562 173.526285,129.202529 Z M151.864407,12.8058552 C155.15291,12.8054572 158.191783,14.5596242 159.836149,17.4074853 C161.480516,20.2553464 161.480516,23.7641708 159.836149,26.6120319 C158.191783,29.459893 155.15291,31.21406 151.864407,31.213662 C146.781666,31.2130468 142.661617,27.0924991 142.661617,22.0097586 C142.661617,16.9270181 146.781666,12.8064703 151.864407,12.8058552 Z M142.660503,58.8253723 C147.743679,58.8253723 151.864407,62.9461003 151.864407,68.0292758 C151.864407,73.1124513 147.743679,77.2331793 142.660503,77.2331793 C137.577328,77.2331793 133.4566,73.1124513 133.4566,68.0292758 C133.4566,62.9461003 137.577328,58.8253723 142.660503,58.8253723 Z M124.252696,40.4175655 C127.5412,40.4171675 130.580072,42.1713345 132.224439,45.0191956 C133.868806,47.8670567 133.868806,51.3758811 132.224439,54.2237422 C130.580072,57.0716033 127.5412,58.8257703 124.252696,58.8253723 C119.169956,58.8247572 115.049907,54.7042094 115.049907,49.6214689 C115.049907,44.5387284 119.169956,40.4181807 124.252696,40.4175655 L124.252696,40.4175655 Z M105.84489,22.0097586 C109.133393,22.0093606 112.172266,23.7635277 113.816632,26.6113888 C115.460999,29.4592498 115.460999,32.9680743 113.816632,35.8159354 C112.172266,38.6637965 109.133393,40.4179635 105.84489,40.4175655 C100.762149,40.4169503 96.6421001,36.2964026 96.6421001,31.2136621 C96.6421001,26.1309216 100.762149,22.0103738 105.84489,22.0097586 L105.84489,22.0097586 Z M105.84489,58.8253723 C110.928065,58.8253723 115.048793,62.9461003 115.048793,68.0292758 C115.048793,73.1124513 110.928065,77.2331793 105.84489,77.2331793 C100.761714,77.2331793 96.6409861,73.1124513 96.6409861,68.0292758 C96.6409861,62.9461003 100.761714,58.8253723 105.84489,58.8253723 L105.84489,58.8253723 Z M87.4370826,77.2331793 C90.8200008,77.0784213 94.0146452,78.7938663 95.7543045,81.6993216 C97.4939639,84.6047768 97.4975937,88.2308616 95.7637545,91.1397939 C94.0299154,94.0487262 90.8387117,95.7705634 87.4554905,95.6225784 C82.5370015,95.4074394 78.6587219,91.3598697 78.6537937,86.4366802 C78.6488656,81.5134907 82.5190342,77.4581647 87.4370826,77.2331793 L87.4370826,77.2331793 Z M59.8253723,68.0292758 C63.1138756,68.0288778 66.1527483,69.7830448 67.7971148,72.6309059 C69.4414814,75.478767 69.4414814,78.9875915 67.7971148,81.8354525 C66.1527483,84.6833136 63.1138756,86.4374807 59.8253723,86.4370826 C54.7426318,86.4364675 50.6225828,82.3159197 50.6225828,77.2331792 C50.6225828,72.1504387 54.7426318,68.029891 59.8253723,68.0292758 L59.8253723,68.0292758 Z M32.213662,95.6409861 C35.5021653,95.6405881 38.541038,97.3947552 40.1854045,100.242616 C41.8297711,103.090477 41.8297711,106.599302 40.1854045,109.447163 C38.541038,112.295024 35.5021653,114.049191 32.213662,114.048793 C27.1309215,114.048178 23.0108725,109.92763 23.0108725,104.84489 C23.0108725,99.762149 27.1309215,95.6416013 32.213662,95.6409861 L32.213662,95.6409861 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"176px\\\" height=\\\"154px\\\" viewBox=\\\"0 0 176 154\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>sunburst</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"sunburst\\\" transform=\\\"translate(-0.500000, -0.495167)\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M119.233629,98.0044542 L110.718691,87.8510962 C116.698944,81.6134116 119.776927,73.1460671 119.198407,64.5239101 L132.221771,61.7588152 C132.389075,63.3350954 132.468325,64.9289877 132.468325,66.5404921 C132.486789,78.3855449 127.713147,89.7343283 119.233629,98.0044542 L119.233629,98.0044542 Z M63.3185781,30.3829135 C74.7931609,22.4121709 89.3686325,20.3583561 102.598787,24.8479794 C115.828942,29.3376027 126.144611,39.8381699 130.399028,53.1465133 L117.38447,55.9116082 C114.163414,47.1482037 107.14477,40.3166874 98.2978797,37.3338959 C89.4509892,34.3511045 79.7290566,35.5384174 71.8599325,40.5626897 L63.3185781,30.3829135 L63.3185781,30.3829135 Z M57.4981296,97.8547516 L67.6773104,89.3128978 C73.1543438,94.3147256 80.4453141,97.3616135 88.4495316,97.3616137 C93.8284022,97.3676833 99.1146581,95.9617789 103.779942,93.2844195 L112.365323,103.508226 C105.247152,108.132446 96.9377023,110.586264 88.4495316,110.570666 C76.8578752,110.587037 65.7306915,106.015602 57.4981296,97.8547516 L57.4981296,97.8547516 Z M51.880208,91.0741048 C47.0035405,83.8229191 44.4062144,75.2791485 44.4219328,66.5404921 C44.4219328,54.7315996 49.0624416,44.0146553 56.6263832,36.1068361 L65.194154,46.3130303 C60.3076881,51.9176198 57.6201378,59.1046557 57.6302124,66.5404921 C57.6302124,72.3876992 59.2592335,77.8562467 62.0858054,82.5146391 L51.880208,91.0741048 L51.880208,91.0741048 Z M40.5915316,112.05008 L50.7354904,103.534644 C60.658337,113.682313 74.2570793,119.394563 88.4495316,119.3767 C99.4212094,119.3767 109.618001,116.030407 118.062495,110.306485 L126.586238,120.468649 C115.441046,128.370969 102.111678,132.606084 88.4495316,132.585752 C70.3533434,132.605952 53.0459635,125.179425 40.5915316,112.05008 L40.5915316,112.05008 Z M0.5,62.1374747 C1.61718015,39.3368661 11.5653323,17.8665508 28.2373873,2.27405071 L36.7435195,12.4097967 C23.0478109,25.4703646 14.8209875,43.2437342 13.7258907,62.1374747 L0.5,62.1374747 Z M0.5,70.9435094 L13.7258907,70.9435094 C14.5580363,85.4042184 19.5854188,99.3091254 28.1933598,110.958131 L18.0582064,119.464761 C7.47186066,105.41813 1.35420505,88.5122858 0.5,70.9435094 L0.5,70.9435094 Z M22.5490216,62.1374747 C23.6176776,45.8469855 30.7006658,30.5346593 42.4230797,19.1728312 L50.9380174,29.3261893 C42.1806215,38.1364527 36.8165849,49.7571326 35.7925234,62.1374747 L22.5490216,62.1374747 L22.5490216,62.1374747 Z M22.5490216,70.9435094 L35.7925234,70.9435094 C36.5571371,80.2216635 39.7688087,89.1310032 45.0999577,96.7628032 L34.9559989,105.278239 C27.6604148,95.2350677 23.3587128,83.3306553 22.5490216,70.9435094 Z M160.064824,88.3354281 C162.208458,81.2692542 163.294499,73.9246962 163.287644,66.5404921 C163.287927,62.7888436 163.014228,59.0421838 162.468731,55.3304099 L175.40404,52.5829271 C177.539642,66.0542744 176.545357,79.8364744 172.498218,92.86173 L160.064824,88.3354281 Z M157.009309,96.5954887 L169.451508,101.130596 C164.453629,112.804913 156.992417,123.261434 147.578597,131.784403 L139.08127,121.666269 C146.731696,114.64362 152.837128,106.105711 157.009309,96.5954887 L157.009309,96.5954887 Z M139.336631,80.7886563 C141.234304,74.0037443 141.75525,66.9076826 140.868791,59.9183539 L153.830516,57.1620651 C155.148964,66.5886629 154.449628,76.187832 151.77883,85.3237642 L139.336631,80.7886563 Z M136.263504,89.0487169 L148.714509,93.5750188 C145.090489,101.633987 139.889912,108.885878 133.419321,114.903235 L124.913189,104.776295 C129.629614,100.274719 133.477161,94.943361 136.263504,89.0487169 L136.263504,89.0487169 Z M84.1260215,141.268503 L84.1260215,154.495167 C61.049526,153.386197 39.3397973,143.226766 23.7025446,126.218989 L33.8288923,117.71236 C46.9380429,131.745712 64.9535467,140.183088 84.1260215,141.268503 L84.1260215,141.268503 Z M104.94227,2.57345585 C127.679056,8.4576749 145.591926,25.956003 152.007773,48.5497632 L139.046048,51.306052 C133.813709,33.9700374 120.081572,20.5128194 102.64403,15.6328053 L104.933465,2.64390412 L104.94227,2.57345585 L104.94227,2.57345585 Z M96.2952498,0.953145396 L96.2600278,1.12046007 L93.9970091,13.9948829 C81.1068487,12.6102912 68.1594065,16.034712 57.6390179,23.6110727 L49.1240802,13.4665207 C60.4957814,5.02434618 74.2870046,0.475385223 88.4495316,0.495231624 C91.0999932,0.495231624 93.7152325,0.644934198 96.2952498,0.953145396 L96.2952498,0.953145396 Z\\\" id=\\\"Shape\\\"></path> <path d=\\\"M88.5,75.295167 C93.3601058,75.295167 97.3,71.3552728 97.3,66.495167 C97.3,61.6350611 93.3601058,57.6951669 88.5,57.6951669 C83.6398942,57.6951669 79.7,61.6350611 79.7,66.495167 C79.7,71.3552728 83.6398942,75.295167 88.5,75.295167 Z M88.5,88.495167 C76.3497355,88.495167 66.5,78.6454315 66.5,66.495167 C66.5,54.3449025 76.3497355,44.495167 88.5,44.495167 C100.650264,44.495167 110.5,54.3449025 110.5,66.495167 C110.5,78.6454315 100.650264,88.495167 88.5,88.495167 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"175px\\\" height=\\\"130px\\\" viewBox=\\\"0 0 175 130\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>themeriver</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"themeriver\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M4.9275627,42.5798026 C5.20117275,42.5813119 5.47437729,42.5585448 5.74396361,42.5117692 C10.5811329,41.6686599 15.2612908,40.0922201 19.6227791,37.836902 C26.4649962,34.328322 32.1798026,30.0130599 43.8718299,30.0130599 C55.5638572,30.0130599 63.7861807,41.3940774 79.5602127,41.4912681 C95.3342445,41.5787397 96.9864845,31.7333333 115.384662,31.7333333 C132.976158,31.7333333 137.621868,44.6208049 153.6,45.4566438 C160.490812,45.8162491 166.6041,44.9318147 171.930144,42.7936218 C173.778744,42.0602993 174.992296,40.2727177 174.991648,38.2839788 L174.991648,26.7960517 C174.987486,25.3270305 174.319017,23.9387356 173.173189,23.0194311 C172.027362,22.1001266 170.527173,21.7484925 169.092179,22.0628701 C165.933485,22.7529233 162.084738,22.8403949 157.5265,22.3155656 C145.533181,20.9160213 134.676993,5.82232335 119.476386,5.82232348 C102.788762,5.82232348 99.3093394,11.1678056 81.9899772,11.1678056 C64.6803341,11.1678056 59.6069856,0.126955258 43.8718299,0.126955258 C37.3211845,0.126955258 27.9422931,3.46059231 17.9025057,7.6009112 C12.9652241,9.65163256 8.49445708,10.8373576 4.50964317,11.1678056 C1.98627058,11.3754189 0.0451326562,13.4857192 0.0485952544,16.0176158 L0.0583143318,37.7202733 C0.0583143318,40.4027335 2.24510251,42.5798026 4.9275627,42.5798026 M170.132118,85.5283219 C169.634444,85.5282959 169.139638,85.6036638 168.664541,85.7518603 C162.658162,87.6665148 157.633409,88.7064541 153.551405,88.9008353 C139.342141,89.522855 131.343356,82.7583903 118.543356,82.7583903 C104.227183,82.7583903 97.8611998,94.1491269 80.444647,94.1491269 C61.0356872,94.1491269 52.3274108,84.1287775 42.4917236,84.1287775 C35.416249,84.1287775 28.7392558,88.7453303 19.9337889,92.9828398 C15.5893698,95.0627183 10.3507973,96.5594533 4.2083523,97.4438876 C1.81553905,97.7920745 0.0427391378,99.8465342 0.0485952544,102.264541 L0.0485952544,124.297646 C0.0496707163,125.687409 0.645723287,127.010209 1.68608385,127.931672 C2.72644442,128.853134 4.11154706,129.285071 5.491268,129.118299 C10.3313591,128.544875 15.142293,127.670159 19.9337889,126.513592 C29.8083523,124.132422 34.2305239,119.068793 42.4917236,118.388459 C54.5822323,117.397115 66.5658314,123.267426 82.4759302,121.323614 C98.386029,119.379803 106.3265,110.156416 120.273349,108.543052 C132.577676,107.12407 140.586181,111.293546 152.083827,110.030068 C159.995141,109.174791 166.81792,107.085194 172.552164,103.780714 C174.06095,102.911932 174.991067,101.303681 174.991648,99.5626424 L174.991648,90.3878512 C174.991648,87.7040073 172.815962,85.5283219 170.132118,85.5283219\\\" id=\\\"Shape\\\"></path> <path d=\\\"M170.132118,55.1659834 C169.755896,55.1642513 169.380769,55.206657 169.014427,55.2923311 C163.386911,56.5597226 157.597804,56.9530934 151.850569,56.4586181 C133.889749,55.0007593 128.388762,42.7839029 114.655733,42.7839029 C103.264996,42.7839029 93.9249811,52.940319 79.7157175,52.5807138 C59.2668185,52.0656038 52.6578588,41.0733486 42.0738042,41.0733486 C35.5231587,41.0733486 26.5330296,47.0991647 20.6724373,49.7524677 C15.5296251,52.0293301 10.0450596,53.4382394 4.44160976,53.9219438 C1.94888222,54.1623556 0.0470459996,56.2577415 0.0485952544,58.762035 L0.0485952544,80.8242976 C0.0491745866,82.2971429 0.717699925,83.69025 1.86632297,84.6121711 C3.01494602,85.5340923 4.51970635,85.8853329 5.95778278,85.5671982 C11.10094,84.3721963 16.0531556,82.4685044 20.6724373,79.9107062 C28.3018983,75.7703873 34.249962,72.7866364 41.8016705,72.7866364 C56.6037965,72.7866364 63.1252849,82.7778284 79.3755505,82.7778284 C94.6441914,82.7778284 103.070615,71.5231587 117.639484,71.5231587 C132.208352,71.5231587 139.964161,77.2185269 150.314958,77.5295368 C156.48656,77.7044798 163.707821,76.0813971 171.988459,72.6408505 C173.80584,71.8896408 174.991328,70.1171628 174.991648,68.1506454 L174.991648,60.0255125 C174.991648,57.3416686 172.815962,55.1659834 170.132118,55.1659834\\\" id=\\\"Path\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"174px\\\" height=\\\"147px\\\" viewBox=\\\"0 0 174 147\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>tree (1)</title> <desc>Created with Sketch.</desc> <defs> <polygon id=\\\"path-1\\\" points=\\\"2 4.69629167 172 4.69629167 172 146.375 2 146.375\\\"></polygon> </defs> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"tree-(1)\\\"> <mask id=\\\"mask-2\\\" fill=\\\"white\\\"> <use xlink:href=\\\"#path-1\\\"></use> </mask> <g id=\\\"path-1\\\"></g> <path d=\\\"M174,127.4965 C173.994333,137.928125 165.534,146.380667 155.101667,146.375708 C144.670042,146.370042 136.216792,137.909 136.222458,127.476667 C136.222458,127.470292 136.222458,127.464625 136.222458,127.45825 C136.226708,118.755667 142.117917,111.435042 150.127042,109.248417 L150.127042,80.2563333 L91.4625,80.2563333 L91.4625,109.120208 C99.7407917,111.126208 105.890542,118.582125 105.889125,127.476667 C105.889125,127.483042 105.889125,127.490125 105.889125,127.4965 C105.883458,137.928125 97.4224167,146.380667 86.9907917,146.375708 C76.5584583,146.370042 68.1059167,137.909 68.1115833,127.476667 C68.1122917,118.764875 74.0049167,111.440708 82.0182917,109.254083 L82.0182917,80.2563333 L23.3530417,80.2563333 L23.3530417,109.120917 C31.630625,111.127625 37.7789583,118.582833 37.77825,127.476667 C37.77825,127.478792 37.77825,127.480917 37.77825,127.483042 C37.776125,137.915375 29.3179167,146.37075 18.8862917,146.368625 C8.45395833,146.367208 -0.00141666667,137.909 0,127.476667 C0.00141666667,118.764167 5.89545833,111.439292 13.9088333,109.254083 L13.9088333,80.2563333 C13.9088333,75.0500833 18.1425417,70.812125 23.3530417,70.812125 L82.0182917,70.812125 L82.0182917,37.8179167 C74.0006667,35.6305833 68.106625,28.298625 68.1115833,19.58825 C68.1122917,9.15025 76.5705,0.694875 87.0028333,0.696291667 C97.4344583,0.697708333 105.890542,9.15591667 105.889125,19.58825 C105.889125,19.594625 105.889125,19.601 105.889125,19.607375 C105.884167,28.4976667 99.7358333,35.9465 91.4625,37.9517917 L91.4625,70.812125 L150.127042,70.812125 C155.337542,70.812125 159.57125,75.0500833 159.57125,80.2563333 L159.57125,109.113125 C167.853083,111.119125 174.00425,118.579292 174,127.476667 C174,127.483042 174,127.490125 174,127.4965 Z\\\" id=\\\"Fill-1\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","// Module\nvar code = \"<?xml version=\\\"1.0\\\" encoding=\\\"UTF-8\\\"?> <svg width=\\\"160px\\\" height=\\\"132px\\\" viewBox=\\\"0 0 160 132\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" xmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\"> <title>treemap</title> <desc>Created with Sketch.</desc> <g id=\\\"Page-1\\\" stroke=\\\"none\\\" stroke-width=\\\"1\\\" fill=\\\"none\\\" fill-rule=\\\"evenodd\\\"> <g id=\\\"treemap\\\" transform=\\\"translate(-0.500000, -0.095199)\\\" fill=\\\"#5067A2\\\" fill-rule=\\\"nonzero\\\"> <path d=\\\"M84.9444444,79.2951993 L4.9444444,79.2951993 C2.48984554,79.2951993 0.5,81.2651464 0.5,83.6951993 L0.5,127.695199 C0.5,130.125252 2.48984554,132.095199 4.9444444,132.095199 L84.9444444,132.095199 C86.1231844,132.095199 87.2536462,131.631629 88.0871413,130.806469 C88.9206363,129.981309 89.3888889,128.862152 89.3888889,127.695199 L89.3888889,83.6951993 C89.3888889,82.5282467 88.9206363,81.4090895 88.0871413,80.5839295 C87.2536462,79.7587694 86.1231844,79.2951993 84.9444444,79.2951993 L84.9444444,79.2951993 Z M156.055556,105.695199 L102.722222,105.695199 C101.543482,105.695199 100.41302,106.158769 99.5795254,106.983929 C98.7460304,107.80909 98.2777777,108.928247 98.2777777,110.095199 L98.2777777,127.695199 C98.2777777,128.862152 98.7460304,129.981309 99.5795254,130.806469 C100.41302,131.631629 101.543482,132.095199 102.722222,132.095199 L156.055556,132.095199 C158.510154,132.095199 160.5,130.125252 160.5,127.695199 L160.5,110.095199 C160.5,107.665146 158.510154,105.695199 156.055556,105.695199 L156.055556,105.695199 Z M156.055556,61.6951994 L102.722222,61.6951994 C101.543482,61.6951994 100.41302,62.1587694 99.5795254,62.9839295 C98.7460304,63.8090896 98.2777777,64.9282468 98.2777777,66.0951993 L98.2777777,92.4951993 C98.2777777,93.6621519 98.7460304,94.7813091 99.5795254,95.6064692 C100.41302,96.4316293 101.543482,96.8951993 102.722222,96.8951993 L156.055556,96.8951993 C158.510154,96.8951993 160.5,94.9252522 160.5,92.4951993 L160.5,66.0951993 C160.5,63.6651465 158.510154,61.6951994 156.055556,61.6951994 L156.055556,61.6951994 Z M156.055556,0.0951993491 L102.722222,0.0951993491 C101.543482,0.0951993149 100.41302,0.558769393 99.5795254,1.38392945 C98.7460304,2.20908951 98.2777777,3.32824674 98.2777777,4.49519931 L98.2777777,48.4951994 C98.2777777,49.662152 98.7460304,50.7813092 99.5795254,51.6064692 C100.41302,52.4316293 101.543482,52.8951994 102.722222,52.8951993 L156.055556,52.8951993 C158.510154,52.8951993 160.5,50.9252523 160.5,48.4951994 L160.5,4.49519931 C160.5,2.06514643 158.510154,0.0951993491 156.055556,0.0951993491 L156.055556,0.0951993491 Z M89.3888889,4.49519931 L89.3888889,66.0951993 C89.3888889,67.2621519 88.9206363,68.3813091 88.0871413,69.2064692 C87.2536462,70.0316293 86.1231844,70.4951993 84.9444444,70.4951993 L4.9444444,70.4951993 C2.48984554,70.4951993 0.5,68.5252522 0.5,66.0951993 L0.5,4.49519931 C0.5,2.06514643 2.48984554,0.0951993491 4.9444444,0.0951993491 L84.9444444,0.0951993491 C86.1231844,0.0951993149 87.2536462,0.558769393 88.0871413,1.38392945 C88.9206363,2.20908951 89.3888889,3.32824674 89.3888889,4.49519931 Z\\\" id=\\\"Shape\\\"></path> </g> </g> </svg>\";\n// Exports\nmodule.exports = code;","var root = require('./_root');\n\n/** Built-in value references. */\nvar Symbol = root.Symbol;\n\nmodule.exports = Symbol;\n","var Symbol = require('./_Symbol'),\n getRawTag = require('./_getRawTag'),\n objectToString = require('./_objectToString');\n\n/** `Object#toString` result references. */\nvar nullTag = '[object Null]',\n undefinedTag = '[object Undefined]';\n\n/** Built-in value references. */\nvar symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n/**\n * The base implementation of `getTag` without fallbacks for buggy environments.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the `toStringTag`.\n */\nfunction baseGetTag(value) {\n if (value == null) {\n return value === undefined ? undefinedTag : nullTag;\n }\n return (symToStringTag && symToStringTag in Object(value))\n ? getRawTag(value)\n : objectToString(value);\n}\n\nmodule.exports = baseGetTag;\n","/** Detect free variable `global` from Node.js. */\nvar freeGlobal = typeof global == 'object' && global && global.Object === Object && global;\n\nmodule.exports = freeGlobal;\n","var Symbol = require('./_Symbol');\n\n/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/** Used to check objects for own properties. */\nvar hasOwnProperty = objectProto.hasOwnProperty;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar nativeObjectToString = objectProto.toString;\n\n/** Built-in value references. */\nvar symToStringTag = Symbol ? Symbol.toStringTag : undefined;\n\n/**\n * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the raw `toStringTag`.\n */\nfunction getRawTag(value) {\n var isOwn = hasOwnProperty.call(value, symToStringTag),\n tag = value[symToStringTag];\n\n try {\n value[symToStringTag] = undefined;\n var unmasked = true;\n } catch (e) {}\n\n var result = nativeObjectToString.call(value);\n if (unmasked) {\n if (isOwn) {\n value[symToStringTag] = tag;\n } else {\n delete value[symToStringTag];\n }\n }\n return result;\n}\n\nmodule.exports = getRawTag;\n","/** Used for built-in method references. */\nvar objectProto = Object.prototype;\n\n/**\n * Used to resolve the\n * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)\n * of values.\n */\nvar nativeObjectToString = objectProto.toString;\n\n/**\n * Converts `value` to a string using `Object.prototype.toString`.\n *\n * @private\n * @param {*} value The value to convert.\n * @returns {string} Returns the converted string.\n */\nfunction objectToString(value) {\n return nativeObjectToString.call(value);\n}\n\nmodule.exports = objectToString;\n","var freeGlobal = require('./_freeGlobal');\n\n/** Detect free variable `self`. */\nvar freeSelf = typeof self == 'object' && self && self.Object === Object && self;\n\n/** Used as a reference to the global object. */\nvar root = freeGlobal || freeSelf || Function('return this')();\n\nmodule.exports = root;\n","var isObject = require('./isObject'),\n now = require('./now'),\n toNumber = require('./toNumber');\n\n/** Error message constants. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeMax = Math.max,\n nativeMin = Math.min;\n\n/**\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked. The debounced function comes with a `cancel` method to cancel\n * delayed `func` invocations and a `flush` method to immediately invoke them.\n * Provide `options` to indicate whether `func` should be invoked on the\n * leading and/or trailing edge of the `wait` timeout. The `func` is invoked\n * with the last arguments provided to the debounced function. Subsequent\n * calls to the debounced function return the result of the last `func`\n * invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the debounced function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.debounce` and `_.throttle`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to debounce.\n * @param {number} [wait=0] The number of milliseconds to delay.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=false]\n * Specify invoking on the leading edge of the timeout.\n * @param {number} [options.maxWait]\n * The maximum time `func` is allowed to be delayed before it's invoked.\n * @param {boolean} [options.trailing=true]\n * Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new debounced function.\n * @example\n *\n * // Avoid costly calculations while the window size is in flux.\n * jQuery(window).on('resize', _.debounce(calculateLayout, 150));\n *\n * // Invoke `sendMail` when clicked, debouncing subsequent calls.\n * jQuery(element).on('click', _.debounce(sendMail, 300, {\n * 'leading': true,\n * 'trailing': false\n * }));\n *\n * // Ensure `batchLog` is invoked once after 1 second of debounced calls.\n * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });\n * var source = new EventSource('/stream');\n * jQuery(source).on('message', debounced);\n *\n * // Cancel the trailing debounced invocation.\n * jQuery(window).on('popstate', debounced.cancel);\n */\nfunction debounce(func, wait, options) {\n var lastArgs,\n lastThis,\n maxWait,\n result,\n timerId,\n lastCallTime,\n lastInvokeTime = 0,\n leading = false,\n maxing = false,\n trailing = true;\n\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n wait = toNumber(wait) || 0;\n if (isObject(options)) {\n leading = !!options.leading;\n maxing = 'maxWait' in options;\n maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;\n trailing = 'trailing' in options ? !!options.trailing : trailing;\n }\n\n function invokeFunc(time) {\n var args = lastArgs,\n thisArg = lastThis;\n\n lastArgs = lastThis = undefined;\n lastInvokeTime = time;\n result = func.apply(thisArg, args);\n return result;\n }\n\n function leadingEdge(time) {\n // Reset any `maxWait` timer.\n lastInvokeTime = time;\n // Start the timer for the trailing edge.\n timerId = setTimeout(timerExpired, wait);\n // Invoke the leading edge.\n return leading ? invokeFunc(time) : result;\n }\n\n function remainingWait(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime,\n timeWaiting = wait - timeSinceLastCall;\n\n return maxing\n ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)\n : timeWaiting;\n }\n\n function shouldInvoke(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime;\n\n // Either this is the first call, activity has stopped and we're at the\n // trailing edge, the system time has gone backwards and we're treating\n // it as the trailing edge, or we've hit the `maxWait` limit.\n return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||\n (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));\n }\n\n function timerExpired() {\n var time = now();\n if (shouldInvoke(time)) {\n return trailingEdge(time);\n }\n // Restart the timer.\n timerId = setTimeout(timerExpired, remainingWait(time));\n }\n\n function trailingEdge(time) {\n timerId = undefined;\n\n // Only invoke if we have `lastArgs` which means `func` has been\n // debounced at least once.\n if (trailing && lastArgs) {\n return invokeFunc(time);\n }\n lastArgs = lastThis = undefined;\n return result;\n }\n\n function cancel() {\n if (timerId !== undefined) {\n clearTimeout(timerId);\n }\n lastInvokeTime = 0;\n lastArgs = lastCallTime = lastThis = timerId = undefined;\n }\n\n function flush() {\n return timerId === undefined ? result : trailingEdge(now());\n }\n\n function debounced() {\n var time = now(),\n isInvoking = shouldInvoke(time);\n\n lastArgs = arguments;\n lastThis = this;\n lastCallTime = time;\n\n if (isInvoking) {\n if (timerId === undefined) {\n return leadingEdge(lastCallTime);\n }\n if (maxing) {\n // Handle invocations in a tight loop.\n clearTimeout(timerId);\n timerId = setTimeout(timerExpired, wait);\n return invokeFunc(lastCallTime);\n }\n }\n if (timerId === undefined) {\n timerId = setTimeout(timerExpired, wait);\n }\n return result;\n }\n debounced.cancel = cancel;\n debounced.flush = flush;\n return debounced;\n}\n\nmodule.exports = debounce;\n","/**\n * Checks if `value` is the\n * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)\n * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is an object, else `false`.\n * @example\n *\n * _.isObject({});\n * // => true\n *\n * _.isObject([1, 2, 3]);\n * // => true\n *\n * _.isObject(_.noop);\n * // => true\n *\n * _.isObject(null);\n * // => false\n */\nfunction isObject(value) {\n var type = typeof value;\n return value != null && (type == 'object' || type == 'function');\n}\n\nmodule.exports = isObject;\n","/**\n * Checks if `value` is object-like. A value is object-like if it's not `null`\n * and has a `typeof` result of \"object\".\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is object-like, else `false`.\n * @example\n *\n * _.isObjectLike({});\n * // => true\n *\n * _.isObjectLike([1, 2, 3]);\n * // => true\n *\n * _.isObjectLike(_.noop);\n * // => false\n *\n * _.isObjectLike(null);\n * // => false\n */\nfunction isObjectLike(value) {\n return value != null && typeof value == 'object';\n}\n\nmodule.exports = isObjectLike;\n","var baseGetTag = require('./_baseGetTag'),\n isObjectLike = require('./isObjectLike');\n\n/** `Object#toString` result references. */\nvar symbolTag = '[object Symbol]';\n\n/**\n * Checks if `value` is classified as a `Symbol` primitive or object.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to check.\n * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.\n * @example\n *\n * _.isSymbol(Symbol.iterator);\n * // => true\n *\n * _.isSymbol('abc');\n * // => false\n */\nfunction isSymbol(value) {\n return typeof value == 'symbol' ||\n (isObjectLike(value) && baseGetTag(value) == symbolTag);\n}\n\nmodule.exports = isSymbol;\n","var root = require('./_root');\n\n/**\n * Gets the timestamp of the number of milliseconds that have elapsed since\n * the Unix epoch (1 January 1970 00:00:00 UTC).\n *\n * @static\n * @memberOf _\n * @since 2.4.0\n * @category Date\n * @returns {number} Returns the timestamp.\n * @example\n *\n * _.defer(function(stamp) {\n * console.log(_.now() - stamp);\n * }, _.now());\n * // => Logs the number of milliseconds it took for the deferred invocation.\n */\nvar now = function() {\n return root.Date.now();\n};\n\nmodule.exports = now;\n","var isObject = require('./isObject'),\n isSymbol = require('./isSymbol');\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** Used to match leading and trailing whitespace. */\nvar reTrim = /^\\s+|\\s+$/g;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n if (typeof value == 'number') {\n return value;\n }\n if (isSymbol(value)) {\n return NAN;\n }\n if (isObject(value)) {\n var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n value = isObject(other) ? (other + '') : other;\n }\n if (typeof value != 'string') {\n return value === 0 ? value : +value;\n }\n value = value.replace(reTrim, '');\n var isBinary = reIsBinary.test(value);\n return (isBinary || reIsOctal.test(value))\n ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = toNumber;\n","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","// extracted by mini-css-extract-plugin\nexport {};","let raf = null;\nfunction requestAnimationFrame (callback) {\n if (!raf) {\n raf = (\n window.requestAnimationFrame ||\n window.webkitRequestAnimationFrame ||\n window.mozRequestAnimationFrame ||\n function (callback) {\n return setTimeout(callback, 16)\n }\n ).bind(window);\n }\n return raf(callback)\n}\n\nlet caf = null;\nfunction cancelAnimationFrame (id) {\n if (!caf) {\n caf = (\n window.cancelAnimationFrame ||\n window.webkitCancelAnimationFrame ||\n window.mozCancelAnimationFrame ||\n function (id) {\n clearTimeout(id);\n }\n ).bind(window);\n }\n\n caf(id);\n}\n\nfunction createStyles (styleText) {\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (style.styleSheet) {\n style.styleSheet.cssText = styleText;\n } else {\n style.appendChild(document.createTextNode(styleText));\n }\n (document.querySelector('head') || document.body).appendChild(style);\n return style\n}\n\nfunction createElement (tagName, props = {}) {\n let elem = document.createElement(tagName);\n Object.keys(props).forEach(key => {\n elem[key] = props[key];\n });\n return elem\n}\n\nfunction getComputedStyle (elem, prop, pseudo) {\n // for older versions of Firefox, `getComputedStyle` required\n // the second argument and may return `null` for some elements\n // when `display: none`\n let computedStyle = window.getComputedStyle(elem, pseudo || null) || {\n display: 'none'\n };\n\n return computedStyle[prop]\n}\n\nfunction getRenderInfo (elem) {\n if (!document.documentElement.contains(elem)) {\n return {\n detached: true,\n rendered: false\n }\n }\n\n let current = elem;\n while (current !== document) {\n if (getComputedStyle(current, 'display') === 'none') {\n return {\n detached: false,\n rendered: false\n }\n }\n current = current.parentNode;\n }\n\n return {\n detached: false,\n rendered: true\n }\n}\n\nvar css = \".resize-triggers{visibility:hidden;opacity:0;pointer-events:none}.resize-contract-trigger,.resize-contract-trigger:before,.resize-expand-trigger,.resize-triggers{content:\\\"\\\";position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}.resize-contract-trigger,.resize-expand-trigger{background:#eee;overflow:auto}.resize-contract-trigger:before{width:200%;height:200%}\";\n\nlet total = 0;\nlet style = null;\n\nfunction addListener (elem, callback) {\n if (!elem.__resize_mutation_handler__) {\n elem.__resize_mutation_handler__ = handleMutation.bind(elem);\n }\n\n let listeners = elem.__resize_listeners__;\n\n if (!listeners) {\n elem.__resize_listeners__ = [];\n if (window.ResizeObserver) {\n let { offsetWidth, offsetHeight } = elem;\n let ro = new ResizeObserver(() => {\n if (!elem.__resize_observer_triggered__) {\n elem.__resize_observer_triggered__ = true;\n if (elem.offsetWidth === offsetWidth && elem.offsetHeight === offsetHeight) {\n return\n }\n }\n runCallbacks(elem);\n });\n\n // initially display none won't trigger ResizeObserver callback\n let { detached, rendered } = getRenderInfo(elem);\n elem.__resize_observer_triggered__ = detached === false && rendered === false;\n elem.__resize_observer__ = ro;\n ro.observe(elem);\n } else if (elem.attachEvent && elem.addEventListener) {\n // targeting IE9/10\n elem.__resize_legacy_resize_handler__ = function handleLegacyResize () {\n runCallbacks(elem);\n };\n elem.attachEvent('onresize', elem.__resize_legacy_resize_handler__);\n document.addEventListener('DOMSubtreeModified', elem.__resize_mutation_handler__);\n } else {\n if (!total) {\n style = createStyles(css);\n }\n initTriggers(elem);\n\n elem.__resize_rendered__ = getRenderInfo(elem).rendered;\n if (window.MutationObserver) {\n let mo = new MutationObserver(elem.__resize_mutation_handler__);\n mo.observe(document, {\n attributes: true,\n childList: true,\n characterData: true,\n subtree: true\n });\n elem.__resize_mutation_observer__ = mo;\n }\n }\n }\n\n elem.__resize_listeners__.push(callback);\n total++;\n}\n\nfunction removeListener (elem, callback) {\n let listeners = elem.__resize_listeners__;\n if (!listeners) {\n return\n }\n\n if (callback) {\n listeners.splice(listeners.indexOf(callback), 1);\n }\n\n // no listeners exist, or removing all listeners\n if (!listeners.length || !callback) {\n // targeting IE9/10\n if (elem.detachEvent && elem.removeEventListener) {\n elem.detachEvent('onresize', elem.__resize_legacy_resize_handler__);\n document.removeEventListener('DOMSubtreeModified', elem.__resize_mutation_handler__);\n return\n }\n\n if (elem.__resize_observer__) {\n elem.__resize_observer__.unobserve(elem);\n elem.__resize_observer__.disconnect();\n elem.__resize_observer__ = null;\n } else {\n if (elem.__resize_mutation_observer__) {\n elem.__resize_mutation_observer__.disconnect();\n elem.__resize_mutation_observer__ = null;\n }\n elem.removeEventListener('scroll', handleScroll);\n elem.removeChild(elem.__resize_triggers__.triggers);\n elem.__resize_triggers__ = null;\n }\n elem.__resize_listeners__ = null;\n }\n\n if (!--total && style) {\n style.parentNode.removeChild(style);\n }\n}\n\nfunction getUpdatedSize (elem) {\n let { width, height } = elem.__resize_last__;\n let { offsetWidth, offsetHeight } = elem;\n if (offsetWidth !== width || offsetHeight !== height) {\n return {\n width: offsetWidth,\n height: offsetHeight\n }\n }\n return null\n}\n\nfunction handleMutation () {\n // `this` denotes the scrolling element\n let { rendered, detached } = getRenderInfo(this);\n if (rendered !== this.__resize_rendered__) {\n if (!detached && this.__resize_triggers__) {\n resetTriggers(this);\n this.addEventListener('scroll', handleScroll, true);\n }\n this.__resize_rendered__ = rendered;\n runCallbacks(this);\n }\n}\n\nfunction handleScroll () {\n // `this` denotes the scrolling element\n resetTriggers(this);\n if (this.__resize_raf__) {\n cancelAnimationFrame(this.__resize_raf__);\n }\n this.__resize_raf__ = requestAnimationFrame(() => {\n let updated = getUpdatedSize(this);\n if (updated) {\n this.__resize_last__ = updated;\n runCallbacks(this);\n }\n });\n}\n\nfunction runCallbacks (elem) {\n if (!elem || !elem.__resize_listeners__) {\n return\n }\n elem.__resize_listeners__.forEach(callback => {\n callback.call(elem, elem);\n });\n}\n\nfunction initTriggers (elem) {\n let position = getComputedStyle(elem, 'position');\n if (!position || position === 'static') {\n elem.style.position = 'relative';\n }\n\n elem.__resize_old_position__ = position;\n elem.__resize_last__ = {};\n\n let triggers = createElement('div', {\n className: 'resize-triggers'\n });\n let expand = createElement('div', {\n className: 'resize-expand-trigger'\n });\n let expandChild = createElement('div');\n let contract = createElement('div', {\n className: 'resize-contract-trigger'\n });\n expand.appendChild(expandChild);\n triggers.appendChild(expand);\n triggers.appendChild(contract);\n elem.appendChild(triggers);\n\n elem.__resize_triggers__ = {\n triggers,\n expand,\n expandChild,\n contract\n };\n\n resetTriggers(elem);\n elem.addEventListener('scroll', handleScroll, true);\n\n elem.__resize_last__ = {\n width: elem.offsetWidth,\n height: elem.offsetHeight\n };\n}\n\nfunction resetTriggers (elem) {\n let { expand, expandChild, contract } = elem.__resize_triggers__;\n\n // batch read\n let { scrollWidth: csw, scrollHeight: csh } = contract;\n let { offsetWidth: eow, offsetHeight: eoh, scrollWidth: esw, scrollHeight: esh } = expand;\n\n // batch write\n contract.scrollLeft = csw;\n contract.scrollTop = csh;\n expandChild.style.width = eow + 1 + 'px';\n expandChild.style.height = eoh + 1 + 'px';\n expand.scrollLeft = esw;\n expand.scrollTop = esh;\n}\n\nexport { addListener, removeListener };\n","const runningOnBrowser = typeof window !== \"undefined\";\r\n\r\nconst isBot =\r\n\t(runningOnBrowser && !(\"onscroll\" in window)) ||\r\n\t(typeof navigator !== \"undefined\" &&\r\n\t\t/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent));\r\n\r\nconst supportsIntersectionObserver =\r\n\trunningOnBrowser && \"IntersectionObserver\" in window;\r\n\r\nconst supportsClassList =\r\n\trunningOnBrowser && \"classList\" in document.createElement(\"p\");\r\n\r\nconst defaultSettings = {\r\n\telements_selector: \"img\",\r\n\tcontainer: isBot || runningOnBrowser ? document : null,\r\n\tthreshold: 300,\r\n\tthresholds: null,\r\n\tdata_src: \"src\",\r\n\tdata_srcset: \"srcset\",\r\n\tdata_sizes: \"sizes\",\r\n\tdata_bg: \"bg\",\r\n\tdata_poster: \"poster\",\r\n\tclass_loading: \"loading\",\r\n\tclass_loaded: \"loaded\",\r\n\tclass_error: \"error\",\r\n\tload_delay: 0,\r\n\tauto_unobserve: true,\r\n\tcallback_enter: null,\r\n\tcallback_exit: null,\r\n\tcallback_reveal: null,\r\n\tcallback_loaded: null,\r\n\tcallback_error: null,\r\n\tcallback_finish: null,\r\n\tuse_native: false\r\n};\r\n\r\nvar getInstanceSettings = customSettings => {\r\n\treturn Object.assign({}, defaultSettings, customSettings);\r\n};\r\n\r\n/* Creates instance and notifies it through the window element */\r\nconst createInstance = function(classObj, options) {\r\n\tvar event;\r\n\tlet eventString = \"LazyLoad::Initialized\";\r\n\tlet instance = new classObj(options);\r\n\ttry {\r\n\t\t// Works in modern browsers\r\n\t\tevent = new CustomEvent(eventString, { detail: { instance } });\r\n\t} catch (err) {\r\n\t\t// Works in Internet Explorer (all versions)\r\n\t\tevent = document.createEvent(\"CustomEvent\");\r\n\t\tevent.initCustomEvent(eventString, false, false, { instance });\r\n\t}\r\n\twindow.dispatchEvent(event);\r\n};\r\n\r\n/* Auto initialization of one or more instances of lazyload, depending on the \r\n options passed in (plain object or an array) */\r\nfunction autoInitialize(classObj, options) {\r\n\tif (!options) {\r\n\t\treturn;\r\n\t}\r\n\tif (!options.length) {\r\n\t\t// Plain object\r\n\t\tcreateInstance(classObj, options);\r\n\t} else {\r\n\t\t// Array of objects\r\n\t\tfor (let i = 0, optionsItem; (optionsItem = options[i]); i += 1) {\r\n\t\t\tcreateInstance(classObj, optionsItem);\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst dataPrefix = \"data-\";\r\nconst processedDataName = \"was-processed\";\r\nconst timeoutDataName = \"ll-timeout\";\r\nconst trueString = \"true\";\r\n\r\nconst getData = (element, attribute) => {\r\n\treturn element.getAttribute(dataPrefix + attribute);\r\n};\r\n\r\nconst setData = (element, attribute, value) => {\r\n\tvar attrName = dataPrefix + attribute;\r\n\tif (value === null) {\r\n\t\telement.removeAttribute(attrName);\r\n\t\treturn;\r\n\t}\r\n\telement.setAttribute(attrName, value);\r\n};\r\n\r\nconst resetWasProcessedData = element =>\r\n\tsetData(element, processedDataName, null);\r\n\r\nconst setWasProcessedData = element =>\r\n\tsetData(element, processedDataName, trueString);\r\n\r\nconst getWasProcessedData = element =>\r\n\tgetData(element, processedDataName) === trueString;\r\n\r\nconst setTimeoutData = (element, value) =>\r\n\tsetData(element, timeoutDataName, value);\r\n\r\nconst getTimeoutData = element => getData(element, timeoutDataName);\r\n\r\nconst purgeProcessedElements = elements => {\r\n\treturn elements.filter(element => !getWasProcessedData(element));\r\n};\r\n\r\nconst purgeOneElement = (elements, elementToPurge) => {\r\n\treturn elements.filter(element => element !== elementToPurge);\r\n};\r\n\r\nconst safeCallback = (callback, arg1, arg2, arg3) => {\r\n\tif (!callback) {\r\n\t\treturn;\r\n\t}\r\n\r\n\tif (arg3 !== undefined) {\r\n\t\tcallback(arg1, arg2, arg3);\r\n\t\treturn;\r\n\t}\r\n\tif (arg2 !== undefined) {\r\n\t\tcallback(arg1, arg2);\r\n\t\treturn;\r\n\t}\r\n\tcallback(arg1);\r\n};\r\n\r\nconst updateLoadingCount = (instance, plusMinus) => {\r\n instance.loadingCount += plusMinus;\r\n if (instance._elements.length === 0 && instance.loadingCount === 0) {\r\n safeCallback(instance._settings.callback_finish, instance);\r\n }\r\n};\r\n\r\nconst getSourceTags = parentTag => {\r\n\tlet sourceTags = [];\r\n\tfor (let i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {\r\n\t\tif (childTag.tagName === \"SOURCE\") {\r\n\t\t\tsourceTags.push(childTag);\r\n\t\t}\r\n\t}\r\n\treturn sourceTags;\r\n};\r\n\r\nconst setAttributeIfValue = (element, attrName, value) => {\r\n\tif (!value) {\r\n\t\treturn;\r\n\t}\r\n\telement.setAttribute(attrName, value);\r\n};\r\n\r\nconst setImageAttributes = (element, settings) => {\r\n\tsetAttributeIfValue(\r\n\t\telement,\r\n\t\t\"sizes\",\r\n\t\tgetData(element, settings.data_sizes)\r\n\t);\r\n\tsetAttributeIfValue(\r\n\t\telement,\r\n\t\t\"srcset\",\r\n\t\tgetData(element, settings.data_srcset)\r\n\t);\r\n\tsetAttributeIfValue(element, \"src\", getData(element, settings.data_src));\r\n};\r\n\r\nconst setSourcesImg = (element, settings) => {\r\n\tconst parent = element.parentNode;\r\n\r\n\tif (parent && parent.tagName === \"PICTURE\") {\r\n\t\tlet sourceTags = getSourceTags(parent);\r\n\t\tsourceTags.forEach(sourceTag => {\r\n\t\t\tsetImageAttributes(sourceTag, settings);\r\n\t\t});\r\n\t}\r\n\r\n\tsetImageAttributes(element, settings);\r\n};\r\n\r\nconst setSourcesIframe = (element, settings) => {\r\n\tsetAttributeIfValue(element, \"src\", getData(element, settings.data_src));\r\n};\r\n\r\nconst setSourcesVideo = (element, settings) => {\r\n\tlet sourceTags = getSourceTags(element);\r\n\tsourceTags.forEach(sourceTag => {\r\n\t\tsetAttributeIfValue(\r\n\t\t\tsourceTag,\r\n\t\t\t\"src\",\r\n\t\t\tgetData(sourceTag, settings.data_src)\r\n\t\t);\r\n\t});\r\n\tsetAttributeIfValue(\r\n\t\telement,\r\n\t\t\"poster\",\r\n\t\tgetData(element, settings.data_poster)\r\n\t);\r\n\tsetAttributeIfValue(element, \"src\", getData(element, settings.data_src));\r\n\telement.load();\r\n};\r\n\r\nconst setSourcesBgImage = (element, settings) => {\r\n\tconst srcDataValue = getData(element, settings.data_src);\r\n\tconst bgDataValue = getData(element, settings.data_bg);\r\n\r\n\tif (srcDataValue) {\r\n\t\telement.style.backgroundImage = `url(\"${srcDataValue}\")`;\r\n\t}\r\n\r\n\tif (bgDataValue) {\r\n\t\telement.style.backgroundImage = bgDataValue;\r\n\t}\r\n};\r\n\r\nconst setSourcesFunctions = {\r\n\tIMG: setSourcesImg,\r\n\tIFRAME: setSourcesIframe,\r\n\tVIDEO: setSourcesVideo\r\n};\r\n\r\nconst setSources = (element, instance) => {\r\n\tconst settings = instance._settings;\r\n\tconst tagName = element.tagName;\r\n\tconst setSourcesFunction = setSourcesFunctions[tagName];\r\n\tif (setSourcesFunction) {\r\n\t\tsetSourcesFunction(element, settings);\r\n\t\tupdateLoadingCount(instance, 1);\r\n\t\tinstance._elements = purgeOneElement(instance._elements, element);\r\n\t\treturn;\r\n\t}\r\n\tsetSourcesBgImage(element, settings);\r\n};\r\n\r\nconst addClass = (element, className) => {\r\n\tif (supportsClassList) {\r\n\t\telement.classList.add(className);\r\n\t\treturn;\r\n\t}\r\n\telement.className += (element.className ? \" \" : \"\") + className;\r\n};\r\n\r\nconst removeClass = (element, className) => {\r\n\tif (supportsClassList) {\r\n\t\telement.classList.remove(className);\r\n\t\treturn;\r\n\t}\r\n\telement.className = element.className.\r\n\t\treplace(new RegExp(\"(^|\\\\s+)\" + className + \"(\\\\s+|$)\"), \" \").\r\n\t\treplace(/^\\s+/, \"\").\r\n\t\treplace(/\\s+$/, \"\");\r\n};\r\n\r\nconst genericLoadEventName = \"load\";\r\nconst mediaLoadEventName = \"loadeddata\";\r\nconst errorEventName = \"error\";\r\n\r\nconst addEventListener = (element, eventName, handler) => {\r\n\telement.addEventListener(eventName, handler);\r\n};\r\n\r\nconst removeEventListener = (element, eventName, handler) => {\r\n\telement.removeEventListener(eventName, handler);\r\n};\r\n\r\nconst addEventListeners = (element, loadHandler, errorHandler) => {\r\n\taddEventListener(element, genericLoadEventName, loadHandler);\r\n\taddEventListener(element, mediaLoadEventName, loadHandler);\r\n\taddEventListener(element, errorEventName, errorHandler);\r\n};\r\n\r\nconst removeEventListeners = (element, loadHandler, errorHandler) => {\r\n\tremoveEventListener(element, genericLoadEventName, loadHandler);\r\n\tremoveEventListener(element, mediaLoadEventName, loadHandler);\r\n\tremoveEventListener(element, errorEventName, errorHandler);\r\n};\r\n\r\nconst eventHandler = function(event, success, instance) {\r\n\tvar settings = instance._settings;\r\n\tconst className = success ? settings.class_loaded : settings.class_error;\r\n\tconst callback = success\r\n\t\t? settings.callback_loaded\r\n\t\t: settings.callback_error;\r\n\tconst element = event.target;\r\n\r\n\tremoveClass(element, settings.class_loading);\r\n\taddClass(element, className);\r\n\tsafeCallback(callback, element, instance);\r\n\r\n\tupdateLoadingCount(instance, -1);\r\n};\r\n\r\nconst addOneShotEventListeners = (element, instance) => {\r\n\tconst loadHandler = event => {\r\n\t\teventHandler(event, true, instance);\r\n\t\tremoveEventListeners(element, loadHandler, errorHandler);\r\n\t};\r\n\tconst errorHandler = event => {\r\n\t\teventHandler(event, false, instance);\r\n\t\tremoveEventListeners(element, loadHandler, errorHandler);\r\n\t};\r\n\taddEventListeners(element, loadHandler, errorHandler);\r\n};\r\n\r\nconst managedTags = [\"IMG\", \"IFRAME\", \"VIDEO\"];\r\n\r\nconst onEnter = (element, entry, instance) => {\r\n\tconst settings = instance._settings;\r\n\tsafeCallback(settings.callback_enter, element, entry, instance);\r\n\tif (!settings.load_delay) {\r\n\t\trevealAndUnobserve(element, instance);\r\n\t\treturn;\r\n\t}\r\n\tdelayLoad(element, instance);\r\n};\r\n\r\nconst revealAndUnobserve = (element, instance) => {\r\n\tvar observer = instance._observer;\r\n\trevealElement(element, instance);\r\n\tif (observer && instance._settings.auto_unobserve) {\r\n\t\tobserver.unobserve(element);\r\n\t}\r\n};\r\n\r\nconst onExit = (element, entry, instance) => {\r\n\tconst settings = instance._settings;\r\n\tsafeCallback(settings.callback_exit, element, entry, instance);\r\n\tif (!settings.load_delay) {\r\n\t\treturn;\r\n\t}\r\n\tcancelDelayLoad(element);\r\n};\r\n\r\nconst cancelDelayLoad = element => {\r\n\tvar timeoutId = getTimeoutData(element);\r\n\tif (!timeoutId) {\r\n\t\treturn; // do nothing if timeout doesn't exist\r\n\t}\r\n\tclearTimeout(timeoutId);\r\n\tsetTimeoutData(element, null);\r\n};\r\n\r\nconst delayLoad = (element, instance) => {\r\n\tvar loadDelay = instance._settings.load_delay;\r\n\tvar timeoutId = getTimeoutData(element);\r\n\tif (timeoutId) {\r\n\t\treturn; // do nothing if timeout already set\r\n\t}\r\n\ttimeoutId = setTimeout(function() {\r\n\t\trevealAndUnobserve(element, instance);\r\n\t\tcancelDelayLoad(element);\r\n\t}, loadDelay);\r\n\tsetTimeoutData(element, timeoutId);\r\n};\r\n\r\nconst revealElement = (element, instance, force) => {\r\n\tvar settings = instance._settings;\r\n\tif (!force && getWasProcessedData(element)) {\r\n\t\treturn; // element has already been processed and force wasn't true\r\n\t}\r\n\tif (managedTags.indexOf(element.tagName) > -1) {\r\n\t\taddOneShotEventListeners(element, instance);\r\n\t\taddClass(element, settings.class_loading);\r\n\t}\r\n\tsetSources(element, instance);\r\n\tsetWasProcessedData(element);\r\n\tsafeCallback(settings.callback_reveal, element, instance);\r\n\tsafeCallback(settings.callback_set, element, instance);\r\n};\r\n\r\nconst isIntersecting = entry =>\r\n\tentry.isIntersecting || entry.intersectionRatio > 0;\r\n\r\nconst getObserverSettings = settings => ({\r\n\troot: settings.container === document ? null : settings.container,\r\n\trootMargin: settings.thresholds || settings.threshold + \"px\"\r\n});\r\n\r\nconst setObserver = instance => {\r\n\tif (!supportsIntersectionObserver) {\r\n\t\treturn false;\r\n\t}\r\n\tinstance._observer = new IntersectionObserver(entries => {\r\n\t\tentries.forEach(entry =>\r\n\t\t\tisIntersecting(entry)\r\n\t\t\t\t? onEnter(entry.target, entry, instance)\r\n\t\t\t\t: onExit(entry.target, entry, instance)\r\n\t\t);\r\n\t}, getObserverSettings(instance._settings));\r\n\treturn true;\r\n};\r\n\r\nconst nativeLazyTags = [\"IMG\", \"IFRAME\"];\r\n\r\nconst shouldUseNative = settings =>\r\n\tsettings.use_native && \"loading\" in HTMLImageElement.prototype;\r\n\r\nconst loadAllNative = instance => {\r\n\tinstance._elements.forEach(element => {\r\n\t\tif (nativeLazyTags.indexOf(element.tagName) === -1) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\telement.setAttribute(\"loading\", \"lazy\");\r\n\t\trevealElement(element, instance);\r\n\t});\r\n};\r\n\r\nconst nodeSetToArray = nodeSet => Array.prototype.slice.call(nodeSet);\r\n\r\nconst queryElements = settings =>\r\n\tsettings.container.querySelectorAll(settings.elements_selector);\r\n\r\nconst getElements = (elements, settings) =>\r\n\tpurgeProcessedElements(nodeSetToArray(elements || queryElements(settings)));\r\n\r\nconst retryLazyLoad = instance => {\r\n\tvar settings = instance._settings;\r\n\tvar errorElements = settings.container.querySelectorAll(\r\n\t\t\".\" + settings.class_error\r\n\t);\r\n\terrorElements.forEach(element => {\r\n\t\tremoveClass(element, settings.class_error);\r\n\t\tresetWasProcessedData(element);\r\n\t});\r\n\tinstance.update();\r\n};\r\n\r\nconst setOnlineCheck = instance => {\r\n\tif (!runningOnBrowser) {\r\n\t\treturn;\r\n\t}\r\n\twindow.addEventListener(\"online\", event => {\r\n\t\tretryLazyLoad(instance);\r\n\t});\r\n};\r\n\r\nconst LazyLoad = function(customSettings, elements) {\r\n this._settings = getInstanceSettings(customSettings);\r\n this.loadingCount = 0;\r\n setObserver(this);\r\n this.update(elements);\r\n setOnlineCheck(this);\r\n};\r\n\r\nLazyLoad.prototype = {\r\n update: function(elements) {\r\n var settings = this._settings;\r\n this._elements = getElements(elements, settings);\r\n if (isBot || !this._observer) {\r\n this.loadAll();\r\n return;\r\n }\r\n if (shouldUseNative(settings)) {\r\n loadAllNative(this);\r\n this._elements = getElements(elements, settings);\r\n }\r\n this._elements.forEach(element => {\r\n this._observer.observe(element);\r\n });\r\n },\r\n\r\n destroy: function() {\r\n if (this._observer) {\r\n this._elements.forEach(element => {\r\n this._observer.unobserve(element);\r\n });\r\n this._observer = null;\r\n }\r\n this._elements = null;\r\n this._settings = null;\r\n },\r\n\r\n load: function(element, force) {\r\n revealElement(element, this, force);\r\n },\r\n\r\n loadAll: function() {\r\n this._elements.forEach(element => {\r\n revealAndUnobserve(element, this);\r\n });\r\n }\r\n};\r\n\r\n/* Automatic instances creation if required (useful for async script loading) */\r\nif (runningOnBrowser) {\r\n autoInitialize(LazyLoad, window.lazyLoadOptions);\r\n}\r\n\r\nexport default LazyLoad;\r\n","/*!\n * vue-i18n v8.20.0 \n * (c) 2020 kazuya kawaguchi\n * Released under the MIT License.\n */\n/* */\n\n/**\n * constants\n */\n\nvar numberFormatKeys = [\n 'style',\n 'currency',\n 'currencyDisplay',\n 'useGrouping',\n 'minimumIntegerDigits',\n 'minimumFractionDigits',\n 'maximumFractionDigits',\n 'minimumSignificantDigits',\n 'maximumSignificantDigits',\n 'localeMatcher',\n 'formatMatcher',\n 'unit'\n];\n\n/**\n * utilities\n */\n\nfunction warn (msg, err) {\n if (typeof console !== 'undefined') {\n console.warn('[vue-i18n] ' + msg);\n /* istanbul ignore if */\n if (err) {\n console.warn(err.stack);\n }\n }\n}\n\nfunction error (msg, err) {\n if (typeof console !== 'undefined') {\n console.error('[vue-i18n] ' + msg);\n /* istanbul ignore if */\n if (err) {\n console.error(err.stack);\n }\n }\n}\n\nvar isArray = Array.isArray;\n\nfunction isObject (obj) {\n return obj !== null && typeof obj === 'object'\n}\n\nfunction isBoolean (val) {\n return typeof val === 'boolean'\n}\n\nfunction isString (val) {\n return typeof val === 'string'\n}\n\nvar toString = Object.prototype.toString;\nvar OBJECT_STRING = '[object Object]';\nfunction isPlainObject (obj) {\n return toString.call(obj) === OBJECT_STRING\n}\n\nfunction isNull (val) {\n return val === null || val === undefined\n}\n\nfunction parseArgs () {\n var args = [], len = arguments.length;\n while ( len-- ) args[ len ] = arguments[ len ];\n\n var locale = null;\n var params = null;\n if (args.length === 1) {\n if (isObject(args[0]) || Array.isArray(args[0])) {\n params = args[0];\n } else if (typeof args[0] === 'string') {\n locale = args[0];\n }\n } else if (args.length === 2) {\n if (typeof args[0] === 'string') {\n locale = args[0];\n }\n /* istanbul ignore if */\n if (isObject(args[1]) || Array.isArray(args[1])) {\n params = args[1];\n }\n }\n\n return { locale: locale, params: params }\n}\n\nfunction looseClone (obj) {\n return JSON.parse(JSON.stringify(obj))\n}\n\nfunction remove (arr, item) {\n if (arr.length) {\n var index = arr.indexOf(item);\n if (index > -1) {\n return arr.splice(index, 1)\n }\n }\n}\n\nfunction includes (arr, item) {\n return !!~arr.indexOf(item)\n}\n\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nfunction hasOwn (obj, key) {\n return hasOwnProperty.call(obj, key)\n}\n\nfunction merge (target) {\n var arguments$1 = arguments;\n\n var output = Object(target);\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments$1[i];\n if (source !== undefined && source !== null) {\n var key = (void 0);\n for (key in source) {\n if (hasOwn(source, key)) {\n if (isObject(source[key])) {\n output[key] = merge(output[key], source[key]);\n } else {\n output[key] = source[key];\n }\n }\n }\n }\n }\n return output\n}\n\nfunction looseEqual (a, b) {\n if (a === b) { return true }\n var isObjectA = isObject(a);\n var isObjectB = isObject(b);\n if (isObjectA && isObjectB) {\n try {\n var isArrayA = Array.isArray(a);\n var isArrayB = Array.isArray(b);\n if (isArrayA && isArrayB) {\n return a.length === b.length && a.every(function (e, i) {\n return looseEqual(e, b[i])\n })\n } else if (!isArrayA && !isArrayB) {\n var keysA = Object.keys(a);\n var keysB = Object.keys(b);\n return keysA.length === keysB.length && keysA.every(function (key) {\n return looseEqual(a[key], b[key])\n })\n } else {\n /* istanbul ignore next */\n return false\n }\n } catch (e) {\n /* istanbul ignore next */\n return false\n }\n } else if (!isObjectA && !isObjectB) {\n return String(a) === String(b)\n } else {\n return false\n }\n}\n\n/* */\n\nfunction extend (Vue) {\n if (!Vue.prototype.hasOwnProperty('$i18n')) {\n // $FlowFixMe\n Object.defineProperty(Vue.prototype, '$i18n', {\n get: function get () { return this._i18n }\n });\n }\n\n Vue.prototype.$t = function (key) {\n var values = [], len = arguments.length - 1;\n while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];\n\n var i18n = this.$i18n;\n return i18n._t.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this ].concat( values ))\n };\n\n Vue.prototype.$tc = function (key, choice) {\n var values = [], len = arguments.length - 2;\n while ( len-- > 0 ) values[ len ] = arguments[ len + 2 ];\n\n var i18n = this.$i18n;\n return i18n._tc.apply(i18n, [ key, i18n.locale, i18n._getMessages(), this, choice ].concat( values ))\n };\n\n Vue.prototype.$te = function (key, locale) {\n var i18n = this.$i18n;\n return i18n._te(key, i18n.locale, i18n._getMessages(), locale)\n };\n\n Vue.prototype.$d = function (value) {\n var ref;\n\n var args = [], len = arguments.length - 1;\n while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n return (ref = this.$i18n).d.apply(ref, [ value ].concat( args ))\n };\n\n Vue.prototype.$n = function (value) {\n var ref;\n\n var args = [], len = arguments.length - 1;\n while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n return (ref = this.$i18n).n.apply(ref, [ value ].concat( args ))\n };\n}\n\n/* */\n\nvar mixin = {\n beforeCreate: function beforeCreate () {\n var options = this.$options;\n options.i18n = options.i18n || (options.__i18n ? {} : null);\n\n if (options.i18n) {\n if (options.i18n instanceof VueI18n) {\n // init locale messages via custom blocks\n if (options.__i18n) {\n try {\n var localeMessages = {};\n options.__i18n.forEach(function (resource) {\n localeMessages = merge(localeMessages, JSON.parse(resource));\n });\n Object.keys(localeMessages).forEach(function (locale) {\n options.i18n.mergeLocaleMessage(locale, localeMessages[locale]);\n });\n } catch (e) {\n if (process.env.NODE_ENV !== 'production') {\n error(\"Cannot parse locale messages via custom blocks.\", e);\n }\n }\n }\n this._i18n = options.i18n;\n this._i18nWatcher = this._i18n.watchI18nData();\n } else if (isPlainObject(options.i18n)) {\n var rootI18n = this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n\n ? this.$root.$i18n\n : null;\n // component local i18n\n if (rootI18n) {\n options.i18n.root = this.$root;\n options.i18n.formatter = rootI18n.formatter;\n options.i18n.fallbackLocale = rootI18n.fallbackLocale;\n options.i18n.formatFallbackMessages = rootI18n.formatFallbackMessages;\n options.i18n.silentTranslationWarn = rootI18n.silentTranslationWarn;\n options.i18n.silentFallbackWarn = rootI18n.silentFallbackWarn;\n options.i18n.pluralizationRules = rootI18n.pluralizationRules;\n options.i18n.preserveDirectiveContent = rootI18n.preserveDirectiveContent;\n }\n\n // init locale messages via custom blocks\n if (options.__i18n) {\n try {\n var localeMessages$1 = {};\n options.__i18n.forEach(function (resource) {\n localeMessages$1 = merge(localeMessages$1, JSON.parse(resource));\n });\n options.i18n.messages = localeMessages$1;\n } catch (e) {\n if (process.env.NODE_ENV !== 'production') {\n warn(\"Cannot parse locale messages via custom blocks.\", e);\n }\n }\n }\n\n var ref = options.i18n;\n var sharedMessages = ref.sharedMessages;\n if (sharedMessages && isPlainObject(sharedMessages)) {\n options.i18n.messages = merge(options.i18n.messages, sharedMessages);\n }\n\n this._i18n = new VueI18n(options.i18n);\n this._i18nWatcher = this._i18n.watchI18nData();\n\n if (options.i18n.sync === undefined || !!options.i18n.sync) {\n this._localeWatcher = this.$i18n.watchLocale();\n }\n\n if (rootI18n) {\n rootI18n.onComponentInstanceCreated(this._i18n);\n }\n } else {\n if (process.env.NODE_ENV !== 'production') {\n warn(\"Cannot be interpreted 'i18n' option.\");\n }\n }\n } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n // root i18n\n this._i18n = this.$root.$i18n;\n } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n // parent i18n\n this._i18n = options.parent.$i18n;\n }\n },\n\n beforeMount: function beforeMount () {\n var options = this.$options;\n options.i18n = options.i18n || (options.__i18n ? {} : null);\n\n if (options.i18n) {\n if (options.i18n instanceof VueI18n) {\n // init locale messages via custom blocks\n this._i18n.subscribeDataChanging(this);\n this._subscribing = true;\n } else if (isPlainObject(options.i18n)) {\n this._i18n.subscribeDataChanging(this);\n this._subscribing = true;\n } else {\n if (process.env.NODE_ENV !== 'production') {\n warn(\"Cannot be interpreted 'i18n' option.\");\n }\n }\n } else if (this.$root && this.$root.$i18n && this.$root.$i18n instanceof VueI18n) {\n this._i18n.subscribeDataChanging(this);\n this._subscribing = true;\n } else if (options.parent && options.parent.$i18n && options.parent.$i18n instanceof VueI18n) {\n this._i18n.subscribeDataChanging(this);\n this._subscribing = true;\n }\n },\n\n beforeDestroy: function beforeDestroy () {\n if (!this._i18n) { return }\n\n var self = this;\n this.$nextTick(function () {\n if (self._subscribing) {\n self._i18n.unsubscribeDataChanging(self);\n delete self._subscribing;\n }\n\n if (self._i18nWatcher) {\n self._i18nWatcher();\n self._i18n.destroyVM();\n delete self._i18nWatcher;\n }\n\n if (self._localeWatcher) {\n self._localeWatcher();\n delete self._localeWatcher;\n }\n });\n }\n};\n\n/* */\n\nvar interpolationComponent = {\n name: 'i18n',\n functional: true,\n props: {\n tag: {\n type: [String, Boolean, Object],\n default: 'span'\n },\n path: {\n type: String,\n required: true\n },\n locale: {\n type: String\n },\n places: {\n type: [Array, Object]\n }\n },\n render: function render (h, ref) {\n var data = ref.data;\n var parent = ref.parent;\n var props = ref.props;\n var slots = ref.slots;\n\n var $i18n = parent.$i18n;\n if (!$i18n) {\n if (process.env.NODE_ENV !== 'production') {\n warn('Cannot find VueI18n instance!');\n }\n return\n }\n\n var path = props.path;\n var locale = props.locale;\n var places = props.places;\n var params = slots();\n var children = $i18n.i(\n path,\n locale,\n onlyHasDefaultPlace(params) || places\n ? useLegacyPlaces(params.default, places)\n : params\n );\n\n var tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span';\n return tag ? h(tag, data, children) : children\n }\n};\n\nfunction onlyHasDefaultPlace (params) {\n var prop;\n for (prop in params) {\n if (prop !== 'default') { return false }\n }\n return Boolean(prop)\n}\n\nfunction useLegacyPlaces (children, places) {\n var params = places ? createParamsFromPlaces(places) : {};\n\n if (!children) { return params }\n\n // Filter empty text nodes\n children = children.filter(function (child) {\n return child.tag || child.text.trim() !== ''\n });\n\n var everyPlace = children.every(vnodeHasPlaceAttribute);\n if (process.env.NODE_ENV !== 'production' && everyPlace) {\n warn('`place` attribute is deprecated in next major version. Please switch to Vue slots.');\n }\n\n return children.reduce(\n everyPlace ? assignChildPlace : assignChildIndex,\n params\n )\n}\n\nfunction createParamsFromPlaces (places) {\n if (process.env.NODE_ENV !== 'production') {\n warn('`places` prop is deprecated in next major version. Please switch to Vue slots.');\n }\n\n return Array.isArray(places)\n ? places.reduce(assignChildIndex, {})\n : Object.assign({}, places)\n}\n\nfunction assignChildPlace (params, child) {\n if (child.data && child.data.attrs && child.data.attrs.place) {\n params[child.data.attrs.place] = child;\n }\n return params\n}\n\nfunction assignChildIndex (params, child, index) {\n params[index] = child;\n return params\n}\n\nfunction vnodeHasPlaceAttribute (vnode) {\n return Boolean(vnode.data && vnode.data.attrs && vnode.data.attrs.place)\n}\n\n/* */\n\nvar numberComponent = {\n name: 'i18n-n',\n functional: true,\n props: {\n tag: {\n type: [String, Boolean, Object],\n default: 'span'\n },\n value: {\n type: Number,\n required: true\n },\n format: {\n type: [String, Object]\n },\n locale: {\n type: String\n }\n },\n render: function render (h, ref) {\n var props = ref.props;\n var parent = ref.parent;\n var data = ref.data;\n\n var i18n = parent.$i18n;\n\n if (!i18n) {\n if (process.env.NODE_ENV !== 'production') {\n warn('Cannot find VueI18n instance!');\n }\n return null\n }\n\n var key = null;\n var options = null;\n\n if (isString(props.format)) {\n key = props.format;\n } else if (isObject(props.format)) {\n if (props.format.key) {\n key = props.format.key;\n }\n\n // Filter out number format options only\n options = Object.keys(props.format).reduce(function (acc, prop) {\n var obj;\n\n if (includes(numberFormatKeys, prop)) {\n return Object.assign({}, acc, ( obj = {}, obj[prop] = props.format[prop], obj ))\n }\n return acc\n }, null);\n }\n\n var locale = props.locale || i18n.locale;\n var parts = i18n._ntp(props.value, locale, key, options);\n\n var values = parts.map(function (part, index) {\n var obj;\n\n var slot = data.scopedSlots && data.scopedSlots[part.type];\n return slot ? slot(( obj = {}, obj[part.type] = part.value, obj.index = index, obj.parts = parts, obj )) : part.value\n });\n\n var tag = (!!props.tag && props.tag !== true) || props.tag === false ? props.tag : 'span';\n return tag\n ? h(tag, {\n attrs: data.attrs,\n 'class': data['class'],\n staticClass: data.staticClass\n }, values)\n : values\n }\n};\n\n/* */\n\nfunction bind (el, binding, vnode) {\n if (!assert(el, vnode)) { return }\n\n t(el, binding, vnode);\n}\n\nfunction update (el, binding, vnode, oldVNode) {\n if (!assert(el, vnode)) { return }\n\n var i18n = vnode.context.$i18n;\n if (localeEqual(el, vnode) &&\n (looseEqual(binding.value, binding.oldValue) &&\n looseEqual(el._localeMessage, i18n.getLocaleMessage(i18n.locale)))) { return }\n\n t(el, binding, vnode);\n}\n\nfunction unbind (el, binding, vnode, oldVNode) {\n var vm = vnode.context;\n if (!vm) {\n warn('Vue instance does not exists in VNode context');\n return\n }\n\n var i18n = vnode.context.$i18n || {};\n if (!binding.modifiers.preserve && !i18n.preserveDirectiveContent) {\n el.textContent = '';\n }\n el._vt = undefined;\n delete el['_vt'];\n el._locale = undefined;\n delete el['_locale'];\n el._localeMessage = undefined;\n delete el['_localeMessage'];\n}\n\nfunction assert (el, vnode) {\n var vm = vnode.context;\n if (!vm) {\n warn('Vue instance does not exists in VNode context');\n return false\n }\n\n if (!vm.$i18n) {\n warn('VueI18n instance does not exists in Vue instance');\n return false\n }\n\n return true\n}\n\nfunction localeEqual (el, vnode) {\n var vm = vnode.context;\n return el._locale === vm.$i18n.locale\n}\n\nfunction t (el, binding, vnode) {\n var ref$1, ref$2;\n\n var value = binding.value;\n\n var ref = parseValue(value);\n var path = ref.path;\n var locale = ref.locale;\n var args = ref.args;\n var choice = ref.choice;\n if (!path && !locale && !args) {\n warn('value type not supported');\n return\n }\n\n if (!path) {\n warn('`path` is required in v-t directive');\n return\n }\n\n var vm = vnode.context;\n if (choice != null) {\n el._vt = el.textContent = (ref$1 = vm.$i18n).tc.apply(ref$1, [ path, choice ].concat( makeParams(locale, args) ));\n } else {\n el._vt = el.textContent = (ref$2 = vm.$i18n).t.apply(ref$2, [ path ].concat( makeParams(locale, args) ));\n }\n el._locale = vm.$i18n.locale;\n el._localeMessage = vm.$i18n.getLocaleMessage(vm.$i18n.locale);\n}\n\nfunction parseValue (value) {\n var path;\n var locale;\n var args;\n var choice;\n\n if (isString(value)) {\n path = value;\n } else if (isPlainObject(value)) {\n path = value.path;\n locale = value.locale;\n args = value.args;\n choice = value.choice;\n }\n\n return { path: path, locale: locale, args: args, choice: choice }\n}\n\nfunction makeParams (locale, args) {\n var params = [];\n\n locale && params.push(locale);\n if (args && (Array.isArray(args) || isPlainObject(args))) {\n params.push(args);\n }\n\n return params\n}\n\nvar Vue;\n\nfunction install (_Vue) {\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production' && install.installed && _Vue === Vue) {\n warn('already installed.');\n return\n }\n install.installed = true;\n\n Vue = _Vue;\n\n var version = (Vue.version && Number(Vue.version.split('.')[0])) || -1;\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production' && version < 2) {\n warn((\"vue-i18n (\" + (install.version) + \") need to use Vue 2.0 or later (Vue: \" + (Vue.version) + \").\"));\n return\n }\n\n extend(Vue);\n Vue.mixin(mixin);\n Vue.directive('t', { bind: bind, update: update, unbind: unbind });\n Vue.component(interpolationComponent.name, interpolationComponent);\n Vue.component(numberComponent.name, numberComponent);\n\n // use simple mergeStrategies to prevent i18n instance lose '__proto__'\n var strats = Vue.config.optionMergeStrategies;\n strats.i18n = function (parentVal, childVal) {\n return childVal === undefined\n ? parentVal\n : childVal\n };\n}\n\n/* */\n\nvar BaseFormatter = function BaseFormatter () {\n this._caches = Object.create(null);\n};\n\nBaseFormatter.prototype.interpolate = function interpolate (message, values) {\n if (!values) {\n return [message]\n }\n var tokens = this._caches[message];\n if (!tokens) {\n tokens = parse(message);\n this._caches[message] = tokens;\n }\n return compile(tokens, values)\n};\n\n\n\nvar RE_TOKEN_LIST_VALUE = /^(?:\\d)+/;\nvar RE_TOKEN_NAMED_VALUE = /^(?:\\w)+/;\n\nfunction parse (format) {\n var tokens = [];\n var position = 0;\n\n var text = '';\n while (position < format.length) {\n var char = format[position++];\n if (char === '{') {\n if (text) {\n tokens.push({ type: 'text', value: text });\n }\n\n text = '';\n var sub = '';\n char = format[position++];\n while (char !== undefined && char !== '}') {\n sub += char;\n char = format[position++];\n }\n var isClosed = char === '}';\n\n var type = RE_TOKEN_LIST_VALUE.test(sub)\n ? 'list'\n : isClosed && RE_TOKEN_NAMED_VALUE.test(sub)\n ? 'named'\n : 'unknown';\n tokens.push({ value: sub, type: type });\n } else if (char === '%') {\n // when found rails i18n syntax, skip text capture\n if (format[(position)] !== '{') {\n text += char;\n }\n } else {\n text += char;\n }\n }\n\n text && tokens.push({ type: 'text', value: text });\n\n return tokens\n}\n\nfunction compile (tokens, values) {\n var compiled = [];\n var index = 0;\n\n var mode = Array.isArray(values)\n ? 'list'\n : isObject(values)\n ? 'named'\n : 'unknown';\n if (mode === 'unknown') { return compiled }\n\n while (index < tokens.length) {\n var token = tokens[index];\n switch (token.type) {\n case 'text':\n compiled.push(token.value);\n break\n case 'list':\n compiled.push(values[parseInt(token.value, 10)]);\n break\n case 'named':\n if (mode === 'named') {\n compiled.push((values)[token.value]);\n } else {\n if (process.env.NODE_ENV !== 'production') {\n warn((\"Type of token '\" + (token.type) + \"' and format of value '\" + mode + \"' don't match!\"));\n }\n }\n break\n case 'unknown':\n if (process.env.NODE_ENV !== 'production') {\n warn(\"Detect 'unknown' type of token!\");\n }\n break\n }\n index++;\n }\n\n return compiled\n}\n\n/* */\n\n/**\n * Path parser\n * - Inspired:\n * Vue.js Path parser\n */\n\n// actions\nvar APPEND = 0;\nvar PUSH = 1;\nvar INC_SUB_PATH_DEPTH = 2;\nvar PUSH_SUB_PATH = 3;\n\n// states\nvar BEFORE_PATH = 0;\nvar IN_PATH = 1;\nvar BEFORE_IDENT = 2;\nvar IN_IDENT = 3;\nvar IN_SUB_PATH = 4;\nvar IN_SINGLE_QUOTE = 5;\nvar IN_DOUBLE_QUOTE = 6;\nvar AFTER_PATH = 7;\nvar ERROR = 8;\n\nvar pathStateMachine = [];\n\npathStateMachine[BEFORE_PATH] = {\n 'ws': [BEFORE_PATH],\n 'ident': [IN_IDENT, APPEND],\n '[': [IN_SUB_PATH],\n 'eof': [AFTER_PATH]\n};\n\npathStateMachine[IN_PATH] = {\n 'ws': [IN_PATH],\n '.': [BEFORE_IDENT],\n '[': [IN_SUB_PATH],\n 'eof': [AFTER_PATH]\n};\n\npathStateMachine[BEFORE_IDENT] = {\n 'ws': [BEFORE_IDENT],\n 'ident': [IN_IDENT, APPEND],\n '0': [IN_IDENT, APPEND],\n 'number': [IN_IDENT, APPEND]\n};\n\npathStateMachine[IN_IDENT] = {\n 'ident': [IN_IDENT, APPEND],\n '0': [IN_IDENT, APPEND],\n 'number': [IN_IDENT, APPEND],\n 'ws': [IN_PATH, PUSH],\n '.': [BEFORE_IDENT, PUSH],\n '[': [IN_SUB_PATH, PUSH],\n 'eof': [AFTER_PATH, PUSH]\n};\n\npathStateMachine[IN_SUB_PATH] = {\n \"'\": [IN_SINGLE_QUOTE, APPEND],\n '\"': [IN_DOUBLE_QUOTE, APPEND],\n '[': [IN_SUB_PATH, INC_SUB_PATH_DEPTH],\n ']': [IN_PATH, PUSH_SUB_PATH],\n 'eof': ERROR,\n 'else': [IN_SUB_PATH, APPEND]\n};\n\npathStateMachine[IN_SINGLE_QUOTE] = {\n \"'\": [IN_SUB_PATH, APPEND],\n 'eof': ERROR,\n 'else': [IN_SINGLE_QUOTE, APPEND]\n};\n\npathStateMachine[IN_DOUBLE_QUOTE] = {\n '\"': [IN_SUB_PATH, APPEND],\n 'eof': ERROR,\n 'else': [IN_DOUBLE_QUOTE, APPEND]\n};\n\n/**\n * Check if an expression is a literal value.\n */\n\nvar literalValueRE = /^\\s?(?:true|false|-?[\\d.]+|'[^']*'|\"[^\"]*\")\\s?$/;\nfunction isLiteral (exp) {\n return literalValueRE.test(exp)\n}\n\n/**\n * Strip quotes from a string\n */\n\nfunction stripQuotes (str) {\n var a = str.charCodeAt(0);\n var b = str.charCodeAt(str.length - 1);\n return a === b && (a === 0x22 || a === 0x27)\n ? str.slice(1, -1)\n : str\n}\n\n/**\n * Determine the type of a character in a keypath.\n */\n\nfunction getPathCharType (ch) {\n if (ch === undefined || ch === null) { return 'eof' }\n\n var code = ch.charCodeAt(0);\n\n switch (code) {\n case 0x5B: // [\n case 0x5D: // ]\n case 0x2E: // .\n case 0x22: // \"\n case 0x27: // '\n return ch\n\n case 0x5F: // _\n case 0x24: // $\n case 0x2D: // -\n return 'ident'\n\n case 0x09: // Tab\n case 0x0A: // Newline\n case 0x0D: // Return\n case 0xA0: // No-break space\n case 0xFEFF: // Byte Order Mark\n case 0x2028: // Line Separator\n case 0x2029: // Paragraph Separator\n return 'ws'\n }\n\n return 'ident'\n}\n\n/**\n * Format a subPath, return its plain form if it is\n * a literal string or number. Otherwise prepend the\n * dynamic indicator (*).\n */\n\nfunction formatSubPath (path) {\n var trimmed = path.trim();\n // invalid leading 0\n if (path.charAt(0) === '0' && isNaN(path)) { return false }\n\n return isLiteral(trimmed) ? stripQuotes(trimmed) : '*' + trimmed\n}\n\n/**\n * Parse a string path into an array of segments\n */\n\nfunction parse$1 (path) {\n var keys = [];\n var index = -1;\n var mode = BEFORE_PATH;\n var subPathDepth = 0;\n var c;\n var key;\n var newChar;\n var type;\n var transition;\n var action;\n var typeMap;\n var actions = [];\n\n actions[PUSH] = function () {\n if (key !== undefined) {\n keys.push(key);\n key = undefined;\n }\n };\n\n actions[APPEND] = function () {\n if (key === undefined) {\n key = newChar;\n } else {\n key += newChar;\n }\n };\n\n actions[INC_SUB_PATH_DEPTH] = function () {\n actions[APPEND]();\n subPathDepth++;\n };\n\n actions[PUSH_SUB_PATH] = function () {\n if (subPathDepth > 0) {\n subPathDepth--;\n mode = IN_SUB_PATH;\n actions[APPEND]();\n } else {\n subPathDepth = 0;\n if (key === undefined) { return false }\n key = formatSubPath(key);\n if (key === false) {\n return false\n } else {\n actions[PUSH]();\n }\n }\n };\n\n function maybeUnescapeQuote () {\n var nextChar = path[index + 1];\n if ((mode === IN_SINGLE_QUOTE && nextChar === \"'\") ||\n (mode === IN_DOUBLE_QUOTE && nextChar === '\"')) {\n index++;\n newChar = '\\\\' + nextChar;\n actions[APPEND]();\n return true\n }\n }\n\n while (mode !== null) {\n index++;\n c = path[index];\n\n if (c === '\\\\' && maybeUnescapeQuote()) {\n continue\n }\n\n type = getPathCharType(c);\n typeMap = pathStateMachine[mode];\n transition = typeMap[type] || typeMap['else'] || ERROR;\n\n if (transition === ERROR) {\n return // parse error\n }\n\n mode = transition[0];\n action = actions[transition[1]];\n if (action) {\n newChar = transition[2];\n newChar = newChar === undefined\n ? c\n : newChar;\n if (action() === false) {\n return\n }\n }\n\n if (mode === AFTER_PATH) {\n return keys\n }\n }\n}\n\n\n\n\n\nvar I18nPath = function I18nPath () {\n this._cache = Object.create(null);\n};\n\n/**\n * External parse that check for a cache hit first\n */\nI18nPath.prototype.parsePath = function parsePath (path) {\n var hit = this._cache[path];\n if (!hit) {\n hit = parse$1(path);\n if (hit) {\n this._cache[path] = hit;\n }\n }\n return hit || []\n};\n\n/**\n * Get path value from path string\n */\nI18nPath.prototype.getPathValue = function getPathValue (obj, path) {\n if (!isObject(obj)) { return null }\n\n var paths = this.parsePath(path);\n if (paths.length === 0) {\n return null\n } else {\n var length = paths.length;\n var last = obj;\n var i = 0;\n while (i < length) {\n var value = last[paths[i]];\n if (value === undefined) {\n return null\n }\n last = value;\n i++;\n }\n\n return last\n }\n};\n\n/* */\n\n\n\nvar htmlTagMatcher = /<\\/?[\\w\\s=\"/.':;#-\\/]+>/;\nvar linkKeyMatcher = /(?:@(?:\\.[a-z]+)?:(?:[\\w\\-_|.]+|\\([\\w\\-_|.]+\\)))/g;\nvar linkKeyPrefixMatcher = /^@(?:\\.([a-z]+))?:/;\nvar bracketsMatcher = /[()]/g;\nvar defaultModifiers = {\n 'upper': function (str) { return str.toLocaleUpperCase(); },\n 'lower': function (str) { return str.toLocaleLowerCase(); },\n 'capitalize': function (str) { return (\"\" + (str.charAt(0).toLocaleUpperCase()) + (str.substr(1))); }\n};\n\nvar defaultFormatter = new BaseFormatter();\n\nvar VueI18n = function VueI18n (options) {\n var this$1 = this;\n if ( options === void 0 ) options = {};\n\n // Auto install if it is not done yet and `window` has `Vue`.\n // To allow users to avoid auto-installation in some cases,\n // this code should be placed here. See #290\n /* istanbul ignore if */\n if (!Vue && typeof window !== 'undefined' && window.Vue) {\n install(window.Vue);\n }\n\n var locale = options.locale || 'en-US';\n var fallbackLocale = options.fallbackLocale === false\n ? false\n : options.fallbackLocale || 'en-US';\n var messages = options.messages || {};\n var dateTimeFormats = options.dateTimeFormats || {};\n var numberFormats = options.numberFormats || {};\n\n this._vm = null;\n this._formatter = options.formatter || defaultFormatter;\n this._modifiers = options.modifiers || {};\n this._missing = options.missing || null;\n this._root = options.root || null;\n this._sync = options.sync === undefined ? true : !!options.sync;\n this._fallbackRoot = options.fallbackRoot === undefined\n ? true\n : !!options.fallbackRoot;\n this._formatFallbackMessages = options.formatFallbackMessages === undefined\n ? false\n : !!options.formatFallbackMessages;\n this._silentTranslationWarn = options.silentTranslationWarn === undefined\n ? false\n : options.silentTranslationWarn;\n this._silentFallbackWarn = options.silentFallbackWarn === undefined\n ? false\n : !!options.silentFallbackWarn;\n this._dateTimeFormatters = {};\n this._numberFormatters = {};\n this._path = new I18nPath();\n this._dataListeners = [];\n this._componentInstanceCreatedListener = options.componentInstanceCreatedListener || null;\n this._preserveDirectiveContent = options.preserveDirectiveContent === undefined\n ? false\n : !!options.preserveDirectiveContent;\n this.pluralizationRules = options.pluralizationRules || {};\n this._warnHtmlInMessage = options.warnHtmlInMessage || 'off';\n this._postTranslation = options.postTranslation || null;\n\n /**\n * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n * @param choicesLength {number} an overall amount of available choices\n * @returns a final choice index\n */\n this.getChoiceIndex = function (choice, choicesLength) {\n var thisPrototype = Object.getPrototypeOf(this$1);\n if (thisPrototype && thisPrototype.getChoiceIndex) {\n var prototypeGetChoiceIndex = (thisPrototype.getChoiceIndex);\n return (prototypeGetChoiceIndex).call(this$1, choice, choicesLength)\n }\n\n // Default (old) getChoiceIndex implementation - english-compatible\n var defaultImpl = function (_choice, _choicesLength) {\n _choice = Math.abs(_choice);\n\n if (_choicesLength === 2) {\n return _choice\n ? _choice > 1\n ? 1\n : 0\n : 1\n }\n\n return _choice ? Math.min(_choice, 2) : 0\n };\n\n if (this$1.locale in this$1.pluralizationRules) {\n return this$1.pluralizationRules[this$1.locale].apply(this$1, [choice, choicesLength])\n } else {\n return defaultImpl(choice, choicesLength)\n }\n };\n\n\n this._exist = function (message, key) {\n if (!message || !key) { return false }\n if (!isNull(this$1._path.getPathValue(message, key))) { return true }\n // fallback for flat key\n if (message[key]) { return true }\n return false\n };\n\n if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n Object.keys(messages).forEach(function (locale) {\n this$1._checkLocaleMessage(locale, this$1._warnHtmlInMessage, messages[locale]);\n });\n }\n\n this._initVM({\n locale: locale,\n fallbackLocale: fallbackLocale,\n messages: messages,\n dateTimeFormats: dateTimeFormats,\n numberFormats: numberFormats\n });\n};\n\nvar prototypeAccessors = { vm: { configurable: true },messages: { configurable: true },dateTimeFormats: { configurable: true },numberFormats: { configurable: true },availableLocales: { configurable: true },locale: { configurable: true },fallbackLocale: { configurable: true },formatFallbackMessages: { configurable: true },missing: { configurable: true },formatter: { configurable: true },silentTranslationWarn: { configurable: true },silentFallbackWarn: { configurable: true },preserveDirectiveContent: { configurable: true },warnHtmlInMessage: { configurable: true },postTranslation: { configurable: true } };\n\nVueI18n.prototype._checkLocaleMessage = function _checkLocaleMessage (locale, level, message) {\n var paths = [];\n\n var fn = function (level, locale, message, paths) {\n if (isPlainObject(message)) {\n Object.keys(message).forEach(function (key) {\n var val = message[key];\n if (isPlainObject(val)) {\n paths.push(key);\n paths.push('.');\n fn(level, locale, val, paths);\n paths.pop();\n paths.pop();\n } else {\n paths.push(key);\n fn(level, locale, val, paths);\n paths.pop();\n }\n });\n } else if (Array.isArray(message)) {\n message.forEach(function (item, index) {\n if (isPlainObject(item)) {\n paths.push((\"[\" + index + \"]\"));\n paths.push('.');\n fn(level, locale, item, paths);\n paths.pop();\n paths.pop();\n } else {\n paths.push((\"[\" + index + \"]\"));\n fn(level, locale, item, paths);\n paths.pop();\n }\n });\n } else if (isString(message)) {\n var ret = htmlTagMatcher.test(message);\n if (ret) {\n var msg = \"Detected HTML in message '\" + message + \"' of keypath '\" + (paths.join('')) + \"' at '\" + locale + \"'. Consider component interpolation with '<i18n>' to avoid XSS. See https://bit.ly/2ZqJzkp\";\n if (level === 'warn') {\n warn(msg);\n } else if (level === 'error') {\n error(msg);\n }\n }\n }\n };\n\n fn(level, locale, message, paths);\n};\n\nVueI18n.prototype._initVM = function _initVM (data) {\n var silent = Vue.config.silent;\n Vue.config.silent = true;\n this._vm = new Vue({ data: data });\n Vue.config.silent = silent;\n};\n\nVueI18n.prototype.destroyVM = function destroyVM () {\n this._vm.$destroy();\n};\n\nVueI18n.prototype.subscribeDataChanging = function subscribeDataChanging (vm) {\n this._dataListeners.push(vm);\n};\n\nVueI18n.prototype.unsubscribeDataChanging = function unsubscribeDataChanging (vm) {\n remove(this._dataListeners, vm);\n};\n\nVueI18n.prototype.watchI18nData = function watchI18nData () {\n var self = this;\n return this._vm.$watch('$data', function () {\n var i = self._dataListeners.length;\n while (i--) {\n Vue.nextTick(function () {\n self._dataListeners[i] && self._dataListeners[i].$forceUpdate();\n });\n }\n }, { deep: true })\n};\n\nVueI18n.prototype.watchLocale = function watchLocale () {\n /* istanbul ignore if */\n if (!this._sync || !this._root) { return null }\n var target = this._vm;\n return this._root.$i18n.vm.$watch('locale', function (val) {\n target.$set(target, 'locale', val);\n target.$forceUpdate();\n }, { immediate: true })\n};\n\nVueI18n.prototype.onComponentInstanceCreated = function onComponentInstanceCreated (newI18n) {\n if (this._componentInstanceCreatedListener) {\n this._componentInstanceCreatedListener(newI18n, this);\n }\n};\n\nprototypeAccessors.vm.get = function () { return this._vm };\n\nprototypeAccessors.messages.get = function () { return looseClone(this._getMessages()) };\nprototypeAccessors.dateTimeFormats.get = function () { return looseClone(this._getDateTimeFormats()) };\nprototypeAccessors.numberFormats.get = function () { return looseClone(this._getNumberFormats()) };\nprototypeAccessors.availableLocales.get = function () { return Object.keys(this.messages).sort() };\n\nprototypeAccessors.locale.get = function () { return this._vm.locale };\nprototypeAccessors.locale.set = function (locale) {\n this._vm.$set(this._vm, 'locale', locale);\n};\n\nprototypeAccessors.fallbackLocale.get = function () { return this._vm.fallbackLocale };\nprototypeAccessors.fallbackLocale.set = function (locale) {\n this._localeChainCache = {};\n this._vm.$set(this._vm, 'fallbackLocale', locale);\n};\n\nprototypeAccessors.formatFallbackMessages.get = function () { return this._formatFallbackMessages };\nprototypeAccessors.formatFallbackMessages.set = function (fallback) { this._formatFallbackMessages = fallback; };\n\nprototypeAccessors.missing.get = function () { return this._missing };\nprototypeAccessors.missing.set = function (handler) { this._missing = handler; };\n\nprototypeAccessors.formatter.get = function () { return this._formatter };\nprototypeAccessors.formatter.set = function (formatter) { this._formatter = formatter; };\n\nprototypeAccessors.silentTranslationWarn.get = function () { return this._silentTranslationWarn };\nprototypeAccessors.silentTranslationWarn.set = function (silent) { this._silentTranslationWarn = silent; };\n\nprototypeAccessors.silentFallbackWarn.get = function () { return this._silentFallbackWarn };\nprototypeAccessors.silentFallbackWarn.set = function (silent) { this._silentFallbackWarn = silent; };\n\nprototypeAccessors.preserveDirectiveContent.get = function () { return this._preserveDirectiveContent };\nprototypeAccessors.preserveDirectiveContent.set = function (preserve) { this._preserveDirectiveContent = preserve; };\n\nprototypeAccessors.warnHtmlInMessage.get = function () { return this._warnHtmlInMessage };\nprototypeAccessors.warnHtmlInMessage.set = function (level) {\n var this$1 = this;\n\n var orgLevel = this._warnHtmlInMessage;\n this._warnHtmlInMessage = level;\n if (orgLevel !== level && (level === 'warn' || level === 'error')) {\n var messages = this._getMessages();\n Object.keys(messages).forEach(function (locale) {\n this$1._checkLocaleMessage(locale, this$1._warnHtmlInMessage, messages[locale]);\n });\n }\n};\n\nprototypeAccessors.postTranslation.get = function () { return this._postTranslation };\nprototypeAccessors.postTranslation.set = function (handler) { this._postTranslation = handler; };\n\nVueI18n.prototype._getMessages = function _getMessages () { return this._vm.messages };\nVueI18n.prototype._getDateTimeFormats = function _getDateTimeFormats () { return this._vm.dateTimeFormats };\nVueI18n.prototype._getNumberFormats = function _getNumberFormats () { return this._vm.numberFormats };\n\nVueI18n.prototype._warnDefault = function _warnDefault (locale, key, result, vm, values, interpolateMode) {\n if (!isNull(result)) { return result }\n if (this._missing) {\n var missingRet = this._missing.apply(null, [locale, key, vm, values]);\n if (isString(missingRet)) {\n return missingRet\n }\n } else {\n if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n warn(\n \"Cannot translate the value of keypath '\" + key + \"'. \" +\n 'Use the value of keypath as default.'\n );\n }\n }\n\n if (this._formatFallbackMessages) {\n var parsedArgs = parseArgs.apply(void 0, values);\n return this._render(key, interpolateMode, parsedArgs.params, key)\n } else {\n return key\n }\n};\n\nVueI18n.prototype._isFallbackRoot = function _isFallbackRoot (val) {\n return !val && !isNull(this._root) && this._fallbackRoot\n};\n\nVueI18n.prototype._isSilentFallbackWarn = function _isSilentFallbackWarn (key) {\n return this._silentFallbackWarn instanceof RegExp\n ? this._silentFallbackWarn.test(key)\n : this._silentFallbackWarn\n};\n\nVueI18n.prototype._isSilentFallback = function _isSilentFallback (locale, key) {\n return this._isSilentFallbackWarn(key) && (this._isFallbackRoot() || locale !== this.fallbackLocale)\n};\n\nVueI18n.prototype._isSilentTranslationWarn = function _isSilentTranslationWarn (key) {\n return this._silentTranslationWarn instanceof RegExp\n ? this._silentTranslationWarn.test(key)\n : this._silentTranslationWarn\n};\n\nVueI18n.prototype._interpolate = function _interpolate (\n locale,\n message,\n key,\n host,\n interpolateMode,\n values,\n visitedLinkStack\n) {\n if (!message) { return null }\n\n var pathRet = this._path.getPathValue(message, key);\n if (Array.isArray(pathRet) || isPlainObject(pathRet)) { return pathRet }\n\n var ret;\n if (isNull(pathRet)) {\n /* istanbul ignore else */\n if (isPlainObject(message)) {\n ret = message[key];\n if (!isString(ret)) {\n if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n warn((\"Value of key '\" + key + \"' is not a string!\"));\n }\n return null\n }\n } else {\n return null\n }\n } else {\n /* istanbul ignore else */\n if (isString(pathRet)) {\n ret = pathRet;\n } else {\n if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallback(locale, key)) {\n warn((\"Value of key '\" + key + \"' is not a string!\"));\n }\n return null\n }\n }\n\n // Check for the existence of links within the translated string\n if (ret.indexOf('@:') >= 0 || ret.indexOf('@.') >= 0) {\n ret = this._link(locale, message, ret, host, 'raw', values, visitedLinkStack);\n }\n\n return this._render(ret, interpolateMode, values, key)\n};\n\nVueI18n.prototype._link = function _link (\n locale,\n message,\n str,\n host,\n interpolateMode,\n values,\n visitedLinkStack\n) {\n var ret = str;\n\n // Match all the links within the local\n // We are going to replace each of\n // them with its translation\n var matches = ret.match(linkKeyMatcher);\n for (var idx in matches) {\n // ie compatible: filter custom array\n // prototype method\n if (!matches.hasOwnProperty(idx)) {\n continue\n }\n var link = matches[idx];\n var linkKeyPrefixMatches = link.match(linkKeyPrefixMatcher);\n var linkPrefix = linkKeyPrefixMatches[0];\n var formatterName = linkKeyPrefixMatches[1];\n\n // Remove the leading @:, @.case: and the brackets\n var linkPlaceholder = link.replace(linkPrefix, '').replace(bracketsMatcher, '');\n\n if (includes(visitedLinkStack, linkPlaceholder)) {\n if (process.env.NODE_ENV !== 'production') {\n warn((\"Circular reference found. \\\"\" + link + \"\\\" is already visited in the chain of \" + (visitedLinkStack.reverse().join(' <- '))));\n }\n return ret\n }\n visitedLinkStack.push(linkPlaceholder);\n\n // Translate the link\n var translated = this._interpolate(\n locale, message, linkPlaceholder, host,\n interpolateMode === 'raw' ? 'string' : interpolateMode,\n interpolateMode === 'raw' ? undefined : values,\n visitedLinkStack\n );\n\n if (this._isFallbackRoot(translated)) {\n if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(linkPlaceholder)) {\n warn((\"Fall back to translate the link placeholder '\" + linkPlaceholder + \"' with root locale.\"));\n }\n /* istanbul ignore if */\n if (!this._root) { throw Error('unexpected error') }\n var root = this._root.$i18n;\n translated = root._translate(\n root._getMessages(), root.locale, root.fallbackLocale,\n linkPlaceholder, host, interpolateMode, values\n );\n }\n translated = this._warnDefault(\n locale, linkPlaceholder, translated, host,\n Array.isArray(values) ? values : [values],\n interpolateMode\n );\n\n if (this._modifiers.hasOwnProperty(formatterName)) {\n translated = this._modifiers[formatterName](translated);\n } else if (defaultModifiers.hasOwnProperty(formatterName)) {\n translated = defaultModifiers[formatterName](translated);\n }\n\n visitedLinkStack.pop();\n\n // Replace the link with the translated\n ret = !translated ? ret : ret.replace(link, translated);\n }\n\n return ret\n};\n\nVueI18n.prototype._render = function _render (message, interpolateMode, values, path) {\n var ret = this._formatter.interpolate(message, values, path);\n\n // If the custom formatter refuses to work - apply the default one\n if (!ret) {\n ret = defaultFormatter.interpolate(message, values, path);\n }\n\n // if interpolateMode is **not** 'string' ('row'),\n // return the compiled data (e.g. ['foo', VNode, 'bar']) with formatter\n return interpolateMode === 'string' && !isString(ret) ? ret.join('') : ret\n};\n\nVueI18n.prototype._appendItemToChain = function _appendItemToChain (chain, item, blocks) {\n var follow = false;\n if (!includes(chain, item)) {\n follow = true;\n if (item) {\n follow = item[item.length - 1] !== '!';\n item = item.replace(/!/g, '');\n chain.push(item);\n if (blocks && blocks[item]) {\n follow = blocks[item];\n }\n }\n }\n return follow\n};\n\nVueI18n.prototype._appendLocaleToChain = function _appendLocaleToChain (chain, locale, blocks) {\n var follow;\n var tokens = locale.split('-');\n do {\n var item = tokens.join('-');\n follow = this._appendItemToChain(chain, item, blocks);\n tokens.splice(-1, 1);\n } while (tokens.length && (follow === true))\n return follow\n};\n\nVueI18n.prototype._appendBlockToChain = function _appendBlockToChain (chain, block, blocks) {\n var follow = true;\n for (var i = 0; (i < block.length) && (isBoolean(follow)); i++) {\n var locale = block[i];\n if (isString(locale)) {\n follow = this._appendLocaleToChain(chain, locale, blocks);\n }\n }\n return follow\n};\n\nVueI18n.prototype._getLocaleChain = function _getLocaleChain (start, fallbackLocale) {\n if (start === '') { return [] }\n\n if (!this._localeChainCache) {\n this._localeChainCache = {};\n }\n\n var chain = this._localeChainCache[start];\n if (!chain) {\n if (!fallbackLocale) {\n fallbackLocale = this.fallbackLocale;\n }\n chain = [];\n\n // first block defined by start\n var block = [start];\n\n // while any intervening block found\n while (isArray(block)) {\n block = this._appendBlockToChain(\n chain,\n block,\n fallbackLocale\n );\n }\n\n // last block defined by default\n var defaults;\n if (isArray(fallbackLocale)) {\n defaults = fallbackLocale;\n } else if (isObject(fallbackLocale)) {\n /* $FlowFixMe */\n if (fallbackLocale['default']) {\n defaults = fallbackLocale['default'];\n } else {\n defaults = null;\n }\n } else {\n defaults = fallbackLocale;\n }\n\n // convert defaults to array\n if (isString(defaults)) {\n block = [defaults];\n } else {\n block = defaults;\n }\n if (block) {\n this._appendBlockToChain(\n chain,\n block,\n null\n );\n }\n this._localeChainCache[start] = chain;\n }\n return chain\n};\n\nVueI18n.prototype._translate = function _translate (\n messages,\n locale,\n fallback,\n key,\n host,\n interpolateMode,\n args\n) {\n var chain = this._getLocaleChain(locale, fallback);\n var res;\n for (var i = 0; i < chain.length; i++) {\n var step = chain[i];\n res =\n this._interpolate(step, messages[step], key, host, interpolateMode, args, [key]);\n if (!isNull(res)) {\n if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n warn((\"Fall back to translate the keypath '\" + key + \"' with '\" + step + \"' locale.\"));\n }\n return res\n }\n }\n return null\n};\n\nVueI18n.prototype._t = function _t (key, _locale, messages, host) {\n var ref;\n\n var values = [], len = arguments.length - 4;\n while ( len-- > 0 ) values[ len ] = arguments[ len + 4 ];\n if (!key) { return '' }\n\n var parsedArgs = parseArgs.apply(void 0, values);\n var locale = parsedArgs.locale || _locale;\n\n var ret = this._translate(\n messages, locale, this.fallbackLocale, key,\n host, 'string', parsedArgs.params\n );\n if (this._isFallbackRoot(ret)) {\n if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n warn((\"Fall back to translate the keypath '\" + key + \"' with root locale.\"));\n }\n /* istanbul ignore if */\n if (!this._root) { throw Error('unexpected error') }\n return (ref = this._root).$t.apply(ref, [ key ].concat( values ))\n } else {\n ret = this._warnDefault(locale, key, ret, host, values, 'string');\n if (this._postTranslation && ret !== null && ret !== undefined) {\n ret = this._postTranslation(ret, key);\n }\n return ret\n }\n};\n\nVueI18n.prototype.t = function t (key) {\n var ref;\n\n var values = [], len = arguments.length - 1;\n while ( len-- > 0 ) values[ len ] = arguments[ len + 1 ];\n return (ref = this)._t.apply(ref, [ key, this.locale, this._getMessages(), null ].concat( values ))\n};\n\nVueI18n.prototype._i = function _i (key, locale, messages, host, values) {\n var ret =\n this._translate(messages, locale, this.fallbackLocale, key, host, 'raw', values);\n if (this._isFallbackRoot(ret)) {\n if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n warn((\"Fall back to interpolate the keypath '\" + key + \"' with root locale.\"));\n }\n if (!this._root) { throw Error('unexpected error') }\n return this._root.$i18n.i(key, locale, values)\n } else {\n return this._warnDefault(locale, key, ret, host, [values], 'raw')\n }\n};\n\nVueI18n.prototype.i = function i (key, locale, values) {\n /* istanbul ignore if */\n if (!key) { return '' }\n\n if (!isString(locale)) {\n locale = this.locale;\n }\n\n return this._i(key, locale, this._getMessages(), null, values)\n};\n\nVueI18n.prototype._tc = function _tc (\n key,\n _locale,\n messages,\n host,\n choice\n) {\n var ref;\n\n var values = [], len = arguments.length - 5;\n while ( len-- > 0 ) values[ len ] = arguments[ len + 5 ];\n if (!key) { return '' }\n if (choice === undefined) {\n choice = 1;\n }\n\n var predefined = { 'count': choice, 'n': choice };\n var parsedArgs = parseArgs.apply(void 0, values);\n parsedArgs.params = Object.assign(predefined, parsedArgs.params);\n values = parsedArgs.locale === null ? [parsedArgs.params] : [parsedArgs.locale, parsedArgs.params];\n return this.fetchChoice((ref = this)._t.apply(ref, [ key, _locale, messages, host ].concat( values )), choice)\n};\n\nVueI18n.prototype.fetchChoice = function fetchChoice (message, choice) {\n /* istanbul ignore if */\n if (!message && !isString(message)) { return null }\n var choices = message.split('|');\n\n choice = this.getChoiceIndex(choice, choices.length);\n if (!choices[choice]) { return message }\n return choices[choice].trim()\n};\n\nVueI18n.prototype.tc = function tc (key, choice) {\n var ref;\n\n var values = [], len = arguments.length - 2;\n while ( len-- > 0 ) values[ len ] = arguments[ len + 2 ];\n return (ref = this)._tc.apply(ref, [ key, this.locale, this._getMessages(), null, choice ].concat( values ))\n};\n\nVueI18n.prototype._te = function _te (key, locale, messages) {\n var args = [], len = arguments.length - 3;\n while ( len-- > 0 ) args[ len ] = arguments[ len + 3 ];\n\n var _locale = parseArgs.apply(void 0, args).locale || locale;\n return this._exist(messages[_locale], key)\n};\n\nVueI18n.prototype.te = function te (key, locale) {\n return this._te(key, this.locale, this._getMessages(), locale)\n};\n\nVueI18n.prototype.getLocaleMessage = function getLocaleMessage (locale) {\n return looseClone(this._vm.messages[locale] || {})\n};\n\nVueI18n.prototype.setLocaleMessage = function setLocaleMessage (locale, message) {\n if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);\n }\n this._vm.$set(this._vm.messages, locale, message);\n};\n\nVueI18n.prototype.mergeLocaleMessage = function mergeLocaleMessage (locale, message) {\n if (this._warnHtmlInMessage === 'warn' || this._warnHtmlInMessage === 'error') {\n this._checkLocaleMessage(locale, this._warnHtmlInMessage, message);\n }\n this._vm.$set(this._vm.messages, locale, merge({}, this._vm.messages[locale] || {}, message));\n};\n\nVueI18n.prototype.getDateTimeFormat = function getDateTimeFormat (locale) {\n return looseClone(this._vm.dateTimeFormats[locale] || {})\n};\n\nVueI18n.prototype.setDateTimeFormat = function setDateTimeFormat (locale, format) {\n this._vm.$set(this._vm.dateTimeFormats, locale, format);\n this._clearDateTimeFormat(locale, format);\n};\n\nVueI18n.prototype.mergeDateTimeFormat = function mergeDateTimeFormat (locale, format) {\n this._vm.$set(this._vm.dateTimeFormats, locale, merge(this._vm.dateTimeFormats[locale] || {}, format));\n this._clearDateTimeFormat(locale, format);\n};\n\nVueI18n.prototype._clearDateTimeFormat = function _clearDateTimeFormat (locale, format) {\n for (var key in format) {\n var id = locale + \"__\" + key;\n\n if (!this._dateTimeFormatters.hasOwnProperty(id)) {\n continue\n }\n\n delete this._dateTimeFormatters[id];\n }\n};\n\nVueI18n.prototype._localizeDateTime = function _localizeDateTime (\n value,\n locale,\n fallback,\n dateTimeFormats,\n key\n) {\n var _locale = locale;\n var formats = dateTimeFormats[_locale];\n\n var chain = this._getLocaleChain(locale, fallback);\n for (var i = 0; i < chain.length; i++) {\n var current = _locale;\n var step = chain[i];\n formats = dateTimeFormats[step];\n _locale = step;\n // fallback locale\n if (isNull(formats) || isNull(formats[key])) {\n if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n warn((\"Fall back to '\" + step + \"' datetime formats from '\" + current + \"' datetime formats.\"));\n }\n } else {\n break\n }\n }\n\n if (isNull(formats) || isNull(formats[key])) {\n return null\n } else {\n var format = formats[key];\n var id = _locale + \"__\" + key;\n var formatter = this._dateTimeFormatters[id];\n if (!formatter) {\n formatter = this._dateTimeFormatters[id] = new Intl.DateTimeFormat(_locale, format);\n }\n return formatter.format(value)\n }\n};\n\nVueI18n.prototype._d = function _d (value, locale, key) {\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production' && !VueI18n.availabilities.dateTimeFormat) {\n warn('Cannot format a Date value due to not supported Intl.DateTimeFormat.');\n return ''\n }\n\n if (!key) {\n return new Intl.DateTimeFormat(locale).format(value)\n }\n\n var ret =\n this._localizeDateTime(value, locale, this.fallbackLocale, this._getDateTimeFormats(), key);\n if (this._isFallbackRoot(ret)) {\n if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n warn((\"Fall back to datetime localization of root: key '\" + key + \"'.\"));\n }\n /* istanbul ignore if */\n if (!this._root) { throw Error('unexpected error') }\n return this._root.$i18n.d(value, key, locale)\n } else {\n return ret || ''\n }\n};\n\nVueI18n.prototype.d = function d (value) {\n var args = [], len = arguments.length - 1;\n while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n\n var locale = this.locale;\n var key = null;\n\n if (args.length === 1) {\n if (isString(args[0])) {\n key = args[0];\n } else if (isObject(args[0])) {\n if (args[0].locale) {\n locale = args[0].locale;\n }\n if (args[0].key) {\n key = args[0].key;\n }\n }\n } else if (args.length === 2) {\n if (isString(args[0])) {\n key = args[0];\n }\n if (isString(args[1])) {\n locale = args[1];\n }\n }\n\n return this._d(value, locale, key)\n};\n\nVueI18n.prototype.getNumberFormat = function getNumberFormat (locale) {\n return looseClone(this._vm.numberFormats[locale] || {})\n};\n\nVueI18n.prototype.setNumberFormat = function setNumberFormat (locale, format) {\n this._vm.$set(this._vm.numberFormats, locale, format);\n this._clearNumberFormat(locale, format);\n};\n\nVueI18n.prototype.mergeNumberFormat = function mergeNumberFormat (locale, format) {\n this._vm.$set(this._vm.numberFormats, locale, merge(this._vm.numberFormats[locale] || {}, format));\n this._clearNumberFormat(locale, format);\n};\n\nVueI18n.prototype._clearNumberFormat = function _clearNumberFormat (locale, format) {\n for (var key in format) {\n var id = locale + \"__\" + key;\n\n if (!this._numberFormatters.hasOwnProperty(id)) {\n continue\n }\n\n delete this._numberFormatters[id];\n }\n};\n\nVueI18n.prototype._getNumberFormatter = function _getNumberFormatter (\n value,\n locale,\n fallback,\n numberFormats,\n key,\n options\n) {\n var _locale = locale;\n var formats = numberFormats[_locale];\n\n var chain = this._getLocaleChain(locale, fallback);\n for (var i = 0; i < chain.length; i++) {\n var current = _locale;\n var step = chain[i];\n formats = numberFormats[step];\n _locale = step;\n // fallback locale\n if (isNull(formats) || isNull(formats[key])) {\n if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n warn((\"Fall back to '\" + step + \"' number formats from '\" + current + \"' number formats.\"));\n }\n } else {\n break\n }\n }\n\n if (isNull(formats) || isNull(formats[key])) {\n return null\n } else {\n var format = formats[key];\n\n var formatter;\n if (options) {\n // If options specified - create one time number formatter\n formatter = new Intl.NumberFormat(_locale, Object.assign({}, format, options));\n } else {\n var id = _locale + \"__\" + key;\n formatter = this._numberFormatters[id];\n if (!formatter) {\n formatter = this._numberFormatters[id] = new Intl.NumberFormat(_locale, format);\n }\n }\n return formatter\n }\n};\n\nVueI18n.prototype._n = function _n (value, locale, key, options) {\n /* istanbul ignore if */\n if (!VueI18n.availabilities.numberFormat) {\n if (process.env.NODE_ENV !== 'production') {\n warn('Cannot format a Number value due to not supported Intl.NumberFormat.');\n }\n return ''\n }\n\n if (!key) {\n var nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options);\n return nf.format(value)\n }\n\n var formatter = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options);\n var ret = formatter && formatter.format(value);\n if (this._isFallbackRoot(ret)) {\n if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {\n warn((\"Fall back to number localization of root: key '\" + key + \"'.\"));\n }\n /* istanbul ignore if */\n if (!this._root) { throw Error('unexpected error') }\n return this._root.$i18n.n(value, Object.assign({}, { key: key, locale: locale }, options))\n } else {\n return ret || ''\n }\n};\n\nVueI18n.prototype.n = function n (value) {\n var args = [], len = arguments.length - 1;\n while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];\n\n var locale = this.locale;\n var key = null;\n var options = null;\n\n if (args.length === 1) {\n if (isString(args[0])) {\n key = args[0];\n } else if (isObject(args[0])) {\n if (args[0].locale) {\n locale = args[0].locale;\n }\n if (args[0].key) {\n key = args[0].key;\n }\n\n // Filter out number format options only\n options = Object.keys(args[0]).reduce(function (acc, key) {\n var obj;\n\n if (includes(numberFormatKeys, key)) {\n return Object.assign({}, acc, ( obj = {}, obj[key] = args[0][key], obj ))\n }\n return acc\n }, null);\n }\n } else if (args.length === 2) {\n if (isString(args[0])) {\n key = args[0];\n }\n if (isString(args[1])) {\n locale = args[1];\n }\n }\n\n return this._n(value, locale, key, options)\n};\n\nVueI18n.prototype._ntp = function _ntp (value, locale, key, options) {\n /* istanbul ignore if */\n if (!VueI18n.availabilities.numberFormat) {\n if (process.env.NODE_ENV !== 'production') {\n warn('Cannot format to parts a Number value due to not supported Intl.NumberFormat.');\n }\n return []\n }\n\n if (!key) {\n var nf = !options ? new Intl.NumberFormat(locale) : new Intl.NumberFormat(locale, options);\n return nf.formatToParts(value)\n }\n\n var formatter = this._getNumberFormatter(value, locale, this.fallbackLocale, this._getNumberFormats(), key, options);\n var ret = formatter && formatter.formatToParts(value);\n if (this._isFallbackRoot(ret)) {\n if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key)) {\n warn((\"Fall back to format number to parts of root: key '\" + key + \"' .\"));\n }\n /* istanbul ignore if */\n if (!this._root) { throw Error('unexpected error') }\n return this._root.$i18n._ntp(value, locale, key, options)\n } else {\n return ret || []\n }\n};\n\nObject.defineProperties( VueI18n.prototype, prototypeAccessors );\n\nvar availabilities;\n// $FlowFixMe\nObject.defineProperty(VueI18n, 'availabilities', {\n get: function get () {\n if (!availabilities) {\n var intlDefined = typeof Intl !== 'undefined';\n availabilities = {\n dateTimeFormat: intlDefined && typeof Intl.DateTimeFormat !== 'undefined',\n numberFormat: intlDefined && typeof Intl.NumberFormat !== 'undefined'\n };\n }\n\n return availabilities\n }\n});\n\nVueI18n.install = install;\nVueI18n.version = '8.20.0';\n\nexport default VueI18n;\n","import { render, staticRenderFns } from \"./CodeAce.vue?vue&type=template&id=37ad02ad&\"\nimport script from \"./CodeAce.vue?vue&type=script&lang=js&\"\nexport * from \"./CodeAce.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CodeAce.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"/Users/lang/Develop/echarts-examples/node_modules/vue-hot-reload-api/dist/index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('37ad02ad')) {\n api.createRecord('37ad02ad', component.options)\n } else {\n api.reload('37ad02ad', component.options)\n }\n module.hot.accept(\"./CodeAce.vue?vue&type=template&id=37ad02ad&\", function () {\n api.rerender('37ad02ad', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/editor/CodeAce.vue\"\nexport default component.exports","import { render, staticRenderFns } from \"./CodeMonaco.vue?vue&type=template&id=f5fd2472&\"\nimport script from \"./CodeMonaco.vue?vue&type=script&lang=js&\"\nexport * from \"./CodeMonaco.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CodeMonaco.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"/Users/lang/Develop/echarts-examples/node_modules/vue-hot-reload-api/dist/index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('f5fd2472')) {\n api.createRecord('f5fd2472', component.options)\n } else {\n api.reload('f5fd2472', component.options)\n }\n module.hot.accept(\"./CodeMonaco.vue?vue&type=template&id=f5fd2472&\", function () {\n api.rerender('f5fd2472', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/editor/CodeMonaco.vue\"\nexport default component.exports","import { render, staticRenderFns } from \"./Editor.vue?vue&type=template&id=3a753434&\"\nimport script from \"./Editor.vue?vue&type=script&lang=js&\"\nexport * from \"./Editor.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Editor.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"/Users/lang/Develop/echarts-examples/node_modules/vue-hot-reload-api/dist/index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('3a753434')) {\n api.createRecord('3a753434', component.options)\n } else {\n api.reload('3a753434', component.options)\n }\n module.hot.accept(\"./Editor.vue?vue&type=template&id=3a753434&\", function () {\n api.rerender('3a753434', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/editor/Editor.vue\"\nexport default component.exports","import { render, staticRenderFns } from \"./FullCodePreview.vue?vue&type=template&id=04a90f3a&\"\nimport script from \"./FullCodePreview.vue?vue&type=script&lang=js&\"\nexport * from \"./FullCodePreview.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FullCodePreview.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"/Users/lang/Develop/echarts-examples/node_modules/vue-hot-reload-api/dist/index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('04a90f3a')) {\n api.createRecord('04a90f3a', component.options)\n } else {\n api.reload('04a90f3a', component.options)\n }\n module.hot.accept(\"./FullCodePreview.vue?vue&type=template&id=04a90f3a&\", function () {\n api.rerender('04a90f3a', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/editor/FullCodePreview.vue\"\nexport default component.exports","import { render, staticRenderFns } from \"./Preview.vue?vue&type=template&id=66bf6e1f&\"\nimport script from \"./Preview.vue?vue&type=script&lang=js&\"\nexport * from \"./Preview.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Preview.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"/Users/lang/Develop/echarts-examples/node_modules/vue-hot-reload-api/dist/index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('66bf6e1f')) {\n api.createRecord('66bf6e1f', component.options)\n } else {\n api.reload('66bf6e1f', component.options)\n }\n module.hot.accept(\"./Preview.vue?vue&type=template&id=66bf6e1f&\", function () {\n api.rerender('66bf6e1f', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/editor/Preview.vue\"\nexport default component.exports","import { render, staticRenderFns } from \"./View.vue?vue&type=template&id=3d6bc75e&\"\nimport script from \"./View.vue?vue&type=script&lang=js&\"\nexport * from \"./View.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"/Users/lang/Develop/echarts-examples/node_modules/vue-hot-reload-api/dist/index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('3d6bc75e')) {\n api.createRecord('3d6bc75e', component.options)\n } else {\n api.reload('3d6bc75e', component.options)\n }\n module.hot.accept(\"./View.vue?vue&type=template&id=3d6bc75e&\", function () {\n api.rerender('3d6bc75e', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/editor/View.vue\"\nexport default component.exports","import { render, staticRenderFns } from \"./ExampleCard.vue?vue&type=template&id=01229e96&\"\nimport script from \"./ExampleCard.vue?vue&type=script&lang=js&\"\nexport * from \"./ExampleCard.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ExampleCard.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"/Users/lang/Develop/echarts-examples/node_modules/vue-hot-reload-api/dist/index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('01229e96')) {\n api.createRecord('01229e96', component.options)\n } else {\n api.reload('01229e96', component.options)\n }\n module.hot.accept(\"./ExampleCard.vue?vue&type=template&id=01229e96&\", function () {\n api.rerender('01229e96', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/explore/ExampleCard.vue\"\nexport default component.exports","import { render, staticRenderFns } from \"./Explore.vue?vue&type=template&id=050c84ae&\"\nimport script from \"./Explore.vue?vue&type=script&lang=js&\"\nexport * from \"./Explore.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Explore.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\n/* hot reload */\nif (module.hot) {\n var api = require(\"/Users/lang/Develop/echarts-examples/node_modules/vue-hot-reload-api/dist/index.js\")\n api.install(require('vue'))\n if (api.compatible) {\n module.hot.accept()\n if (!api.isRecorded('050c84ae')) {\n api.createRecord('050c84ae', component.options)\n } else {\n api.reload('050c84ae', component.options)\n }\n module.hot.accept(\"./Explore.vue?vue&type=template&id=050c84ae&\", function () {\n api.rerender('050c84ae', {\n render: render,\n staticRenderFns: staticRenderFns\n })\n })\n }\n}\ncomponent.options.__file = \"src/explore/Explore.vue\"\nexport default component.exports","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodeAce.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodeAce.vue?vue&type=script&lang=js&\"","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodeMonaco.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodeMonaco.vue?vue&type=script&lang=js&\"","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Editor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Editor.vue?vue&type=script&lang=js&\"","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FullCodePreview.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FullCodePreview.vue?vue&type=script&lang=js&\"","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Preview.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Preview.vue?vue&type=script&lang=js&\"","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./View.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./View.vue?vue&type=script&lang=js&\"","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ExampleCard.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ExampleCard.vue?vue&type=script&lang=js&\"","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Explore.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Explore.vue?vue&type=script&lang=js&\"","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", {\n directives: [\n {\n name: \"loading\",\n rawName: \"v-loading\",\n value: _vm.loading,\n expression: \"loading\"\n }\n ],\n staticClass: \"ace-editor-main\"\n })\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", {\n directives: [\n {\n name: \"loading\",\n rawName: \"v-loading\",\n value: _vm.loading,\n expression: \"loading\"\n }\n ],\n staticClass: \"monaco-editor-main\"\n })\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n { attrs: { id: \"main-container\" } },\n [\n !_vm.shared.isMobile\n ? _c(\n \"div\",\n {\n style: { width: _vm.leftContainerSize + \"%\" },\n attrs: { id: \"editor-left-container\" }\n },\n [\n _c(\n \"el-tabs\",\n {\n attrs: { type: \"border-card\" },\n model: {\n value: _vm.currentTab,\n callback: function($$v) {\n _vm.currentTab = $$v\n },\n expression: \"currentTab\"\n }\n },\n [\n _c(\n \"el-tab-pane\",\n {\n attrs: {\n label: _vm.$t(\"editor.tabEditor\"),\n name: \"code-editor\"\n }\n },\n [\n _c(\n \"el-container\",\n [\n _c(\n \"el-header\",\n { attrs: { id: \"editor-control-panel\" } },\n [\n _c(\n \"div\",\n { attrs: { id: \"code-info\" } },\n [\n _vm.shared.editorStatus.message\n ? [\n _c(\n \"span\",\n { staticClass: \"code-info-time\" },\n [_vm._v(_vm._s(_vm.currentTime))]\n ),\n _vm._v(\" \"),\n _c(\n \"span\",\n {\n class:\n \"code-info-type-\" +\n _vm.shared.editorStatus.type\n },\n [\n _vm._v(\n _vm._s(\n _vm.shared.editorStatus.message\n )\n )\n ]\n )\n ]\n : _vm._e()\n ],\n 2\n ),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"editor-controls\" }, [\n _c(\n \"a\",\n {\n staticClass: \"btn btn-default btn-sm\",\n attrs: { href: \"javascript:;\" },\n on: { click: _vm.disposeAndRun }\n },\n [_vm._v(_vm._s(_vm.$t(\"editor.run\")))]\n )\n ])\n ]\n ),\n _vm._v(\" \"),\n _c(\n \"el-main\",\n [\n _vm.shared.typeCheck\n ? _c(\"CodeMonaco\", {\n attrs: {\n id: \"code-panel\",\n initialCode: _vm.initialCode\n }\n })\n : _c(\"CodeAce\", {\n attrs: {\n id: \"code-panel\",\n initialCode: _vm.initialCode\n }\n })\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"el-tab-pane\",\n {\n attrs: {\n label: _vm.$t(\"editor.tabFullCodePreview\"),\n name: \"full-code\",\n lazy: true\n }\n },\n [\n _c(\n \"el-container\",\n { staticStyle: { width: \"100%\", height: \"100%\" } },\n [\n _c(\n \"el-header\",\n { attrs: { id: \"full-code-generate-config\" } },\n [\n _c(\"span\", {\n staticClass: \"full-code-generate-config-label\"\n }),\n _vm._v(\" \"),\n _c(\"el-switch\", {\n staticClass: \"enable-decal\",\n attrs: {\n \"active-text\": _vm.$t(\"editor.minimalBundle\"),\n \"inactive-text\": \"\"\n },\n model: {\n value: _vm.fullCodeConfig.minimal,\n callback: function($$v) {\n _vm.$set(_vm.fullCodeConfig, \"minimal\", $$v)\n },\n expression: \"fullCodeConfig.minimal\"\n }\n }),\n _vm._v(\" \"),\n _c(\"el-switch\", {\n staticClass: \"enable-decal\",\n attrs: {\n \"active-text\": \"ES Modules\",\n \"inactive-text\": \"\"\n },\n model: {\n value: _vm.fullCodeConfig.esm,\n callback: function($$v) {\n _vm.$set(_vm.fullCodeConfig, \"esm\", $$v)\n },\n expression: \"fullCodeConfig.esm\"\n }\n })\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"el-main\",\n [\n _c(\"FullCodePreview\", {\n attrs: { code: _vm.fullCode }\n })\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"el-tab-pane\",\n {\n attrs: {\n label: _vm.$t(\"editor.tabOptionPreview\"),\n name: \"full-option\"\n }\n },\n [_c(\"div\", { attrs: { id: \"option-outline\" } })]\n )\n ],\n 1\n )\n ],\n 1\n )\n : _vm._e(),\n _vm._v(\" \"),\n !_vm.shared.isMobile\n ? _c(\"div\", {\n staticClass: \"handler\",\n style: { left: _vm.leftContainerSize + \"%\" },\n attrs: { id: \"h-handler\" },\n on: { mousedown: _vm.onSplitterDragStart }\n })\n : _vm._e(),\n _vm._v(\" \"),\n _c(\"Preview\", {\n ref: \"preview\",\n staticClass: \"right-container\",\n style: {\n width: 100 - _vm.leftContainerSize + \"%\",\n left: _vm.leftContainerSize + \"%\"\n },\n attrs: { inEditor: true }\n })\n ],\n 1\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", {\n directives: [\n {\n name: \"loading\",\n rawName: \"v-loading\",\n value: _vm.loading,\n expression: \"loading\"\n }\n ],\n staticClass: \"full-code-preview\"\n })\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\n \"div\",\n { class: [_vm.inEditor && !_vm.shared.isMobile ? \"\" : \"full\"] },\n [\n _c(\n \"div\",\n {\n directives: [\n {\n name: \"loading\",\n rawName: \"v-loading\",\n value: _vm.loading,\n expression: \"loading\"\n }\n ],\n staticClass: \"right-panel\",\n style: { background: _vm.backgroundColor },\n attrs: { id: \"chart-panel\" }\n },\n [_c(\"div\", { staticClass: \"chart-container\" })]\n ),\n _vm._v(\" \"),\n _c(\n \"div\",\n { attrs: { id: \"tool-panel\" } },\n [\n _c(\n \"div\",\n { staticClass: \"left-panel\" },\n [\n _c(\"el-switch\", {\n staticClass: \"dark-mode\",\n attrs: {\n \"active-color\": \"#181432\",\n \"active-text\": _vm.$t(\"editor.darkMode\"),\n \"inactive-text\": \"\"\n },\n model: {\n value: _vm.shared.darkMode,\n callback: function($$v) {\n _vm.$set(_vm.shared, \"darkMode\", $$v)\n },\n expression: \"shared.darkMode\"\n }\n }),\n _vm._v(\" \"),\n !_vm.isGL\n ? _c(\"el-switch\", {\n staticClass: \"enable-decal\",\n attrs: {\n \"active-text\": _vm.$t(\"editor.enableDecal\"),\n \"inactive-text\": \"\"\n },\n model: {\n value: _vm.shared.enableDecal,\n callback: function($$v) {\n _vm.$set(_vm.shared, \"enableDecal\", $$v)\n },\n expression: \"shared.enableDecal\"\n }\n })\n : _vm._e(),\n _vm._v(\" \"),\n !_vm.isGL\n ? _c(\n \"el-popover\",\n {\n staticStyle: { \"margin-top\": \"3px\" },\n attrs: {\n placement: \"bottom\",\n width: \"450\",\n trigger: \"click\"\n }\n },\n [\n _c(\n \"div\",\n { staticClass: \"render-config-container\" },\n [\n _c(\n \"el-row\",\n {\n attrs: {\n gutter: 2,\n type: \"flex\",\n align: \"middle\"\n }\n },\n [\n _c(\n \"el-col\",\n { attrs: { span: 12 } },\n [\n _c(\"label\", { staticClass: \"tool-label\" }, [\n _vm._v(_vm._s(_vm.$t(\"editor.renderer\")))\n ]),\n _vm._v(\" \"),\n _c(\n \"el-radio-group\",\n {\n staticStyle: {\n \"text-transform\": \"uppercase\"\n },\n attrs: { size: \"mini\" },\n model: {\n value: _vm.shared.renderer,\n callback: function($$v) {\n _vm.$set(_vm.shared, \"renderer\", $$v)\n },\n expression: \"shared.renderer\"\n }\n },\n [\n _c(\"el-radio-button\", {\n attrs: { label: \"svg\" }\n }),\n _vm._v(\" \"),\n _c(\"el-radio-button\", {\n attrs: { label: \"canvas\" }\n })\n ],\n 1\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"el-col\",\n { attrs: { span: 12 } },\n [\n _vm.shared.renderer === \"canvas\"\n ? _c(\"el-switch\", {\n attrs: {\n \"active-text\": _vm.$t(\n \"editor.useDirtyRect\"\n ),\n \"inactive-text\": \"\"\n },\n model: {\n value: _vm.shared.useDirtyRect,\n callback: function($$v) {\n _vm.$set(\n _vm.shared,\n \"useDirtyRect\",\n $$v\n )\n },\n expression: \"shared.useDirtyRect\"\n }\n })\n : _vm._e()\n ],\n 1\n )\n ],\n 1\n )\n ],\n 1\n ),\n _vm._v(\" \"),\n _c(\n \"span\",\n {\n staticClass: \"render-config-trigger\",\n attrs: { slot: \"reference\" },\n slot: \"reference\"\n },\n [\n _c(\"i\", {\n staticClass: \"el-icon-setting el-icon--left\"\n }),\n _vm._v(_vm._s(_vm.$t(\"editor.renderCfgTitle\")))\n ]\n )\n ]\n )\n : _vm._e()\n ],\n 1\n ),\n _vm._v(\" \"),\n _vm.inEditor\n ? [\n !_vm.shared.isMobile\n ? _c(\n \"button\",\n {\n staticClass: \"download btn btn-sm\",\n on: { click: _vm.downloadExample }\n },\n [_vm._v(_vm._s(_vm.$t(\"editor.download\")))]\n )\n : _vm._e(),\n _vm._v(\" \"),\n _c(\n \"a\",\n {\n staticClass: \"screenshot\",\n attrs: { target: \"_blank\" },\n on: { click: _vm.screenshot }\n },\n [_c(\"i\", { staticClass: \"el-icon-camera-solid\" })]\n )\n ]\n : _c(\n \"a\",\n {\n staticClass: \"edit btn btn-sm\",\n attrs: { href: _vm.editLink, target: \"_blank\" }\n },\n [_vm._v(_vm._s(_vm.$t(\"editor.edit\")))]\n )\n ],\n 2\n )\n ]\n )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"preview\")\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { staticClass: \"example-list-item\" }, [\n _c(\n \"a\",\n {\n staticClass: \"example-link\",\n attrs: { target: \"_blank\", href: _vm.exampleLink }\n },\n [\n _c(\"img\", {\n staticClass: \"chart-area\",\n attrs: {\n src: require(\"../asset/placeholder.jpg\"),\n \"data-src\": _vm.screenshotURL\n }\n }),\n _vm._v(\" \"),\n _c(\"h4\", { staticClass: \"example-title\" }, [_vm._v(_vm._s(_vm.title))]),\n _vm._v(\" \"),\n _vm.showSubtitle\n ? _c(\"h5\", { staticClass: \"example-subtitle\" }, [\n _vm._v(_vm._s(_vm.subtitle))\n ])\n : _vm._e()\n ]\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { attrs: { id: \"example-explore\" } }, [\n _c(\"div\", { attrs: { id: \"left-container\" } }, [\n _c(\n \"div\",\n { attrs: { id: \"left-chart-nav\" } },\n [\n _c(\n \"scrollactive\",\n {\n attrs: {\n \"active-class\": \"active\",\n offset: 80,\n duration: 500,\n \"scroll-container-selector\": \"#example-explore\",\n \"bezier-easing-value\": \".5,0,.35,1\"\n },\n on: { itemchanged: _vm.onActiveNavChanged }\n },\n [\n _c(\n \"ul\",\n _vm._l(_vm.EXAMPLE_CATEGORIES, function(category) {\n return _c(\"li\", { key: category }, [\n _c(\n \"a\",\n {\n staticClass: \"left-chart-nav-link scrollactive-item\",\n attrs: {\n id: \"left-chart-nav-\" + category,\n href: \"#chart-type-\" + category\n }\n },\n [\n _c(\"span\", {\n staticClass: \"chart-icon\",\n domProps: { innerHTML: _vm._s(_vm.icons[category]) }\n }),\n _vm._v(\" \"),\n _c(\"span\", { staticClass: \"chart-name\" }, [\n _vm._v(_vm._s(_vm.$t(\"chartTypes.\" + category)))\n ])\n ]\n )\n ])\n }),\n 0\n )\n ]\n )\n ],\n 1\n )\n ]),\n _vm._v(\" \"),\n _c(\"div\", { attrs: { id: \"explore-container\" } }, [\n _c(\n \"div\",\n { staticClass: \"example-list-panel\" },\n _vm._l(_vm.exampleList, function(categoryObj) {\n return _c(\"div\", { key: categoryObj.category }, [\n _c(\n \"h3\",\n {\n staticClass: \"chart-type-head\",\n attrs: { id: \"chart-type-\" + categoryObj.category }\n },\n [\n _vm._v(\n \"\\n \" +\n _vm._s(_vm.$t(\"chartTypes.\" + categoryObj.category)) +\n \"\\n \"\n ),\n _c(\"span\", [_vm._v(_vm._s(categoryObj.category))])\n ]\n ),\n _vm._v(\" \"),\n _c(\n \"div\",\n {\n staticClass: \"row\",\n attrs: { id: \"chart-row-\" + categoryObj.category }\n },\n _vm._l(categoryObj.examples, function(exampleItem) {\n return _c(\n \"div\",\n {\n key: exampleItem.id,\n staticClass: \"col-xl-2 col-lg-3 col-md-4 col-sm-6\"\n },\n [_c(\"ExampleCard\", { attrs: { example: exampleItem } })],\n 1\n )\n }),\n 0\n )\n ])\n }),\n 0\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"div\",\n { attrs: { id: \"toolbar\" } },\n [\n _c(\"el-switch\", {\n attrs: {\n \"active-color\": \"#181432\",\n \"active-text\": _vm.$t(\"editor.darkMode\"),\n \"inactive-text\": \"\"\n },\n model: {\n value: _vm.shared.darkMode,\n callback: function($$v) {\n _vm.$set(_vm.shared, \"darkMode\", $$v)\n },\n expression: \"shared.darkMode\"\n }\n })\n ],\n 1\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","/* globals __VUE_SSR_CONTEXT__ */\n\n// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).\n// This module is a runtime utility for cleaner component module output and will\n// be included in the final webpack user bundle.\n\nexport default function normalizeComponent (\n scriptExports,\n render,\n staticRenderFns,\n functionalTemplate,\n injectStyles,\n scopeId,\n moduleIdentifier, /* server only */\n shadowMode /* vue-cli only */\n) {\n // Vue.extend constructor export interop\n var options = typeof scriptExports === 'function'\n ? scriptExports.options\n : scriptExports\n\n // render functions\n if (render) {\n options.render = render\n options.staticRenderFns = staticRenderFns\n options._compiled = true\n }\n\n // functional template\n if (functionalTemplate) {\n options.functional = true\n }\n\n // scopedId\n if (scopeId) {\n options._scopeId = 'data-v-' + scopeId\n }\n\n var hook\n if (moduleIdentifier) { // server build\n hook = function (context) {\n // 2.3 injection\n context =\n context || // cached call\n (this.$vnode && this.$vnode.ssrContext) || // stateful\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional\n // 2.2 with runInNewContext: true\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\n context = __VUE_SSR_CONTEXT__\n }\n // inject component styles\n if (injectStyles) {\n injectStyles.call(this, context)\n }\n // register component module identifier for async chunk inferrence\n if (context && context._registeredComponents) {\n context._registeredComponents.add(moduleIdentifier)\n }\n }\n // used by ssr in case component is cached and beforeCreate\n // never gets called\n options._ssrRegister = hook\n } else if (injectStyles) {\n hook = shadowMode\n ? function () {\n injectStyles.call(\n this,\n (options.functional ? this.parent : this).$root.$options.shadowRoot\n )\n }\n : injectStyles\n }\n\n if (hook) {\n if (options.functional) {\n // for template-only hot-reload because in that case the render fn doesn't\n // go through the normalizer\n options._injectStyles = hook\n // register for functional component in vue file\n var originalRender = options.render\n options.render = function renderWithStyleInjection (h, context) {\n hook.call(context)\n return originalRender(h, context)\n }\n } else {\n // inject component registration as beforeCreate hook\n var existing = options.beforeCreate\n options.beforeCreate = existing\n ? [].concat(existing, hook)\n : [hook]\n }\n }\n\n return {\n exports: scriptExports,\n options: options\n }\n}\n","!(function (t, e) {\n 'object' == typeof exports && 'object' == typeof module\n ? (module.exports = e())\n : 'function' == typeof define && define.amd\n ? define([], e)\n : 'object' == typeof exports\n ? (exports['vue-scrollactive'] = e())\n : (t.vueScrollactive = e());\n})('undefined' != typeof self ? self : this, function () {\n return (function (t) {\n var e = {};\n function r(n) {\n if (e[n]) return e[n].exports;\n var o = (e[n] = { i: n, l: !1, exports: {} });\n return t[n].call(o.exports, o, o.exports, r), (o.l = !0), o.exports;\n }\n return (\n (r.m = t),\n (r.c = e),\n (r.d = function (t, e, n) {\n r.o(t, e) || Object.defineProperty(t, e, { enumerable: !0, get: n });\n }),\n (r.r = function (t) {\n 'undefined' != typeof Symbol &&\n Symbol.toStringTag &&\n Object.defineProperty(t, Symbol.toStringTag, { value: 'Module' }),\n Object.defineProperty(t, '__esModule', { value: !0 });\n }),\n (r.t = function (t, e) {\n if ((1 & e && (t = r(t)), 8 & e)) return t;\n if (4 & e && 'object' == typeof t && t && t.__esModule) return t;\n var n = Object.create(null);\n if (\n (r.r(n),\n Object.defineProperty(n, 'default', { enumerable: !0, value: t }),\n 2 & e && 'string' != typeof t)\n )\n for (var o in t)\n r.d(\n n,\n o,\n function (e) {\n return t[e];\n }.bind(null, o)\n );\n return n;\n }),\n (r.n = function (t) {\n var e =\n t && t.__esModule\n ? function () {\n return t.default;\n }\n : function () {\n return t;\n };\n return r.d(e, 'a', e), e;\n }),\n (r.o = function (t, e) {\n return Object.prototype.hasOwnProperty.call(t, e);\n }),\n (r.p = '/dist/'),\n r((r.s = 1))\n );\n })([\n function (t, e) {\n var r = 'function' == typeof Float32Array;\n function n(t, e) {\n return 1 - 3 * e + 3 * t;\n }\n function o(t, e) {\n return 3 * e - 6 * t;\n }\n function i(t) {\n return 3 * t;\n }\n function s(t, e, r) {\n return ((n(e, r) * t + o(e, r)) * t + i(e)) * t;\n }\n function l(t, e, r) {\n return 3 * n(e, r) * t * t + 2 * o(e, r) * t + i(e);\n }\n function a(t) {\n return t;\n }\n t.exports = function (t, e, n, o) {\n if (!(0 <= t && t <= 1 && 0 <= n && n <= 1))\n throw new Error('bezier x values must be in [0, 1] range');\n if (t === e && n === o) return a;\n for (var i = r ? new Float32Array(11) : new Array(11), c = 0; c < 11; ++c)\n i[c] = s(0.1 * c, t, n);\n function u(e) {\n for (var r = 0, o = 1; 10 !== o && i[o] <= e; ++o) r += 0.1;\n --o;\n var a = r + 0.1 * ((e - i[o]) / (i[o + 1] - i[o])),\n c = l(a, t, n);\n return c >= 0.001\n ? (function (t, e, r, n) {\n for (var o = 0; o < 4; ++o) {\n var i = l(e, r, n);\n if (0 === i) return e;\n e -= (s(e, r, n) - t) / i;\n }\n return e;\n })(e, a, t, n)\n : 0 === c\n ? a\n : (function (t, e, r, n, o) {\n var i,\n l,\n a = 0;\n do {\n (i = s((l = e + (r - e) / 2), n, o) - t) > 0 ? (r = l) : (e = l);\n } while (Math.abs(i) > 1e-7 && ++a < 10);\n return l;\n })(e, r, r + 0.1, t, n);\n }\n return function (t) {\n return 0 === t ? 0 : 1 === t ? 1 : s(u(t), e, o);\n };\n };\n },\n function (t, e, r) {\n 'use strict';\n r.r(e);\n var n = function () {\n var t = this.$createElement;\n return (this._self._c || t)(\n this.tag,\n { ref: 'scrollactive-nav-wrapper', tag: 'component', staticClass: 'scrollactive-nav' },\n [this._t('default')],\n 2\n );\n };\n n._withStripped = !0;\n var o = r(0),\n i = r.n(o);\n function s(t) {\n return (\n (function (t) {\n if (Array.isArray(t)) return l(t);\n })(t) ||\n (function (t) {\n if ('undefined' != typeof Symbol && Symbol.iterator in Object(t)) return Array.from(t);\n })(t) ||\n (function (t, e) {\n if (!t) return;\n if ('string' == typeof t) return l(t, e);\n var r = Object.prototype.toString.call(t).slice(8, -1);\n 'Object' === r && t.constructor && (r = t.constructor.name);\n if ('Map' === r || 'Set' === r) return Array.from(t);\n if ('Arguments' === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))\n return l(t, e);\n })(t) ||\n (function () {\n throw new TypeError(\n 'Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'\n );\n })()\n );\n }\n function l(t, e) {\n (null == e || e > t.length) && (e = t.length);\n for (var r = 0, n = new Array(e); r < e; r++) n[r] = t[r];\n return n;\n }\n var a = (function (t, e, r, n, o, i, s, l) {\n var a,\n c = 'function' == typeof t ? t.options : t;\n if (\n (e && ((c.render = e), (c.staticRenderFns = r), (c._compiled = !0)),\n n && (c.functional = !0),\n i && (c._scopeId = 'data-v-' + i),\n s\n ? ((a = function (t) {\n (t =\n t ||\n (this.$vnode && this.$vnode.ssrContext) ||\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext)) ||\n 'undefined' == typeof __VUE_SSR_CONTEXT__ ||\n (t = __VUE_SSR_CONTEXT__),\n o && o.call(this, t),\n t && t._registeredComponents && t._registeredComponents.add(s);\n }),\n (c._ssrRegister = a))\n : o &&\n (a = l\n ? function () {\n o.call(this, (c.functional ? this.parent : this).$root.$options.shadowRoot);\n }\n : o),\n a)\n )\n if (c.functional) {\n c._injectStyles = a;\n var u = c.render;\n c.render = function (t, e) {\n return a.call(e), u(t, e);\n };\n } else {\n var f = c.beforeCreate;\n c.beforeCreate = f ? [].concat(f, a) : [a];\n }\n return { exports: t, options: c };\n })(\n {\n props: {\n activeClass: { type: String, default: 'is-active' },\n offset: { type: Number, default: 20 },\n scrollOffset: { type: Number, default: null },\n scrollContainerSelector: { type: String, default: '' },\n clickToScroll: { type: Boolean, default: !0 },\n duration: { type: Number, default: 600 },\n alwaysTrack: { type: Boolean, default: !1 },\n bezierEasingValue: { type: String, default: '.5,0,.35,1' },\n modifyUrl: { type: Boolean, default: !0 },\n exact: { type: Boolean, default: !1 },\n highlightFirstItem: { type: Boolean, default: !1 },\n tag: { type: String, default: 'nav' },\n scrollOnStart: { type: Boolean, default: !0 },\n },\n data: function () {\n return {\n observer: null,\n items: [],\n currentItem: null,\n lastActiveItem: null,\n scrollAnimationFrame: null,\n bezierEasing: i.a,\n };\n },\n computed: {\n cubicBezierArray: function () {\n return this.bezierEasingValue.split(',');\n },\n scrollContainer: function () {\n var t = window;\n return (\n this.scrollContainerSelector &&\n (t = document.querySelector(this.scrollContainerSelector) || window),\n t\n );\n },\n },\n mounted: function () {\n var t = window.MutationObserver || window.WebKitMutationObserver;\n this.observer ||\n ((this.observer = new t(this.initScrollactiveItems)),\n this.observer.observe(this.$refs['scrollactive-nav-wrapper'], {\n childList: !0,\n subtree: !0,\n })),\n this.initScrollactiveItems(),\n this.removeActiveClass(),\n (this.currentItem = this.getItemInsideWindow()),\n this.currentItem && this.currentItem.classList.add(this.activeClass),\n this.scrollOnStart && this.scrollToHashElement(),\n this.scrollContainer.addEventListener('scroll', this.onScroll);\n },\n updated: function () {\n this.initScrollactiveItems();\n },\n beforeDestroy: function () {\n this.scrollContainer.removeEventListener('scroll', this.onScroll),\n window.cancelAnimationFrame(this.scrollAnimationFrame);\n },\n methods: {\n onScroll: function (t) {\n (this.currentItem = this.getItemInsideWindow()),\n this.currentItem !== this.lastActiveItem &&\n (this.removeActiveClass(),\n this.$emit('itemchanged', t, this.currentItem, this.lastActiveItem),\n (this.lastActiveItem = this.currentItem)),\n this.currentItem && this.currentItem.classList.add(this.activeClass);\n },\n getItemInsideWindow: function () {\n var t,\n e = this;\n return (\n [].forEach.call(this.items, function (r) {\n var n = r === e.items[0],\n o = document.getElementById(decodeURI(r.hash.substr(1)));\n if (o) {\n var i = e.scrollContainer.scrollTop || window.pageYOffset,\n s = i >= e.getOffsetTop(o) - e.offset,\n l = i < e.getOffsetTop(o) - e.offset + o.offsetHeight;\n n && e.highlightFirstItem && l && (t = r),\n e.exact && s && l && (t = r),\n !e.exact && s && (t = r);\n }\n }),\n t\n );\n },\n initScrollactiveItems: function () {\n var t = this;\n (this.items = this.$el.querySelectorAll('.scrollactive-item')),\n this.clickToScroll\n ? [].forEach.call(this.items, function (e) {\n e.addEventListener('click', t.handleClick);\n })\n : [].forEach.call(this.items, function (e) {\n e.removeEventListener('click', t.handleClick);\n });\n },\n setScrollactiveItems: function () {\n this.initScrollactiveItems();\n },\n handleClick: function (t) {\n var e = this;\n t.preventDefault();\n var r = t.currentTarget.hash,\n n = document.getElementById(decodeURI(r.substr(1)));\n n\n ? (this.alwaysTrack ||\n (this.scrollContainer.removeEventListener('scroll', this.onScroll),\n window.cancelAnimationFrame(this.scrollAnimationFrame),\n this.removeActiveClass(),\n t.currentTarget.classList.add(this.activeClass)),\n this.scrollTo(n).then(function () {\n if (!e.alwaysTrack) {\n e.scrollContainer.addEventListener('scroll', e.onScroll);\n (e.currentItem = [].find.call(e.items, function (t) {\n return decodeURI(t.hash.substr(1)) === n.id;\n })),\n e.currentItem !== e.lastActiveItem &&\n (e.$emit('itemchanged', null, e.currentItem, e.lastActiveItem),\n (e.lastActiveItem = e.currentItem));\n }\n e.modifyUrl && e.pushHashToUrl(r);\n }))\n : console.warn(\n \"[vue-scrollactive] Element '\".concat(\n r,\n \"' was not found. Make sure it is set in the DOM.\"\n )\n );\n },\n scrollTo: function (t) {\n var e = this;\n return new Promise(function (r) {\n var n = e.getOffsetTop(t),\n o = e.scrollContainer.scrollTop || window.pageYOffset,\n i = n - o,\n l = e.bezierEasing.apply(e, s(e.cubicBezierArray)),\n a = null;\n window.requestAnimationFrame(function t(n) {\n a || (a = n);\n var s = n - a,\n c = s / e.duration;\n s >= e.duration && (s = e.duration), c >= 1 && (c = 1);\n var u = e.scrollOffset || e.offset,\n f = o + l(c) * (i - u);\n e.scrollContainer.scrollTo(0, f),\n s < e.duration\n ? (e.scrollAnimationFrame = window.requestAnimationFrame(t))\n : r();\n });\n });\n },\n getOffsetTop: function (t) {\n for (var e = 0, r = t; r; ) (e += r.offsetTop), (r = r.offsetParent);\n return this.scrollContainer.offsetTop && (e -= this.scrollContainer.offsetTop), e;\n },\n removeActiveClass: function () {\n var t = this;\n [].forEach.call(this.items, function (e) {\n e.classList.remove(t.activeClass);\n });\n },\n scrollToHashElement: function () {\n var t = this,\n e = window.location.hash;\n if (e) {\n var r = document.querySelector(decodeURI(e));\n r &&\n ((window.location.hash = ''),\n setTimeout(function () {\n var n = r.offsetTop - t.offset;\n t.scrollContainer.scrollTo(0, n), t.pushHashToUrl(e);\n }, 0));\n }\n },\n pushHashToUrl: function (t) {\n window.history.pushState\n ? window.history.pushState(null, null, t)\n : (window.location.hash = t);\n },\n },\n },\n n,\n [],\n !1,\n null,\n null,\n null\n );\n a.options.__file = 'src/scrollactive.vue';\n var c = a.exports,\n u = {\n install: function (t) {\n u.install.installed || t.component('scrollactive', c);\n },\n };\n 'undefined' != typeof window && window.Vue && u.install(window.Vue);\n e.default = u;\n },\n ]);\n});\n","var map = {\n\t\"./bar.svg\": \"./src/asset/icon/bar.svg\",\n\t\"./boxplot.svg\": \"./src/asset/icon/boxplot.svg\",\n\t\"./calendar.svg\": \"./src/asset/icon/calendar.svg\",\n\t\"./candlestick.svg\": \"./src/asset/icon/candlestick.svg\",\n\t\"./custom.svg\": \"./src/asset/icon/custom.svg\",\n\t\"./dataZoom.svg\": \"./src/asset/icon/dataZoom.svg\",\n\t\"./dataset.svg\": \"./src/asset/icon/dataset.svg\",\n\t\"./drag.svg\": \"./src/asset/icon/drag.svg\",\n\t\"./funnel.svg\": \"./src/asset/icon/funnel.svg\",\n\t\"./gauge.svg\": \"./src/asset/icon/gauge.svg\",\n\t\"./geo.svg\": \"./src/asset/icon/geo.svg\",\n\t\"./gl.svg\": \"./src/asset/icon/gl.svg\",\n\t\"./graph.svg\": \"./src/asset/icon/graph.svg\",\n\t\"./heatmap.svg\": \"./src/asset/icon/heatmap.svg\",\n\t\"./line.svg\": \"./src/asset/icon/line.svg\",\n\t\"./lines.svg\": \"./src/asset/icon/lines.svg\",\n\t\"./map.svg\": \"./src/asset/icon/map.svg\",\n\t\"./parallel.svg\": \"./src/asset/icon/parallel.svg\",\n\t\"./pictorialBar.svg\": \"./src/asset/icon/pictorialBar.svg\",\n\t\"./pie.svg\": \"./src/asset/icon/pie.svg\",\n\t\"./radar.svg\": \"./src/asset/icon/radar.svg\",\n\t\"./rich.svg\": \"./src/asset/icon/rich.svg\",\n\t\"./sankey.svg\": \"./src/asset/icon/sankey.svg\",\n\t\"./scatter.svg\": \"./src/asset/icon/scatter.svg\",\n\t\"./sunburst.svg\": \"./src/asset/icon/sunburst.svg\",\n\t\"./themeRiver.svg\": \"./src/asset/icon/themeRiver.svg\",\n\t\"./tree.svg\": \"./src/asset/icon/tree.svg\",\n\t\"./treemap.svg\": \"./src/asset/icon/treemap.svg\"\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = \"./src/asset/icon sync recursive ^\\\\.\\\\/.*\\\\.svg$\";","module.exports = Vue;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tif(__webpack_module_cache__[moduleId]) {\n\t\treturn __webpack_module_cache__[moduleId].exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\tid: moduleId,\n\t\tloaded: false,\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Flag the module as loaded\n\tmodule.loaded = true;\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => module['default'] :\n\t\t() => module;\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.nmd = (module) => {\n\tmodule.paths = [];\n\tif (!module.children) module.children = [];\n\treturn module;\n};","__webpack_require__.p = \"./\";","// module exports must be returned from runtime so entry inlining is disabled\n// startup\n// Load entry module and return exports\nreturn __webpack_require__(\"./src/main.js\");\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/examples/js/example-transform-ts-bundle.js.map b/examples/js/example-transform-ts-bundle.js.map
deleted file mode 100644
index 1b9f900..0000000
--- a/examples/js/example-transform-ts-bundle.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack://echartsExampleTransformTs/./node_modules/lines-and-columns/dist/index.mjs","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/CJSImportProcessor.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/HelperManager.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/NameManager.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/Options-gen-types.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/Options.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/TokenProcessor.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/computeSourceMap.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/identifyShadowedGlobals.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/index.mjs","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/index.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/plugins/flow.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/plugins/jsx/index.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/plugins/jsx/xhtml.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/plugins/types.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/plugins/typescript.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/tokenizer/index.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/tokenizer/keywords.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/tokenizer/readWord.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/tokenizer/readWordTree.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/tokenizer/state.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/tokenizer/types.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/traverser/base.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/traverser/expression.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/traverser/index.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/traverser/lval.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/traverser/statement.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/traverser/util.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/util/charcodes.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/util/identifier.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/parser/util/whitespace.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/CJSImportTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/ESMImportTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/FlowTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/JSXTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/NumericSeparatorTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/OptionalCatchBindingTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/OptionalChainingNullishTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/ReactDisplayNameTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/ReactHotLoaderTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/RootTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/Transformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/transformers/TypeScriptTransformer.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/elideImportEquals.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/formatTokens.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/getClassInfo.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/getDeclarationInfo.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/getIdentifierNames.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/getJSXPragmaInfo.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/getNonTypeIdentifiers.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/getTSImportedNames.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/isAsyncOperation.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/isIdentifier.js","webpack://echartsExampleTransformTs/./node_modules/sucrase/dist/util/shouldElideDefaultExport.js","webpack://echartsExampleTransformTs/./node_modules/ts-interface-checker/dist/index.js","webpack://echartsExampleTransformTs/./node_modules/ts-interface-checker/dist/types.js","webpack://echartsExampleTransformTs/./node_modules/ts-interface-checker/dist/util.js","webpack://echartsExampleTransformTs/./src/editor/transformTs.js","webpack://echartsExampleTransformTs/webpack/bootstrap","webpack://echartsExampleTransformTs/webpack/runtime/define property getters","webpack://echartsExampleTransformTs/webpack/runtime/hasOwnProperty shorthand","webpack://echartsExampleTransformTs/webpack/runtime/make namespace object","webpack://echartsExampleTransformTs/webpack/startup"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,wBAAwB;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,iEAAe,eAAe,EAAC;;;;;;;;;;;ACvDlB,8CAA6C,CAAC,YAAY,EAAC;;;AAGxE,iBAAiB,mBAAO,CAAC,iFAAoB;AAC7C,gBAAgB,mBAAO,CAAC,6FAA6B;AACrD,aAAa,mBAAO,CAAC,uFAA0B;;AAE/C,6BAA6B,mBAAO,CAAC,+FAA8B;;;;;;;;;;;;;;;;;AAiBnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;;AAEd;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,+BAA+B,qBAAqB,+EAA+E,uBAAuB,iEAAiE,mCAAmC,+CAA+C,gDAAgD,gDAAgD,gDAAgD;;AAEnc;AACA,mBAAmB,+BAA+B;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC,UAAU;AACnD;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oDAAoD,KAAK,GAAG;AAC5D;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA,+BAA+B,kBAAkB,cAAc,KAAK,GAAG;AACvE;AACA;AACA;AACA;AACA,iBAAiB,2DAA2D,GAAG,kBAAkB;AACjG,iCAAiC,aAAa,KAAK,YAAY;AAC/D;AACA,OAAO;AACP,+BAA+B,oBAAoB,KAAK;AACxD;AACA,UAAU,GAAG,kBAAkB,EAAE;AACjC,OAAO;AACP,+BAA+B,oBAAoB,KAAK;AACxD;AACA,UAAU,GAAG,kBAAkB,EAAE;AACjC;;AAEA,kBAAkB,wBAAwB;AAC1C,2BAA2B;AAC3B;AACA,UAAU,GAAG,kBAAkB,KAAK,UAAU,MAAM,aAAa,GAAG;AACpE;AACA;AACA,mCAAmC,eAAe,KAAK,qBAAqB;AAC5E;AACA;AACA,2BAA2B;AAC3B;AACA,UAAU,GAAG,kBAAkB,EAAE;AACjC;;AAEA;;AAEA;AACA,wDAAwD,oBAAoB;AAC5E;AACA,kBAAkB,wBAAwB;AAC1C,sDAAsD,kBAAkB,GAAG,aAAa;AACxF;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,8CAA8C,SAAS;AACvD;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,QAAQ,8BAA8B;AACtC;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA,sCAAsC,EAAE,KAAK;AAC7C,2BAA2B,EAAE;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA,OAAO;AACP;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA,iEAAiE,WAAW;AAC5E;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,cAAc;AACd;AACA;AACA;AACA;AACA,WAAW,uBAAuB;AAClC;;AAEA;AACA;AACA,KAAK;AACL;AACA,kBAAkB,iDAAiD;AACnE;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA,2BAA2B,wBAAwB;AACnD;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,OAAO;AACP;AACA,OAAO;AACP,6CAA6C,0CAA0C;AACvF;AACA;AACA,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0DAA0D,aAAa;AACvE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;ACxcJ,8CAA6C,CAAC,YAAY,EAAC;;AAExE;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4C;AAC5C;AACA;AACA;AACA;AACA,iDAAiD,+CAA+C;AAChG;AACA;AACA,wDAAwD;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+C,sCAAsC;AACrF,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,YAAY;AACZ,8BAA8B,+BAA+B;;AAE7D;AACA;AACA;AACA;AACA;AACA,oDAAoD,SAAS;AAC7D;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,qBAAqB;;;;;;;;;;;ACrKV,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;AACvK,0BAA0B,mBAAO,CAAC,yFAA2B,EAAE;;AAE/D;AACA,cAAc;;AAEd,8BAA8B;AAC9B;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AC1BJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,wCAAwC,6BAA6B,YAAY,EAAE,OAAO,iBAAiB,mBAAmB,uBAAuB,sDAAsD,wBAAwB,EAAE,EAAE,EAAE,sBAAsB,eAAe,EAAE,EAAE;AAC3V;AACA;AACA,0BAA0B,mBAAO,CAAC,+EAAsB,EAAE;AAC1D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,CAAC,iBAAiB;;AAEpB;AACA;AACA,CAAC,EAAE,CAAC,wBAAwB;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,EAAE,CAAC,eAAe;;AAEnB;AACA;AACA;AACA;AACA;AACA,eAAgB;;;;;;;;;;;AClCH,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB,EAAE,0BAA0B,mBAAO,CAAC,+EAAsB;AACjO,uBAAuB,mBAAO,CAAC,6EAAqB,EAAE;;AAEtD,OAAO,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8C/B;AACA;AACA,CAAC,CAAC,uBAAuB;;;;;;;;;;;ACnDZ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;;;AAGvK,aAAa,mBAAO,CAAC,uFAA0B;AAC/C,wBAAwB,mBAAO,CAAC,qFAAyB,EAAE;;;;;;;AAO3D;AACA,aAAa;AACb,cAAc;;AAEd;AACA;AACA;AACA;AACA;AACA,MAAM,iBAAiB,qBAAqB,mCAAmC,mCAAmC,2CAA2C;;AAE7J;AACA;AACA;AACA;AACA,YAAY;AACZ;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,wCAAwC,UAAU;AAClD;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,oCAAoC;AACzD;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,OAAO;AACP;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,kCAAkC;AACvD;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AC7SJ,8CAA6C,CAAC,YAAY,EAAC;AACxE,iBAAiB,mBAAO,CAAC,qFAAyB;;;;;;;;;;;;AAYlD;AACA;AACA;AACA;AACA;AACA;AACA,GAAG,iBAAiB;AACpB;AACA;AACA,iBAAiB,iBAAiB;AAClC;AACA,oBAAoB;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AClCJ,8CAA6C,CAAC,YAAY,EAAC;;;;AAIxE,iBAAiB,mBAAO,CAAC,iFAAoB;;AAE7C,aAAa,mBAAO,CAAC,uFAA0B;;;AAG/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;AAEjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,0BAA0B;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwC,EAAE;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,qCAAqC,yBAAyB;AAC9D;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC7FsD;AACA;AACR;AACkB;AACxB;AACE;AACX;;AAEe;AACe;AACd;AACY;;;;;;;;;;;;;;;;;;;;AAoBpD;AACP;AACA,SAAS,yFAAkC;AAC3C;;AAEO;AACP,EAAE,yDAAe;AACjB;AACA;AACA,4BAA4B,kEAAe;AAC3C;AACA;AACA;AACA;AACA;AACA,kBAAkB;AAClB;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,0DAAgB;AACnC;AACA;AACA;AACA,GAAG;AACH;AACA,wCAAwC,iBAAiB,IAAI,UAAU;AACvE;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACO;AACP;AACA,SAAS,2DAAY;AACrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,8CAAK;AACpB;AACA;;AAEA,0BAA0B,iDAAW;AACrC,4BAA4B,yDAAa;AACzC,6BAA6B,oDAAc;AAC3C;;AAEA;AACA;AACA,0BAA0B,wDAAkB;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,iEAAuB;AAC3B;AACA;AACA;AACA,GAAG;AACH,IAAI,iEAAuB,yBAAyB,kEAAkB;AACtE;AACA,UAAU;AACV;;;;;;;;;;;ACrHa,8CAA6C,CAAC,YAAY,EAAC;;AAExE,YAAY,mBAAO,CAAC,8EAAkB;AACtC,aAAa,mBAAO,CAAC,gFAAmB;;AAExC;;;;AAIA;AACA;AACA;AACA;AACA,CAAC,CAAC,YAAY;;AAEd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,aAAa;;;;;;;;;;;AC9BF,8CAA6C,CAAC,YAAY,EAAC,CAAC;;;;;;;;;;;AAWzE,aAAa,mBAAO,CAAC,iFAAoB;AACzC,gBAAgB,mBAAO,CAAC,uFAAuB;AAC/C,aAAa,mBAAO,CAAC,iFAAoB;AACzC,YAAY,mBAAO,CAAC,+EAAmB;;;;;;;;;;;;;;AAcvC,kBAAkB,mBAAO,CAAC,2FAAyB;;;;;;;;;AASnD,iBAAiB,mBAAO,CAAC,yFAAwB;;;;;;;;;;AAUjD,YAAY,mBAAO,CAAC,+EAAmB;;AAEvC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA,KAAK;AACL;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,8EAA8E;AAC9E;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,yCAAyC;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,CAAC,CAAC,+BAA+B;;AAEjC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,yBAAyB;;AAE3B;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,CAAC,CAAC,sCAAsC;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,CAAC,CAAC,0BAA0B;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,kCAAkC;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,6BAA6B;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,oCAAoC;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,wCAAwC;;AAE1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,gDAAgD;;AAElD;AACA;AACA;AACA;;AAEA;AACA,sBAAsB;AACtB;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,kCAAkC;;AAEpC;AACA;AACA,CAAC,CAAC,iCAAiC;;AAEnC;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,2BAA2B;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,CAAC,CAAC,gCAAgC;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,kCAAkC;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,wCAAwC;;AAE1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,sCAAsC;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA,kBAAkB,uBAAuB,SAAS;AAClD,KAAK;AACL,kBAAkB;AAClB;AACA;AACA,GAAG;AACH,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,gCAAgC;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,oCAAoC;;AAEtC;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,6BAA6B;;AAE/B,uFAAuF;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,kDAAkD;;AAEpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,CAAC,CAAC,4BAA4B;;AAE9B;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,sBAAsB;;AAExB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,CAAC,CAAC,2BAA2B;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;ACthCa,8CAA6C,CAAC,YAAY,EAAC;;;;;;;;;AASxE,aAAa,mBAAO,CAAC,oFAAuB;AAC5C,aAAa,mBAAO,CAAC,oFAAuB;AAC5C,YAAY,mBAAO,CAAC,kFAAsB;AAC1C,kBAAkB,mBAAO,CAAC,8FAA4B;AACtD,YAAY,mBAAO,CAAC,kFAAsB;AAC1C,iBAAiB,mBAAO,CAAC,kFAAsB;AAC/C,kBAAkB,mBAAO,CAAC,oFAAuB;AACjD,kBAAkB,mBAAO,CAAC,+EAAe;;AAEzC;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA;AACA;AACA;;;;;;;;;;;ACnTa,8CAA6C,CAAC,YAAY,EAAC,CAAC;AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAgB;;;;;;;;;;;AC/PH,8CAA6C,CAAC,YAAY,EAAC,CAAC,aAAa,mBAAO,CAAC,iFAAoB;AAClH,aAAa,mBAAO,CAAC,iFAAoB;AACzC,YAAY,mBAAO,CAAC,+EAAmB;AACvC,kBAAkB,mBAAO,CAAC,2FAAyB;AACnD,YAAY,mBAAO,CAAC,kEAAQ;AAC5B,kBAAkB,mBAAO,CAAC,8EAAc;;AAExC;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,6BAA6B;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,CAAC,CAAC,2BAA2B;;;;;;;;;;;ACtChB,8CAA6C,CAAC,YAAY,EAAC;;;;;;;;;AASxE,aAAa,mBAAO,CAAC,iFAAoB;AACzC,gBAAgB,mBAAO,CAAC,uFAAuB;AAC/C,aAAa,mBAAO,CAAC,iFAAoB;AACzC,YAAY,mBAAO,CAAC,+EAAmB;;;;;;;;;;;;;;;;AAgBvC,kBAAkB,mBAAO,CAAC,2FAAyB;AACnD,YAAY,mBAAO,CAAC,+EAAmB;;;;;;;;;;;;AAYvC,iBAAiB,mBAAO,CAAC,yFAAwB;;;;;;;;;;;;AAYjD,YAAY,mBAAO,CAAC,+EAAmB;AACvC,WAAW,mBAAO,CAAC,sEAAO;;AAE1B;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,gCAAgC;;AAElC;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA,6BAA6B,WAAW;AACxC;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA,mCAAmC;AACnC;AACA;AACA;AACA;;AAEA,iBAAiB;AACjB,2BAA2B;AAC3B,+CAA+C;AAC/C,CAAC,oCAAoC;;AAErC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,gCAAgC;;AAElC;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,6BAA6B;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,mBAAmB;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,iCAAiC;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,4BAA4B;;AAE9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,iCAAiC;;AAEnC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,sCAAsC;;AAExC;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,EAAE;AACpB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,CAAC,CAAC,4BAA4B;;AAE9B;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,CAAC,CAAC,oCAAoC;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA,iEAAiE;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA,KAAK;AACL;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,wBAAwB;;AAE1B;AACA;AACA,uCAAuC,yBAAyB;AAChE;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,gCAAgC;;AAElC;AACA;AACA,4BAA4B;AAC5B;AACA;AACA;AACA,GAAG;AACH,mBAAmB;AACnB;AACA;AACA;AACA,GAAG;AACH,8BAA8B;AAC9B;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,wBAAwB;;AAE1B;AACA;AACA;AACA,+BAA+B;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,yCAAyC;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,kCAAkC;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,6BAA6B;;AAE/B;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,yCAAyC;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,kCAAkC;;AAEpC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,CAAC,CAAC,gCAAgC;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,8BAA8B;;AAEhC;AACA;AACA,CAAC,CAAC,gCAAgC;;AAElC;AACA;AACA,CAAC,CAAC,kCAAkC;;AAEpC,kBAAkB;AAClB;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,2BAA2B;;AAE7B,uFAAuF;AACvF;AACA;AACA;AACA;AACA,CAAC,CAAC,gDAAgD;;AAElD;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,0BAA0B;;AAE5B;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,CAAC,CAAC,iCAAiC;;AAEnC;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,oCAAoC;;AAEtC;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,oBAAoB;;AAEtB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,sCAAsC;;AAExC;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,sCAAsC;;;;;;;;;;;ACl7C3B,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB,EAAE;;AAEzK,YAAY,mBAAO,CAAC,+EAAmB;AACvC,YAAY,mBAAO,CAAC,+EAAmB;AACvC,iBAAiB,mBAAO,CAAC,+EAAmB;AAC5C,kBAAkB,mBAAO,CAAC,iFAAoB;AAC9C,kBAAkB,mBAAO,CAAC,iFAAoB;AAC9C,gBAAgB,mBAAO,CAAC,4EAAY;AACpC,gBAAgB,mBAAO,CAAC,4EAAY,EAAE;AACtC,aAAa,mBAAO,CAAC,sEAAS;;AAE9B,mBAAmB;AACnB,mBAAmB;AACnB,kCAAkC;AAClC,+CAA+C;AAC/C,4DAA4D;AAC5D,+DAA+D;AAC/D,wEAAwE;AACxE,0FAA0F;AAC1F,6FAA6F;AAC7F,oEAAoE;AACpE;AACA,gCAAgC;AAChC,gDAAgD;AAChD,0CAA0C;AAC1C,2BAA2B,WAAW,cAAc;AACpD,qCAAqC;AACrC,CAAC,qBAAqB,sBAAsB,sBAAsB;;AAElE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,qBAAqB;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,gCAAgC;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,6BAA6B;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,gCAAgC;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,mCAAmC;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,oCAAoC;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AASA;AACA;;AAEA;AACA;;;AAGA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;;AAEA;;AAEA,CAAC,CAAC,aAAa;;AAEf;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,YAAY;;AAEd;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,yBAAyB;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,8BAA8B;;AAEhC;AACA,gEAAgE,+BAA+B;AAC/F;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA,CAAC,CAAC,sBAAsB;;AAExB;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,WAAW;;AAEb;AACA;AACA,CAAC,CAAC,aAAa;;AAEf;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,qBAAqB;;AAEvB;;;AAGA;AACA;AACA;AACA;AACA,CAAC,CAAC,sBAAsB;;AAExB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,+BAA+B;;AAEjC;AACA;AACA,CAAC,CAAC,sBAAsB;;AAExB;AACA;AACA;AACA;AACA,CAAC,CAAC,2BAA2B;;AAE7B;AACA;AACA,CAAC,CAAC,yBAAyB;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,iBAAiB;;AAEnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,CAAC,CAAC,iBAAiB;;AAEnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,mBAAmB;;AAErB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,YAAY;AACZ;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,yDAAyD,0BAA0B;AACnF,CAAC,CAAC,wBAAwB;;AAE1B;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,OAAO;AACP;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,uBAAuB;AACvB;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,CAAC,CAAC,gBAAgB;;;;;;;;;;;AC54BL,8CAA6C,CAAC,YAAY,EAAC,CAAC,sBAAsB;AAC/F,iBAAiB;AACjB,6BAA6B;AAC7B,4BAA4B;AAC5B,2BAA2B;AAC3B,8BAA8B;AAC9B,4BAA4B;AAC5B,6BAA6B;AAC7B,mCAAmC;AACnC,oCAAoC;AACpC,6BAA6B;AAC7B,6BAA6B;AAC7B,6BAA6B;AAC7B,yBAAyB;AACzB,2BAA2B;AAC3B,kCAAkC;AAClC,iCAAiC;AACjC,gCAAgC;AAChC,6BAA6B;AAC7B,yBAAyB;AACzB,6BAA6B;AAC7B,8BAA8B;AAC9B,iCAAiC;AACjC,6BAA6B;AAC7B,0BAA0B;AAC1B,+BAA+B;AAC/B,kCAAkC;AAClC,gCAAgC;AAChC,6BAA6B;AAC7B,gCAAgC;AAChC,iCAAiC;AACjC,4BAA4B;AAC5B,2BAA2B;AAC3B,4BAA4B;AAC5B,4BAA4B;AAC5B,CAAC,wBAAwB,yBAAyB,yBAAyB;;;;;;;;;;;ACnC9D,8CAA6C,CAAC,YAAY,EAAC,CAAC,YAAY,mBAAO,CAAC,+EAAmB;AAChH,iBAAiB,mBAAO,CAAC,+EAAmB;AAC5C,kBAAkB,mBAAO,CAAC,iFAAoB;AAC9C,aAAa,mBAAO,CAAC,sEAAS;AAC9B,oBAAoB,mBAAO,CAAC,oFAAgB;AAC5C,aAAa,mBAAO,CAAC,sEAAS;;AAE9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AC/DJ,8CAA6C,CAAC,YAAY,EAAC,CAAC;AACzE,gBAAgB,mBAAO,CAAC,4EAAY;AACpC,aAAa,mBAAO,CAAC,sEAAS;;AAE9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG,CAAC,sBAAsB;;;;;;;;;;;AC5lBb,8CAA6C,CAAC,YAAY,EAAC;AACxE,gBAAgB,mBAAO,CAAC,4EAAY;AACpC,aAAa,mBAAO,CAAC,sEAAS;;AAE9B;;;;;AAKA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,aAAa;;AAEf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,yCAAyC,6CAA6C,iCAAiC,iCAAiC,eAAe,iBAAiB,2CAA2C,mBAAmB,eAAe,qBAAqB,6BAA6B;AAC7T,CAAC,CAAC,qBAAqB;;AAEvB,cAAc,eAAe,mCAAmC,mCAAmC,mCAAmC,mCAAmC,mCAAmC,mCAAmC,mCAAmC,mCAAmC,mCAAmC,oCAAoC,oCAAoC,oCAAoC;AACpc;AACA,YAAY;;AAEZ;AACA,aAAa;;AAEb;AACA,aAAa;;AAEb;AACA,aAAa;;AAEb;AACA,aAAa;;AAEb;AACA,aAAa;AACb,aAAa;AACb,aAAa;AACb,aAAa;;AAEb,cAAc;AACd,cAAc;;AAEd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc;;AAEd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;ACnGJ,8CAA6C,CAAC,YAAY,EAAC,CAAC;AACzE;AACA;AACA;AACA,cAAc;AACd,wCAAwC;AACxC,8BAA8B;AAC9B,4BAA4B;AAC5B,2BAA2B;AAC3B,sCAAsC;AACtC,2BAA2B;AAC3B,4BAA4B;;AAE5B,gBAAgB,2CAA2C;AAC3D,qBAAqB,oDAAoD;AACzE,uBAAuB,uDAAuD;AAC9E,sBAAsB,oDAAoD;AAC1E,sBAAsB,oDAAoD;AAC1E,oBAAoB,8CAA8C;AAClE,mBAAmB,2CAA2C;AAC9D,wBAAwB,0DAA0D;AAClF,wBAAwB,0DAA0D;AAClF,sBAAsB,oDAAoD;AAC1E,yBAAyB,6DAA6D,KAAK;AAC3F,sBAAsB,oDAAoD;AAC1E,yBAAyB,6DAA6D;AACtF,sBAAsB,oDAAoD;AAC1E,sBAAsB,oDAAoD;AAC1E,qBAAqB,iDAAiD;AACtE,oBAAoB,8CAA8C;AAClE,qBAAqB,iDAAiD;AACtE,2BAA2B,mEAAmE;AAC9F,mBAAmB,2CAA2C;AAC9D,yBAAyB,0DAA0D;AACnF,4BAA4B,mEAAmE;AAC/F,sBAAsB,iDAAiD;AACvE,yBAAyB,0DAA0D;AACnF,yBAAyB,0DAA0D;AACnF,0BAA0B,6DAA6D;AACvF,6BAA6B,sEAAsE;AACnG,mBAAmB,wCAAwC;AAC3D,qBAAqB,8CAA8C;AACnE,mBAAmB,wCAAwC;AAC3D,uBAAuB,oDAAoD;AAC3E,0BAA0B,6DAA6D;AACvF,2BAA2B,gEAAgE;AAC3F,qBAAqB,8CAA8C;AACnE,sBAAsB,iDAAiD;AACvE,yBAAyB,0DAA0D;AACnF,kCAAkC,qFAAqF;AACvH,0BAA0B,6DAA6D;AACvF,2BAA2B,gEAAgE;AAC3F,0BAA0B,6DAA6D;AACvF,2BAA2B,gEAAgE;AAC3F,2BAA2B,gEAAgE;AAC3F,yBAAyB,0DAA0D;AACnF,yBAAyB,0DAA0D;AACnF,4BAA4B,mEAAmE;AAC/F,kCAAkC,qFAAqF;AACvH,yBAAyB,0DAA0D;AACnF,qBAAqB,8CAA8C;AACnE,sBAAsB,iDAAiD;AACvE,uBAAuB,oDAAoD;AAC3E,qBAAqB,8CAA8C;AACnE,sBAAsB,iDAAiD;AACvE,yBAAyB,0DAA0D;AACnF,wBAAwB,uDAAuD;AAC/E,wBAAwB,uDAAuD;AAC/E,4BAA4B,mEAAmE;AAC/F,0BAA0B,6DAA6D;AACvF,mCAAmC,wFAAwF;AAC3H,iCAAiC,kFAAkF;AACnH,uBAAuB,oDAAoD;AAC3E,sBAAsB,iDAAiD;AACvE,uBAAuB,oDAAoD;AAC3E,0BAA0B,6DAA6D;AACvF,0BAA0B,6DAA6D;AACvF,yBAAyB,0DAA0D;AACnF,oBAAoB,2CAA2C;AAC/D,sBAAsB,iDAAiD;AACvE,yBAAyB,0DAA0D;AACnF,qBAAqB,8CAA8C;AACnE,0BAA0B,6DAA6D;AACvF,oBAAoB,2CAA2C;AAC/D,wBAAwB,uDAAuD;AAC/E,wBAAwB,uDAAuD;AAC/E,uBAAuB,oDAAoD;AAC3E,qBAAqB,8CAA8C;AACnE,qBAAqB,8CAA8C;AACnE,qBAAqB,8CAA8C;AACnE,uBAAuB,oDAAoD;AAC3E,uBAAuB,oDAAoD;AAC3E,sBAAsB,iDAAiD;AACvE,qBAAqB,8CAA8C;AACnE,sBAAsB,iDAAiD;AACvE,uBAAuB,oDAAoD;AAC3E,uBAAuB,oDAAoD;AAC3E,yBAAyB,0DAA0D;AACnF,wBAAwB,uDAAuD;AAC/E,wBAAwB,uDAAuD;AAC/E,uBAAuB,oDAAoD;AAC3E,sBAAsB,iDAAiD;AACvE,sBAAsB,iDAAiD;AACvE,uBAAuB,oDAAoD;AAC3E,oBAAoB,2CAA2C;AAC/D,4BAA4B,mEAAmE;AAC/F,wBAAwB,uDAAuD;AAC/E,sBAAsB,iDAAiD;AACvE,wBAAwB,uDAAuD;AAC/E,uBAAuB,oDAAoD;AAC3E,qBAAqB,8CAA8C;AACnE,qBAAqB,8CAA8C;AACnE,yBAAyB,0DAA0D;AACnF,0BAA0B,6DAA6D;AACvF,0BAA0B,6DAA6D;AACvF,wBAAwB,uDAAuD;AAC/E,wBAAwB,uDAAuD;AAC/E,yBAAyB,0DAA0D;AACnF,2BAA2B,gEAAgE;AAC3F,oBAAoB,2CAA2C;AAC/D,sBAAsB,iDAAiD;AACvE,sBAAsB,iDAAiD;AACvE,4BAA4B,mEAAmE;AAC/F,CAAC,gBAAgB,iBAAiB,iBAAiB;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA,eAAe;AACf;AACA,eAAe;AACf;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;;;;;;;;;;AC7VZ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB,EAAE,aAAa,mBAAO,CAAC,iFAAoB,EAAE;AACpN,iBAAiB,mBAAO,CAAC,+EAAmB;;AAE5C;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,CAAC,CAAC,wBAAwB;;AAE1B;AACA;AACA;AACA;AACA,0BAA0B,SAAS,GAAG,WAAW;AACjD;AACA;AACA;AACA,CAAC,CAAC,oBAAoB;;AAEtB;;;AAGA;AACA;AACA;AACA;AACA,CAAC,CAAC,WAAW;;AAEb;AACA;AACA;AACA,iBAAiB,SAAS;AAC1B;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,CAAC,CAAC,wBAAwB;;AAE1B;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,aAAa;AACf,EAAE,aAAa;AACf,EAAE,qBAAqB;AACvB,EAAE,oBAAoB;AACtB,EAAE,2BAA2B;AAC7B,EAAE,qBAAqB;AACvB,CAAC,CAAC,kBAAkB;;;;;;;;;;;AC3DP,8CAA6C,CAAC,YAAY,EAAC,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;AAYA,YAAY,mBAAO,CAAC,2EAAiB;AACrC,aAAa,mBAAO,CAAC,qFAAsB;AAC3C,aAAa,mBAAO,CAAC,6EAAkB;;;;;;;;;;;AAWvC,kBAAkB,mBAAO,CAAC,uFAAuB;;;;;;;;;;;;AAYjD,cAAc,mBAAO,CAAC,iFAAoB;AAC1C,gBAAgB,mBAAO,CAAC,uFAAuB;AAC/C,aAAa,mBAAO,CAAC,iFAAoB;AACzC,cAAc,mBAAO,CAAC,iFAAoB;AAC1C,iBAAiB,mBAAO,CAAC,+EAAmB;AAC5C,kBAAkB,mBAAO,CAAC,iFAAoB;AAC9C,YAAY,mBAAO,CAAC,oEAAQ;;;;;;;AAO5B,YAAY,mBAAO,CAAC,oEAAQ;;;;;;;AAO5B,iBAAiB,mBAAO,CAAC,8EAAa;;;;;;;;AAQtC,YAAY,mBAAO,CAAC,oEAAQ;;AAE5B;;AAEA;AACA;AACA;AACA,CAAC,CAAC,iBAAiB;;AAEnB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,wBAAwB;;AAE1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,4BAA4B;;AAE9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,4BAA4B;;AAE9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,2BAA2B;;AAE7B;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH,CAAC,CAAC,2BAA2B;;AAE7B;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,0BAA0B;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,CAAC,CAAC,oCAAoC;;AAEtC;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,qBAAqB;;AAEvB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,CAAC,CAAC,oBAAoB;;AAEtB;AACA;AACA;AACA;AACA,CAAC,CAAC,4BAA4B;;AAE9B;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,kBAAkB;;AAEpB;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA,mCAAmC;AACnC;AACA;AACA;AACA,CAAC,CAAC,qBAAqB;;AAEvB;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;;AAEA;AACA,CAAC,CAAC,gBAAgB;;AAElB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA;AACA,CAAC,CAAC,yBAAyB;;AAE3B;AACA;AACA;;AAEA;AACA;AACA,uCAAuC;AACvC;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,mBAAmB;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,4BAA4B;;AAE9B;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,kCAAkC;;AAEpC;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,yBAAyB;;AAE3B;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,kBAAkB;AAClB,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;AC99Ba,8CAA6C,CAAC,YAAY,EAAC;AACxE,aAAa,mBAAO,CAAC,iFAAoB;AACzC,iBAAiB,mBAAO,CAAC,+EAAmB;AAC5C,YAAY,mBAAO,CAAC,oEAAQ;AAC5B,iBAAiB,mBAAO,CAAC,8EAAa;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,iBAAiB;;;;;;;;;;;ACjBN,8CAA6C,CAAC,YAAY,EAAC,CAAC,YAAY,mBAAO,CAAC,2EAAiB;;;;;AAK9G,kBAAkB,mBAAO,CAAC,uFAAuB;;;;;;;;AAQjD,aAAa,mBAAO,CAAC,iFAAoB;AACzC,gBAAgB,mBAAO,CAAC,uFAAuB;AAC/C,aAAa,mBAAO,CAAC,iFAAoB;AACzC,YAAY,mBAAO,CAAC,oEAAQ;AAC5B,kBAAkB,mBAAO,CAAC,gFAAc;AACxC,YAAY,mBAAO,CAAC,oEAAQ;;AAE5B;AACA;AACA;AACA,CAAC,CAAC,mBAAmB;;AAErB;AACA;AACA;AACA,CAAC,CAAC,iBAAiB;;AAEnB;AACA;AACA;AACA,CAAC,CAAC,8BAA8B;;AAEhC;AACA;AACA;AACA,CAAC,CAAC,+BAA+B;;AAEjC;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;AACA,CAAC,CAAC,kCAAkC;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC,CAAC,wBAAwB;;AAE1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB;AACpB,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,CAAC,CAAC,wBAAwB;;AAE1B;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,yBAAyB;;;;;;;;;;;AC7Jd,8CAA6C,CAAC,YAAY,EAAC,CAAC;;AAEzE,aAAa,mBAAO,CAAC,6DAAU;;;;;;;;;;;;;;;;AAgB/B,YAAY,mBAAO,CAAC,2EAAiB;;;;;;;;;;;;;;;;;;AAkBrC,kBAAkB,mBAAO,CAAC,uFAAuB;;;;;;;;;;;;AAYjD,iBAAiB,mBAAO,CAAC,2EAAc;AACvC,gBAAgB,mBAAO,CAAC,uFAAuB;AAC/C,aAAa,mBAAO,CAAC,iFAAoB;AACzC,aAAa,mBAAO,CAAC,iFAAoB;AACzC,iBAAiB,mBAAO,CAAC,+EAAmB;AAC5C,YAAY,mBAAO,CAAC,oEAAQ;;;;;;;;;;;;AAY5B,kBAAkB,mBAAO,CAAC,gFAAc;;;;;;AAMxC,YAAY,mBAAO,CAAC,oEAAQ;;;;;;;;;;AAU5B,YAAY,mBAAO,CAAC,oEAAQ;;AAE5B;AACA;AACA;AACA;AACA,2DAA2D,uBAAuB;AAClF;AACA;AACA,CAAC,CAAC,qBAAqB;;AAEvB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,sBAAsB;;AAExB;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,wDAAwD;;AAExD;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,wCAAwC;;AAE1C;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,6BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,iCAAiC;AACjC;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC,CAAC,yBAAyB;;AAE3B;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,kBAAkB;;AAEpB;AACA;AACA;AACA;AACA,CAAC,CAAC,sBAAsB;;AAExB;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,qBAAqB;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,2BAA2B;;AAE7B;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,kBAAkB;;AAEpB;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+C;AAC/C;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC,CAAC,8BAA8B;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,oCAAoC;;AAEtC;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,0BAA0B;;AAE5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH,eAAe,YAAY;AAC3B;AACA;AACA;AACA;AACA,CAAC,CAAC,mBAAmB;;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,uBAAuB;;AAEzB;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,GAAG;AACH;AACA;AACA,CAAC,CAAC,2BAA2B;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,aAAa,YAAY;AACzB;;AAEA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,6BAA6B;;AAE/B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,mBAAmB;;AAErB;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,2BAA2B,YAAY;AACvC;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;AC3nCa,8CAA6C,CAAC,YAAY,EAAC,CAAC,aAAa,mBAAO,CAAC,iFAAoB;;AAElH,aAAa,mBAAO,CAAC,iFAAoB;AACzC,iBAAiB,mBAAO,CAAC,+EAAmB;AAC5C,YAAY,mBAAO,CAAC,oEAAQ;;AAE5B;;AAEA;AACA;AACA;AACA,CAAC,CAAC,oBAAoB;;AAEtB;AACA;AACA;AACA,CAAC,CAAC,6BAA6B;;AAE/B;AACA;AACA;AACA,CAAC,CAAC,qBAAqB;;AAEvB;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,wBAAwB;;AAE1B;AACA;AACA;AACA,CAAC,CAAC,0BAA0B;;AAE5B;AACA;AACA;AACA,0BAA0B,uBAAuB;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,6BAA6B;;AAE/B;AACA;AACA,CAAC,CAAC,wBAAwB;;AAE1B;AACA;AACA;AACA;AACA,6CAA6C;AAC7C;AACA,CAAC,CAAC,iBAAiB;;AAEnB;AACA;AACA;AACA;AACA;AACA,8CAA8C,0CAA0C;AACxF;AACA,CAAC,CAAC,cAAc;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,kBAAkB;;;;;;;;;;;ACvFP,8CAA6C,CAAC,YAAY,EAAC,CAAC,cAAc;AACvF,sBAAsB;AACtB,sBAAsB,0DAA0D;AAChF,4BAA4B,4EAA4E;AACxG,sBAAsB;AACtB,mBAAmB;AACnB,6BAA6B,+EAA+E;AAC5G,2BAA2B,yEAAyE;AACpG,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,yBAAyB,mEAAmE;AAC5F,uBAAuB,6DAA6D;AACpF,wBAAwB,gEAAgE;AACxF,6BAA6B,+EAA+E;AAC5G,8BAA8B,kFAAkF;AAChH,sBAAsB,0DAA0D;AAChF,sBAAsB,0DAA0D;AAChF,mBAAmB,iDAAiD;AACpE,kBAAkB,8CAA8C;AAChE,iBAAiB,2CAA2C;AAC5D,mBAAmB,iDAAiD;AACpE,oBAAoB,oDAAoD;AACxE,oBAAoB,oDAAoD;AACxE,oBAAoB,oDAAoD;AACxE,oBAAoB,oDAAoD;AACxE,oBAAoB,oDAAoD;AACxE,oBAAoB,oDAAoD;AACxE,oBAAoB,oDAAoD;AACxE,oBAAoB,oDAAoD;AACxE,oBAAoB,oDAAoD;AACxE,oBAAoB,oDAAoD;AACxE,mBAAmB,iDAAiD;AACpE,uBAAuB,6DAA6D,OAAO;AAC3F,sBAAsB,0DAA0D;AAChF,sBAAsB,0DAA0D;AAChF,yBAAyB,mEAAmE;AAC5F,0BAA0B,sEAAsE;AAChG,oBAAoB,oDAAoD;AACxE,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,+BAA+B,qFAAqF;AACpH,uBAAuB,6DAA6D;AACpF,gCAAgC,wFAAwF;AACxH,mBAAmB,iDAAiD;AACpE,wBAAwB,gEAAgE;AACxF,yBAAyB,mEAAmE;AAC5F,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,wBAAwB,gEAAgE;AACxF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,yBAAyB,gEAAgE;AACzF,6BAA6B,4EAA4E,OAAO;AAChH,0BAA0B,mEAAmE;AAC7F,8BAA8B,+EAA+E,OAAO;AACpH,oBAAoB,iDAAiD;AACrE,+BAA+B;AAC/B;AACA,8BAA8B,4EAA4E;AAC1G,6BAA6B;AAC7B,kCAAkC;AAClC,CAAC,gBAAgB,iBAAiB,iBAAiB;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;ACjHJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,iBAAiB,mBAAO,CAAC,yEAAa;AAC/G,kBAAkB,mBAAO,CAAC,2EAAc;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,kDAAkD,CAAC,0BAA0B;AAC7E,eAAe,SAAS;AACxB;AACA;AACA,iBAAiB,WAAW;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gCAAkC;AAClC,gCAAkC;;AAElC,gEAAgE,CAAC,2BAA2B;AAC5F,+CAA+C,wCAAwC;AACvF;AACA;;;;;;;;;;;ACjCa,8CAA6C,CAAC,YAAY,EAAC,CAAC,iBAAiB,mBAAO,CAAC,yEAAa;;AAE/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,CAAC,wBAAwB;;AAE3B,wDAAwD,CAAC,sBAAsB;;AAE/E,6CAA6C,CAAC,qBAAqB;AACnE;AACA;AACA;;;;;;;;;;;AChCa,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;;AAEvK,iBAAiB,mBAAO,CAAC,kFAAqB;AAC9C,gBAAgB,mBAAO,CAAC,8FAA8B;AACtD,aAAa,mBAAO,CAAC,wFAA2B;;AAEhD,yBAAyB,mBAAO,CAAC,wFAA2B,EAAE;;;;AAI9D,0BAA0B,mBAAO,CAAC,0FAA4B,EAAE;AAChE,gCAAgC,mBAAO,CAAC,sGAAkC,EAAE;;;AAG5E,mBAAmB,mBAAO,CAAC,8EAAe,EAAE;;AAE5C;AACA;AACA;AACA;AACA,aAAa;AACb,cAAc;AACd,cAAc;;;AAGd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,uCAAuC,qBAAqB,uCAAuC,+BAA+B,2DAA2D,uEAAuE,iEAAiE,iDAAiD,kDAAkD;AACpb;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,+DAA+D,YAAY,EAAE;AAC7E;AACA;AACA;;AAEA;AACA;AACA,iDAAiD;AACjD;AACA;AACA;;AAEA;AACA,+CAA+C;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,kBAAkB,IAAI;AACtB;AACA,+BAA+B;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC,YAAY;AAChD;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA,wCAAwC,YAAY;AACpD;AACA,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,gCAAgC,WAAW,IAAI,YAAY;AAC3D;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA;AACA,0BAA0B;AAC1B;AACA;AACA;AACA;AACA;;AAEA,qCAAqC;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA,sFAAsF;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,kBAAkB;AACjD;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,kBAAkB;AACnD;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B,kBAAkB;AAChD;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC,KAAK,KAAK,kBAAkB,KAAK,KAAK,QAAQ,KAAK;AACtF,KAAK;AACL,mCAAmC,KAAK,KAAK,kBAAkB,KAAK,KAAK,QAAQ,KAAK;AACtF,KAAK;AACL,8CAA8C,aAAa;AAC3D;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAmD,MAAM;AACzD,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAmD,MAAM;AACzD,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,uBAAuB;AACvB;AACA,sCAAsC,gBAAgB;AACtD;AACA,mCAAmC,eAAe;AAClD;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,WAAW,QAAQ,KAAK,QAAQ;AAC7D;;AAEA;AACA;AACA;AACA,mBAAmB,iBAAiB;AACpC;AACA,OAAO,4CAA4C,KAAK;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,0DAA0D,KAAK;AAC/D;AACA;AACA,6BAA6B,KAAK,IAAI,YAAY;AAClD;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,sBAAsB;AACtB;AACA;AACA;AACA;AACA,uCAAuC,KAAK,KAAK,MAAM;AACvD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uCAAuC,KAAK,KAAK,MAAM;AACvD;;AAEA;AACA;AACA,aAAa;AACb;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA,aAAa,UAAU;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA,yCAAyC,aAAa,KAAK,2BAA2B;AACtF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA,OAAO;AACP,6CAA6C,2CAA2C;AACxF;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AC5xBJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;;AAEvK,gBAAgB,mBAAO,CAAC,8FAA8B;AACtD,aAAa,mBAAO,CAAC,wFAA2B;;AAEhD,yBAAyB,mBAAO,CAAC,wFAA2B,EAAE;;;;AAI9D,0BAA0B,mBAAO,CAAC,0FAA4B,EAAE;AAChE,6BAA6B,mBAAO,CAAC,gGAA+B;AACpE,gCAAgC,mBAAO,CAAC,sGAAkC,EAAE;;AAE5E,mBAAmB,mBAAO,CAAC,8EAAe,EAAE;;AAE5C;AACA;AACA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,qBAAqB,+BAA+B,2DAA2D;AAC3H;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,+CAA+C;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B;AAC1B;AACA;AACA;AACA;AACA;;AAEA,qCAAqC;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,oDAAoD;AACpD;AACA,sCAAsC,gBAAgB;AACtD;AACA,iCAAiC,eAAe;AAChD;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AC1UJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;;AAEvK,mBAAmB,mBAAO,CAAC,8EAAe,EAAE;;AAE5C;AACA;AACA,YAAY,uCAAuC;AACnD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AChBJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;;;AAGvK,aAAa,mBAAO,CAAC,4FAA6B,EAAE;AACpD,aAAa,mBAAO,CAAC,wFAA2B;AAChD,iBAAiB,mBAAO,CAAC,sFAA0B;;AAEnD,wBAAwB,mBAAO,CAAC,sFAA0B,EAAE;;AAE5D,mBAAmB,mBAAO,CAAC,8EAAe,EAAE;;AAE5C;AACA;;AAEA;AACA,YAAY;AACZ,aAAa;AACb,aAAa;;;AAGb;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,uCAAuC,qBAAqB,uCAAuC,+BAA+B,uBAAuB,2CAA2C,4CAA4C;AAC5P;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,sBAAsB,qBAAqB,KAAK,6CAA6C;AAC7F,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,kCAAkC,YAAY,0BAA0B,gBAAgB,YAAY;AACpG;AACA;AACA,mCAAmC,EAAE,UAAU;AAC/C,OAAO;AACP;AACA;AACA;AACA;AACA,+BAA+B;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA,SAAS;AACT;AACA;AACA,OAAO;AACP;AACA;AACA,OAAO;AACP;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA,iCAAiC,UAAU;AAC3C,KAAK;AACL,+BAA+B;AAC/B;AACA;;AAEA;AACA;AACA;AACA,mCAAmC,QAAQ;AAC3C,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC,QAAQ;AAC7C;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA,OAAO;AACP;AACA,OAAO;AACP;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,oCAAoC,YAAY,EAAE,gBAAgB;AAClE;AACA;;AAEA;AACA,WAAW,cAAc;AACzB;AACA;AACA;AACA;AACA;AACA,gCAAgC,uBAAuB,EAAE,qBAAqB;;AAE9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW,+BAA+B,EAAE,6BAA6B;AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;AAEjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,2BAA2B;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,iBAAiB,iBAAiB;AAClC;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,aAAa;AAC5B;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,iBAAiB;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,KAAK;AACL,aAAa,aAAa;AAC1B;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY;AACZ;AACA,UAAU;AACV;;;;;;;;;;;AC7Ya,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB,EAAE,aAAa,mBAAO,CAAC,wFAA2B;;AAEzN,mBAAmB,mBAAO,CAAC,8EAAe,EAAE;;AAE5C;AACA;AACA,YAAY;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;ACnBJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;AACvK,aAAa,mBAAO,CAAC,wFAA2B;;AAEhD,mBAAmB,mBAAO,CAAC,8EAAe,EAAE;;AAE5C;AACA;AACA,YAAY,qBAAqB;AACjC;;AAEA;AACA;AACA;AACA,kCAAkC,oCAAoC;AACtE;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AClBJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;AACvK,aAAa,mBAAO,CAAC,wFAA2B;;AAEhD,mBAAmB,mBAAO,CAAC,8EAAe,EAAE;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,qBAAqB;AACjC;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,MAAM,aAAa,MAAM;AACxD,OAAO;AACP,+BAA+B,MAAM,MAAM,MAAM;AACjD;AACA;AACA,qCAAqC,kBAAkB;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4EAA4E,kBAAkB;AAC9F,OAAO;AACP,8EAA8E,kBAAkB;AAChG,OAAO;AACP,8EAA8E,kBAAkB;AAChG,OAAO;AACP,sEAAsE,kBAAkB;AACxF,OAAO;AACP,sEAAsE,kBAAkB;AACxF,OAAO;AACP;AACA;AACA;AACA,oEAAoE,kBAAkB;AACtF,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgD,EAAE;AAClD;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AC1JJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;;AAEvK,iBAAiB,mBAAO,CAAC,kFAAqB;AAC9C,aAAa,mBAAO,CAAC,wFAA2B;;;AAGhD,mBAAmB,mBAAO,CAAC,8EAAe,EAAE;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,uCAAuC,qBAAqB,uCAAuC;AAC/G;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwC,QAAQ;AAChD,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,8CAA8C,YAAY;AAC1D;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gCAAgC;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,UAAU,mCAAmC;AAC7C;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AC/JJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB,EAAE,iBAAiB,mBAAO,CAAC,kFAAqB;;AAEvN,mBAAmB,mBAAO,CAAC,8EAAe,EAAE;;AAE5C;AACA,aAAa;;AAEb;AACA,YAAY,qBAAqB,yBAAyB;AAC1D;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAI;AACX;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA,EAAE;AACF;AACA,MAAM,8BAA8B;AACpC,mCAAmC,aAAa,KAAK,gBAAgB,KAAK;AAC1E;AACA,QAAQ,EAAE;AACV;AACA;AACA;AACA,CAAC,IAAI;AACL;;AAEA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;ACpEJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;;;AAGvK,gBAAgB,mBAAO,CAAC,8FAA8B;AACtD,aAAa,mBAAO,CAAC,wFAA2B;;AAEhD,oBAAoB,mBAAO,CAAC,8EAAsB,EAAE;AACpD,4BAA4B,mBAAO,CAAC,gGAAwB,EAAE;AAC9D,4BAA4B,mBAAO,CAAC,gGAAwB,EAAE;AAC9D,uBAAuB,mBAAO,CAAC,sFAAmB,EAAE;AACpD,sBAAsB,mBAAO,CAAC,oFAAkB,EAAE;AAClD,mCAAmC,mBAAO,CAAC,8GAA+B,EAAE;AAC5E,uCAAuC,mBAAO,CAAC,sHAAmC,EAAE;AACpF,0CAA0C,mBAAO,CAAC,4HAAsC,EAAE;AAC1F,mCAAmC,mBAAO,CAAC,8GAA+B,EAAE;AAC5E,iCAAiC,mBAAO,CAAC,0GAA6B,EAAE;;AAExE,6BAA6B,mBAAO,CAAC,kGAAyB,EAAE;;AAEhE;AACA,aAAa;;;AAGb,cAAc;;;;;AAKd;AACA;AACA;AACA;AACA;AACA,MAAM,4CAA4C;AAClD;AACA;AACA,WAAW,gCAAgC;AAC3C;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,oDAAoD;AACpD;AACA;AACA;AACA;AACA,yDAAyD,GAAG;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,kCAAkC,UAAU;AAC5C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA,mBAAmB,UAAU,GAAG,KAAK;AACrC;AACA;AACA;AACA,aAAa,0CAA0C,EAAE,cAAc,EAAE,UAAU;AACnF;AACA,KAAK;AACL,iCAAiC,0CAA0C,GAAG,aAAa;AAC3F;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sDAAsD,wBAAwB;AAC9E;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,SAAS,GAAG,YAAY,SAAS,EAAE,GAAG,6BAA6B,EAAE;AACjG;AACA,OAAO;AACP,+CAA+C,GAAG,6BAA6B,EAAE;AACjF;AACA;;AAEA;AACA;AACA;AACA;AACA,6CAA6C,mCAAmC,IAAI;AACpF,SAAS;AACT,6CAA6C,mCAAmC,IAAI;AACpF;AACA,SAAS;AACT,6CAA6C,mCAAmC,IAAI;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC;AACjC;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA,cAAc,EAAE;AAChB;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAmD,UAAU,aAAa,KAAK;AAC/E,aAAa;AACb;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;ACpZJ,8CAA6C,CAAC,YAAY,EAAC,CAAC;AACzE;;;AAGA;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;ACXJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB,EAAE,aAAa,mBAAO,CAAC,wFAA2B;;AAEzN,oBAAoB,mBAAO,CAAC,8EAAsB,EAAE;;AAEpD,mBAAmB,mBAAO,CAAC,8EAAe,EAAE;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,uCAAuC,qBAAqB;AACxE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kCAAkC,UAAU,cAAc,SAAS;AACnE;AACA;AACA;AACA;AACA,kCAAkC,SAAS,eAAe,SAAS,KAAK,SAAS,KAAK,GAAG;AACzF,KAAK;AACL,kCAAkC,SAAS,OAAO,SAAS,KAAK,GAAG;AACnE;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,KAAK;AAClC,OAAO;AACP;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA,2BAA2B,mBAAmB;AAC9C,WAAW;AACX,4BAA4B,mBAAmB;AAC/C;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,wCAAwC,KAAK,KAAK,WAAW;AAC7D;AACA,OAAO;AACP;AACA;;AAEA;AACA,kCAAkC,SAAS,GAAG,eAAe,MAAM,gBAAgB;AACnF,OAAO;AACP;AACA,aAAa,SAAS,GAAG,SAAS,GAAG,eAAe,MAAM,eAAe,MAAM,gBAAgB;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AC3JJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,aAAa,mBAAO,CAAC,wFAA2B;;;AAGzH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;AC5BJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB,EAAE,uBAAuB,mBAAO,CAAC,0EAAmB,EAAE;;AAE7N,aAAa,mBAAO,CAAC,wFAA2B;;AAEhD;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,mBAAmB,uBAAuB;AAC1C;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA;;AAEA;AACA,cAAc,iBAAiB,GAAG,eAAe;AACjD;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL,gBAAgB,kBAAkB,GAAG,oBAAoB;AACzD;AACA;AACA,CAAC,CAAC,eAAe;;AAEjB;AACA;AACA,cAAc,uBAAuB;AACrC,GAAG;AACH;AACA;AACA;;;;;;;;;;;ACtEa,8CAA6C,CAAC,YAAY,EAAC;;AAExE,gBAAgB,mBAAO,CAAC,8FAA8B;AACtD,aAAa,mBAAO,CAAC,wFAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,QAAQ,uDAAuD;AAC/D,KAAK;AACL,2BAA2B,6DAA6D;AACxF;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+DAA+D;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,uDAAuD;AACjE;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,sDAAsD,8BAA8B;AACpF;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,OAAO;AACP;AACA,6BAA6B,uDAAuD;AACpF;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;AAEjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8EAA8E;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA,UAAU;AACV;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sDAAsD,KAAK,KAAK,KAAK;AACrE;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,UAAU;AACV;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;;;;;;;;;;;ACzTa,8CAA6C,CAAC,YAAY,EAAC,CAAC,iBAAiB,mBAAO,CAAC,kFAAqB;AACvH,aAAa,mBAAO,CAAC,wFAA2B;;;;;;;;AAQhD;AACA;AACA;AACA,EAAE,CAAC,8BAA8B;;AAEjC;AACA;AACA;AACA;AACA,8DAA8D,EAAE;AAChE,iDAAiD,EAAE;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,0BAA0B;AAC3C;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA,UAAU;AACV,CAAC,CAAC,eAAe;;;;;;;;;;;ACvCJ,8CAA6C,CAAC,YAAY,EAAC;AACxE,aAAa,mBAAO,CAAC,wFAA2B;;AAEhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;ACdJ,8CAA6C,CAAC,YAAY,EAAC;;;;;;;;;AASxE;AACA;AACA;AACA,UAAU;AACV,CAAC,CAAC,eAAe;;AAEjB;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;ACrBa,8CAA6C,CAAC,YAAY,EAAC,CAAC,uCAAuC,uCAAuC,gBAAgB;AACvK,iBAAiB,mBAAO,CAAC,kFAAqB;AAC9C,aAAa,mBAAO,CAAC,wFAA2B;;AAEhD,sBAAsB,mBAAO,CAAC,kGAAgC;AAC9D,wBAAwB,mBAAO,CAAC,gFAAoB,EAAE;;AAEtD;AACA;AACA;AACA,iBAAiB,0BAA0B;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,6BAA6B;;;;;;;;;;;AC1ClB,8CAA6C,CAAC,YAAY,EAAC,CAAC,gBAAgB,mBAAO,CAAC,8FAA8B;AAC/H,aAAa,mBAAO,CAAC,wFAA2B;;;AAGhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,0BAA0B;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;AAEjB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA,KAAK;AACL;AACA,KAAK;AACL,2CAA2C,qCAAqC;AAChF;AACA;AACA;;;;;;;;;;;ACvFa,8CAA6C,CAAC,YAAY,EAAC,CAAC,gBAAgB,mBAAO,CAAC,8FAA8B;;;AAG/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;ACrCJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,kBAAkB,mBAAO,CAAC,wFAA2B;;AAE9H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,iBAAiB;AAClC;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;ACrEJ,8CAA6C,CAAC,YAAY,EAAC,CAAC,aAAa,mBAAO,CAAC,wFAA2B;;;;AAIzH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4EAA4E;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;ACpCJ;AACb;AACA,iDAAiD,QAAQ;AACzD,wCAAwC,QAAQ;AAChD,wDAAwD,QAAQ;AAChE;AACA;AACA;AACA,8CAA6C,CAAC,cAAc,EAAC;AAC7D,eAAe,GAAG,sBAAsB;AACxC,cAAc,mBAAO,CAAC,kEAAS;AAC/B,aAAa,mBAAO,CAAC,gEAAQ;AAC7B;AACA;AACA;AACA,cAAc,mBAAO,CAAC,kEAAS;AAC/B,0CAAyC,CAAC,qCAAqC,uBAAuB,EAAE,EAAE,EAAC;AAC3G,6CAA4C,CAAC,qCAAqC,0BAA0B,EAAE,EAAE,EAAC;AACjH,gDAA+C,CAAC,qCAAqC,6BAA6B,EAAE,EAAE,EAAC;AACvH,yCAAwC,CAAC,qCAAqC,sBAAsB,EAAE,EAAE,EAAC;AACzG,0CAAyC,CAAC,qCAAqC,uBAAuB,EAAE,EAAE,EAAC;AAC3G,4CAA2C,CAAC,qCAAqC,yBAAyB,EAAE,EAAE,EAAC;AAC/G,yCAAwC,CAAC,qCAAqC,sBAAsB,EAAE,EAAE,EAAC;AACzG,6CAA4C,CAAC,qCAAqC,0BAA0B,EAAE,EAAE,EAAC;AACjH,0CAAyC,CAAC,qCAAqC,uBAAuB,EAAE,EAAE,EAAC;AAC3G,8CAA6C,CAAC,qCAAqC,2BAA2B,EAAE,EAAE,EAAC;AACnH,yCAAwC,CAAC,qCAAqC,sBAAsB,EAAE,EAAE,EAAC;AACzG,0CAAyC,CAAC,qCAAqC,uBAAuB,EAAE,EAAE,EAAC;AAC3G,yCAAwC,CAAC,qCAAqC,sBAAsB,EAAE,EAAE,EAAC;AACzG,0CAAyC,CAAC,qCAAqC,uBAAuB,EAAE,EAAE,EAAC;AAC3G,iDAAgD,CAAC,qCAAqC,8BAA8B,EAAE,EAAE,EAAC;AACzH,yCAAwC,CAAC,qCAAqC,sBAAsB,EAAE,EAAE,EAAC;AACzG,2CAA0C,CAAC,qCAAqC,wBAAwB,EAAE,EAAE,EAAC;AAC7G,4CAA2C,CAAC,qCAAqC,yBAAyB,EAAE,EAAE,EAAC;AAC/G,wCAAuC,CAAC,qCAAqC,qBAAqB,EAAE,EAAE,EAAC;AACvG,yCAAwC,CAAC,qCAAqC,sBAAsB,EAAE,EAAE,EAAC;AACzG,uCAAsC,CAAC,qCAAqC,oBAAoB,EAAE,EAAE,EAAC;AACrG,wCAAuC,CAAC,qCAAqC,qBAAqB,EAAE,EAAE,EAAC;AACvG,uCAAsC,CAAC,qCAAqC,oBAAoB,EAAE,EAAE,EAAC;AACrG,yCAAwC,CAAC,qCAAqC,sBAAsB,EAAE,EAAE,EAAC;AACzG,yCAAwC,CAAC,qCAAqC,sBAAsB,EAAE,EAAE,EAAC;AACzG,yCAAwC,CAAC,qCAAqC,sBAAsB,EAAE,EAAE,EAAC;AACzG,gDAA+C,CAAC,qCAAqC,6BAA6B,EAAE,EAAE,EAAC;AACvH,6CAA4C,CAAC,qCAAqC,0BAA0B,EAAE,EAAE,EAAC;AACjH,aAAa,mBAAO,CAAC,gEAAQ;AAC7B,0CAAyC,CAAC,qCAAqC,sBAAsB,EAAE,EAAE,EAAC;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,uBAAuB;AAC3C;AACA;AACA,kEAAkE;AAClE;AACA,6CAA6C,yBAAyB;AACtE;AACA,mDAAmD,gBAAgB;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,iBAAiB;AAChD;AACA;AACA;AACA;AACA;AACA,8CAA8C,gBAAgB;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgD,gDAAgD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sDAAsD,iDAAiD;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,eAAe;;;;;;;;;;;AC/NF;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,gBAAgB,sCAAsC,iBAAiB,EAAE;AACvF,6BAA6B,uDAAuD;AACpF;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA,CAAC;AACD,8CAA6C,CAAC,cAAc,EAAC;AAC7D,kBAAkB,GAAG,iBAAiB,GAAG,kBAAkB,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa,GAAG,iBAAiB,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,GAAG,oBAAoB,GAAG,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,oBAAoB,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,aAAa;AAChgB,aAAa,mBAAO,CAAC,gEAAQ;AAC7B;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsB,yBAAyB;AAC/C,YAAY;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sCAAsC,uEAAuE;AAC7G;AACA;AACA,CAAC;AACD,aAAa;AACb;AACA;AACA;AACA,qBAAqB,4BAA4B;AACjD,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sCAAsC,4EAA4E;AAClH;AACA;AACA,CAAC;AACD,gBAAgB;AAChB;AACA;AACA;AACA,0BAA0B,wCAAwC;AAClE,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,kBAAkB;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,cAAc;AACd;AACA;AACA;AACA;AACA;AACA,oBAAoB,uBAAuB;AAC3C;AACA;AACA,iDAAiD,qBAAqB,EAAE;AACxE;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yDAAyD,oCAAoC,EAAE;AAC/F;AACA;AACA;AACA;AACA,2BAA2B,yBAAyB;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,cAAc;AACd;AACA;AACA;AACA;AACA;AACA,oBAAoB,uBAAuB;AAC3C;AACA;AACA,iDAAiD,qBAAqB,EAAE;AACxE;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA,6CAA6C,oEAAoE,EAAE;AACnH,kCAAkC,UAAU,EAAE;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yDAAyD,oCAAoC,EAAE;AAC/F;AACA;AACA,2BAA2B,yBAAyB;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,cAAc;AACd;AACA;AACA;AACA;AACA;AACA,oBAAoB,uBAAuB;AAC3C;AACA;AACA,wDAAwD,qBAAqB,EAAE;AAC/E;AACA,oBAAoB;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yDAAyD,kDAAkD,EAAE;AAC7G;AACA,4DAA4D,4BAA4B,EAAE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,qBAAqB;AACrB;AACA,oCAAoC,eAAe;AACnD;AACA;AACA;AACA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8EAA8E,sBAAsB,EAAE;AACtG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sCAAsC,oEAAoE;AAC1G;AACA;AACA,CAAC;AACD,oBAAoB;AACpB;AACA,mDAAmD,yCAAyC,EAAE;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA,wDAAwD,eAAe,EAAE;AACzE;AACA;AACA;AACA;AACA,wDAAwD,yDAAyD,EAAE;AACnH,2DAA2D,6CAA6C,EAAE;AAC1G;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,2BAA2B,yBAAyB;AACpD;AACA;AACA;AACA;AACA,2BAA2B,yBAAyB;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kDAAkD,+BAA+B,EAAE;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,cAAc;AACd;AACA;AACA;AACA,wBAAwB,2CAA2C;AACnE,WAAW;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,uBAAuB;AAC3C;AACA;AACA;AACA;AACA,YAAY;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,cAAc;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yDAAyD,0CAA0C,EAAE;AACrG;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA,2BAA2B,yBAAyB;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,kBAAkB;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sCAAsC,yEAAyE;AAC/G;AACA;AACA,CAAC;AACD,iBAAiB;AACjB;AACA;AACA;AACA,kBAAkB;AAClB,qCAAqC,aAAa,EAAE;AACpD,wCAAwC,gCAAgC,EAAE;AAC1E,wCAAwC,qCAAqC,EAAE;AAC/E,yCAAyC,iCAAiC,EAAE;AAC5E,wCAAwC,gCAAgC,EAAE;AAC1E,wCAAwC,gCAAgC,EAAE;AAC1E,sCAAsC,oBAAoB,EAAE;AAC5D,2CAA2C,0BAA0B,EAAE;AACvE,sCAAsC,qBAAqB,EAAE;AAC7D,uCAAuC,cAAc,EAAE;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB,qEAAqE;AAC9F;AACA;AACA,IAAI,yBAAyB,+BAA+B,2BAA2B,EAAE;AACzF;AACA;AACA,mEAAmE,+BAA+B,EAAE;AACpG;AACA;AACA;AACA,sEAAsE,gBAAgB;AACtF;AACA;AACA;;;;;;;;;;;ACrjBa;AACb;AACA;AACA;AACA,cAAc,gBAAgB,sCAAsC,iBAAiB,EAAE;AACvF,6BAA6B,uDAAuD;AACpF;AACA;AACA;AACA;AACA,uBAAuB,sBAAsB;AAC7C;AACA;AACA,CAAC;AACD,8CAA6C,CAAC,cAAc,EAAC;AAC7D,qBAAqB,GAAG,mBAAmB,GAAG,cAAc;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,cAAc;AACd;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uDAAuD,aAAa;AACpE,uDAAuD,aAAa;AACpE,wDAAwD;AACxD;AACA,CAAC;AACD,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yCAAyC,gBAAgB;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgD,QAAQ;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgD;AAChD;AACA;AACA;AACA,gDAAgD,QAAQ;AACxD;AACA;AACA;AACA;AACA,8BAA8B,+BAA+B;AAC7D;AACA;AACA;AACA,wCAAwC,QAAQ;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,qBAAqB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;;;;;;;;;;;;;;ACjIiC;;AAElC,6BAAe,oCAAU;AACzB,WAAW,kDAAS;AACpB;AACA,KAAK;AACL,C;;;;;;UCNA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCrBA;WACA;WACA;WACA;WACA,wCAAwC,yCAAyC;WACjF;WACA;WACA,E;;;;;WCPA,sF;;;;;WCAA;WACA;WACA;WACA,sDAAsD,kBAAkB;WACxE;WACA,+CAA+C,cAAc;WAC7D,E;;;;UCNA;UACA;UACA;UACA","file":"example-transform-ts-bundle.js","sourcesContent":["var LF = '\\n';\nvar CR = '\\r';\nvar LinesAndColumns = (function () {\n function LinesAndColumns(string) {\n this.string = string;\n var offsets = [0];\n for (var offset = 0; offset < string.length;) {\n switch (string[offset]) {\n case LF:\n offset += LF.length;\n offsets.push(offset);\n break;\n case CR:\n offset += CR.length;\n if (string[offset] === LF) {\n offset += LF.length;\n }\n offsets.push(offset);\n break;\n default:\n offset++;\n break;\n }\n }\n this.offsets = offsets;\n }\n LinesAndColumns.prototype.locationForIndex = function (index) {\n if (index < 0 || index > this.string.length) {\n return null;\n }\n var line = 0;\n var offsets = this.offsets;\n while (offsets[line + 1] <= index) {\n line++;\n }\n var column = index - offsets[line];\n return { line: line, column: column };\n };\n LinesAndColumns.prototype.indexForLocation = function (location) {\n var line = location.line, column = location.column;\n if (line < 0 || line >= this.offsets.length) {\n return null;\n }\n if (column < 0 || column > this.lengthOfLine(line)) {\n return null;\n }\n return this.offsets[line] + column;\n };\n LinesAndColumns.prototype.lengthOfLine = function (line) {\n var offset = this.offsets[line];\n var nextOffset = line === this.offsets.length - 1 ? this.string.length : this.offsets[line + 1];\n return nextOffset - offset;\n };\n return LinesAndColumns;\n}());\nexport default LinesAndColumns;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\n\n\nvar _tokenizer = require('./parser/tokenizer');\nvar _keywords = require('./parser/tokenizer/keywords');\nvar _types = require('./parser/tokenizer/types');\n\nvar _getNonTypeIdentifiers = require('./util/getNonTypeIdentifiers');\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * Class responsible for preprocessing and bookkeeping import and export declarations within the\n * file.\n *\n * TypeScript uses a simpler mechanism that does not use functions like interopRequireDefault and\n * interopRequireWildcard, so we also allow that mode for compatibility.\n */\n class CJSImportProcessor {\n __init() {this.nonTypeIdentifiers = new Set()}\n __init2() {this.importInfoByPath = new Map()}\n __init3() {this.importsToReplace = new Map()}\n __init4() {this.identifierReplacements = new Map()}\n __init5() {this.exportBindingsByLocalName = new Map()}\n\n constructor(\n nameManager,\n tokens,\n enableLegacyTypeScriptModuleInterop,\n options,\n isTypeScriptTransformEnabled,\n helperManager,\n ) {;this.nameManager = nameManager;this.tokens = tokens;this.enableLegacyTypeScriptModuleInterop = enableLegacyTypeScriptModuleInterop;this.options = options;this.isTypeScriptTransformEnabled = isTypeScriptTransformEnabled;this.helperManager = helperManager;CJSImportProcessor.prototype.__init.call(this);CJSImportProcessor.prototype.__init2.call(this);CJSImportProcessor.prototype.__init3.call(this);CJSImportProcessor.prototype.__init4.call(this);CJSImportProcessor.prototype.__init5.call(this);}\n\n preprocessTokens() {\n for (let i = 0; i < this.tokens.tokens.length; i++) {\n if (\n this.tokens.matches1AtIndex(i, _types.TokenType._import) &&\n !this.tokens.matches3AtIndex(i, _types.TokenType._import, _types.TokenType.name, _types.TokenType.eq)\n ) {\n this.preprocessImportAtIndex(i);\n }\n if (\n this.tokens.matches1AtIndex(i, _types.TokenType._export) &&\n !this.tokens.matches2AtIndex(i, _types.TokenType._export, _types.TokenType.eq)\n ) {\n this.preprocessExportAtIndex(i);\n }\n }\n this.generateImportReplacements();\n }\n\n /**\n * In TypeScript, import statements that only import types should be removed. This does not count\n * bare imports.\n */\n pruneTypeOnlyImports() {\n this.nonTypeIdentifiers = _getNonTypeIdentifiers.getNonTypeIdentifiers.call(void 0, this.tokens, this.options);\n for (const [path, importInfo] of this.importInfoByPath.entries()) {\n if (\n importInfo.hasBareImport ||\n importInfo.hasStarExport ||\n importInfo.exportStarNames.length > 0 ||\n importInfo.namedExports.length > 0\n ) {\n continue;\n }\n const names = [\n ...importInfo.defaultNames,\n ...importInfo.wildcardNames,\n ...importInfo.namedImports.map(({localName}) => localName),\n ];\n if (names.every((name) => this.isTypeName(name))) {\n this.importsToReplace.set(path, \"\");\n }\n }\n }\n\n isTypeName(name) {\n return this.isTypeScriptTransformEnabled && !this.nonTypeIdentifiers.has(name);\n }\n\n generateImportReplacements() {\n for (const [path, importInfo] of this.importInfoByPath.entries()) {\n const {\n defaultNames,\n wildcardNames,\n namedImports,\n namedExports,\n exportStarNames,\n hasStarExport,\n } = importInfo;\n\n if (\n defaultNames.length === 0 &&\n wildcardNames.length === 0 &&\n namedImports.length === 0 &&\n namedExports.length === 0 &&\n exportStarNames.length === 0 &&\n !hasStarExport\n ) {\n // Import is never used, so don't even assign a name.\n this.importsToReplace.set(path, `require('${path}');`);\n continue;\n }\n\n const primaryImportName = this.getFreeIdentifierForPath(path);\n let secondaryImportName;\n if (this.enableLegacyTypeScriptModuleInterop) {\n secondaryImportName = primaryImportName;\n } else {\n secondaryImportName =\n wildcardNames.length > 0 ? wildcardNames[0] : this.getFreeIdentifierForPath(path);\n }\n let requireCode = `var ${primaryImportName} = require('${path}');`;\n if (wildcardNames.length > 0) {\n for (const wildcardName of wildcardNames) {\n const moduleExpr = this.enableLegacyTypeScriptModuleInterop\n ? primaryImportName\n : `${this.helperManager.getHelperName(\"interopRequireWildcard\")}(${primaryImportName})`;\n requireCode += ` var ${wildcardName} = ${moduleExpr};`;\n }\n } else if (exportStarNames.length > 0 && secondaryImportName !== primaryImportName) {\n requireCode += ` var ${secondaryImportName} = ${this.helperManager.getHelperName(\n \"interopRequireWildcard\",\n )}(${primaryImportName});`;\n } else if (defaultNames.length > 0 && secondaryImportName !== primaryImportName) {\n requireCode += ` var ${secondaryImportName} = ${this.helperManager.getHelperName(\n \"interopRequireDefault\",\n )}(${primaryImportName});`;\n }\n\n for (const {importedName, localName} of namedExports) {\n requireCode += ` ${this.helperManager.getHelperName(\n \"createNamedExportFrom\",\n )}(${primaryImportName}, '${localName}', '${importedName}');`;\n }\n for (const exportStarName of exportStarNames) {\n requireCode += ` exports.${exportStarName} = ${secondaryImportName};`;\n }\n if (hasStarExport) {\n requireCode += ` ${this.helperManager.getHelperName(\n \"createStarExport\",\n )}(${primaryImportName});`;\n }\n\n this.importsToReplace.set(path, requireCode);\n\n for (const defaultName of defaultNames) {\n this.identifierReplacements.set(defaultName, `${secondaryImportName}.default`);\n }\n for (const {importedName, localName} of namedImports) {\n this.identifierReplacements.set(localName, `${primaryImportName}.${importedName}`);\n }\n }\n }\n\n getFreeIdentifierForPath(path) {\n const components = path.split(\"/\");\n const lastComponent = components[components.length - 1];\n const baseName = lastComponent.replace(/\\W/g, \"\");\n return this.nameManager.claimFreeName(`_${baseName}`);\n }\n\n preprocessImportAtIndex(index) {\n const defaultNames = [];\n const wildcardNames = [];\n let namedImports = [];\n\n index++;\n if (\n (this.tokens.matchesContextualAtIndex(index, _keywords.ContextualKeyword._type) ||\n this.tokens.matches1AtIndex(index, _types.TokenType._typeof)) &&\n !this.tokens.matches1AtIndex(index + 1, _types.TokenType.comma) &&\n !this.tokens.matchesContextualAtIndex(index + 1, _keywords.ContextualKeyword._from)\n ) {\n // import type declaration, so no need to process anything.\n return;\n }\n\n if (this.tokens.matches1AtIndex(index, _types.TokenType.parenL)) {\n // Dynamic import, so nothing to do\n return;\n }\n\n if (this.tokens.matches1AtIndex(index, _types.TokenType.name)) {\n defaultNames.push(this.tokens.identifierNameAtIndex(index));\n index++;\n if (this.tokens.matches1AtIndex(index, _types.TokenType.comma)) {\n index++;\n }\n }\n\n if (this.tokens.matches1AtIndex(index, _types.TokenType.star)) {\n // * as\n index += 2;\n wildcardNames.push(this.tokens.identifierNameAtIndex(index));\n index++;\n }\n\n if (this.tokens.matches1AtIndex(index, _types.TokenType.braceL)) {\n index++;\n ({newIndex: index, namedImports} = this.getNamedImports(index));\n }\n\n if (this.tokens.matchesContextualAtIndex(index, _keywords.ContextualKeyword._from)) {\n index++;\n }\n\n if (!this.tokens.matches1AtIndex(index, _types.TokenType.string)) {\n throw new Error(\"Expected string token at the end of import statement.\");\n }\n const path = this.tokens.stringValueAtIndex(index);\n const importInfo = this.getImportInfo(path);\n importInfo.defaultNames.push(...defaultNames);\n importInfo.wildcardNames.push(...wildcardNames);\n importInfo.namedImports.push(...namedImports);\n if (defaultNames.length === 0 && wildcardNames.length === 0 && namedImports.length === 0) {\n importInfo.hasBareImport = true;\n }\n }\n\n preprocessExportAtIndex(index) {\n if (\n this.tokens.matches2AtIndex(index, _types.TokenType._export, _types.TokenType._var) ||\n this.tokens.matches2AtIndex(index, _types.TokenType._export, _types.TokenType._let) ||\n this.tokens.matches2AtIndex(index, _types.TokenType._export, _types.TokenType._const)\n ) {\n this.preprocessVarExportAtIndex(index);\n } else if (\n this.tokens.matches2AtIndex(index, _types.TokenType._export, _types.TokenType._function) ||\n this.tokens.matches2AtIndex(index, _types.TokenType._export, _types.TokenType._class)\n ) {\n const exportName = this.tokens.identifierNameAtIndex(index + 2);\n this.addExportBinding(exportName, exportName);\n } else if (this.tokens.matches3AtIndex(index, _types.TokenType._export, _types.TokenType.name, _types.TokenType._function)) {\n const exportName = this.tokens.identifierNameAtIndex(index + 3);\n this.addExportBinding(exportName, exportName);\n } else if (this.tokens.matches2AtIndex(index, _types.TokenType._export, _types.TokenType.braceL)) {\n this.preprocessNamedExportAtIndex(index);\n } else if (this.tokens.matches2AtIndex(index, _types.TokenType._export, _types.TokenType.star)) {\n this.preprocessExportStarAtIndex(index);\n }\n }\n\n preprocessVarExportAtIndex(index) {\n let depth = 0;\n // Handle cases like `export let {x} = y;`, starting at the open-brace in that case.\n for (let i = index + 2; ; i++) {\n if (\n this.tokens.matches1AtIndex(i, _types.TokenType.braceL) ||\n this.tokens.matches1AtIndex(i, _types.TokenType.dollarBraceL) ||\n this.tokens.matches1AtIndex(i, _types.TokenType.bracketL)\n ) {\n depth++;\n } else if (\n this.tokens.matches1AtIndex(i, _types.TokenType.braceR) ||\n this.tokens.matches1AtIndex(i, _types.TokenType.bracketR)\n ) {\n depth--;\n } else if (depth === 0 && !this.tokens.matches1AtIndex(i, _types.TokenType.name)) {\n break;\n } else if (this.tokens.matches1AtIndex(1, _types.TokenType.eq)) {\n const endIndex = this.tokens.currentToken().rhsEndIndex;\n if (endIndex == null) {\n throw new Error(\"Expected = token with an end index.\");\n }\n i = endIndex - 1;\n } else {\n const token = this.tokens.tokens[i];\n if (_tokenizer.isDeclaration.call(void 0, token)) {\n const exportName = this.tokens.identifierNameAtIndex(i);\n this.identifierReplacements.set(exportName, `exports.${exportName}`);\n }\n }\n }\n }\n\n /**\n * Walk this export statement just in case it's an export...from statement.\n * If it is, combine it into the import info for that path. Otherwise, just\n * bail out; it'll be handled later.\n */\n preprocessNamedExportAtIndex(index) {\n // export {\n index += 2;\n const {newIndex, namedImports} = this.getNamedImports(index);\n index = newIndex;\n\n if (this.tokens.matchesContextualAtIndex(index, _keywords.ContextualKeyword._from)) {\n index++;\n } else {\n // Reinterpret \"a as b\" to be local/exported rather than imported/local.\n for (const {importedName: localName, localName: exportedName} of namedImports) {\n this.addExportBinding(localName, exportedName);\n }\n return;\n }\n\n if (!this.tokens.matches1AtIndex(index, _types.TokenType.string)) {\n throw new Error(\"Expected string token at the end of import statement.\");\n }\n const path = this.tokens.stringValueAtIndex(index);\n const importInfo = this.getImportInfo(path);\n importInfo.namedExports.push(...namedImports);\n }\n\n preprocessExportStarAtIndex(index) {\n let exportedName = null;\n if (this.tokens.matches3AtIndex(index, _types.TokenType._export, _types.TokenType.star, _types.TokenType._as)) {\n // export * as\n index += 3;\n exportedName = this.tokens.identifierNameAtIndex(index);\n // foo from\n index += 2;\n } else {\n // export * from\n index += 3;\n }\n if (!this.tokens.matches1AtIndex(index, _types.TokenType.string)) {\n throw new Error(\"Expected string token at the end of star export statement.\");\n }\n const path = this.tokens.stringValueAtIndex(index);\n const importInfo = this.getImportInfo(path);\n if (exportedName !== null) {\n importInfo.exportStarNames.push(exportedName);\n } else {\n importInfo.hasStarExport = true;\n }\n }\n\n getNamedImports(index) {\n const namedImports = [];\n while (true) {\n if (this.tokens.matches1AtIndex(index, _types.TokenType.braceR)) {\n index++;\n break;\n }\n\n // Flow type imports should just be ignored.\n let isTypeImport = false;\n if (\n (this.tokens.matchesContextualAtIndex(index, _keywords.ContextualKeyword._type) ||\n this.tokens.matches1AtIndex(index, _types.TokenType._typeof)) &&\n this.tokens.matches1AtIndex(index + 1, _types.TokenType.name) &&\n !this.tokens.matchesContextualAtIndex(index + 1, _keywords.ContextualKeyword._as)\n ) {\n isTypeImport = true;\n index++;\n }\n\n const importedName = this.tokens.identifierNameAtIndex(index);\n let localName;\n index++;\n if (this.tokens.matchesContextualAtIndex(index, _keywords.ContextualKeyword._as)) {\n index++;\n localName = this.tokens.identifierNameAtIndex(index);\n index++;\n } else {\n localName = importedName;\n }\n if (!isTypeImport) {\n namedImports.push({importedName, localName});\n }\n if (this.tokens.matches2AtIndex(index, _types.TokenType.comma, _types.TokenType.braceR)) {\n index += 2;\n break;\n } else if (this.tokens.matches1AtIndex(index, _types.TokenType.braceR)) {\n index++;\n break;\n } else if (this.tokens.matches1AtIndex(index, _types.TokenType.comma)) {\n index++;\n } else {\n throw new Error(`Unexpected token: ${JSON.stringify(this.tokens.tokens[index])}`);\n }\n }\n return {newIndex: index, namedImports};\n }\n\n /**\n * Get a mutable import info object for this path, creating one if it doesn't\n * exist yet.\n */\n getImportInfo(path) {\n const existingInfo = this.importInfoByPath.get(path);\n if (existingInfo) {\n return existingInfo;\n }\n const newInfo = {\n defaultNames: [],\n wildcardNames: [],\n namedImports: [],\n namedExports: [],\n hasBareImport: false,\n exportStarNames: [],\n hasStarExport: false,\n };\n this.importInfoByPath.set(path, newInfo);\n return newInfo;\n }\n\n addExportBinding(localName, exportedName) {\n if (!this.exportBindingsByLocalName.has(localName)) {\n this.exportBindingsByLocalName.set(localName, []);\n }\n this.exportBindingsByLocalName.get(localName).push(exportedName);\n }\n\n /**\n * Return the code to use for the import for this path, or the empty string if\n * the code has already been \"claimed\" by a previous import.\n */\n claimImportCode(importPath) {\n const result = this.importsToReplace.get(importPath);\n this.importsToReplace.set(importPath, \"\");\n return result || \"\";\n }\n\n getIdentifierReplacement(identifierName) {\n return this.identifierReplacements.get(identifierName) || null;\n }\n\n /**\n * Return a string like `exports.foo = exports.bar`.\n */\n resolveExportBinding(assignedName) {\n const exportedNames = this.exportBindingsByLocalName.get(assignedName);\n if (!exportedNames || exportedNames.length === 0) {\n return null;\n }\n return exportedNames.map((exportedName) => `exports.${exportedName}`).join(\" = \");\n }\n\n /**\n * Return all imported/exported names where we might be interested in whether usages of those\n * names are shadowed.\n */\n getGlobalNames() {\n return new Set([\n ...this.identifierReplacements.keys(),\n ...this.exportBindingsByLocalName.keys(),\n ]);\n }\n} exports.default = CJSImportProcessor;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\n\nconst HELPERS = {\n interopRequireWildcard: `\n function interopRequireWildcard(obj) {\n if (obj && obj.__esModule) {\n return obj;\n } else {\n var newObj = {};\n if (obj != null) {\n for (var key in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n newObj[key] = obj[key];\n }\n }\n }\n newObj.default = obj;\n return newObj;\n }\n }\n `,\n interopRequireDefault: `\n function interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : { default: obj };\n }\n `,\n createNamedExportFrom: `\n function createNamedExportFrom(obj, localName, importedName) {\n Object.defineProperty(exports, localName, {enumerable: true, get: () => obj[importedName]});\n }\n `,\n // Note that TypeScript and Babel do this differently; TypeScript does a simple existence\n // check in the exports object and does a plain assignment, whereas Babel uses\n // defineProperty and builds an object of explicitly-exported names so that star exports can\n // always take lower precedence. For now, we do the easier TypeScript thing.\n createStarExport: `\n function createStarExport(obj) {\n Object.keys(obj)\n .filter((key) => key !== \"default\" && key !== \"__esModule\")\n .forEach((key) => {\n if (exports.hasOwnProperty(key)) {\n return;\n }\n Object.defineProperty(exports, key, {enumerable: true, get: () => obj[key]});\n });\n }\n `,\n nullishCoalesce: `\n function nullishCoalesce(lhs, rhsFn) {\n if (lhs != null) {\n return lhs;\n } else {\n return rhsFn();\n }\n }\n `,\n asyncNullishCoalesce: `\n async function asyncNullishCoalesce(lhs, rhsFn) {\n if (lhs != null) {\n return lhs;\n } else {\n return await rhsFn();\n }\n }\n `,\n optionalChain: `\n function optionalChain(ops) {\n let lastAccessLHS = undefined;\n let value = ops[0];\n let i = 1;\n while (i < ops.length) {\n const op = ops[i];\n const fn = ops[i + 1];\n i += 2;\n if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {\n return undefined;\n }\n if (op === 'access' || op === 'optionalAccess') {\n lastAccessLHS = value;\n value = fn(value);\n } else if (op === 'call' || op === 'optionalCall') {\n value = fn((...args) => value.call(lastAccessLHS, ...args));\n lastAccessLHS = undefined;\n }\n }\n return value;\n }\n `,\n asyncOptionalChain: `\n async function asyncOptionalChain(ops) {\n let lastAccessLHS = undefined;\n let value = ops[0];\n let i = 1;\n while (i < ops.length) {\n const op = ops[i];\n const fn = ops[i + 1];\n i += 2;\n if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {\n return undefined;\n }\n if (op === 'access' || op === 'optionalAccess') {\n lastAccessLHS = value;\n value = await fn(value);\n } else if (op === 'call' || op === 'optionalCall') {\n value = await fn((...args) => value.call(lastAccessLHS, ...args));\n lastAccessLHS = undefined;\n }\n }\n return value;\n }\n `,\n optionalChainDelete: `\n function optionalChainDelete(ops) {\n const result = OPTIONAL_CHAIN_NAME(ops);\n return result == null ? true : result;\n }\n `,\n asyncOptionalChainDelete: `\n async function asyncOptionalChainDelete(ops) {\n const result = await ASYNC_OPTIONAL_CHAIN_NAME(ops);\n return result == null ? true : result;\n }\n `,\n};\n\n class HelperManager {\n __init() {this.helperNames = {}}\n constructor( nameManager) {;this.nameManager = nameManager;HelperManager.prototype.__init.call(this);}\n\n getHelperName(baseName) {\n let helperName = this.helperNames[baseName];\n if (helperName) {\n return helperName;\n }\n helperName = this.nameManager.claimFreeName(`_${baseName}`);\n this.helperNames[baseName] = helperName;\n return helperName;\n }\n\n emitHelpers() {\n let resultCode = \"\";\n if (this.helperNames.optionalChainDelete) {\n this.getHelperName(\"optionalChain\");\n }\n if (this.helperNames.asyncOptionalChainDelete) {\n this.getHelperName(\"asyncOptionalChain\");\n }\n for (const [baseName, helperCodeTemplate] of Object.entries(HELPERS)) {\n const helperName = this.helperNames[baseName];\n let helperCode = helperCodeTemplate;\n if (baseName === \"optionalChainDelete\") {\n helperCode = helperCode.replace(\"OPTIONAL_CHAIN_NAME\", this.helperNames.optionalChain);\n } else if (baseName === \"asyncOptionalChainDelete\") {\n helperCode = helperCode.replace(\n \"ASYNC_OPTIONAL_CHAIN_NAME\",\n this.helperNames.asyncOptionalChain,\n );\n }\n if (helperName) {\n resultCode += \" \";\n resultCode += helperCode.replace(baseName, helperName).replace(/\\s+/g, \" \").trim();\n }\n }\n return resultCode;\n }\n} exports.HelperManager = HelperManager;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _getIdentifierNames = require('./util/getIdentifierNames'); var _getIdentifierNames2 = _interopRequireDefault(_getIdentifierNames);\n\n class NameManager {\n __init() {this.usedNames = new Set()}\n\n constructor(code, tokens) {;NameManager.prototype.__init.call(this);\n this.usedNames = new Set(_getIdentifierNames2.default.call(void 0, code, tokens));\n }\n\n claimFreeName(name) {\n const newName = this.findFreeName(name);\n this.usedNames.add(newName);\n return newName;\n }\n\n findFreeName(name) {\n if (!this.usedNames.has(name)) {\n return name;\n }\n let suffixNum = 2;\n while (this.usedNames.has(name + suffixNum)) {\n suffixNum++;\n }\n return name + suffixNum;\n }\n} exports.default = NameManager;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }/**\n * This module was automatically generated by `ts-interface-builder`\n */\nvar _tsinterfacechecker = require('ts-interface-checker'); var t = _interopRequireWildcard(_tsinterfacechecker);\n// tslint:disable:object-literal-key-quotes\n\n const Transform = t.union(\n t.lit(\"jsx\"),\n t.lit(\"typescript\"),\n t.lit(\"flow\"),\n t.lit(\"imports\"),\n t.lit(\"react-hot-loader\"),\n); exports.Transform = Transform;\n\n const SourceMapOptions = t.iface([], {\n compiledFilename: \"string\",\n}); exports.SourceMapOptions = SourceMapOptions;\n\n const Options = t.iface([], {\n transforms: t.array(\"Transform\"),\n jsxPragma: t.opt(\"string\"),\n jsxFragmentPragma: t.opt(\"string\"),\n enableLegacyTypeScriptModuleInterop: t.opt(\"boolean\"),\n enableLegacyBabel5ModuleInterop: t.opt(\"boolean\"),\n sourceMapOptions: t.opt(\"SourceMapOptions\"),\n filePath: t.opt(\"string\"),\n production: t.opt(\"boolean\"),\n}); exports.Options = Options;\n\nconst exportedTypeSuite = {\n Transform: exports.Transform,\n SourceMapOptions: exports.SourceMapOptions,\n Options: exports.Options,\n};\nexports. default = exportedTypeSuite;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _tsinterfacechecker = require('ts-interface-checker');\nvar _Optionsgentypes = require('./Options-gen-types'); var _Optionsgentypes2 = _interopRequireDefault(_Optionsgentypes);\n\nconst {Options: OptionsChecker} = _tsinterfacechecker.createCheckers.call(void 0, _Optionsgentypes2.default);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n function validateOptions(options) {\n OptionsChecker.strictCheck(options);\n} exports.validateOptions = validateOptions;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n\nvar _types = require('./parser/tokenizer/types');\nvar _isAsyncOperation = require('./util/isAsyncOperation'); var _isAsyncOperation2 = _interopRequireDefault(_isAsyncOperation);\n\n\n\n\n\n\n class TokenProcessor {\n __init() {this.resultCode = \"\"}\n __init2() {this.tokenIndex = 0}\n\n constructor(\n code,\n tokens,\n isFlowEnabled,\n helperManager,\n ) {;this.code = code;this.tokens = tokens;this.isFlowEnabled = isFlowEnabled;this.helperManager = helperManager;TokenProcessor.prototype.__init.call(this);TokenProcessor.prototype.__init2.call(this);}\n\n /**\n * Make a new TokenProcessor for things like lookahead.\n */\n snapshot() {\n return {resultCode: this.resultCode, tokenIndex: this.tokenIndex};\n }\n\n restoreToSnapshot(snapshot) {\n this.resultCode = snapshot.resultCode;\n this.tokenIndex = snapshot.tokenIndex;\n }\n\n getResultCodeIndex() {\n return this.resultCode.length;\n }\n\n reset() {\n this.resultCode = \"\";\n this.tokenIndex = 0;\n }\n\n matchesContextualAtIndex(index, contextualKeyword) {\n return (\n this.matches1AtIndex(index, _types.TokenType.name) &&\n this.tokens[index].contextualKeyword === contextualKeyword\n );\n }\n\n identifierNameAtIndex(index) {\n // TODO: We need to process escapes since technically you can have unicode escapes in variable\n // names.\n return this.identifierNameForToken(this.tokens[index]);\n }\n\n identifierName() {\n return this.identifierNameForToken(this.currentToken());\n }\n\n identifierNameForToken(token) {\n return this.code.slice(token.start, token.end);\n }\n\n rawCodeForToken(token) {\n return this.code.slice(token.start, token.end);\n }\n\n stringValueAtIndex(index) {\n return this.stringValueForToken(this.tokens[index]);\n }\n\n stringValue() {\n return this.stringValueForToken(this.currentToken());\n }\n\n stringValueForToken(token) {\n // This is used to identify when two imports are the same and to resolve TypeScript enum keys.\n // Ideally we'd process escapes within the strings, but for now we pretty much take the raw\n // code.\n return this.code.slice(token.start + 1, token.end - 1);\n }\n\n matches1AtIndex(index, t1) {\n return this.tokens[index].type === t1;\n }\n\n matches2AtIndex(index, t1, t2) {\n return this.tokens[index].type === t1 && this.tokens[index + 1].type === t2;\n }\n\n matches3AtIndex(index, t1, t2, t3) {\n return (\n this.tokens[index].type === t1 &&\n this.tokens[index + 1].type === t2 &&\n this.tokens[index + 2].type === t3\n );\n }\n\n matches1(t1) {\n return this.tokens[this.tokenIndex].type === t1;\n }\n\n matches2(t1, t2) {\n return this.tokens[this.tokenIndex].type === t1 && this.tokens[this.tokenIndex + 1].type === t2;\n }\n\n matches3(t1, t2, t3) {\n return (\n this.tokens[this.tokenIndex].type === t1 &&\n this.tokens[this.tokenIndex + 1].type === t2 &&\n this.tokens[this.tokenIndex + 2].type === t3\n );\n }\n\n matches4(t1, t2, t3, t4) {\n return (\n this.tokens[this.tokenIndex].type === t1 &&\n this.tokens[this.tokenIndex + 1].type === t2 &&\n this.tokens[this.tokenIndex + 2].type === t3 &&\n this.tokens[this.tokenIndex + 3].type === t4\n );\n }\n\n matches5(t1, t2, t3, t4, t5) {\n return (\n this.tokens[this.tokenIndex].type === t1 &&\n this.tokens[this.tokenIndex + 1].type === t2 &&\n this.tokens[this.tokenIndex + 2].type === t3 &&\n this.tokens[this.tokenIndex + 3].type === t4 &&\n this.tokens[this.tokenIndex + 4].type === t5\n );\n }\n\n matchesContextual(contextualKeyword) {\n return this.matchesContextualAtIndex(this.tokenIndex, contextualKeyword);\n }\n\n matchesContextIdAndLabel(type, contextId) {\n return this.matches1(type) && this.currentToken().contextId === contextId;\n }\n\n previousWhitespaceAndComments() {\n let whitespaceAndComments = this.code.slice(\n this.tokenIndex > 0 ? this.tokens[this.tokenIndex - 1].end : 0,\n this.tokenIndex < this.tokens.length ? this.tokens[this.tokenIndex].start : this.code.length,\n );\n if (this.isFlowEnabled) {\n whitespaceAndComments = whitespaceAndComments.replace(/@flow/g, \"\");\n }\n return whitespaceAndComments;\n }\n\n replaceToken(newCode) {\n this.resultCode += this.previousWhitespaceAndComments();\n this.appendTokenPrefix();\n this.resultCode += newCode;\n this.appendTokenSuffix();\n this.tokenIndex++;\n }\n\n replaceTokenTrimmingLeftWhitespace(newCode) {\n this.resultCode += this.previousWhitespaceAndComments().replace(/[^\\r\\n]/g, \"\");\n this.appendTokenPrefix();\n this.resultCode += newCode;\n this.appendTokenSuffix();\n this.tokenIndex++;\n }\n\n removeInitialToken() {\n this.replaceToken(\"\");\n }\n\n removeToken() {\n this.replaceTokenTrimmingLeftWhitespace(\"\");\n }\n\n copyExpectedToken(tokenType) {\n if (this.tokens[this.tokenIndex].type !== tokenType) {\n throw new Error(`Expected token ${tokenType}`);\n }\n this.copyToken();\n }\n\n copyToken() {\n this.resultCode += this.previousWhitespaceAndComments();\n this.appendTokenPrefix();\n this.resultCode += this.code.slice(\n this.tokens[this.tokenIndex].start,\n this.tokens[this.tokenIndex].end,\n );\n this.appendTokenSuffix();\n this.tokenIndex++;\n }\n\n copyTokenWithPrefix(prefix) {\n this.resultCode += this.previousWhitespaceAndComments();\n this.appendTokenPrefix();\n this.resultCode += prefix;\n this.resultCode += this.code.slice(\n this.tokens[this.tokenIndex].start,\n this.tokens[this.tokenIndex].end,\n );\n this.appendTokenSuffix();\n this.tokenIndex++;\n }\n\n appendTokenPrefix() {\n const token = this.currentToken();\n if (token.numNullishCoalesceStarts || token.isOptionalChainStart) {\n token.isAsyncOperation = _isAsyncOperation2.default.call(void 0, this);\n }\n if (token.numNullishCoalesceStarts) {\n for (let i = 0; i < token.numNullishCoalesceStarts; i++) {\n if (token.isAsyncOperation) {\n this.resultCode += \"await \";\n this.resultCode += this.helperManager.getHelperName(\"asyncNullishCoalesce\");\n } else {\n this.resultCode += this.helperManager.getHelperName(\"nullishCoalesce\");\n }\n this.resultCode += \"(\";\n }\n }\n if (token.isOptionalChainStart) {\n if (token.isAsyncOperation) {\n this.resultCode += \"await \";\n }\n if (this.tokenIndex > 0 && this.tokenAtRelativeIndex(-1).type === _types.TokenType._delete) {\n if (token.isAsyncOperation) {\n this.resultCode += this.helperManager.getHelperName(\"asyncOptionalChainDelete\");\n } else {\n this.resultCode += this.helperManager.getHelperName(\"optionalChainDelete\");\n }\n } else if (token.isAsyncOperation) {\n this.resultCode += this.helperManager.getHelperName(\"asyncOptionalChain\");\n } else {\n this.resultCode += this.helperManager.getHelperName(\"optionalChain\");\n }\n this.resultCode += \"([\";\n }\n }\n\n appendTokenSuffix() {\n const token = this.currentToken();\n if (token.isOptionalChainEnd) {\n this.resultCode += \"])\";\n }\n if (token.numNullishCoalesceEnds) {\n for (let i = 0; i < token.numNullishCoalesceEnds; i++) {\n this.resultCode += \"))\";\n }\n }\n }\n\n appendCode(code) {\n this.resultCode += code;\n }\n\n currentToken() {\n return this.tokens[this.tokenIndex];\n }\n\n currentTokenCode() {\n const token = this.currentToken();\n return this.code.slice(token.start, token.end);\n }\n\n tokenAtRelativeIndex(relativeIndex) {\n return this.tokens[this.tokenIndex + relativeIndex];\n }\n\n currentIndex() {\n return this.tokenIndex;\n }\n\n /**\n * Move to the next token. Only suitable in preprocessing steps. When\n * generating new code, you should use copyToken or removeToken.\n */\n nextToken() {\n if (this.tokenIndex === this.tokens.length) {\n throw new Error(\"Unexpectedly reached end of input.\");\n }\n this.tokenIndex++;\n }\n\n previousToken() {\n this.tokenIndex--;\n }\n\n finish() {\n if (this.tokenIndex !== this.tokens.length) {\n throw new Error(\"Tried to finish processing tokens before reaching the end.\");\n }\n this.resultCode += this.previousWhitespaceAndComments();\n return this.resultCode;\n }\n\n isAtEnd() {\n return this.tokenIndex === this.tokens.length;\n }\n} exports.default = TokenProcessor;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\nvar _charcodes = require('./parser/util/charcodes');\n\n\n\n\n\n\n\n\n\n\n\n/**\n * Generate a simple source map indicating that each line maps directly to the original line.\n */\n function computeSourceMap(\n code,\n filePath,\n {compiledFilename},\n) {\n let mappings = \"AAAA\";\n for (let i = 0; i < code.length; i++) {\n if (code.charCodeAt(i) === _charcodes.charCodes.lineFeed) {\n mappings += \";AACA\";\n }\n }\n return {\n version: 3,\n file: compiledFilename || \"\",\n sources: [filePath],\n mappings,\n names: [],\n };\n} exports.default = computeSourceMap;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\n\n\n\nvar _tokenizer = require('./parser/tokenizer');\n\nvar _types = require('./parser/tokenizer/types');\n\n\n/**\n * Traverse the given tokens and modify them if necessary to indicate that some names shadow global\n * variables.\n */\n function identifyShadowedGlobals(\n tokens,\n scopes,\n globalNames,\n) {\n if (!hasShadowedGlobals(tokens, globalNames)) {\n return;\n }\n markShadowedGlobals(tokens, scopes, globalNames);\n} exports.default = identifyShadowedGlobals;\n\n/**\n * We can do a fast up-front check to see if there are any declarations to global names. If not,\n * then there's no point in computing scope assignments.\n */\n// Exported for testing.\n function hasShadowedGlobals(tokens, globalNames) {\n for (const token of tokens.tokens) {\n if (\n token.type === _types.TokenType.name &&\n _tokenizer.isNonTopLevelDeclaration.call(void 0, token) &&\n globalNames.has(tokens.identifierNameForToken(token))\n ) {\n return true;\n }\n }\n return false;\n} exports.hasShadowedGlobals = hasShadowedGlobals;\n\nfunction markShadowedGlobals(\n tokens,\n scopes,\n globalNames,\n) {\n const scopeStack = [];\n let scopeIndex = scopes.length - 1;\n // Scopes were generated at completion time, so they're sorted by end index, so we can maintain a\n // good stack by going backwards through them.\n for (let i = tokens.tokens.length - 1; ; i--) {\n while (scopeStack.length > 0 && scopeStack[scopeStack.length - 1].startTokenIndex === i + 1) {\n scopeStack.pop();\n }\n while (scopeIndex >= 0 && scopes[scopeIndex].endTokenIndex === i + 1) {\n scopeStack.push(scopes[scopeIndex]);\n scopeIndex--;\n }\n // Process scopes after the last iteration so we can make sure we pop all of them.\n if (i < 0) {\n break;\n }\n\n const token = tokens.tokens[i];\n const name = tokens.identifierNameForToken(token);\n if (scopeStack.length > 1 && token.type === _types.TokenType.name && globalNames.has(name)) {\n if (_tokenizer.isBlockScopedDeclaration.call(void 0, token)) {\n markShadowedForScope(scopeStack[scopeStack.length - 1], tokens, name);\n } else if (_tokenizer.isFunctionScopedDeclaration.call(void 0, token)) {\n let stackIndex = scopeStack.length - 1;\n while (stackIndex > 0 && !scopeStack[stackIndex].isFunctionScope) {\n stackIndex--;\n }\n if (stackIndex < 0) {\n throw new Error(\"Did not find parent function scope.\");\n }\n markShadowedForScope(scopeStack[stackIndex], tokens, name);\n }\n }\n }\n if (scopeStack.length > 0) {\n throw new Error(\"Expected empty scope stack after processing file.\");\n }\n}\n\nfunction markShadowedForScope(scope, tokens, name) {\n for (let i = scope.startTokenIndex; i < scope.endTokenIndex; i++) {\n const token = tokens.tokens[i];\n if (token.type === _types.TokenType.name && tokens.identifierNameForToken(token) === name) {\n token.shadowsGlobal = true;\n }\n }\n}\n","import CJSImportProcessor from \"./CJSImportProcessor\";\nimport computeSourceMap, {} from \"./computeSourceMap\";\nimport {HelperManager} from \"./HelperManager\";\nimport identifyShadowedGlobals from \"./identifyShadowedGlobals\";\nimport NameManager from \"./NameManager\";\nimport {validateOptions} from \"./Options\";\nimport {parse} from \"./parser\";\n\nimport TokenProcessor from \"./TokenProcessor\";\nimport RootTransformer from \"./transformers/RootTransformer\";\nimport formatTokens from \"./util/formatTokens\";\nimport getTSImportedNames from \"./util/getTSImportedNames\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nexport function getVersion() {\n // eslint-disable-next-line\n return require(\"../package.json\").version;\n}\n\nexport function transform(code, options) {\n validateOptions(options);\n try {\n const sucraseContext = getSucraseContext(code, options);\n const transformer = new RootTransformer(\n sucraseContext,\n options.transforms,\n Boolean(options.enableLegacyBabel5ModuleInterop),\n options,\n );\n let result = {code: transformer.transform()};\n if (options.sourceMapOptions) {\n if (!options.filePath) {\n throw new Error(\"filePath must be specified when generating a source map.\");\n }\n result = {\n ...result,\n sourceMap: computeSourceMap(result.code, options.filePath, options.sourceMapOptions),\n };\n }\n return result;\n } catch (e) {\n if (options.filePath) {\n e.message = `Error transforming ${options.filePath}: ${e.message}`;\n }\n throw e;\n }\n}\n\n/**\n * Return a string representation of the sucrase tokens, mostly useful for\n * diagnostic purposes.\n */\nexport function getFormattedTokens(code, options) {\n const tokens = getSucraseContext(code, options).tokenProcessor.tokens;\n return formatTokens(code, tokens);\n}\n\n/**\n * Call into the parser/tokenizer and do some further preprocessing:\n * - Come up with a set of used names so that we can assign new names.\n * - Preprocess all import/export statements so we know which globals we are interested in.\n * - Compute situations where any of those globals are shadowed.\n *\n * In the future, some of these preprocessing steps can be skipped based on what actual work is\n * being done.\n */\nfunction getSucraseContext(code, options) {\n const isJSXEnabled = options.transforms.includes(\"jsx\");\n const isTypeScriptEnabled = options.transforms.includes(\"typescript\");\n const isFlowEnabled = options.transforms.includes(\"flow\");\n const file = parse(code, isJSXEnabled, isTypeScriptEnabled, isFlowEnabled);\n const tokens = file.tokens;\n const scopes = file.scopes;\n\n const nameManager = new NameManager(code, tokens);\n const helperManager = new HelperManager(nameManager);\n const tokenProcessor = new TokenProcessor(code, tokens, isFlowEnabled, helperManager);\n const enableLegacyTypeScriptModuleInterop = Boolean(options.enableLegacyTypeScriptModuleInterop);\n\n let importProcessor = null;\n if (options.transforms.includes(\"imports\")) {\n importProcessor = new CJSImportProcessor(\n nameManager,\n tokenProcessor,\n enableLegacyTypeScriptModuleInterop,\n options,\n options.transforms.includes(\"typescript\"),\n helperManager,\n );\n importProcessor.preprocessTokens();\n // We need to mark shadowed globals after processing imports so we know that the globals are,\n // but before type-only import pruning, since that relies on shadowing information.\n identifyShadowedGlobals(tokenProcessor, scopes, importProcessor.getGlobalNames());\n if (options.transforms.includes(\"typescript\")) {\n importProcessor.pruneTypeOnlyImports();\n }\n } else if (options.transforms.includes(\"typescript\")) {\n identifyShadowedGlobals(tokenProcessor, scopes, getTSImportedNames(tokenProcessor));\n }\n return {tokenProcessor, scopes, nameManager, importProcessor, helperManager};\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\n\nvar _base = require('./traverser/base');\nvar _index = require('./traverser/index');\n\n class File {\n \n \n\n constructor(tokens, scopes) {\n this.tokens = tokens;\n this.scopes = scopes;\n }\n} exports.File = File;\n\n function parse(\n input,\n isJSXEnabled,\n isTypeScriptEnabled,\n isFlowEnabled,\n) {\n if (isFlowEnabled && isTypeScriptEnabled) {\n throw new Error(\"Cannot combine flow and typescript plugins.\");\n }\n _base.initParser.call(void 0, input, isJSXEnabled, isTypeScriptEnabled, isFlowEnabled);\n const result = _index.parseFile.call(void 0, );\n if (_base.state.error) {\n throw _base.augmentError.call(void 0, _base.state.error);\n }\n return result;\n} exports.parse = parse;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});/* eslint max-len: 0 */\n\n\n\n\n\n\n\n\n\n\nvar _index = require('../tokenizer/index');\nvar _keywords = require('../tokenizer/keywords');\nvar _types = require('../tokenizer/types');\nvar _base = require('../traverser/base');\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar _expression = require('../traverser/expression');\n\n\n\n\n\n\n\n\nvar _statement = require('../traverser/statement');\n\n\n\n\n\n\n\n\n\nvar _util = require('../traverser/util');\n\nfunction isMaybeDefaultImport(lookahead) {\n return (\n (lookahead.type === _types.TokenType.name || !!(lookahead.type & _types.TokenType.IS_KEYWORD)) &&\n lookahead.contextualKeyword !== _keywords.ContextualKeyword._from\n );\n}\n\nfunction flowParseTypeInitialiser(tok) {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _util.expect.call(void 0, tok || _types.TokenType.colon);\n flowParseType();\n _index.popTypeContext.call(void 0, oldIsType);\n}\n\nfunction flowParsePredicate() {\n _util.expect.call(void 0, _types.TokenType.modulo);\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._checks);\n if (_index.eat.call(void 0, _types.TokenType.parenL)) {\n _expression.parseExpression.call(void 0, );\n _util.expect.call(void 0, _types.TokenType.parenR);\n }\n}\n\nfunction flowParseTypeAndPredicateInitialiser() {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _util.expect.call(void 0, _types.TokenType.colon);\n if (_index.match.call(void 0, _types.TokenType.modulo)) {\n flowParsePredicate();\n } else {\n flowParseType();\n if (_index.match.call(void 0, _types.TokenType.modulo)) {\n flowParsePredicate();\n }\n }\n _index.popTypeContext.call(void 0, oldIsType);\n}\n\nfunction flowParseDeclareClass() {\n _index.next.call(void 0, );\n flowParseInterfaceish(/* isClass */ true);\n}\n\nfunction flowParseDeclareFunction() {\n _index.next.call(void 0, );\n _expression.parseIdentifier.call(void 0, );\n\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseTypeParameterDeclaration();\n }\n\n _util.expect.call(void 0, _types.TokenType.parenL);\n flowParseFunctionTypeParams();\n _util.expect.call(void 0, _types.TokenType.parenR);\n\n flowParseTypeAndPredicateInitialiser();\n\n _util.semicolon.call(void 0, );\n}\n\nfunction flowParseDeclare() {\n if (_index.match.call(void 0, _types.TokenType._class)) {\n flowParseDeclareClass();\n } else if (_index.match.call(void 0, _types.TokenType._function)) {\n flowParseDeclareFunction();\n } else if (_index.match.call(void 0, _types.TokenType._var)) {\n flowParseDeclareVariable();\n } else if (_util.eatContextual.call(void 0, _keywords.ContextualKeyword._module)) {\n if (_index.eat.call(void 0, _types.TokenType.dot)) {\n flowParseDeclareModuleExports();\n } else {\n flowParseDeclareModule();\n }\n } else if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._type)) {\n flowParseDeclareTypeAlias();\n } else if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._opaque)) {\n flowParseDeclareOpaqueType();\n } else if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._interface)) {\n flowParseDeclareInterface();\n } else if (_index.match.call(void 0, _types.TokenType._export)) {\n flowParseDeclareExportDeclaration();\n } else {\n _util.unexpected.call(void 0, );\n }\n}\n\nfunction flowParseDeclareVariable() {\n _index.next.call(void 0, );\n flowParseTypeAnnotatableIdentifier();\n _util.semicolon.call(void 0, );\n}\n\nfunction flowParseDeclareModule() {\n if (_index.match.call(void 0, _types.TokenType.string)) {\n _expression.parseExprAtom.call(void 0, );\n } else {\n _expression.parseIdentifier.call(void 0, );\n }\n\n _util.expect.call(void 0, _types.TokenType.braceL);\n while (!_index.match.call(void 0, _types.TokenType.braceR) && !_base.state.error) {\n if (_index.match.call(void 0, _types.TokenType._import)) {\n _index.next.call(void 0, );\n _statement.parseImport.call(void 0, );\n } else {\n _util.unexpected.call(void 0, );\n }\n }\n _util.expect.call(void 0, _types.TokenType.braceR);\n}\n\nfunction flowParseDeclareExportDeclaration() {\n _util.expect.call(void 0, _types.TokenType._export);\n\n if (_index.eat.call(void 0, _types.TokenType._default)) {\n if (_index.match.call(void 0, _types.TokenType._function) || _index.match.call(void 0, _types.TokenType._class)) {\n // declare export default class ...\n // declare export default function ...\n flowParseDeclare();\n } else {\n // declare export default [type];\n flowParseType();\n _util.semicolon.call(void 0, );\n }\n } else if (\n _index.match.call(void 0, _types.TokenType._var) || // declare export var ...\n _index.match.call(void 0, _types.TokenType._function) || // declare export function ...\n _index.match.call(void 0, _types.TokenType._class) || // declare export class ...\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._opaque) // declare export opaque ..\n ) {\n flowParseDeclare();\n } else if (\n _index.match.call(void 0, _types.TokenType.star) || // declare export * from ''\n _index.match.call(void 0, _types.TokenType.braceL) || // declare export {} ...\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._interface) || // declare export interface ...\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._type) || // declare export type ...\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._opaque) // declare export opaque type ...\n ) {\n _statement.parseExport.call(void 0, );\n } else {\n _util.unexpected.call(void 0, );\n }\n}\n\nfunction flowParseDeclareModuleExports() {\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._exports);\n flowParseTypeAnnotation();\n _util.semicolon.call(void 0, );\n}\n\nfunction flowParseDeclareTypeAlias() {\n _index.next.call(void 0, );\n flowParseTypeAlias();\n}\n\nfunction flowParseDeclareOpaqueType() {\n _index.next.call(void 0, );\n flowParseOpaqueType(true);\n}\n\nfunction flowParseDeclareInterface() {\n _index.next.call(void 0, );\n flowParseInterfaceish();\n}\n\n// Interfaces\n\nfunction flowParseInterfaceish(isClass = false) {\n flowParseRestrictedIdentifier();\n\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseTypeParameterDeclaration();\n }\n\n if (_index.eat.call(void 0, _types.TokenType._extends)) {\n do {\n flowParseInterfaceExtends();\n } while (!isClass && _index.eat.call(void 0, _types.TokenType.comma));\n }\n\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._mixins)) {\n _index.next.call(void 0, );\n do {\n flowParseInterfaceExtends();\n } while (_index.eat.call(void 0, _types.TokenType.comma));\n }\n\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._implements)) {\n _index.next.call(void 0, );\n do {\n flowParseInterfaceExtends();\n } while (_index.eat.call(void 0, _types.TokenType.comma));\n }\n\n flowParseObjectType(isClass, false, isClass);\n}\n\nfunction flowParseInterfaceExtends() {\n flowParseQualifiedTypeIdentifier(false);\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseTypeParameterInstantiation();\n }\n}\n\nfunction flowParseInterface() {\n flowParseInterfaceish();\n}\n\nfunction flowParseRestrictedIdentifier() {\n _expression.parseIdentifier.call(void 0, );\n}\n\nfunction flowParseTypeAlias() {\n flowParseRestrictedIdentifier();\n\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseTypeParameterDeclaration();\n }\n\n flowParseTypeInitialiser(_types.TokenType.eq);\n _util.semicolon.call(void 0, );\n}\n\nfunction flowParseOpaqueType(declare) {\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._type);\n flowParseRestrictedIdentifier();\n\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseTypeParameterDeclaration();\n }\n\n // Parse the supertype\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n flowParseTypeInitialiser(_types.TokenType.colon);\n }\n\n if (!declare) {\n flowParseTypeInitialiser(_types.TokenType.eq);\n }\n _util.semicolon.call(void 0, );\n}\n\nfunction flowParseTypeParameter() {\n flowParseVariance();\n flowParseTypeAnnotatableIdentifier();\n\n if (_index.eat.call(void 0, _types.TokenType.eq)) {\n flowParseType();\n }\n}\n\n function flowParseTypeParameterDeclaration() {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n // istanbul ignore else: this condition is already checked at all call sites\n if (_index.match.call(void 0, _types.TokenType.lessThan) || _index.match.call(void 0, _types.TokenType.typeParameterStart)) {\n _index.next.call(void 0, );\n } else {\n _util.unexpected.call(void 0, );\n }\n\n do {\n flowParseTypeParameter();\n if (!_index.match.call(void 0, _types.TokenType.greaterThan)) {\n _util.expect.call(void 0, _types.TokenType.comma);\n }\n } while (!_index.match.call(void 0, _types.TokenType.greaterThan) && !_base.state.error);\n _util.expect.call(void 0, _types.TokenType.greaterThan);\n _index.popTypeContext.call(void 0, oldIsType);\n} exports.flowParseTypeParameterDeclaration = flowParseTypeParameterDeclaration;\n\nfunction flowParseTypeParameterInstantiation() {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _util.expect.call(void 0, _types.TokenType.lessThan);\n while (!_index.match.call(void 0, _types.TokenType.greaterThan) && !_base.state.error) {\n flowParseType();\n if (!_index.match.call(void 0, _types.TokenType.greaterThan)) {\n _util.expect.call(void 0, _types.TokenType.comma);\n }\n }\n _util.expect.call(void 0, _types.TokenType.greaterThan);\n _index.popTypeContext.call(void 0, oldIsType);\n}\n\nfunction flowParseInterfaceType() {\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._interface);\n if (_index.eat.call(void 0, _types.TokenType._extends)) {\n do {\n flowParseInterfaceExtends();\n } while (_index.eat.call(void 0, _types.TokenType.comma));\n }\n flowParseObjectType(false, false, false);\n}\n\nfunction flowParseObjectPropertyKey() {\n if (_index.match.call(void 0, _types.TokenType.num) || _index.match.call(void 0, _types.TokenType.string)) {\n _expression.parseExprAtom.call(void 0, );\n } else {\n _expression.parseIdentifier.call(void 0, );\n }\n}\n\nfunction flowParseObjectTypeIndexer() {\n // Note: bracketL has already been consumed\n if (_index.lookaheadType.call(void 0, ) === _types.TokenType.colon) {\n flowParseObjectPropertyKey();\n flowParseTypeInitialiser();\n } else {\n flowParseType();\n }\n _util.expect.call(void 0, _types.TokenType.bracketR);\n flowParseTypeInitialiser();\n}\n\nfunction flowParseObjectTypeInternalSlot() {\n // Note: both bracketL have already been consumed\n flowParseObjectPropertyKey();\n _util.expect.call(void 0, _types.TokenType.bracketR);\n _util.expect.call(void 0, _types.TokenType.bracketR);\n if (_index.match.call(void 0, _types.TokenType.lessThan) || _index.match.call(void 0, _types.TokenType.parenL)) {\n flowParseObjectTypeMethodish();\n } else {\n _index.eat.call(void 0, _types.TokenType.question);\n flowParseTypeInitialiser();\n }\n}\n\nfunction flowParseObjectTypeMethodish() {\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseTypeParameterDeclaration();\n }\n\n _util.expect.call(void 0, _types.TokenType.parenL);\n while (!_index.match.call(void 0, _types.TokenType.parenR) && !_index.match.call(void 0, _types.TokenType.ellipsis) && !_base.state.error) {\n flowParseFunctionTypeParam();\n if (!_index.match.call(void 0, _types.TokenType.parenR)) {\n _util.expect.call(void 0, _types.TokenType.comma);\n }\n }\n\n if (_index.eat.call(void 0, _types.TokenType.ellipsis)) {\n flowParseFunctionTypeParam();\n }\n _util.expect.call(void 0, _types.TokenType.parenR);\n flowParseTypeInitialiser();\n}\n\nfunction flowParseObjectTypeCallProperty() {\n flowParseObjectTypeMethodish();\n}\n\nfunction flowParseObjectType(allowStatic, allowExact, allowProto) {\n let endDelim;\n if (allowExact && _index.match.call(void 0, _types.TokenType.braceBarL)) {\n _util.expect.call(void 0, _types.TokenType.braceBarL);\n endDelim = _types.TokenType.braceBarR;\n } else {\n _util.expect.call(void 0, _types.TokenType.braceL);\n endDelim = _types.TokenType.braceR;\n }\n\n while (!_index.match.call(void 0, endDelim) && !_base.state.error) {\n if (allowProto && _util.isContextual.call(void 0, _keywords.ContextualKeyword._proto)) {\n const lookahead = _index.lookaheadType.call(void 0, );\n if (lookahead !== _types.TokenType.colon && lookahead !== _types.TokenType.question) {\n _index.next.call(void 0, );\n allowStatic = false;\n }\n }\n if (allowStatic && _util.isContextual.call(void 0, _keywords.ContextualKeyword._static)) {\n const lookahead = _index.lookaheadType.call(void 0, );\n if (lookahead !== _types.TokenType.colon && lookahead !== _types.TokenType.question) {\n _index.next.call(void 0, );\n }\n }\n\n flowParseVariance();\n\n if (_index.eat.call(void 0, _types.TokenType.bracketL)) {\n if (_index.eat.call(void 0, _types.TokenType.bracketL)) {\n flowParseObjectTypeInternalSlot();\n } else {\n flowParseObjectTypeIndexer();\n }\n } else if (_index.match.call(void 0, _types.TokenType.parenL) || _index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseObjectTypeCallProperty();\n } else {\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._get) || _util.isContextual.call(void 0, _keywords.ContextualKeyword._set)) {\n const lookahead = _index.lookaheadType.call(void 0, );\n if (lookahead === _types.TokenType.name || lookahead === _types.TokenType.string || lookahead === _types.TokenType.num) {\n _index.next.call(void 0, );\n }\n }\n\n flowParseObjectTypeProperty();\n }\n\n flowObjectTypeSemicolon();\n }\n\n _util.expect.call(void 0, endDelim);\n}\n\nfunction flowParseObjectTypeProperty() {\n if (_index.match.call(void 0, _types.TokenType.ellipsis)) {\n _util.expect.call(void 0, _types.TokenType.ellipsis);\n if (!_index.eat.call(void 0, _types.TokenType.comma)) {\n _index.eat.call(void 0, _types.TokenType.semi);\n }\n // Explicit inexact object syntax.\n if (_index.match.call(void 0, _types.TokenType.braceR)) {\n return;\n }\n flowParseType();\n } else {\n flowParseObjectPropertyKey();\n if (_index.match.call(void 0, _types.TokenType.lessThan) || _index.match.call(void 0, _types.TokenType.parenL)) {\n // This is a method property\n flowParseObjectTypeMethodish();\n } else {\n _index.eat.call(void 0, _types.TokenType.question);\n flowParseTypeInitialiser();\n }\n }\n}\n\nfunction flowObjectTypeSemicolon() {\n if (!_index.eat.call(void 0, _types.TokenType.semi) && !_index.eat.call(void 0, _types.TokenType.comma) && !_index.match.call(void 0, _types.TokenType.braceR) && !_index.match.call(void 0, _types.TokenType.braceBarR)) {\n _util.unexpected.call(void 0, );\n }\n}\n\nfunction flowParseQualifiedTypeIdentifier(initialIdAlreadyParsed) {\n if (!initialIdAlreadyParsed) {\n _expression.parseIdentifier.call(void 0, );\n }\n while (_index.eat.call(void 0, _types.TokenType.dot)) {\n _expression.parseIdentifier.call(void 0, );\n }\n}\n\nfunction flowParseGenericType() {\n flowParseQualifiedTypeIdentifier(true);\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseTypeParameterInstantiation();\n }\n}\n\nfunction flowParseTypeofType() {\n _util.expect.call(void 0, _types.TokenType._typeof);\n flowParsePrimaryType();\n}\n\nfunction flowParseTupleType() {\n _util.expect.call(void 0, _types.TokenType.bracketL);\n // We allow trailing commas\n while (_base.state.pos < _base.input.length && !_index.match.call(void 0, _types.TokenType.bracketR)) {\n flowParseType();\n if (_index.match.call(void 0, _types.TokenType.bracketR)) {\n break;\n }\n _util.expect.call(void 0, _types.TokenType.comma);\n }\n _util.expect.call(void 0, _types.TokenType.bracketR);\n}\n\nfunction flowParseFunctionTypeParam() {\n const lookahead = _index.lookaheadType.call(void 0, );\n if (lookahead === _types.TokenType.colon || lookahead === _types.TokenType.question) {\n _expression.parseIdentifier.call(void 0, );\n _index.eat.call(void 0, _types.TokenType.question);\n flowParseTypeInitialiser();\n } else {\n flowParseType();\n }\n}\n\nfunction flowParseFunctionTypeParams() {\n while (!_index.match.call(void 0, _types.TokenType.parenR) && !_index.match.call(void 0, _types.TokenType.ellipsis) && !_base.state.error) {\n flowParseFunctionTypeParam();\n if (!_index.match.call(void 0, _types.TokenType.parenR)) {\n _util.expect.call(void 0, _types.TokenType.comma);\n }\n }\n if (_index.eat.call(void 0, _types.TokenType.ellipsis)) {\n flowParseFunctionTypeParam();\n }\n}\n\n// The parsing of types roughly parallels the parsing of expressions, and\n// primary types are kind of like primary expressions...they're the\n// primitives with which other types are constructed.\nfunction flowParsePrimaryType() {\n let isGroupedType = false;\n const oldNoAnonFunctionType = _base.state.noAnonFunctionType;\n\n switch (_base.state.type) {\n case _types.TokenType.name: {\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._interface)) {\n flowParseInterfaceType();\n return;\n }\n _expression.parseIdentifier.call(void 0, );\n flowParseGenericType();\n return;\n }\n\n case _types.TokenType.braceL:\n flowParseObjectType(false, false, false);\n return;\n\n case _types.TokenType.braceBarL:\n flowParseObjectType(false, true, false);\n return;\n\n case _types.TokenType.bracketL:\n flowParseTupleType();\n return;\n\n case _types.TokenType.lessThan:\n flowParseTypeParameterDeclaration();\n _util.expect.call(void 0, _types.TokenType.parenL);\n flowParseFunctionTypeParams();\n _util.expect.call(void 0, _types.TokenType.parenR);\n _util.expect.call(void 0, _types.TokenType.arrow);\n flowParseType();\n return;\n\n case _types.TokenType.parenL:\n _index.next.call(void 0, );\n\n // Check to see if this is actually a grouped type\n if (!_index.match.call(void 0, _types.TokenType.parenR) && !_index.match.call(void 0, _types.TokenType.ellipsis)) {\n if (_index.match.call(void 0, _types.TokenType.name)) {\n const token = _index.lookaheadType.call(void 0, );\n isGroupedType = token !== _types.TokenType.question && token !== _types.TokenType.colon;\n } else {\n isGroupedType = true;\n }\n }\n\n if (isGroupedType) {\n _base.state.noAnonFunctionType = false;\n flowParseType();\n _base.state.noAnonFunctionType = oldNoAnonFunctionType;\n\n // A `,` or a `) =>` means this is an anonymous function type\n if (\n _base.state.noAnonFunctionType ||\n !(_index.match.call(void 0, _types.TokenType.comma) || (_index.match.call(void 0, _types.TokenType.parenR) && _index.lookaheadType.call(void 0, ) === _types.TokenType.arrow))\n ) {\n _util.expect.call(void 0, _types.TokenType.parenR);\n return;\n } else {\n // Eat a comma if there is one\n _index.eat.call(void 0, _types.TokenType.comma);\n }\n }\n\n flowParseFunctionTypeParams();\n\n _util.expect.call(void 0, _types.TokenType.parenR);\n _util.expect.call(void 0, _types.TokenType.arrow);\n flowParseType();\n return;\n\n case _types.TokenType.minus:\n _index.next.call(void 0, );\n _expression.parseLiteral.call(void 0, );\n return;\n\n case _types.TokenType.string:\n case _types.TokenType.num:\n case _types.TokenType._true:\n case _types.TokenType._false:\n case _types.TokenType._null:\n case _types.TokenType._this:\n case _types.TokenType._void:\n case _types.TokenType.star:\n _index.next.call(void 0, );\n return;\n\n default:\n if (_base.state.type === _types.TokenType._typeof) {\n flowParseTypeofType();\n return;\n } else if (_base.state.type & _types.TokenType.IS_KEYWORD) {\n _index.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType.name;\n return;\n }\n }\n\n _util.unexpected.call(void 0, );\n}\n\nfunction flowParsePostfixType() {\n flowParsePrimaryType();\n while (!_util.canInsertSemicolon.call(void 0, ) && _index.match.call(void 0, _types.TokenType.bracketL)) {\n _util.expect.call(void 0, _types.TokenType.bracketL);\n _util.expect.call(void 0, _types.TokenType.bracketR);\n }\n}\n\nfunction flowParsePrefixType() {\n if (_index.eat.call(void 0, _types.TokenType.question)) {\n flowParsePrefixType();\n } else {\n flowParsePostfixType();\n }\n}\n\nfunction flowParseAnonFunctionWithoutParens() {\n flowParsePrefixType();\n if (!_base.state.noAnonFunctionType && _index.eat.call(void 0, _types.TokenType.arrow)) {\n flowParseType();\n }\n}\n\nfunction flowParseIntersectionType() {\n _index.eat.call(void 0, _types.TokenType.bitwiseAND);\n flowParseAnonFunctionWithoutParens();\n while (_index.eat.call(void 0, _types.TokenType.bitwiseAND)) {\n flowParseAnonFunctionWithoutParens();\n }\n}\n\nfunction flowParseUnionType() {\n _index.eat.call(void 0, _types.TokenType.bitwiseOR);\n flowParseIntersectionType();\n while (_index.eat.call(void 0, _types.TokenType.bitwiseOR)) {\n flowParseIntersectionType();\n }\n}\n\nfunction flowParseType() {\n flowParseUnionType();\n}\n\n function flowParseTypeAnnotation() {\n flowParseTypeInitialiser();\n} exports.flowParseTypeAnnotation = flowParseTypeAnnotation;\n\nfunction flowParseTypeAnnotatableIdentifier() {\n _expression.parseIdentifier.call(void 0, );\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n flowParseTypeAnnotation();\n }\n}\n\n function flowParseVariance() {\n if (_index.match.call(void 0, _types.TokenType.plus) || _index.match.call(void 0, _types.TokenType.minus)) {\n _index.next.call(void 0, );\n }\n} exports.flowParseVariance = flowParseVariance;\n\n// ==================================\n// Overrides\n// ==================================\n\n function flowParseFunctionBodyAndFinish(funcContextId) {\n // For arrow functions, `parseArrow` handles the return type itself.\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n flowParseTypeAndPredicateInitialiser();\n }\n\n _expression.parseFunctionBody.call(void 0, false, funcContextId);\n} exports.flowParseFunctionBodyAndFinish = flowParseFunctionBodyAndFinish;\n\n function flowParseSubscript(\n startTokenIndex,\n noCalls,\n stopState,\n) {\n if (_index.match.call(void 0, _types.TokenType.questionDot) && _index.lookaheadType.call(void 0, ) === _types.TokenType.lessThan) {\n if (noCalls) {\n stopState.stop = true;\n return;\n }\n _index.next.call(void 0, );\n flowParseTypeParameterInstantiation();\n _util.expect.call(void 0, _types.TokenType.parenL);\n _expression.parseCallExpressionArguments.call(void 0, );\n return;\n } else if (!noCalls && _index.match.call(void 0, _types.TokenType.lessThan)) {\n const snapshot = _base.state.snapshot();\n flowParseTypeParameterInstantiation();\n _util.expect.call(void 0, _types.TokenType.parenL);\n _expression.parseCallExpressionArguments.call(void 0, );\n if (_base.state.error) {\n _base.state.restoreFromSnapshot(snapshot);\n } else {\n return;\n }\n }\n _expression.baseParseSubscript.call(void 0, startTokenIndex, noCalls, stopState);\n} exports.flowParseSubscript = flowParseSubscript;\n\n function flowStartParseNewArguments() {\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n const snapshot = _base.state.snapshot();\n flowParseTypeParameterInstantiation();\n if (_base.state.error) {\n _base.state.restoreFromSnapshot(snapshot);\n }\n }\n} exports.flowStartParseNewArguments = flowStartParseNewArguments;\n\n// interfaces\n function flowTryParseStatement() {\n if (_index.match.call(void 0, _types.TokenType.name) && _base.state.contextualKeyword === _keywords.ContextualKeyword._interface) {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _index.next.call(void 0, );\n flowParseInterface();\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n } else {\n return false;\n }\n} exports.flowTryParseStatement = flowTryParseStatement;\n\n// declares, interfaces and type aliases\n function flowParseIdentifierStatement(contextualKeyword) {\n if (contextualKeyword === _keywords.ContextualKeyword._declare) {\n if (\n _index.match.call(void 0, _types.TokenType._class) ||\n _index.match.call(void 0, _types.TokenType.name) ||\n _index.match.call(void 0, _types.TokenType._function) ||\n _index.match.call(void 0, _types.TokenType._var) ||\n _index.match.call(void 0, _types.TokenType._export)\n ) {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n flowParseDeclare();\n _index.popTypeContext.call(void 0, oldIsType);\n }\n } else if (_index.match.call(void 0, _types.TokenType.name)) {\n if (contextualKeyword === _keywords.ContextualKeyword._interface) {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n flowParseInterface();\n _index.popTypeContext.call(void 0, oldIsType);\n } else if (contextualKeyword === _keywords.ContextualKeyword._type) {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n flowParseTypeAlias();\n _index.popTypeContext.call(void 0, oldIsType);\n } else if (contextualKeyword === _keywords.ContextualKeyword._opaque) {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n flowParseOpaqueType(false);\n _index.popTypeContext.call(void 0, oldIsType);\n }\n }\n _util.semicolon.call(void 0, );\n} exports.flowParseIdentifierStatement = flowParseIdentifierStatement;\n\n// export type\n function flowShouldParseExportDeclaration() {\n return (\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._type) ||\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._interface) ||\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._opaque)\n );\n} exports.flowShouldParseExportDeclaration = flowShouldParseExportDeclaration;\n\n function flowShouldDisallowExportDefaultSpecifier() {\n return (\n _index.match.call(void 0, _types.TokenType.name) &&\n (_base.state.contextualKeyword === _keywords.ContextualKeyword._type ||\n _base.state.contextualKeyword === _keywords.ContextualKeyword._interface ||\n _base.state.contextualKeyword === _keywords.ContextualKeyword._opaque)\n );\n} exports.flowShouldDisallowExportDefaultSpecifier = flowShouldDisallowExportDefaultSpecifier;\n\n function flowParseExportDeclaration() {\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._type)) {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n _index.next.call(void 0, );\n\n if (_index.match.call(void 0, _types.TokenType.braceL)) {\n // export type { foo, bar };\n _statement.parseExportSpecifiers.call(void 0, );\n _statement.parseExportFrom.call(void 0, );\n } else {\n // export type Foo = Bar;\n flowParseTypeAlias();\n }\n _index.popTypeContext.call(void 0, oldIsType);\n } else if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._opaque)) {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n _index.next.call(void 0, );\n // export opaque type Foo = Bar;\n flowParseOpaqueType(false);\n _index.popTypeContext.call(void 0, oldIsType);\n } else if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._interface)) {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n _index.next.call(void 0, );\n flowParseInterface();\n _index.popTypeContext.call(void 0, oldIsType);\n } else {\n _statement.parseStatement.call(void 0, true);\n }\n} exports.flowParseExportDeclaration = flowParseExportDeclaration;\n\n function flowShouldParseExportStar() {\n return _index.match.call(void 0, _types.TokenType.star) || (_util.isContextual.call(void 0, _keywords.ContextualKeyword._type) && _index.lookaheadType.call(void 0, ) === _types.TokenType.star);\n} exports.flowShouldParseExportStar = flowShouldParseExportStar;\n\n function flowParseExportStar() {\n if (_util.eatContextual.call(void 0, _keywords.ContextualKeyword._type)) {\n const oldIsType = _index.pushTypeContext.call(void 0, 2);\n _statement.baseParseExportStar.call(void 0, );\n _index.popTypeContext.call(void 0, oldIsType);\n } else {\n _statement.baseParseExportStar.call(void 0, );\n }\n} exports.flowParseExportStar = flowParseExportStar;\n\n// parse a the super class type parameters and implements\n function flowAfterParseClassSuper(hasSuper) {\n if (hasSuper && _index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseTypeParameterInstantiation();\n }\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._implements)) {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _index.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._implements;\n do {\n flowParseRestrictedIdentifier();\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseTypeParameterInstantiation();\n }\n } while (_index.eat.call(void 0, _types.TokenType.comma));\n _index.popTypeContext.call(void 0, oldIsType);\n }\n} exports.flowAfterParseClassSuper = flowAfterParseClassSuper;\n\n// parse type parameters for object method shorthand\n function flowStartParseObjPropValue() {\n // method shorthand\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n flowParseTypeParameterDeclaration();\n if (!_index.match.call(void 0, _types.TokenType.parenL)) _util.unexpected.call(void 0, );\n }\n} exports.flowStartParseObjPropValue = flowStartParseObjPropValue;\n\n function flowParseAssignableListItemTypes() {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _index.eat.call(void 0, _types.TokenType.question);\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n flowParseTypeAnnotation();\n }\n _index.popTypeContext.call(void 0, oldIsType);\n} exports.flowParseAssignableListItemTypes = flowParseAssignableListItemTypes;\n\n// parse typeof and type imports\n function flowStartParseImportSpecifiers() {\n if (_index.match.call(void 0, _types.TokenType._typeof) || _util.isContextual.call(void 0, _keywords.ContextualKeyword._type)) {\n const lh = _index.lookaheadTypeAndKeyword.call(void 0, );\n if (isMaybeDefaultImport(lh) || lh.type === _types.TokenType.braceL || lh.type === _types.TokenType.star) {\n _index.next.call(void 0, );\n }\n }\n} exports.flowStartParseImportSpecifiers = flowStartParseImportSpecifiers;\n\n// parse import-type/typeof shorthand\n function flowParseImportSpecifier() {\n const isTypeKeyword =\n _base.state.contextualKeyword === _keywords.ContextualKeyword._type || _base.state.type === _types.TokenType._typeof;\n if (isTypeKeyword) {\n _index.next.call(void 0, );\n } else {\n _expression.parseIdentifier.call(void 0, );\n }\n\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._as) && !_util.isLookaheadContextual.call(void 0, _keywords.ContextualKeyword._as)) {\n _expression.parseIdentifier.call(void 0, );\n if (isTypeKeyword && !_index.match.call(void 0, _types.TokenType.name) && !(_base.state.type & _types.TokenType.IS_KEYWORD)) {\n // `import {type as ,` or `import {type as }`\n } else {\n // `import {type as foo`\n _expression.parseIdentifier.call(void 0, );\n }\n } else if (isTypeKeyword && (_index.match.call(void 0, _types.TokenType.name) || !!(_base.state.type & _types.TokenType.IS_KEYWORD))) {\n // `import {type foo`\n _expression.parseIdentifier.call(void 0, );\n if (_util.eatContextual.call(void 0, _keywords.ContextualKeyword._as)) {\n _expression.parseIdentifier.call(void 0, );\n }\n }\n} exports.flowParseImportSpecifier = flowParseImportSpecifier;\n\n// parse function type parameters - function foo<T>() {}\n function flowStartParseFunctionParams() {\n // Originally this checked if the method is a getter/setter, but if it was, we'd crash soon\n // anyway, so don't try to propagate that information.\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n flowParseTypeParameterDeclaration();\n _index.popTypeContext.call(void 0, oldIsType);\n }\n} exports.flowStartParseFunctionParams = flowStartParseFunctionParams;\n\n// parse flow type annotations on variable declarator heads - let foo: string = bar\n function flowAfterParseVarHead() {\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n flowParseTypeAnnotation();\n }\n} exports.flowAfterParseVarHead = flowAfterParseVarHead;\n\n// parse the return type of an async arrow function - let foo = (async (): number => {});\n function flowStartParseAsyncArrowFromCallExpression() {\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n const oldNoAnonFunctionType = _base.state.noAnonFunctionType;\n _base.state.noAnonFunctionType = true;\n flowParseTypeAnnotation();\n _base.state.noAnonFunctionType = oldNoAnonFunctionType;\n }\n} exports.flowStartParseAsyncArrowFromCallExpression = flowStartParseAsyncArrowFromCallExpression;\n\n// We need to support type parameter declarations for arrow functions. This\n// is tricky. There are three situations we need to handle\n//\n// 1. This is either JSX or an arrow function. We'll try JSX first. If that\n// fails, we'll try an arrow function. If that fails, we'll throw the JSX\n// error.\n// 2. This is an arrow function. We'll parse the type parameter declaration,\n// parse the rest, make sure the rest is an arrow function, and go from\n// there\n// 3. This is neither. Just call the super method\n function flowParseMaybeAssign(noIn, isWithinParens) {\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n const snapshot = _base.state.snapshot();\n let wasArrow = _expression.baseParseMaybeAssign.call(void 0, noIn, isWithinParens);\n if (_base.state.error) {\n _base.state.restoreFromSnapshot(snapshot);\n _base.state.type = _types.TokenType.typeParameterStart;\n } else {\n return wasArrow;\n }\n\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n flowParseTypeParameterDeclaration();\n _index.popTypeContext.call(void 0, oldIsType);\n wasArrow = _expression.baseParseMaybeAssign.call(void 0, noIn, isWithinParens);\n if (wasArrow) {\n return true;\n }\n _util.unexpected.call(void 0, );\n }\n\n return _expression.baseParseMaybeAssign.call(void 0, noIn, isWithinParens);\n} exports.flowParseMaybeAssign = flowParseMaybeAssign;\n\n// handle return types for arrow functions\n function flowParseArrow() {\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n const snapshot = _base.state.snapshot();\n\n const oldNoAnonFunctionType = _base.state.noAnonFunctionType;\n _base.state.noAnonFunctionType = true;\n flowParseTypeAndPredicateInitialiser();\n _base.state.noAnonFunctionType = oldNoAnonFunctionType;\n\n if (_util.canInsertSemicolon.call(void 0, )) _util.unexpected.call(void 0, );\n if (!_index.match.call(void 0, _types.TokenType.arrow)) _util.unexpected.call(void 0, );\n\n if (_base.state.error) {\n _base.state.restoreFromSnapshot(snapshot);\n }\n _index.popTypeContext.call(void 0, oldIsType);\n }\n return _index.eat.call(void 0, _types.TokenType.arrow);\n} exports.flowParseArrow = flowParseArrow;\n\n function flowParseSubscripts(startTokenIndex, noCalls = false) {\n if (\n _base.state.tokens[_base.state.tokens.length - 1].contextualKeyword === _keywords.ContextualKeyword._async &&\n _index.match.call(void 0, _types.TokenType.lessThan)\n ) {\n const snapshot = _base.state.snapshot();\n const wasArrow = parseAsyncArrowWithTypeParameters();\n if (wasArrow && !_base.state.error) {\n return;\n }\n _base.state.restoreFromSnapshot(snapshot);\n }\n\n _expression.baseParseSubscripts.call(void 0, startTokenIndex, noCalls);\n} exports.flowParseSubscripts = flowParseSubscripts;\n\n// Returns true if there was an arrow function here.\nfunction parseAsyncArrowWithTypeParameters() {\n _base.state.scopeDepth++;\n const startTokenIndex = _base.state.tokens.length;\n _statement.parseFunctionParams.call(void 0, );\n if (!_expression.parseArrow.call(void 0, )) {\n return false;\n }\n _expression.parseArrowExpression.call(void 0, startTokenIndex);\n return true;\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\n\n\n\n\n\n\n\n\nvar _index = require('../../tokenizer/index');\nvar _types = require('../../tokenizer/types');\nvar _base = require('../../traverser/base');\nvar _expression = require('../../traverser/expression');\nvar _util = require('../../traverser/util');\nvar _charcodes = require('../../util/charcodes');\nvar _identifier = require('../../util/identifier');\nvar _typescript = require('../typescript');\n\n// Reads inline JSX contents token.\nfunction jsxReadToken() {\n for (;;) {\n if (_base.state.pos >= _base.input.length) {\n _util.unexpected.call(void 0, \"Unterminated JSX contents\");\n return;\n }\n\n const ch = _base.input.charCodeAt(_base.state.pos);\n\n switch (ch) {\n case _charcodes.charCodes.lessThan:\n case _charcodes.charCodes.leftCurlyBrace:\n if (_base.state.pos === _base.state.start) {\n if (ch === _charcodes.charCodes.lessThan) {\n _base.state.pos++;\n _index.finishToken.call(void 0, _types.TokenType.jsxTagStart);\n return;\n }\n _index.getTokenFromCode.call(void 0, ch);\n return;\n }\n _index.finishToken.call(void 0, _types.TokenType.jsxText);\n return;\n\n default:\n _base.state.pos++;\n }\n }\n}\n\nfunction jsxReadString(quote) {\n _base.state.pos++;\n for (;;) {\n if (_base.state.pos >= _base.input.length) {\n _util.unexpected.call(void 0, \"Unterminated string constant\");\n return;\n }\n\n const ch = _base.input.charCodeAt(_base.state.pos);\n if (ch === quote) {\n _base.state.pos++;\n break;\n }\n _base.state.pos++;\n }\n _index.finishToken.call(void 0, _types.TokenType.string);\n}\n\n// Read a JSX identifier (valid tag or attribute name).\n//\n// Optimized version since JSX identifiers can't contain\n// escape characters and so can be read as single slice.\n// Also assumes that first character was already checked\n// by isIdentifierStart in readToken.\n\nfunction jsxReadWord() {\n let ch;\n do {\n if (_base.state.pos > _base.input.length) {\n _util.unexpected.call(void 0, \"Unexpectedly reached the end of input.\");\n return;\n }\n ch = _base.input.charCodeAt(++_base.state.pos);\n } while (_identifier.IS_IDENTIFIER_CHAR[ch] || ch === _charcodes.charCodes.dash);\n _index.finishToken.call(void 0, _types.TokenType.jsxName);\n}\n\n// Parse next token as JSX identifier\nfunction jsxParseIdentifier() {\n nextJSXTagToken();\n}\n\n// Parse namespaced identifier.\nfunction jsxParseNamespacedName(identifierRole) {\n jsxParseIdentifier();\n if (!_index.eat.call(void 0, _types.TokenType.colon)) {\n // Plain identifier, so this is an access.\n _base.state.tokens[_base.state.tokens.length - 1].identifierRole = identifierRole;\n return;\n }\n // Process the second half of the namespaced name.\n jsxParseIdentifier();\n}\n\n// Parses element name in any form - namespaced, member\n// or single identifier.\nfunction jsxParseElementName() {\n jsxParseNamespacedName(_index.IdentifierRole.Access);\n while (_index.match.call(void 0, _types.TokenType.dot)) {\n nextJSXTagToken();\n jsxParseIdentifier();\n }\n}\n\n// Parses any type of JSX attribute value.\nfunction jsxParseAttributeValue() {\n switch (_base.state.type) {\n case _types.TokenType.braceL:\n _index.next.call(void 0, );\n jsxParseExpressionContainer();\n nextJSXTagToken();\n return;\n\n case _types.TokenType.jsxTagStart:\n jsxParseElement();\n nextJSXTagToken();\n return;\n\n case _types.TokenType.string:\n nextJSXTagToken();\n return;\n\n default:\n _util.unexpected.call(void 0, \"JSX value should be either an expression or a quoted JSX text\");\n }\n}\n\nfunction jsxParseEmptyExpression() {\n // Do nothing.\n}\n\n// Parse JSX spread child, after already processing the {\n// Does not parse the closing }\nfunction jsxParseSpreadChild() {\n _util.expect.call(void 0, _types.TokenType.ellipsis);\n _expression.parseExpression.call(void 0, );\n}\n\n// Parses JSX expression enclosed into curly brackets, after already processing the {\n// Does not parse the closing }\nfunction jsxParseExpressionContainer() {\n if (_index.match.call(void 0, _types.TokenType.braceR)) {\n jsxParseEmptyExpression();\n } else {\n _expression.parseExpression.call(void 0, );\n }\n}\n\n// Parses following JSX attribute name-value pair.\nfunction jsxParseAttribute() {\n if (_index.eat.call(void 0, _types.TokenType.braceL)) {\n _util.expect.call(void 0, _types.TokenType.ellipsis);\n _expression.parseMaybeAssign.call(void 0, );\n // }\n nextJSXTagToken();\n return;\n }\n jsxParseNamespacedName(_index.IdentifierRole.ObjectKey);\n if (_index.match.call(void 0, _types.TokenType.eq)) {\n nextJSXTagToken();\n jsxParseAttributeValue();\n }\n}\n\n// Parses JSX opening tag starting after \"<\".\n// Returns true if the tag was self-closing.\n// Does not parse the last token.\nfunction jsxParseOpeningElement() {\n if (_index.match.call(void 0, _types.TokenType.jsxTagEnd)) {\n // This is an open-fragment.\n return false;\n }\n jsxParseElementName();\n if (_base.isTypeScriptEnabled) {\n _typescript.tsTryParseJSXTypeArgument.call(void 0, );\n }\n while (!_index.match.call(void 0, _types.TokenType.slash) && !_index.match.call(void 0, _types.TokenType.jsxTagEnd) && !_base.state.error) {\n jsxParseAttribute();\n }\n const isSelfClosing = _index.match.call(void 0, _types.TokenType.slash);\n if (isSelfClosing) {\n // /\n nextJSXTagToken();\n }\n return isSelfClosing;\n}\n\n// Parses JSX closing tag starting after \"</\".\n// Does not parse the last token.\nfunction jsxParseClosingElement() {\n if (_index.match.call(void 0, _types.TokenType.jsxTagEnd)) {\n // Fragment syntax, so we immediately have a tag end.\n return;\n }\n jsxParseElementName();\n}\n\n// Parses entire JSX element, including its opening tag\n// (starting after \"<\"), attributes, contents and closing tag.\n// Does not parse the last token.\nfunction jsxParseElementAt() {\n const isSelfClosing = jsxParseOpeningElement();\n if (!isSelfClosing) {\n nextJSXExprToken();\n while (true) {\n switch (_base.state.type) {\n case _types.TokenType.jsxTagStart:\n nextJSXTagToken();\n if (_index.match.call(void 0, _types.TokenType.slash)) {\n nextJSXTagToken();\n jsxParseClosingElement();\n return;\n }\n jsxParseElementAt();\n nextJSXExprToken();\n break;\n\n case _types.TokenType.jsxText:\n nextJSXExprToken();\n break;\n\n case _types.TokenType.braceL:\n _index.next.call(void 0, );\n if (_index.match.call(void 0, _types.TokenType.ellipsis)) {\n jsxParseSpreadChild();\n nextJSXExprToken();\n } else {\n jsxParseExpressionContainer();\n nextJSXExprToken();\n }\n\n break;\n\n // istanbul ignore next - should never happen\n default:\n _util.unexpected.call(void 0, );\n return;\n }\n }\n }\n}\n\n// Parses entire JSX element from current position.\n// Does not parse the last token.\n function jsxParseElement() {\n nextJSXTagToken();\n jsxParseElementAt();\n} exports.jsxParseElement = jsxParseElement;\n\n// ==================================\n// Overrides\n// ==================================\n\n function nextJSXTagToken() {\n _base.state.tokens.push(new (0, _index.Token)());\n _index.skipSpace.call(void 0, );\n _base.state.start = _base.state.pos;\n const code = _base.input.charCodeAt(_base.state.pos);\n\n if (_identifier.IS_IDENTIFIER_START[code]) {\n jsxReadWord();\n } else if (code === _charcodes.charCodes.quotationMark || code === _charcodes.charCodes.apostrophe) {\n jsxReadString(code);\n } else {\n // The following tokens are just one character each.\n ++_base.state.pos;\n switch (code) {\n case _charcodes.charCodes.greaterThan:\n _index.finishToken.call(void 0, _types.TokenType.jsxTagEnd);\n break;\n case _charcodes.charCodes.lessThan:\n _index.finishToken.call(void 0, _types.TokenType.jsxTagStart);\n break;\n case _charcodes.charCodes.slash:\n _index.finishToken.call(void 0, _types.TokenType.slash);\n break;\n case _charcodes.charCodes.equalsTo:\n _index.finishToken.call(void 0, _types.TokenType.eq);\n break;\n case _charcodes.charCodes.leftCurlyBrace:\n _index.finishToken.call(void 0, _types.TokenType.braceL);\n break;\n case _charcodes.charCodes.dot:\n _index.finishToken.call(void 0, _types.TokenType.dot);\n break;\n case _charcodes.charCodes.colon:\n _index.finishToken.call(void 0, _types.TokenType.colon);\n break;\n default:\n _util.unexpected.call(void 0, );\n }\n }\n} exports.nextJSXTagToken = nextJSXTagToken;\n\nfunction nextJSXExprToken() {\n _base.state.tokens.push(new (0, _index.Token)());\n _base.state.start = _base.state.pos;\n jsxReadToken();\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});const entities = {\n quot: \"\\u0022\",\n amp: \"&\",\n apos: \"\\u0027\",\n lt: \"<\",\n gt: \">\",\n nbsp: \"\\u00A0\",\n iexcl: \"\\u00A1\",\n cent: \"\\u00A2\",\n pound: \"\\u00A3\",\n curren: \"\\u00A4\",\n yen: \"\\u00A5\",\n brvbar: \"\\u00A6\",\n sect: \"\\u00A7\",\n uml: \"\\u00A8\",\n copy: \"\\u00A9\",\n ordf: \"\\u00AA\",\n laquo: \"\\u00AB\",\n not: \"\\u00AC\",\n shy: \"\\u00AD\",\n reg: \"\\u00AE\",\n macr: \"\\u00AF\",\n deg: \"\\u00B0\",\n plusmn: \"\\u00B1\",\n sup2: \"\\u00B2\",\n sup3: \"\\u00B3\",\n acute: \"\\u00B4\",\n micro: \"\\u00B5\",\n para: \"\\u00B6\",\n middot: \"\\u00B7\",\n cedil: \"\\u00B8\",\n sup1: \"\\u00B9\",\n ordm: \"\\u00BA\",\n raquo: \"\\u00BB\",\n frac14: \"\\u00BC\",\n frac12: \"\\u00BD\",\n frac34: \"\\u00BE\",\n iquest: \"\\u00BF\",\n Agrave: \"\\u00C0\",\n Aacute: \"\\u00C1\",\n Acirc: \"\\u00C2\",\n Atilde: \"\\u00C3\",\n Auml: \"\\u00C4\",\n Aring: \"\\u00C5\",\n AElig: \"\\u00C6\",\n Ccedil: \"\\u00C7\",\n Egrave: \"\\u00C8\",\n Eacute: \"\\u00C9\",\n Ecirc: \"\\u00CA\",\n Euml: \"\\u00CB\",\n Igrave: \"\\u00CC\",\n Iacute: \"\\u00CD\",\n Icirc: \"\\u00CE\",\n Iuml: \"\\u00CF\",\n ETH: \"\\u00D0\",\n Ntilde: \"\\u00D1\",\n Ograve: \"\\u00D2\",\n Oacute: \"\\u00D3\",\n Ocirc: \"\\u00D4\",\n Otilde: \"\\u00D5\",\n Ouml: \"\\u00D6\",\n times: \"\\u00D7\",\n Oslash: \"\\u00D8\",\n Ugrave: \"\\u00D9\",\n Uacute: \"\\u00DA\",\n Ucirc: \"\\u00DB\",\n Uuml: \"\\u00DC\",\n Yacute: \"\\u00DD\",\n THORN: \"\\u00DE\",\n szlig: \"\\u00DF\",\n agrave: \"\\u00E0\",\n aacute: \"\\u00E1\",\n acirc: \"\\u00E2\",\n atilde: \"\\u00E3\",\n auml: \"\\u00E4\",\n aring: \"\\u00E5\",\n aelig: \"\\u00E6\",\n ccedil: \"\\u00E7\",\n egrave: \"\\u00E8\",\n eacute: \"\\u00E9\",\n ecirc: \"\\u00EA\",\n euml: \"\\u00EB\",\n igrave: \"\\u00EC\",\n iacute: \"\\u00ED\",\n icirc: \"\\u00EE\",\n iuml: \"\\u00EF\",\n eth: \"\\u00F0\",\n ntilde: \"\\u00F1\",\n ograve: \"\\u00F2\",\n oacute: \"\\u00F3\",\n ocirc: \"\\u00F4\",\n otilde: \"\\u00F5\",\n ouml: \"\\u00F6\",\n divide: \"\\u00F7\",\n oslash: \"\\u00F8\",\n ugrave: \"\\u00F9\",\n uacute: \"\\u00FA\",\n ucirc: \"\\u00FB\",\n uuml: \"\\u00FC\",\n yacute: \"\\u00FD\",\n thorn: \"\\u00FE\",\n yuml: \"\\u00FF\",\n OElig: \"\\u0152\",\n oelig: \"\\u0153\",\n Scaron: \"\\u0160\",\n scaron: \"\\u0161\",\n Yuml: \"\\u0178\",\n fnof: \"\\u0192\",\n circ: \"\\u02C6\",\n tilde: \"\\u02DC\",\n Alpha: \"\\u0391\",\n Beta: \"\\u0392\",\n Gamma: \"\\u0393\",\n Delta: \"\\u0394\",\n Epsilon: \"\\u0395\",\n Zeta: \"\\u0396\",\n Eta: \"\\u0397\",\n Theta: \"\\u0398\",\n Iota: \"\\u0399\",\n Kappa: \"\\u039A\",\n Lambda: \"\\u039B\",\n Mu: \"\\u039C\",\n Nu: \"\\u039D\",\n Xi: \"\\u039E\",\n Omicron: \"\\u039F\",\n Pi: \"\\u03A0\",\n Rho: \"\\u03A1\",\n Sigma: \"\\u03A3\",\n Tau: \"\\u03A4\",\n Upsilon: \"\\u03A5\",\n Phi: \"\\u03A6\",\n Chi: \"\\u03A7\",\n Psi: \"\\u03A8\",\n Omega: \"\\u03A9\",\n alpha: \"\\u03B1\",\n beta: \"\\u03B2\",\n gamma: \"\\u03B3\",\n delta: \"\\u03B4\",\n epsilon: \"\\u03B5\",\n zeta: \"\\u03B6\",\n eta: \"\\u03B7\",\n theta: \"\\u03B8\",\n iota: \"\\u03B9\",\n kappa: \"\\u03BA\",\n lambda: \"\\u03BB\",\n mu: \"\\u03BC\",\n nu: \"\\u03BD\",\n xi: \"\\u03BE\",\n omicron: \"\\u03BF\",\n pi: \"\\u03C0\",\n rho: \"\\u03C1\",\n sigmaf: \"\\u03C2\",\n sigma: \"\\u03C3\",\n tau: \"\\u03C4\",\n upsilon: \"\\u03C5\",\n phi: \"\\u03C6\",\n chi: \"\\u03C7\",\n psi: \"\\u03C8\",\n omega: \"\\u03C9\",\n thetasym: \"\\u03D1\",\n upsih: \"\\u03D2\",\n piv: \"\\u03D6\",\n ensp: \"\\u2002\",\n emsp: \"\\u2003\",\n thinsp: \"\\u2009\",\n zwnj: \"\\u200C\",\n zwj: \"\\u200D\",\n lrm: \"\\u200E\",\n rlm: \"\\u200F\",\n ndash: \"\\u2013\",\n mdash: \"\\u2014\",\n lsquo: \"\\u2018\",\n rsquo: \"\\u2019\",\n sbquo: \"\\u201A\",\n ldquo: \"\\u201C\",\n rdquo: \"\\u201D\",\n bdquo: \"\\u201E\",\n dagger: \"\\u2020\",\n Dagger: \"\\u2021\",\n bull: \"\\u2022\",\n hellip: \"\\u2026\",\n permil: \"\\u2030\",\n prime: \"\\u2032\",\n Prime: \"\\u2033\",\n lsaquo: \"\\u2039\",\n rsaquo: \"\\u203A\",\n oline: \"\\u203E\",\n frasl: \"\\u2044\",\n euro: \"\\u20AC\",\n image: \"\\u2111\",\n weierp: \"\\u2118\",\n real: \"\\u211C\",\n trade: \"\\u2122\",\n alefsym: \"\\u2135\",\n larr: \"\\u2190\",\n uarr: \"\\u2191\",\n rarr: \"\\u2192\",\n darr: \"\\u2193\",\n harr: \"\\u2194\",\n crarr: \"\\u21B5\",\n lArr: \"\\u21D0\",\n uArr: \"\\u21D1\",\n rArr: \"\\u21D2\",\n dArr: \"\\u21D3\",\n hArr: \"\\u21D4\",\n forall: \"\\u2200\",\n part: \"\\u2202\",\n exist: \"\\u2203\",\n empty: \"\\u2205\",\n nabla: \"\\u2207\",\n isin: \"\\u2208\",\n notin: \"\\u2209\",\n ni: \"\\u220B\",\n prod: \"\\u220F\",\n sum: \"\\u2211\",\n minus: \"\\u2212\",\n lowast: \"\\u2217\",\n radic: \"\\u221A\",\n prop: \"\\u221D\",\n infin: \"\\u221E\",\n ang: \"\\u2220\",\n and: \"\\u2227\",\n or: \"\\u2228\",\n cap: \"\\u2229\",\n cup: \"\\u222A\",\n int: \"\\u222B\",\n there4: \"\\u2234\",\n sim: \"\\u223C\",\n cong: \"\\u2245\",\n asymp: \"\\u2248\",\n ne: \"\\u2260\",\n equiv: \"\\u2261\",\n le: \"\\u2264\",\n ge: \"\\u2265\",\n sub: \"\\u2282\",\n sup: \"\\u2283\",\n nsub: \"\\u2284\",\n sube: \"\\u2286\",\n supe: \"\\u2287\",\n oplus: \"\\u2295\",\n otimes: \"\\u2297\",\n perp: \"\\u22A5\",\n sdot: \"\\u22C5\",\n lceil: \"\\u2308\",\n rceil: \"\\u2309\",\n lfloor: \"\\u230A\",\n rfloor: \"\\u230B\",\n lang: \"\\u2329\",\n rang: \"\\u232A\",\n loz: \"\\u25CA\",\n spades: \"\\u2660\",\n clubs: \"\\u2663\",\n hearts: \"\\u2665\",\n diams: \"\\u2666\",\n};\nexports. default = entities;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _index = require('../tokenizer/index');\nvar _types = require('../tokenizer/types');\nvar _base = require('../traverser/base');\nvar _expression = require('../traverser/expression');\nvar _flow = require('./flow');\nvar _typescript = require('./typescript');\n\n/**\n * Common parser code for TypeScript and Flow.\n */\n\n// An apparent conditional expression could actually be an optional parameter in an arrow function.\n function typedParseConditional(noIn) {\n // If we see ?:, this can't possibly be a valid conditional. typedParseParenItem will be called\n // later to finish off the arrow parameter. We also need to handle bare ? tokens for optional\n // parameters without type annotations, i.e. ?, and ?) .\n if (_index.match.call(void 0, _types.TokenType.question)) {\n const nextType = _index.lookaheadType.call(void 0, );\n if (nextType === _types.TokenType.colon || nextType === _types.TokenType.comma || nextType === _types.TokenType.parenR) {\n return;\n }\n }\n _expression.baseParseConditional.call(void 0, noIn);\n} exports.typedParseConditional = typedParseConditional;\n\n// Note: These \"type casts\" are *not* valid TS expressions.\n// But we parse them here and change them when completing the arrow function.\n function typedParseParenItem() {\n if (_index.eat.call(void 0, _types.TokenType.question)) {\n _base.state.tokens[_base.state.tokens.length - 1].isType = true;\n }\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsParseTypeAnnotation.call(void 0, );\n } else if (_base.isFlowEnabled) {\n _flow.flowParseTypeAnnotation.call(void 0, );\n }\n }\n} exports.typedParseParenItem = typedParseParenItem;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\n\n\n\n\n\n\n\n\nvar _index = require('../tokenizer/index');\nvar _keywords = require('../tokenizer/keywords');\nvar _types = require('../tokenizer/types');\nvar _base = require('../traverser/base');\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar _expression = require('../traverser/expression');\nvar _lval = require('../traverser/lval');\n\n\n\n\n\n\n\n\n\n\n\nvar _statement = require('../traverser/statement');\n\n\n\n\n\n\n\n\n\n\n\nvar _util = require('../traverser/util');\nvar _jsx = require('./jsx');\n\nfunction tsIsIdentifier() {\n // TODO: actually a bit more complex in TypeScript, but shouldn't matter.\n // See https://github.com/Microsoft/TypeScript/issues/15008\n return _index.match.call(void 0, _types.TokenType.name);\n}\n\nfunction isLiteralPropertyName() {\n return (\n _index.match.call(void 0, _types.TokenType.name) ||\n Boolean(_base.state.type & _types.TokenType.IS_KEYWORD) ||\n _index.match.call(void 0, _types.TokenType.string) ||\n _index.match.call(void 0, _types.TokenType.num) ||\n _index.match.call(void 0, _types.TokenType.bigint) ||\n _index.match.call(void 0, _types.TokenType.decimal)\n );\n}\n\nfunction tsNextTokenCanFollowModifier() {\n // Note: TypeScript's implementation is much more complicated because\n // more things are considered modifiers there.\n // This implementation only handles modifiers not handled by babylon itself. And \"static\".\n // TODO: Would be nice to avoid lookahead. Want a hasLineBreakUpNext() method...\n const snapshot = _base.state.snapshot();\n\n _index.next.call(void 0, );\n const canFollowModifier =\n (_index.match.call(void 0, _types.TokenType.bracketL) ||\n _index.match.call(void 0, _types.TokenType.braceL) ||\n _index.match.call(void 0, _types.TokenType.star) ||\n _index.match.call(void 0, _types.TokenType.ellipsis) ||\n _index.match.call(void 0, _types.TokenType.hash) ||\n isLiteralPropertyName()) &&\n !_util.hasPrecedingLineBreak.call(void 0, );\n\n if (canFollowModifier) {\n return true;\n } else {\n _base.state.restoreFromSnapshot(snapshot);\n return false;\n }\n}\n\n/** Parses a modifier matching one the given modifier names. */\n function tsParseModifier(\n allowedModifiers,\n) {\n if (!_index.match.call(void 0, _types.TokenType.name)) {\n return null;\n }\n\n const modifier = _base.state.contextualKeyword;\n if (allowedModifiers.indexOf(modifier) !== -1 && tsNextTokenCanFollowModifier()) {\n switch (modifier) {\n case _keywords.ContextualKeyword._readonly:\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._readonly;\n break;\n case _keywords.ContextualKeyword._abstract:\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._abstract;\n break;\n case _keywords.ContextualKeyword._static:\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._static;\n break;\n case _keywords.ContextualKeyword._public:\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._public;\n break;\n case _keywords.ContextualKeyword._private:\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._private;\n break;\n case _keywords.ContextualKeyword._protected:\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._protected;\n break;\n case _keywords.ContextualKeyword._declare:\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._declare;\n break;\n default:\n break;\n }\n return modifier;\n }\n return null;\n} exports.tsParseModifier = tsParseModifier;\n\nfunction tsParseEntityName() {\n _expression.parseIdentifier.call(void 0, );\n while (_index.eat.call(void 0, _types.TokenType.dot)) {\n _expression.parseIdentifier.call(void 0, );\n }\n}\n\nfunction tsParseTypeReference() {\n tsParseEntityName();\n if (!_util.hasPrecedingLineBreak.call(void 0, ) && _index.match.call(void 0, _types.TokenType.lessThan)) {\n tsParseTypeArguments();\n }\n}\n\nfunction tsParseThisTypePredicate() {\n _index.next.call(void 0, );\n tsParseTypeAnnotation();\n}\n\nfunction tsParseThisTypeNode() {\n _index.next.call(void 0, );\n}\n\nfunction tsParseTypeQuery() {\n _util.expect.call(void 0, _types.TokenType._typeof);\n if (_index.match.call(void 0, _types.TokenType._import)) {\n tsParseImportType();\n } else {\n tsParseEntityName();\n }\n}\n\nfunction tsParseImportType() {\n _util.expect.call(void 0, _types.TokenType._import);\n _util.expect.call(void 0, _types.TokenType.parenL);\n _util.expect.call(void 0, _types.TokenType.string);\n _util.expect.call(void 0, _types.TokenType.parenR);\n if (_index.eat.call(void 0, _types.TokenType.dot)) {\n tsParseEntityName();\n }\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n tsParseTypeArguments();\n }\n}\n\nfunction tsParseTypeParameter() {\n _expression.parseIdentifier.call(void 0, );\n if (_index.eat.call(void 0, _types.TokenType._extends)) {\n tsParseType();\n }\n if (_index.eat.call(void 0, _types.TokenType.eq)) {\n tsParseType();\n }\n}\n\n function tsTryParseTypeParameters() {\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n tsParseTypeParameters();\n }\n} exports.tsTryParseTypeParameters = tsTryParseTypeParameters;\n\nfunction tsParseTypeParameters() {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n if (_index.match.call(void 0, _types.TokenType.lessThan) || _index.match.call(void 0, _types.TokenType.typeParameterStart)) {\n _index.next.call(void 0, );\n } else {\n _util.unexpected.call(void 0, );\n }\n\n while (!_index.eat.call(void 0, _types.TokenType.greaterThan) && !_base.state.error) {\n tsParseTypeParameter();\n _index.eat.call(void 0, _types.TokenType.comma);\n }\n _index.popTypeContext.call(void 0, oldIsType);\n}\n\n// Note: In TypeScript implementation we must provide `yieldContext` and `awaitContext`,\n// but here it's always false, because this is only used for types.\nfunction tsFillSignature(returnToken) {\n // Arrow fns *must* have return token (`=>`). Normal functions can omit it.\n const returnTokenRequired = returnToken === _types.TokenType.arrow;\n tsTryParseTypeParameters();\n _util.expect.call(void 0, _types.TokenType.parenL);\n // Create a scope even though we're doing type parsing so we don't accidentally\n // treat params as top-level bindings.\n _base.state.scopeDepth++;\n tsParseBindingListForSignature(false /* isBlockScope */);\n _base.state.scopeDepth--;\n if (returnTokenRequired) {\n tsParseTypeOrTypePredicateAnnotation(returnToken);\n } else if (_index.match.call(void 0, returnToken)) {\n tsParseTypeOrTypePredicateAnnotation(returnToken);\n }\n}\n\nfunction tsParseBindingListForSignature(isBlockScope) {\n _lval.parseBindingList.call(void 0, _types.TokenType.parenR, isBlockScope);\n}\n\nfunction tsParseTypeMemberSemicolon() {\n if (!_index.eat.call(void 0, _types.TokenType.comma)) {\n _util.semicolon.call(void 0, );\n }\n}\n\nfunction tsParseSignatureMember() {\n tsFillSignature(_types.TokenType.colon);\n tsParseTypeMemberSemicolon();\n}\n\nfunction tsIsUnambiguouslyIndexSignature() {\n const snapshot = _base.state.snapshot();\n _index.next.call(void 0, ); // Skip '{'\n const isIndexSignature = _index.eat.call(void 0, _types.TokenType.name) && _index.match.call(void 0, _types.TokenType.colon);\n _base.state.restoreFromSnapshot(snapshot);\n return isIndexSignature;\n}\n\nfunction tsTryParseIndexSignature() {\n if (!(_index.match.call(void 0, _types.TokenType.bracketL) && tsIsUnambiguouslyIndexSignature())) {\n return false;\n }\n\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n\n _util.expect.call(void 0, _types.TokenType.bracketL);\n _expression.parseIdentifier.call(void 0, );\n tsParseTypeAnnotation();\n _util.expect.call(void 0, _types.TokenType.bracketR);\n\n tsTryParseTypeAnnotation();\n tsParseTypeMemberSemicolon();\n\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n}\n\nfunction tsParsePropertyOrMethodSignature(isReadonly) {\n _index.eat.call(void 0, _types.TokenType.question);\n\n if (!isReadonly && (_index.match.call(void 0, _types.TokenType.parenL) || _index.match.call(void 0, _types.TokenType.lessThan))) {\n tsFillSignature(_types.TokenType.colon);\n tsParseTypeMemberSemicolon();\n } else {\n tsTryParseTypeAnnotation();\n tsParseTypeMemberSemicolon();\n }\n}\n\nfunction tsParseTypeMember() {\n if (_index.match.call(void 0, _types.TokenType.parenL) || _index.match.call(void 0, _types.TokenType.lessThan)) {\n // call signature\n tsParseSignatureMember();\n return;\n }\n if (_index.match.call(void 0, _types.TokenType._new)) {\n _index.next.call(void 0, );\n if (_index.match.call(void 0, _types.TokenType.parenL) || _index.match.call(void 0, _types.TokenType.lessThan)) {\n // constructor signature\n tsParseSignatureMember();\n } else {\n tsParsePropertyOrMethodSignature(false);\n }\n return;\n }\n const readonly = !!tsParseModifier([_keywords.ContextualKeyword._readonly]);\n\n const found = tsTryParseIndexSignature();\n if (found) {\n return;\n }\n _expression.parsePropertyName.call(void 0, -1 /* Types don't need context IDs. */);\n tsParsePropertyOrMethodSignature(readonly);\n}\n\nfunction tsParseTypeLiteral() {\n tsParseObjectTypeMembers();\n}\n\nfunction tsParseObjectTypeMembers() {\n _util.expect.call(void 0, _types.TokenType.braceL);\n while (!_index.eat.call(void 0, _types.TokenType.braceR) && !_base.state.error) {\n tsParseTypeMember();\n }\n}\n\nfunction tsLookaheadIsStartOfMappedType() {\n const snapshot = _base.state.snapshot();\n const isStartOfMappedType = tsIsStartOfMappedType();\n _base.state.restoreFromSnapshot(snapshot);\n return isStartOfMappedType;\n}\n\nfunction tsIsStartOfMappedType() {\n _index.next.call(void 0, );\n if (_index.eat.call(void 0, _types.TokenType.plus) || _index.eat.call(void 0, _types.TokenType.minus)) {\n return _util.isContextual.call(void 0, _keywords.ContextualKeyword._readonly);\n }\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._readonly)) {\n _index.next.call(void 0, );\n }\n if (!_index.match.call(void 0, _types.TokenType.bracketL)) {\n return false;\n }\n _index.next.call(void 0, );\n if (!tsIsIdentifier()) {\n return false;\n }\n _index.next.call(void 0, );\n return _index.match.call(void 0, _types.TokenType._in);\n}\n\nfunction tsParseMappedTypeParameter() {\n _expression.parseIdentifier.call(void 0, );\n _util.expect.call(void 0, _types.TokenType._in);\n tsParseType();\n}\n\nfunction tsParseMappedType() {\n _util.expect.call(void 0, _types.TokenType.braceL);\n if (_index.match.call(void 0, _types.TokenType.plus) || _index.match.call(void 0, _types.TokenType.minus)) {\n _index.next.call(void 0, );\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._readonly);\n } else {\n _util.eatContextual.call(void 0, _keywords.ContextualKeyword._readonly);\n }\n _util.expect.call(void 0, _types.TokenType.bracketL);\n tsParseMappedTypeParameter();\n if (_util.eatContextual.call(void 0, _keywords.ContextualKeyword._as)) {\n tsParseType();\n }\n _util.expect.call(void 0, _types.TokenType.bracketR);\n if (_index.match.call(void 0, _types.TokenType.plus) || _index.match.call(void 0, _types.TokenType.minus)) {\n _index.next.call(void 0, );\n _util.expect.call(void 0, _types.TokenType.question);\n } else {\n _index.eat.call(void 0, _types.TokenType.question);\n }\n tsTryParseType();\n _util.semicolon.call(void 0, );\n _util.expect.call(void 0, _types.TokenType.braceR);\n}\n\nfunction tsParseTupleType() {\n _util.expect.call(void 0, _types.TokenType.bracketL);\n while (!_index.eat.call(void 0, _types.TokenType.bracketR) && !_base.state.error) {\n // Do not validate presence of either none or only labeled elements\n tsParseTupleElementType();\n _index.eat.call(void 0, _types.TokenType.comma);\n }\n}\n\nfunction tsParseTupleElementType() {\n // parses `...TsType[]`\n if (_index.eat.call(void 0, _types.TokenType.ellipsis)) {\n tsParseType();\n } else {\n // parses `TsType?`\n tsParseType();\n _index.eat.call(void 0, _types.TokenType.question);\n }\n\n // The type we parsed above was actually a label\n if (_index.eat.call(void 0, _types.TokenType.colon)) {\n // Labeled tuple types must affix the label with `...` or `?`, so no need to handle those here\n tsParseType();\n }\n}\n\nfunction tsParseParenthesizedType() {\n _util.expect.call(void 0, _types.TokenType.parenL);\n tsParseType();\n _util.expect.call(void 0, _types.TokenType.parenR);\n}\n\nfunction tsParseTemplateLiteralType() {\n // Finish `, read quasi\n _index.nextTemplateToken.call(void 0, );\n // Finish quasi, read ${\n _index.nextTemplateToken.call(void 0, );\n while (!_index.match.call(void 0, _types.TokenType.backQuote) && !_base.state.error) {\n _util.expect.call(void 0, _types.TokenType.dollarBraceL);\n tsParseType();\n // Finish }, read quasi\n _index.nextTemplateToken.call(void 0, );\n // Finish quasi, read either ${ or `\n _index.nextTemplateToken.call(void 0, );\n }\n _index.next.call(void 0, );\n}\n\nvar FunctionType; (function (FunctionType) {\n const TSFunctionType = 0; FunctionType[FunctionType[\"TSFunctionType\"] = TSFunctionType] = \"TSFunctionType\";\n const TSConstructorType = TSFunctionType + 1; FunctionType[FunctionType[\"TSConstructorType\"] = TSConstructorType] = \"TSConstructorType\";\n})(FunctionType || (FunctionType = {}));\n\nfunction tsParseFunctionOrConstructorType(type) {\n if (type === FunctionType.TSConstructorType) {\n _util.expect.call(void 0, _types.TokenType._new);\n }\n tsFillSignature(_types.TokenType.arrow);\n}\n\nfunction tsParseNonArrayType() {\n switch (_base.state.type) {\n case _types.TokenType.name:\n tsParseTypeReference();\n return;\n case _types.TokenType._void:\n case _types.TokenType._null:\n _index.next.call(void 0, );\n return;\n case _types.TokenType.string:\n case _types.TokenType.num:\n case _types.TokenType.bigint:\n case _types.TokenType.decimal:\n case _types.TokenType._true:\n case _types.TokenType._false:\n _expression.parseLiteral.call(void 0, );\n return;\n case _types.TokenType.minus:\n _index.next.call(void 0, );\n _expression.parseLiteral.call(void 0, );\n return;\n case _types.TokenType._this: {\n tsParseThisTypeNode();\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._is) && !_util.hasPrecedingLineBreak.call(void 0, )) {\n tsParseThisTypePredicate();\n }\n return;\n }\n case _types.TokenType._typeof:\n tsParseTypeQuery();\n return;\n case _types.TokenType._import:\n tsParseImportType();\n return;\n case _types.TokenType.braceL:\n if (tsLookaheadIsStartOfMappedType()) {\n tsParseMappedType();\n } else {\n tsParseTypeLiteral();\n }\n return;\n case _types.TokenType.bracketL:\n tsParseTupleType();\n return;\n case _types.TokenType.parenL:\n tsParseParenthesizedType();\n return;\n case _types.TokenType.backQuote:\n tsParseTemplateLiteralType();\n return;\n default:\n if (_base.state.type & _types.TokenType.IS_KEYWORD) {\n _index.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType.name;\n return;\n }\n break;\n }\n\n _util.unexpected.call(void 0, );\n}\n\nfunction tsParseArrayTypeOrHigher() {\n tsParseNonArrayType();\n while (!_util.hasPrecedingLineBreak.call(void 0, ) && _index.eat.call(void 0, _types.TokenType.bracketL)) {\n if (!_index.eat.call(void 0, _types.TokenType.bracketR)) {\n // If we hit ] immediately, this is an array type, otherwise it's an indexed access type.\n tsParseType();\n _util.expect.call(void 0, _types.TokenType.bracketR);\n }\n }\n}\n\nfunction tsParseInferType() {\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._infer);\n _expression.parseIdentifier.call(void 0, );\n}\n\nfunction tsParseTypeOperatorOrHigher() {\n if (\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._keyof) ||\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._unique) ||\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._readonly)\n ) {\n _index.next.call(void 0, );\n tsParseTypeOperatorOrHigher();\n } else if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._infer)) {\n tsParseInferType();\n } else {\n tsParseArrayTypeOrHigher();\n }\n}\n\nfunction tsParseIntersectionTypeOrHigher() {\n _index.eat.call(void 0, _types.TokenType.bitwiseAND);\n tsParseTypeOperatorOrHigher();\n if (_index.match.call(void 0, _types.TokenType.bitwiseAND)) {\n while (_index.eat.call(void 0, _types.TokenType.bitwiseAND)) {\n tsParseTypeOperatorOrHigher();\n }\n }\n}\n\nfunction tsParseUnionTypeOrHigher() {\n _index.eat.call(void 0, _types.TokenType.bitwiseOR);\n tsParseIntersectionTypeOrHigher();\n if (_index.match.call(void 0, _types.TokenType.bitwiseOR)) {\n while (_index.eat.call(void 0, _types.TokenType.bitwiseOR)) {\n tsParseIntersectionTypeOrHigher();\n }\n }\n}\n\nfunction tsIsStartOfFunctionType() {\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n return true;\n }\n return _index.match.call(void 0, _types.TokenType.parenL) && tsLookaheadIsUnambiguouslyStartOfFunctionType();\n}\n\nfunction tsSkipParameterStart() {\n if (_index.match.call(void 0, _types.TokenType.name) || _index.match.call(void 0, _types.TokenType._this)) {\n _index.next.call(void 0, );\n return true;\n }\n // If this is a possible array/object destructure, walk to the matching bracket/brace.\n // The next token after will tell us definitively whether this is a function param.\n if (_index.match.call(void 0, _types.TokenType.braceL) || _index.match.call(void 0, _types.TokenType.bracketL)) {\n let depth = 1;\n _index.next.call(void 0, );\n while (depth > 0 && !_base.state.error) {\n if (_index.match.call(void 0, _types.TokenType.braceL) || _index.match.call(void 0, _types.TokenType.bracketL)) {\n depth++;\n } else if (_index.match.call(void 0, _types.TokenType.braceR) || _index.match.call(void 0, _types.TokenType.bracketR)) {\n depth--;\n }\n _index.next.call(void 0, );\n }\n return true;\n }\n return false;\n}\n\nfunction tsLookaheadIsUnambiguouslyStartOfFunctionType() {\n const snapshot = _base.state.snapshot();\n const isUnambiguouslyStartOfFunctionType = tsIsUnambiguouslyStartOfFunctionType();\n _base.state.restoreFromSnapshot(snapshot);\n return isUnambiguouslyStartOfFunctionType;\n}\n\nfunction tsIsUnambiguouslyStartOfFunctionType() {\n _index.next.call(void 0, );\n if (_index.match.call(void 0, _types.TokenType.parenR) || _index.match.call(void 0, _types.TokenType.ellipsis)) {\n // ( )\n // ( ...\n return true;\n }\n if (tsSkipParameterStart()) {\n if (_index.match.call(void 0, _types.TokenType.colon) || _index.match.call(void 0, _types.TokenType.comma) || _index.match.call(void 0, _types.TokenType.question) || _index.match.call(void 0, _types.TokenType.eq)) {\n // ( xxx :\n // ( xxx ,\n // ( xxx ?\n // ( xxx =\n return true;\n }\n if (_index.match.call(void 0, _types.TokenType.parenR)) {\n _index.next.call(void 0, );\n if (_index.match.call(void 0, _types.TokenType.arrow)) {\n // ( xxx ) =>\n return true;\n }\n }\n }\n return false;\n}\n\nfunction tsParseTypeOrTypePredicateAnnotation(returnToken) {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _util.expect.call(void 0, returnToken);\n const finishedReturn = tsParseTypePredicateOrAssertsPrefix();\n if (!finishedReturn) {\n tsParseType();\n }\n _index.popTypeContext.call(void 0, oldIsType);\n}\n\nfunction tsTryParseTypeOrTypePredicateAnnotation() {\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n tsParseTypeOrTypePredicateAnnotation(_types.TokenType.colon);\n }\n}\n\n function tsTryParseTypeAnnotation() {\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n tsParseTypeAnnotation();\n }\n} exports.tsTryParseTypeAnnotation = tsTryParseTypeAnnotation;\n\nfunction tsTryParseType() {\n if (_index.eat.call(void 0, _types.TokenType.colon)) {\n tsParseType();\n }\n}\n\n/**\n * Detect a few special return syntax cases: `x is T`, `asserts x`, `asserts x is T`,\n * `asserts this is T`.\n *\n * Returns true if we parsed the return type, false if there's still a type to be parsed.\n */\nfunction tsParseTypePredicateOrAssertsPrefix() {\n const snapshot = _base.state.snapshot();\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._asserts) && !_util.hasPrecedingLineBreak.call(void 0, )) {\n // Normally this is `asserts x is T`, but at this point, it might be `asserts is T` (a user-\n // defined type guard on the `asserts` variable) or just a type called `asserts`.\n _index.next.call(void 0, );\n if (_util.eatContextual.call(void 0, _keywords.ContextualKeyword._is)) {\n // If we see `asserts is`, then this must be of the form `asserts is T`, since\n // `asserts is is T` isn't valid.\n tsParseType();\n return true;\n } else if (tsIsIdentifier() || _index.match.call(void 0, _types.TokenType._this)) {\n _index.next.call(void 0, );\n if (_util.eatContextual.call(void 0, _keywords.ContextualKeyword._is)) {\n // If we see `is`, then this is `asserts x is T`. Otherwise, it's `asserts x`.\n tsParseType();\n }\n return true;\n } else {\n // Regular type, so bail out and start type parsing from scratch.\n _base.state.restoreFromSnapshot(snapshot);\n return false;\n }\n } else if (tsIsIdentifier() || _index.match.call(void 0, _types.TokenType._this)) {\n // This is a regular identifier, which may or may not have \"is\" after it.\n _index.next.call(void 0, );\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._is) && !_util.hasPrecedingLineBreak.call(void 0, )) {\n _index.next.call(void 0, );\n tsParseType();\n return true;\n } else {\n // Regular type, so bail out and start type parsing from scratch.\n _base.state.restoreFromSnapshot(snapshot);\n return false;\n }\n }\n return false;\n}\n\n function tsParseTypeAnnotation() {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _util.expect.call(void 0, _types.TokenType.colon);\n tsParseType();\n _index.popTypeContext.call(void 0, oldIsType);\n} exports.tsParseTypeAnnotation = tsParseTypeAnnotation;\n\n function tsParseType() {\n tsParseNonConditionalType();\n if (_util.hasPrecedingLineBreak.call(void 0, ) || !_index.eat.call(void 0, _types.TokenType._extends)) {\n return;\n }\n // extends type\n tsParseNonConditionalType();\n _util.expect.call(void 0, _types.TokenType.question);\n // true type\n tsParseType();\n _util.expect.call(void 0, _types.TokenType.colon);\n // false type\n tsParseType();\n} exports.tsParseType = tsParseType;\n\n function tsParseNonConditionalType() {\n if (tsIsStartOfFunctionType()) {\n tsParseFunctionOrConstructorType(FunctionType.TSFunctionType);\n return;\n }\n if (_index.match.call(void 0, _types.TokenType._new)) {\n // As in `new () => Date`\n tsParseFunctionOrConstructorType(FunctionType.TSConstructorType);\n return;\n }\n tsParseUnionTypeOrHigher();\n} exports.tsParseNonConditionalType = tsParseNonConditionalType;\n\n function tsParseTypeAssertion() {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n tsParseType();\n _util.expect.call(void 0, _types.TokenType.greaterThan);\n _index.popTypeContext.call(void 0, oldIsType);\n _expression.parseMaybeUnary.call(void 0, );\n} exports.tsParseTypeAssertion = tsParseTypeAssertion;\n\n function tsTryParseJSXTypeArgument() {\n if (_index.eat.call(void 0, _types.TokenType.jsxTagStart)) {\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType.typeParameterStart;\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n while (!_index.match.call(void 0, _types.TokenType.greaterThan) && !_base.state.error) {\n tsParseType();\n _index.eat.call(void 0, _types.TokenType.comma);\n }\n // Process >, but the one after needs to be parsed JSX-style.\n _jsx.nextJSXTagToken.call(void 0, );\n _index.popTypeContext.call(void 0, oldIsType);\n }\n} exports.tsTryParseJSXTypeArgument = tsTryParseJSXTypeArgument;\n\nfunction tsParseHeritageClause() {\n while (!_index.match.call(void 0, _types.TokenType.braceL) && !_base.state.error) {\n tsParseExpressionWithTypeArguments();\n _index.eat.call(void 0, _types.TokenType.comma);\n }\n}\n\nfunction tsParseExpressionWithTypeArguments() {\n // Note: TS uses parseLeftHandSideExpressionOrHigher,\n // then has grammar errors later if it's not an EntityName.\n tsParseEntityName();\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n tsParseTypeArguments();\n }\n}\n\nfunction tsParseInterfaceDeclaration() {\n _lval.parseBindingIdentifier.call(void 0, false);\n tsTryParseTypeParameters();\n if (_index.eat.call(void 0, _types.TokenType._extends)) {\n tsParseHeritageClause();\n }\n tsParseObjectTypeMembers();\n}\n\nfunction tsParseTypeAliasDeclaration() {\n _lval.parseBindingIdentifier.call(void 0, false);\n tsTryParseTypeParameters();\n _util.expect.call(void 0, _types.TokenType.eq);\n tsParseType();\n _util.semicolon.call(void 0, );\n}\n\nfunction tsParseEnumMember() {\n // Computed property names are grammar errors in an enum, so accept just string literal or identifier.\n if (_index.match.call(void 0, _types.TokenType.string)) {\n _expression.parseLiteral.call(void 0, );\n } else {\n _expression.parseIdentifier.call(void 0, );\n }\n if (_index.eat.call(void 0, _types.TokenType.eq)) {\n const eqIndex = _base.state.tokens.length - 1;\n _expression.parseMaybeAssign.call(void 0, );\n _base.state.tokens[eqIndex].rhsEndIndex = _base.state.tokens.length;\n }\n}\n\nfunction tsParseEnumDeclaration() {\n _lval.parseBindingIdentifier.call(void 0, false);\n _util.expect.call(void 0, _types.TokenType.braceL);\n while (!_index.eat.call(void 0, _types.TokenType.braceR) && !_base.state.error) {\n tsParseEnumMember();\n _index.eat.call(void 0, _types.TokenType.comma);\n }\n}\n\nfunction tsParseModuleBlock() {\n _util.expect.call(void 0, _types.TokenType.braceL);\n _statement.parseBlockBody.call(void 0, /* end */ _types.TokenType.braceR);\n}\n\nfunction tsParseModuleOrNamespaceDeclaration() {\n _lval.parseBindingIdentifier.call(void 0, false);\n if (_index.eat.call(void 0, _types.TokenType.dot)) {\n tsParseModuleOrNamespaceDeclaration();\n } else {\n tsParseModuleBlock();\n }\n}\n\nfunction tsParseAmbientExternalModuleDeclaration() {\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._global)) {\n _expression.parseIdentifier.call(void 0, );\n } else if (_index.match.call(void 0, _types.TokenType.string)) {\n _expression.parseExprAtom.call(void 0, );\n } else {\n _util.unexpected.call(void 0, );\n }\n\n if (_index.match.call(void 0, _types.TokenType.braceL)) {\n tsParseModuleBlock();\n } else {\n _util.semicolon.call(void 0, );\n }\n}\n\n function tsParseImportEqualsDeclaration() {\n _lval.parseImportedIdentifier.call(void 0, );\n _util.expect.call(void 0, _types.TokenType.eq);\n tsParseModuleReference();\n _util.semicolon.call(void 0, );\n} exports.tsParseImportEqualsDeclaration = tsParseImportEqualsDeclaration;\n\nfunction tsIsExternalModuleReference() {\n return _util.isContextual.call(void 0, _keywords.ContextualKeyword._require) && _index.lookaheadType.call(void 0, ) === _types.TokenType.parenL;\n}\n\nfunction tsParseModuleReference() {\n if (tsIsExternalModuleReference()) {\n tsParseExternalModuleReference();\n } else {\n tsParseEntityName();\n }\n}\n\nfunction tsParseExternalModuleReference() {\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._require);\n _util.expect.call(void 0, _types.TokenType.parenL);\n if (!_index.match.call(void 0, _types.TokenType.string)) {\n _util.unexpected.call(void 0, );\n }\n _expression.parseLiteral.call(void 0, );\n _util.expect.call(void 0, _types.TokenType.parenR);\n}\n\n// Utilities\n\n// Returns true if a statement matched.\nfunction tsTryParseDeclare() {\n if (_util.isLineTerminator.call(void 0, )) {\n return false;\n }\n switch (_base.state.type) {\n case _types.TokenType._function: {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n _index.next.call(void 0, );\n // We don't need to precisely get the function start here, since it's only used to mark\n // the function as a type if it's bodiless, and it's already a type here.\n const functionStart = _base.state.start;\n _statement.parseFunction.call(void 0, functionStart, /* isStatement */ true);\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n }\n case _types.TokenType._class: {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n _statement.parseClass.call(void 0, /* isStatement */ true, /* optionalId */ false);\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n }\n case _types.TokenType._const: {\n if (_index.match.call(void 0, _types.TokenType._const) && _util.isLookaheadContextual.call(void 0, _keywords.ContextualKeyword._enum)) {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n // `const enum = 0;` not allowed because \"enum\" is a strict mode reserved word.\n _util.expect.call(void 0, _types.TokenType._const);\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._enum);\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._enum;\n tsParseEnumDeclaration();\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n }\n }\n // falls through\n case _types.TokenType._var:\n case _types.TokenType._let: {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n _statement.parseVarStatement.call(void 0, _base.state.type);\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n }\n case _types.TokenType.name: {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n const contextualKeyword = _base.state.contextualKeyword;\n let matched = false;\n if (contextualKeyword === _keywords.ContextualKeyword._global) {\n tsParseAmbientExternalModuleDeclaration();\n matched = true;\n } else {\n matched = tsParseDeclaration(contextualKeyword, /* isBeforeToken */ true);\n }\n _index.popTypeContext.call(void 0, oldIsType);\n return matched;\n }\n default:\n return false;\n }\n}\n\n// Note: this won't be called unless the keyword is allowed in `shouldParseExportDeclaration`.\n// Returns true if it matched a declaration.\nfunction tsTryParseExportDeclaration() {\n return tsParseDeclaration(_base.state.contextualKeyword, /* isBeforeToken */ true);\n}\n\n// Returns true if it matched a statement.\nfunction tsParseExpressionStatement(contextualKeyword) {\n switch (contextualKeyword) {\n case _keywords.ContextualKeyword._declare: {\n const declareTokenIndex = _base.state.tokens.length - 1;\n const matched = tsTryParseDeclare();\n if (matched) {\n _base.state.tokens[declareTokenIndex].type = _types.TokenType._declare;\n return true;\n }\n break;\n }\n case _keywords.ContextualKeyword._global:\n // `global { }` (with no `declare`) may appear inside an ambient module declaration.\n // Would like to use tsParseAmbientExternalModuleDeclaration here, but already ran past \"global\".\n if (_index.match.call(void 0, _types.TokenType.braceL)) {\n tsParseModuleBlock();\n return true;\n }\n break;\n\n default:\n return tsParseDeclaration(contextualKeyword, /* isBeforeToken */ false);\n }\n return false;\n}\n\n// Common to tsTryParseDeclare, tsTryParseExportDeclaration, and tsParseExpressionStatement.\n// Returns true if it matched a declaration.\nfunction tsParseDeclaration(contextualKeyword, isBeforeToken) {\n switch (contextualKeyword) {\n case _keywords.ContextualKeyword._abstract:\n if (tsCheckLineTerminatorAndMatch(_types.TokenType._class, isBeforeToken)) {\n if (isBeforeToken) _index.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._abstract;\n _statement.parseClass.call(void 0, /* isStatement */ true, /* optionalId */ false);\n return true;\n }\n break;\n\n case _keywords.ContextualKeyword._enum:\n if (tsCheckLineTerminatorAndMatch(_types.TokenType.name, isBeforeToken)) {\n if (isBeforeToken) _index.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._enum;\n tsParseEnumDeclaration();\n return true;\n }\n break;\n\n case _keywords.ContextualKeyword._interface:\n if (tsCheckLineTerminatorAndMatch(_types.TokenType.name, isBeforeToken)) {\n // `next` is true in \"export\" and \"declare\" contexts, so we want to remove that token\n // as well.\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n if (isBeforeToken) _index.next.call(void 0, );\n tsParseInterfaceDeclaration();\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n }\n break;\n\n case _keywords.ContextualKeyword._module:\n if (isBeforeToken) _index.next.call(void 0, );\n if (_index.match.call(void 0, _types.TokenType.string)) {\n const oldIsType = _index.pushTypeContext.call(void 0, isBeforeToken ? 2 : 1);\n tsParseAmbientExternalModuleDeclaration();\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n } else if (tsCheckLineTerminatorAndMatch(_types.TokenType.name, isBeforeToken)) {\n const oldIsType = _index.pushTypeContext.call(void 0, isBeforeToken ? 2 : 1);\n if (isBeforeToken) _index.next.call(void 0, );\n tsParseModuleOrNamespaceDeclaration();\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n }\n break;\n\n case _keywords.ContextualKeyword._namespace:\n if (tsCheckLineTerminatorAndMatch(_types.TokenType.name, isBeforeToken)) {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n if (isBeforeToken) _index.next.call(void 0, );\n tsParseModuleOrNamespaceDeclaration();\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n }\n break;\n\n case _keywords.ContextualKeyword._type:\n if (tsCheckLineTerminatorAndMatch(_types.TokenType.name, isBeforeToken)) {\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n if (isBeforeToken) _index.next.call(void 0, );\n tsParseTypeAliasDeclaration();\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n }\n break;\n\n default:\n break;\n }\n return false;\n}\n\nfunction tsCheckLineTerminatorAndMatch(tokenType, isBeforeToken) {\n return !_util.isLineTerminator.call(void 0, ) && (isBeforeToken || _index.match.call(void 0, tokenType));\n}\n\n// Returns true if there was a generic async arrow function.\nfunction tsTryParseGenericAsyncArrowFunction() {\n const snapshot = _base.state.snapshot();\n\n tsParseTypeParameters();\n _statement.parseFunctionParams.call(void 0, );\n tsTryParseTypeOrTypePredicateAnnotation();\n _util.expect.call(void 0, _types.TokenType.arrow);\n\n if (_base.state.error) {\n _base.state.restoreFromSnapshot(snapshot);\n return false;\n }\n\n _expression.parseFunctionBody.call(void 0, true);\n return true;\n}\n\nfunction tsParseTypeArguments() {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _util.expect.call(void 0, _types.TokenType.lessThan);\n while (!_index.eat.call(void 0, _types.TokenType.greaterThan) && !_base.state.error) {\n tsParseType();\n _index.eat.call(void 0, _types.TokenType.comma);\n }\n _index.popTypeContext.call(void 0, oldIsType);\n}\n\n function tsIsDeclarationStart() {\n if (_index.match.call(void 0, _types.TokenType.name)) {\n switch (_base.state.contextualKeyword) {\n case _keywords.ContextualKeyword._abstract:\n case _keywords.ContextualKeyword._declare:\n case _keywords.ContextualKeyword._enum:\n case _keywords.ContextualKeyword._interface:\n case _keywords.ContextualKeyword._module:\n case _keywords.ContextualKeyword._namespace:\n case _keywords.ContextualKeyword._type:\n return true;\n default:\n break;\n }\n }\n\n return false;\n} exports.tsIsDeclarationStart = tsIsDeclarationStart;\n\n// ======================================================\n// OVERRIDES\n// ======================================================\n\n function tsParseFunctionBodyAndFinish(functionStart, funcContextId) {\n // For arrow functions, `parseArrow` handles the return type itself.\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n tsParseTypeOrTypePredicateAnnotation(_types.TokenType.colon);\n }\n\n // The original code checked the node type to make sure this function type allows a missing\n // body, but we skip that to avoid sending around the node type. We instead just use the\n // allowExpressionBody boolean to make sure it's not an arrow function.\n if (!_index.match.call(void 0, _types.TokenType.braceL) && _util.isLineTerminator.call(void 0, )) {\n // Retroactively mark the function declaration as a type.\n let i = _base.state.tokens.length - 1;\n while (\n i >= 0 &&\n (_base.state.tokens[i].start >= functionStart ||\n _base.state.tokens[i].type === _types.TokenType._default ||\n _base.state.tokens[i].type === _types.TokenType._export)\n ) {\n _base.state.tokens[i].isType = true;\n i--;\n }\n return;\n }\n\n _expression.parseFunctionBody.call(void 0, false, funcContextId);\n} exports.tsParseFunctionBodyAndFinish = tsParseFunctionBodyAndFinish;\n\n function tsParseSubscript(\n startTokenIndex,\n noCalls,\n stopState,\n) {\n if (!_util.hasPrecedingLineBreak.call(void 0, ) && _index.eat.call(void 0, _types.TokenType.bang)) {\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType.nonNullAssertion;\n return;\n }\n\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n // There are number of things we are going to \"maybe\" parse, like type arguments on\n // tagged template expressions. If any of them fail, walk it back and continue.\n const snapshot = _base.state.snapshot();\n\n if (!noCalls && _expression.atPossibleAsync.call(void 0, )) {\n // Almost certainly this is a generic async function `async <T>() => ...\n // But it might be a call with a type argument `async<T>();`\n const asyncArrowFn = tsTryParseGenericAsyncArrowFunction();\n if (asyncArrowFn) {\n return;\n }\n }\n tsParseTypeArguments();\n if (!noCalls && _index.eat.call(void 0, _types.TokenType.parenL)) {\n // With f<T>(), the subscriptStartIndex marker is on the ( token.\n _base.state.tokens[_base.state.tokens.length - 1].subscriptStartIndex = startTokenIndex;\n _expression.parseCallExpressionArguments.call(void 0, );\n } else if (_index.match.call(void 0, _types.TokenType.backQuote)) {\n // Tagged template with a type argument.\n _expression.parseTemplate.call(void 0, );\n } else {\n _util.unexpected.call(void 0, );\n }\n\n if (_base.state.error) {\n _base.state.restoreFromSnapshot(snapshot);\n } else {\n return;\n }\n } else if (!noCalls && _index.match.call(void 0, _types.TokenType.questionDot) && _index.lookaheadType.call(void 0, ) === _types.TokenType.lessThan) {\n // If we see f?.<, then this must be an optional call with a type argument.\n _index.next.call(void 0, );\n _base.state.tokens[startTokenIndex].isOptionalChainStart = true;\n // With f?.<T>(), the subscriptStartIndex marker is on the ?. token.\n _base.state.tokens[_base.state.tokens.length - 1].subscriptStartIndex = startTokenIndex;\n\n tsParseTypeArguments();\n _util.expect.call(void 0, _types.TokenType.parenL);\n _expression.parseCallExpressionArguments.call(void 0, );\n }\n _expression.baseParseSubscript.call(void 0, startTokenIndex, noCalls, stopState);\n} exports.tsParseSubscript = tsParseSubscript;\n\n function tsStartParseNewArguments() {\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n // 99% certain this is `new C<T>();`. But may be `new C < T;`, which is also legal.\n const snapshot = _base.state.snapshot();\n\n _base.state.type = _types.TokenType.typeParameterStart;\n tsParseTypeArguments();\n if (!_index.match.call(void 0, _types.TokenType.parenL)) {\n _util.unexpected.call(void 0, );\n }\n\n if (_base.state.error) {\n _base.state.restoreFromSnapshot(snapshot);\n }\n }\n} exports.tsStartParseNewArguments = tsStartParseNewArguments;\n\n function tsTryParseExport() {\n if (_index.match.call(void 0, _types.TokenType._import)) {\n // `export import A = B;`\n _util.expect.call(void 0, _types.TokenType._import);\n tsParseImportEqualsDeclaration();\n return true;\n } else if (_index.eat.call(void 0, _types.TokenType.eq)) {\n // `export = x;`\n _expression.parseExpression.call(void 0, );\n _util.semicolon.call(void 0, );\n return true;\n } else if (_util.eatContextual.call(void 0, _keywords.ContextualKeyword._as)) {\n // `export as namespace A;`\n // See `parseNamespaceExportDeclaration` in TypeScript's own parser\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._namespace);\n _expression.parseIdentifier.call(void 0, );\n _util.semicolon.call(void 0, );\n return true;\n } else {\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._type) && _index.lookaheadType.call(void 0, ) === _types.TokenType.braceL) {\n _index.next.call(void 0, );\n }\n return false;\n }\n} exports.tsTryParseExport = tsTryParseExport;\n\n function tsTryParseExportDefaultExpression() {\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._abstract) && _index.lookaheadType.call(void 0, ) === _types.TokenType._class) {\n _base.state.type = _types.TokenType._abstract;\n _index.next.call(void 0, ); // Skip \"abstract\"\n _statement.parseClass.call(void 0, true, true);\n return true;\n }\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._interface)) {\n // Make sure \"export default\" are considered type tokens so the whole thing is removed.\n const oldIsType = _index.pushTypeContext.call(void 0, 2);\n tsParseDeclaration(_keywords.ContextualKeyword._interface, true);\n _index.popTypeContext.call(void 0, oldIsType);\n return true;\n }\n return false;\n} exports.tsTryParseExportDefaultExpression = tsTryParseExportDefaultExpression;\n\n function tsTryParseStatementContent() {\n if (_base.state.type === _types.TokenType._const) {\n const ahead = _index.lookaheadTypeAndKeyword.call(void 0, );\n if (ahead.type === _types.TokenType.name && ahead.contextualKeyword === _keywords.ContextualKeyword._enum) {\n _util.expect.call(void 0, _types.TokenType._const);\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._enum);\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._enum;\n tsParseEnumDeclaration();\n return true;\n }\n }\n return false;\n} exports.tsTryParseStatementContent = tsTryParseStatementContent;\n\n function tsParseAccessModifier() {\n tsParseModifier([\n _keywords.ContextualKeyword._public,\n _keywords.ContextualKeyword._protected,\n _keywords.ContextualKeyword._private,\n ]);\n} exports.tsParseAccessModifier = tsParseAccessModifier;\n\n function tsTryParseClassMemberWithIsStatic(\n isStatic,\n classContextId,\n) {\n let isAbstract = false;\n let isReadonly = false;\n\n while (true) {\n const mod = tsParseModifier([\n _keywords.ContextualKeyword._abstract,\n _keywords.ContextualKeyword._readonly,\n _keywords.ContextualKeyword._declare,\n ]);\n if (mod == null) {\n break;\n }\n if (mod === _keywords.ContextualKeyword._readonly) {\n isReadonly = true;\n }\n if (mod === _keywords.ContextualKeyword._abstract) {\n isAbstract = true;\n }\n }\n\n // We no longer check for public/private/etc, but tsTryParseIndexSignature should just return\n // false in that case for valid code.\n if (!isAbstract && !isStatic) {\n const found = tsTryParseIndexSignature();\n if (found) {\n return true;\n }\n }\n\n if (isReadonly) {\n // Must be a property (if not an index signature).\n _statement.parseClassPropertyName.call(void 0, classContextId);\n _statement.parsePostMemberNameModifiers.call(void 0, );\n _statement.parseClassProperty.call(void 0, );\n return true;\n }\n return false;\n} exports.tsTryParseClassMemberWithIsStatic = tsTryParseClassMemberWithIsStatic;\n\n// Note: The reason we do this in `parseIdentifierStatement` and not `parseStatement`\n// is that e.g. `type()` is valid JS, so we must try parsing that first.\n// If it's really a type, we will parse `type` as the statement, and can correct it here\n// by parsing the rest.\n function tsParseIdentifierStatement(contextualKeyword) {\n const matched = tsParseExpressionStatement(contextualKeyword);\n if (!matched) {\n _util.semicolon.call(void 0, );\n }\n} exports.tsParseIdentifierStatement = tsParseIdentifierStatement;\n\n function tsParseExportDeclaration() {\n // \"export declare\" is equivalent to just \"export\".\n const isDeclare = _util.eatContextual.call(void 0, _keywords.ContextualKeyword._declare);\n if (isDeclare) {\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._declare;\n }\n\n let matchedDeclaration = false;\n if (_index.match.call(void 0, _types.TokenType.name)) {\n if (isDeclare) {\n const oldIsType = _index.pushTypeContext.call(void 0, 2);\n matchedDeclaration = tsTryParseExportDeclaration();\n _index.popTypeContext.call(void 0, oldIsType);\n } else {\n matchedDeclaration = tsTryParseExportDeclaration();\n }\n }\n if (!matchedDeclaration) {\n if (isDeclare) {\n const oldIsType = _index.pushTypeContext.call(void 0, 2);\n _statement.parseStatement.call(void 0, true);\n _index.popTypeContext.call(void 0, oldIsType);\n } else {\n _statement.parseStatement.call(void 0, true);\n }\n }\n} exports.tsParseExportDeclaration = tsParseExportDeclaration;\n\n function tsAfterParseClassSuper(hasSuper) {\n if (hasSuper && _index.match.call(void 0, _types.TokenType.lessThan)) {\n tsParseTypeArguments();\n }\n if (_util.eatContextual.call(void 0, _keywords.ContextualKeyword._implements)) {\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._implements;\n const oldIsType = _index.pushTypeContext.call(void 0, 1);\n tsParseHeritageClause();\n _index.popTypeContext.call(void 0, oldIsType);\n }\n} exports.tsAfterParseClassSuper = tsAfterParseClassSuper;\n\n function tsStartParseObjPropValue() {\n tsTryParseTypeParameters();\n} exports.tsStartParseObjPropValue = tsStartParseObjPropValue;\n\n function tsStartParseFunctionParams() {\n tsTryParseTypeParameters();\n} exports.tsStartParseFunctionParams = tsStartParseFunctionParams;\n\n// `let x: number;`\n function tsAfterParseVarHead() {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _index.eat.call(void 0, _types.TokenType.bang);\n tsTryParseTypeAnnotation();\n _index.popTypeContext.call(void 0, oldIsType);\n} exports.tsAfterParseVarHead = tsAfterParseVarHead;\n\n// parse the return type of an async arrow function - let foo = (async (): number => {});\n function tsStartParseAsyncArrowFromCallExpression() {\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n tsParseTypeAnnotation();\n }\n} exports.tsStartParseAsyncArrowFromCallExpression = tsStartParseAsyncArrowFromCallExpression;\n\n// Returns true if the expression was an arrow function.\n function tsParseMaybeAssign(noIn, isWithinParens) {\n // Note: When the JSX plugin is on, type assertions (`<T> x`) aren't valid syntax.\n if (_base.isJSXEnabled) {\n return tsParseMaybeAssignWithJSX(noIn, isWithinParens);\n } else {\n return tsParseMaybeAssignWithoutJSX(noIn, isWithinParens);\n }\n} exports.tsParseMaybeAssign = tsParseMaybeAssign;\n\n function tsParseMaybeAssignWithJSX(noIn, isWithinParens) {\n if (!_index.match.call(void 0, _types.TokenType.lessThan)) {\n return _expression.baseParseMaybeAssign.call(void 0, noIn, isWithinParens);\n }\n\n // Prefer to parse JSX if possible. But may be an arrow fn.\n const snapshot = _base.state.snapshot();\n let wasArrow = _expression.baseParseMaybeAssign.call(void 0, noIn, isWithinParens);\n if (_base.state.error) {\n _base.state.restoreFromSnapshot(snapshot);\n } else {\n return wasArrow;\n }\n\n // Otherwise, try as type-parameterized arrow function.\n _base.state.type = _types.TokenType.typeParameterStart;\n // This is similar to TypeScript's `tryParseParenthesizedArrowFunctionExpression`.\n tsParseTypeParameters();\n wasArrow = _expression.baseParseMaybeAssign.call(void 0, noIn, isWithinParens);\n if (!wasArrow) {\n _util.unexpected.call(void 0, );\n }\n\n return wasArrow;\n} exports.tsParseMaybeAssignWithJSX = tsParseMaybeAssignWithJSX;\n\n function tsParseMaybeAssignWithoutJSX(noIn, isWithinParens) {\n if (!_index.match.call(void 0, _types.TokenType.lessThan)) {\n return _expression.baseParseMaybeAssign.call(void 0, noIn, isWithinParens);\n }\n\n const snapshot = _base.state.snapshot();\n // This is similar to TypeScript's `tryParseParenthesizedArrowFunctionExpression`.\n tsParseTypeParameters();\n const wasArrow = _expression.baseParseMaybeAssign.call(void 0, noIn, isWithinParens);\n if (!wasArrow) {\n _util.unexpected.call(void 0, );\n }\n if (_base.state.error) {\n _base.state.restoreFromSnapshot(snapshot);\n } else {\n return wasArrow;\n }\n\n // Try parsing a type cast instead of an arrow function.\n // This will start with a type assertion (via parseMaybeUnary).\n // But don't directly call `tsParseTypeAssertion` because we want to handle any binary after it.\n return _expression.baseParseMaybeAssign.call(void 0, noIn, isWithinParens);\n} exports.tsParseMaybeAssignWithoutJSX = tsParseMaybeAssignWithoutJSX;\n\n function tsParseArrow() {\n if (_index.match.call(void 0, _types.TokenType.colon)) {\n // This is different from how the TS parser does it.\n // TS uses lookahead. Babylon parses it as a parenthesized expression and converts.\n const snapshot = _base.state.snapshot();\n\n tsParseTypeOrTypePredicateAnnotation(_types.TokenType.colon);\n if (_util.canInsertSemicolon.call(void 0, )) _util.unexpected.call(void 0, );\n if (!_index.match.call(void 0, _types.TokenType.arrow)) _util.unexpected.call(void 0, );\n\n if (_base.state.error) {\n _base.state.restoreFromSnapshot(snapshot);\n }\n }\n return _index.eat.call(void 0, _types.TokenType.arrow);\n} exports.tsParseArrow = tsParseArrow;\n\n// Allow type annotations inside of a parameter list.\n function tsParseAssignableListItemTypes() {\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _index.eat.call(void 0, _types.TokenType.question);\n tsTryParseTypeAnnotation();\n _index.popTypeContext.call(void 0, oldIsType);\n} exports.tsParseAssignableListItemTypes = tsParseAssignableListItemTypes;\n\n function tsParseMaybeDecoratorArguments() {\n if (_index.match.call(void 0, _types.TokenType.lessThan)) {\n tsParseTypeArguments();\n }\n _statement.baseParseMaybeDecoratorArguments.call(void 0, );\n} exports.tsParseMaybeDecoratorArguments = tsParseMaybeDecoratorArguments;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }/* eslint max-len: 0 */\n\nvar _base = require('../traverser/base');\nvar _util = require('../traverser/util');\nvar _charcodes = require('../util/charcodes');\nvar _identifier = require('../util/identifier');\nvar _whitespace = require('../util/whitespace');\nvar _keywords = require('./keywords');\nvar _readWord = require('./readWord'); var _readWord2 = _interopRequireDefault(_readWord);\nvar _types = require('./types');\n\nvar IdentifierRole; (function (IdentifierRole) {\n const Access = 0; IdentifierRole[IdentifierRole[\"Access\"] = Access] = \"Access\";\n const ExportAccess = Access + 1; IdentifierRole[IdentifierRole[\"ExportAccess\"] = ExportAccess] = \"ExportAccess\";\n const TopLevelDeclaration = ExportAccess + 1; IdentifierRole[IdentifierRole[\"TopLevelDeclaration\"] = TopLevelDeclaration] = \"TopLevelDeclaration\";\n const FunctionScopedDeclaration = TopLevelDeclaration + 1; IdentifierRole[IdentifierRole[\"FunctionScopedDeclaration\"] = FunctionScopedDeclaration] = \"FunctionScopedDeclaration\";\n const BlockScopedDeclaration = FunctionScopedDeclaration + 1; IdentifierRole[IdentifierRole[\"BlockScopedDeclaration\"] = BlockScopedDeclaration] = \"BlockScopedDeclaration\";\n const ObjectShorthandTopLevelDeclaration = BlockScopedDeclaration + 1; IdentifierRole[IdentifierRole[\"ObjectShorthandTopLevelDeclaration\"] = ObjectShorthandTopLevelDeclaration] = \"ObjectShorthandTopLevelDeclaration\";\n const ObjectShorthandFunctionScopedDeclaration = ObjectShorthandTopLevelDeclaration + 1; IdentifierRole[IdentifierRole[\"ObjectShorthandFunctionScopedDeclaration\"] = ObjectShorthandFunctionScopedDeclaration] = \"ObjectShorthandFunctionScopedDeclaration\";\n const ObjectShorthandBlockScopedDeclaration = ObjectShorthandFunctionScopedDeclaration + 1; IdentifierRole[IdentifierRole[\"ObjectShorthandBlockScopedDeclaration\"] = ObjectShorthandBlockScopedDeclaration] = \"ObjectShorthandBlockScopedDeclaration\";\n const ObjectShorthand = ObjectShorthandBlockScopedDeclaration + 1; IdentifierRole[IdentifierRole[\"ObjectShorthand\"] = ObjectShorthand] = \"ObjectShorthand\";\n // Any identifier bound in an import statement, e.g. both A and b from\n // `import A, * as b from 'A';`\n const ImportDeclaration = ObjectShorthand + 1; IdentifierRole[IdentifierRole[\"ImportDeclaration\"] = ImportDeclaration] = \"ImportDeclaration\";\n const ObjectKey = ImportDeclaration + 1; IdentifierRole[IdentifierRole[\"ObjectKey\"] = ObjectKey] = \"ObjectKey\";\n // The `foo` in `import {foo as bar} from \"./abc\";`.\n const ImportAccess = ObjectKey + 1; IdentifierRole[IdentifierRole[\"ImportAccess\"] = ImportAccess] = \"ImportAccess\";\n})(IdentifierRole || (exports.IdentifierRole = IdentifierRole = {}));\n\n function isDeclaration(token) {\n const role = token.identifierRole;\n return (\n role === IdentifierRole.TopLevelDeclaration ||\n role === IdentifierRole.FunctionScopedDeclaration ||\n role === IdentifierRole.BlockScopedDeclaration ||\n role === IdentifierRole.ObjectShorthandTopLevelDeclaration ||\n role === IdentifierRole.ObjectShorthandFunctionScopedDeclaration ||\n role === IdentifierRole.ObjectShorthandBlockScopedDeclaration\n );\n} exports.isDeclaration = isDeclaration;\n\n function isNonTopLevelDeclaration(token) {\n const role = token.identifierRole;\n return (\n role === IdentifierRole.FunctionScopedDeclaration ||\n role === IdentifierRole.BlockScopedDeclaration ||\n role === IdentifierRole.ObjectShorthandFunctionScopedDeclaration ||\n role === IdentifierRole.ObjectShorthandBlockScopedDeclaration\n );\n} exports.isNonTopLevelDeclaration = isNonTopLevelDeclaration;\n\n function isTopLevelDeclaration(token) {\n const role = token.identifierRole;\n return (\n role === IdentifierRole.TopLevelDeclaration ||\n role === IdentifierRole.ObjectShorthandTopLevelDeclaration ||\n role === IdentifierRole.ImportDeclaration\n );\n} exports.isTopLevelDeclaration = isTopLevelDeclaration;\n\n function isBlockScopedDeclaration(token) {\n const role = token.identifierRole;\n // Treat top-level declarations as block scope since the distinction doesn't matter here.\n return (\n role === IdentifierRole.TopLevelDeclaration ||\n role === IdentifierRole.BlockScopedDeclaration ||\n role === IdentifierRole.ObjectShorthandTopLevelDeclaration ||\n role === IdentifierRole.ObjectShorthandBlockScopedDeclaration\n );\n} exports.isBlockScopedDeclaration = isBlockScopedDeclaration;\n\n function isFunctionScopedDeclaration(token) {\n const role = token.identifierRole;\n return (\n role === IdentifierRole.FunctionScopedDeclaration ||\n role === IdentifierRole.ObjectShorthandFunctionScopedDeclaration\n );\n} exports.isFunctionScopedDeclaration = isFunctionScopedDeclaration;\n\n function isObjectShorthandDeclaration(token) {\n return (\n token.identifierRole === IdentifierRole.ObjectShorthandTopLevelDeclaration ||\n token.identifierRole === IdentifierRole.ObjectShorthandBlockScopedDeclaration ||\n token.identifierRole === IdentifierRole.ObjectShorthandFunctionScopedDeclaration\n );\n} exports.isObjectShorthandDeclaration = isObjectShorthandDeclaration;\n\n// Object type used to represent tokens. Note that normally, tokens\n// simply exist as properties on the parser object. This is only\n// used for the onToken callback and the external tokenizer.\n class Token {\n constructor() {\n this.type = _base.state.type;\n this.contextualKeyword = _base.state.contextualKeyword;\n this.start = _base.state.start;\n this.end = _base.state.end;\n this.scopeDepth = _base.state.scopeDepth;\n this.isType = _base.state.isType;\n this.identifierRole = null;\n this.shadowsGlobal = false;\n this.contextId = null;\n this.rhsEndIndex = null;\n this.isExpression = false;\n this.numNullishCoalesceStarts = 0;\n this.numNullishCoalesceEnds = 0;\n this.isOptionalChainStart = false;\n this.isOptionalChainEnd = false;\n this.subscriptStartIndex = null;\n this.nullishStartIndex = null;\n }\n\n \n \n \n \n \n \n \n // Initially false for all tokens, then may be computed in a follow-up step that does scope\n // analysis.\n \n // Initially false for all tokens, but may be set during transform to mark it as containing an\n // await operation.\n \n \n // For assignments, the index of the RHS. For export tokens, the end of the export.\n \n // For class tokens, records if the class is a class expression or a class statement.\n \n // Number of times to insert a `nullishCoalesce(` snippet before this token.\n \n // Number of times to insert a `)` snippet after this token.\n \n // If true, insert an `optionalChain([` snippet before this token.\n \n // If true, insert a `])` snippet after this token.\n \n // Tag for `.`, `?.`, `[`, `?.[`, `(`, and `?.(` to denote the \"root\" token for this\n // subscript chain. This can be used to determine if this chain is an optional chain.\n \n // Tag for `??` operators to denote the root token for this nullish coalescing call.\n \n} exports.Token = Token;\n\n// ## Tokenizer\n\n// Move to the next token\n function next() {\n _base.state.tokens.push(new Token());\n nextToken();\n} exports.next = next;\n\n// Call instead of next when inside a template, since that needs to be handled differently.\n function nextTemplateToken() {\n _base.state.tokens.push(new Token());\n _base.state.start = _base.state.pos;\n readTmplToken();\n} exports.nextTemplateToken = nextTemplateToken;\n\n// The tokenizer never parses regexes by default. Instead, the parser is responsible for\n// instructing it to parse a regex when we see a slash at the start of an expression.\n function retokenizeSlashAsRegex() {\n if (_base.state.type === _types.TokenType.assign) {\n --_base.state.pos;\n }\n readRegexp();\n} exports.retokenizeSlashAsRegex = retokenizeSlashAsRegex;\n\n function pushTypeContext(existingTokensInType) {\n for (let i = _base.state.tokens.length - existingTokensInType; i < _base.state.tokens.length; i++) {\n _base.state.tokens[i].isType = true;\n }\n const oldIsType = _base.state.isType;\n _base.state.isType = true;\n return oldIsType;\n} exports.pushTypeContext = pushTypeContext;\n\n function popTypeContext(oldIsType) {\n _base.state.isType = oldIsType;\n} exports.popTypeContext = popTypeContext;\n\n function eat(type) {\n if (match(type)) {\n next();\n return true;\n } else {\n return false;\n }\n} exports.eat = eat;\n\n function match(type) {\n return _base.state.type === type;\n} exports.match = match;\n\n function lookaheadType() {\n const snapshot = _base.state.snapshot();\n next();\n const type = _base.state.type;\n _base.state.restoreFromSnapshot(snapshot);\n return type;\n} exports.lookaheadType = lookaheadType;\n\n class TypeAndKeyword {\n \n \n constructor(type, contextualKeyword) {\n this.type = type;\n this.contextualKeyword = contextualKeyword;\n }\n} exports.TypeAndKeyword = TypeAndKeyword;\n\n function lookaheadTypeAndKeyword() {\n const snapshot = _base.state.snapshot();\n next();\n const type = _base.state.type;\n const contextualKeyword = _base.state.contextualKeyword;\n _base.state.restoreFromSnapshot(snapshot);\n return new TypeAndKeyword(type, contextualKeyword);\n} exports.lookaheadTypeAndKeyword = lookaheadTypeAndKeyword;\n\n function nextTokenStart() {\n return nextTokenStartSince(_base.state.pos);\n} exports.nextTokenStart = nextTokenStart;\n\n function nextTokenStartSince(pos) {\n _whitespace.skipWhiteSpace.lastIndex = pos;\n const skip = _whitespace.skipWhiteSpace.exec(_base.input);\n return pos + skip[0].length;\n} exports.nextTokenStartSince = nextTokenStartSince;\n\n function lookaheadCharCode() {\n return _base.input.charCodeAt(nextTokenStart());\n} exports.lookaheadCharCode = lookaheadCharCode;\n\n// Read a single token, updating the parser object's token-related\n// properties.\n function nextToken() {\n skipSpace();\n _base.state.start = _base.state.pos;\n if (_base.state.pos >= _base.input.length) {\n const tokens = _base.state.tokens;\n // We normally run past the end a bit, but if we're way past the end, avoid an infinite loop.\n // Also check the token positions rather than the types since sometimes we rewrite the token\n // type to something else.\n if (\n tokens.length >= 2 &&\n tokens[tokens.length - 1].start >= _base.input.length &&\n tokens[tokens.length - 2].start >= _base.input.length\n ) {\n _util.unexpected.call(void 0, \"Unexpectedly reached the end of input.\");\n }\n finishToken(_types.TokenType.eof);\n return;\n }\n readToken(_base.input.charCodeAt(_base.state.pos));\n} exports.nextToken = nextToken;\n\nfunction readToken(code) {\n // Identifier or keyword. '\\uXXXX' sequences are allowed in\n // identifiers, so '\\' also dispatches to that.\n if (\n _identifier.IS_IDENTIFIER_START[code] ||\n code === _charcodes.charCodes.backslash ||\n (code === _charcodes.charCodes.atSign && _base.input.charCodeAt(_base.state.pos + 1) === _charcodes.charCodes.atSign)\n ) {\n _readWord2.default.call(void 0, );\n } else {\n getTokenFromCode(code);\n }\n}\n\nfunction skipBlockComment() {\n while (\n _base.input.charCodeAt(_base.state.pos) !== _charcodes.charCodes.asterisk ||\n _base.input.charCodeAt(_base.state.pos + 1) !== _charcodes.charCodes.slash\n ) {\n _base.state.pos++;\n if (_base.state.pos > _base.input.length) {\n _util.unexpected.call(void 0, \"Unterminated comment\", _base.state.pos - 2);\n return;\n }\n }\n _base.state.pos += 2;\n}\n\n function skipLineComment(startSkip) {\n let ch = _base.input.charCodeAt((_base.state.pos += startSkip));\n if (_base.state.pos < _base.input.length) {\n while (\n ch !== _charcodes.charCodes.lineFeed &&\n ch !== _charcodes.charCodes.carriageReturn &&\n ch !== _charcodes.charCodes.lineSeparator &&\n ch !== _charcodes.charCodes.paragraphSeparator &&\n ++_base.state.pos < _base.input.length\n ) {\n ch = _base.input.charCodeAt(_base.state.pos);\n }\n }\n} exports.skipLineComment = skipLineComment;\n\n// Called at the start of the parse and after every token. Skips\n// whitespace and comments.\n function skipSpace() {\n while (_base.state.pos < _base.input.length) {\n const ch = _base.input.charCodeAt(_base.state.pos);\n switch (ch) {\n case _charcodes.charCodes.carriageReturn:\n if (_base.input.charCodeAt(_base.state.pos + 1) === _charcodes.charCodes.lineFeed) {\n ++_base.state.pos;\n }\n\n case _charcodes.charCodes.lineFeed:\n case _charcodes.charCodes.lineSeparator:\n case _charcodes.charCodes.paragraphSeparator:\n ++_base.state.pos;\n break;\n\n case _charcodes.charCodes.slash:\n switch (_base.input.charCodeAt(_base.state.pos + 1)) {\n case _charcodes.charCodes.asterisk:\n _base.state.pos += 2;\n skipBlockComment();\n break;\n\n case _charcodes.charCodes.slash:\n skipLineComment(2);\n break;\n\n default:\n return;\n }\n break;\n\n default:\n if (_whitespace.IS_WHITESPACE[ch]) {\n ++_base.state.pos;\n } else {\n return;\n }\n }\n }\n} exports.skipSpace = skipSpace;\n\n// Called at the end of every token. Sets various fields, and skips the space after the token, so\n// that the next one's `start` will point at the right position.\n function finishToken(\n type,\n contextualKeyword = _keywords.ContextualKeyword.NONE,\n) {\n _base.state.end = _base.state.pos;\n _base.state.type = type;\n _base.state.contextualKeyword = contextualKeyword;\n} exports.finishToken = finishToken;\n\n// ### Token reading\n\n// This is the function that is called to fetch the next token. It\n// is somewhat obscure, because it works in character codes rather\n// than characters, and because operator parsing has been inlined\n// into it.\n//\n// All in the name of speed.\nfunction readToken_dot() {\n const nextChar = _base.input.charCodeAt(_base.state.pos + 1);\n if (nextChar >= _charcodes.charCodes.digit0 && nextChar <= _charcodes.charCodes.digit9) {\n readNumber(true);\n return;\n }\n\n if (nextChar === _charcodes.charCodes.dot && _base.input.charCodeAt(_base.state.pos + 2) === _charcodes.charCodes.dot) {\n _base.state.pos += 3;\n finishToken(_types.TokenType.ellipsis);\n } else {\n ++_base.state.pos;\n finishToken(_types.TokenType.dot);\n }\n}\n\nfunction readToken_slash() {\n const nextChar = _base.input.charCodeAt(_base.state.pos + 1);\n if (nextChar === _charcodes.charCodes.equalsTo) {\n finishOp(_types.TokenType.assign, 2);\n } else {\n finishOp(_types.TokenType.slash, 1);\n }\n}\n\nfunction readToken_mult_modulo(code) {\n // '%*'\n let tokenType = code === _charcodes.charCodes.asterisk ? _types.TokenType.star : _types.TokenType.modulo;\n let width = 1;\n let nextChar = _base.input.charCodeAt(_base.state.pos + 1);\n\n // Exponentiation operator **\n if (code === _charcodes.charCodes.asterisk && nextChar === _charcodes.charCodes.asterisk) {\n width++;\n nextChar = _base.input.charCodeAt(_base.state.pos + 2);\n tokenType = _types.TokenType.exponent;\n }\n\n // Match *= or %=, disallowing *=> which can be valid in flow.\n if (\n nextChar === _charcodes.charCodes.equalsTo &&\n _base.input.charCodeAt(_base.state.pos + 2) !== _charcodes.charCodes.greaterThan\n ) {\n width++;\n tokenType = _types.TokenType.assign;\n }\n\n finishOp(tokenType, width);\n}\n\nfunction readToken_pipe_amp(code) {\n // '|&'\n const nextChar = _base.input.charCodeAt(_base.state.pos + 1);\n\n if (nextChar === code) {\n if (_base.input.charCodeAt(_base.state.pos + 2) === _charcodes.charCodes.equalsTo) {\n // ||= or &&=\n finishOp(_types.TokenType.assign, 3);\n } else {\n // || or &&\n finishOp(code === _charcodes.charCodes.verticalBar ? _types.TokenType.logicalOR : _types.TokenType.logicalAND, 2);\n }\n return;\n }\n\n if (code === _charcodes.charCodes.verticalBar) {\n // '|>'\n if (nextChar === _charcodes.charCodes.greaterThan) {\n finishOp(_types.TokenType.pipeline, 2);\n return;\n } else if (nextChar === _charcodes.charCodes.rightCurlyBrace && _base.isFlowEnabled) {\n // '|}'\n finishOp(_types.TokenType.braceBarR, 2);\n return;\n }\n }\n\n if (nextChar === _charcodes.charCodes.equalsTo) {\n finishOp(_types.TokenType.assign, 2);\n return;\n }\n\n finishOp(code === _charcodes.charCodes.verticalBar ? _types.TokenType.bitwiseOR : _types.TokenType.bitwiseAND, 1);\n}\n\nfunction readToken_caret() {\n // '^'\n const nextChar = _base.input.charCodeAt(_base.state.pos + 1);\n if (nextChar === _charcodes.charCodes.equalsTo) {\n finishOp(_types.TokenType.assign, 2);\n } else {\n finishOp(_types.TokenType.bitwiseXOR, 1);\n }\n}\n\nfunction readToken_plus_min(code) {\n // '+-'\n const nextChar = _base.input.charCodeAt(_base.state.pos + 1);\n\n if (nextChar === code) {\n // Tentatively call this a prefix operator, but it might be changed to postfix later.\n finishOp(_types.TokenType.preIncDec, 2);\n return;\n }\n\n if (nextChar === _charcodes.charCodes.equalsTo) {\n finishOp(_types.TokenType.assign, 2);\n } else if (code === _charcodes.charCodes.plusSign) {\n finishOp(_types.TokenType.plus, 1);\n } else {\n finishOp(_types.TokenType.minus, 1);\n }\n}\n\n// '<>'\nfunction readToken_lt_gt(code) {\n const nextChar = _base.input.charCodeAt(_base.state.pos + 1);\n\n if (nextChar === code) {\n const size =\n code === _charcodes.charCodes.greaterThan && _base.input.charCodeAt(_base.state.pos + 2) === _charcodes.charCodes.greaterThan\n ? 3\n : 2;\n if (_base.input.charCodeAt(_base.state.pos + size) === _charcodes.charCodes.equalsTo) {\n finishOp(_types.TokenType.assign, size + 1);\n return;\n }\n // Avoid right-shift for things like Array<Array<string>>.\n if (code === _charcodes.charCodes.greaterThan && _base.state.isType) {\n finishOp(_types.TokenType.greaterThan, 1);\n return;\n }\n finishOp(_types.TokenType.bitShift, size);\n return;\n }\n\n if (nextChar === _charcodes.charCodes.equalsTo) {\n // <= | >=\n finishOp(_types.TokenType.relationalOrEqual, 2);\n } else if (code === _charcodes.charCodes.lessThan) {\n finishOp(_types.TokenType.lessThan, 1);\n } else {\n finishOp(_types.TokenType.greaterThan, 1);\n }\n}\n\nfunction readToken_eq_excl(code) {\n // '=!'\n const nextChar = _base.input.charCodeAt(_base.state.pos + 1);\n if (nextChar === _charcodes.charCodes.equalsTo) {\n finishOp(_types.TokenType.equality, _base.input.charCodeAt(_base.state.pos + 2) === _charcodes.charCodes.equalsTo ? 3 : 2);\n return;\n }\n if (code === _charcodes.charCodes.equalsTo && nextChar === _charcodes.charCodes.greaterThan) {\n // '=>'\n _base.state.pos += 2;\n finishToken(_types.TokenType.arrow);\n return;\n }\n finishOp(code === _charcodes.charCodes.equalsTo ? _types.TokenType.eq : _types.TokenType.bang, 1);\n}\n\nfunction readToken_question() {\n // '?'\n const nextChar = _base.input.charCodeAt(_base.state.pos + 1);\n const nextChar2 = _base.input.charCodeAt(_base.state.pos + 2);\n if (nextChar === _charcodes.charCodes.questionMark && !_base.state.isType) {\n if (nextChar2 === _charcodes.charCodes.equalsTo) {\n // '??='\n finishOp(_types.TokenType.assign, 3);\n } else {\n // '??'\n finishOp(_types.TokenType.nullishCoalescing, 2);\n }\n } else if (\n nextChar === _charcodes.charCodes.dot &&\n !(nextChar2 >= _charcodes.charCodes.digit0 && nextChar2 <= _charcodes.charCodes.digit9)\n ) {\n // '.' not followed by a number\n _base.state.pos += 2;\n finishToken(_types.TokenType.questionDot);\n } else {\n ++_base.state.pos;\n finishToken(_types.TokenType.question);\n }\n}\n\n function getTokenFromCode(code) {\n switch (code) {\n case _charcodes.charCodes.numberSign:\n ++_base.state.pos;\n finishToken(_types.TokenType.hash);\n return;\n\n // The interpretation of a dot depends on whether it is followed\n // by a digit or another two dots.\n\n case _charcodes.charCodes.dot:\n readToken_dot();\n return;\n\n // Punctuation tokens.\n case _charcodes.charCodes.leftParenthesis:\n ++_base.state.pos;\n finishToken(_types.TokenType.parenL);\n return;\n case _charcodes.charCodes.rightParenthesis:\n ++_base.state.pos;\n finishToken(_types.TokenType.parenR);\n return;\n case _charcodes.charCodes.semicolon:\n ++_base.state.pos;\n finishToken(_types.TokenType.semi);\n return;\n case _charcodes.charCodes.comma:\n ++_base.state.pos;\n finishToken(_types.TokenType.comma);\n return;\n case _charcodes.charCodes.leftSquareBracket:\n ++_base.state.pos;\n finishToken(_types.TokenType.bracketL);\n return;\n case _charcodes.charCodes.rightSquareBracket:\n ++_base.state.pos;\n finishToken(_types.TokenType.bracketR);\n return;\n\n case _charcodes.charCodes.leftCurlyBrace:\n if (_base.isFlowEnabled && _base.input.charCodeAt(_base.state.pos + 1) === _charcodes.charCodes.verticalBar) {\n finishOp(_types.TokenType.braceBarL, 2);\n } else {\n ++_base.state.pos;\n finishToken(_types.TokenType.braceL);\n }\n return;\n\n case _charcodes.charCodes.rightCurlyBrace:\n ++_base.state.pos;\n finishToken(_types.TokenType.braceR);\n return;\n\n case _charcodes.charCodes.colon:\n if (_base.input.charCodeAt(_base.state.pos + 1) === _charcodes.charCodes.colon) {\n finishOp(_types.TokenType.doubleColon, 2);\n } else {\n ++_base.state.pos;\n finishToken(_types.TokenType.colon);\n }\n return;\n\n case _charcodes.charCodes.questionMark:\n readToken_question();\n return;\n case _charcodes.charCodes.atSign:\n ++_base.state.pos;\n finishToken(_types.TokenType.at);\n return;\n\n case _charcodes.charCodes.graveAccent:\n ++_base.state.pos;\n finishToken(_types.TokenType.backQuote);\n return;\n\n case _charcodes.charCodes.digit0: {\n const nextChar = _base.input.charCodeAt(_base.state.pos + 1);\n // '0x', '0X', '0o', '0O', '0b', '0B'\n if (\n nextChar === _charcodes.charCodes.lowercaseX ||\n nextChar === _charcodes.charCodes.uppercaseX ||\n nextChar === _charcodes.charCodes.lowercaseO ||\n nextChar === _charcodes.charCodes.uppercaseO ||\n nextChar === _charcodes.charCodes.lowercaseB ||\n nextChar === _charcodes.charCodes.uppercaseB\n ) {\n readRadixNumber();\n return;\n }\n }\n // Anything else beginning with a digit is an integer, octal\n // number, or float.\n case _charcodes.charCodes.digit1:\n case _charcodes.charCodes.digit2:\n case _charcodes.charCodes.digit3:\n case _charcodes.charCodes.digit4:\n case _charcodes.charCodes.digit5:\n case _charcodes.charCodes.digit6:\n case _charcodes.charCodes.digit7:\n case _charcodes.charCodes.digit8:\n case _charcodes.charCodes.digit9:\n readNumber(false);\n return;\n\n // Quotes produce strings.\n case _charcodes.charCodes.quotationMark:\n case _charcodes.charCodes.apostrophe:\n readString(code);\n return;\n\n // Operators are parsed inline in tiny state machines. '=' (charCodes.equalsTo) is\n // often referred to. `finishOp` simply skips the amount of\n // characters it is given as second argument, and returns a token\n // of the type given by its first argument.\n\n case _charcodes.charCodes.slash:\n readToken_slash();\n return;\n\n case _charcodes.charCodes.percentSign:\n case _charcodes.charCodes.asterisk:\n readToken_mult_modulo(code);\n return;\n\n case _charcodes.charCodes.verticalBar:\n case _charcodes.charCodes.ampersand:\n readToken_pipe_amp(code);\n return;\n\n case _charcodes.charCodes.caret:\n readToken_caret();\n return;\n\n case _charcodes.charCodes.plusSign:\n case _charcodes.charCodes.dash:\n readToken_plus_min(code);\n return;\n\n case _charcodes.charCodes.lessThan:\n case _charcodes.charCodes.greaterThan:\n readToken_lt_gt(code);\n return;\n\n case _charcodes.charCodes.equalsTo:\n case _charcodes.charCodes.exclamationMark:\n readToken_eq_excl(code);\n return;\n\n case _charcodes.charCodes.tilde:\n finishOp(_types.TokenType.tilde, 1);\n return;\n\n default:\n break;\n }\n\n _util.unexpected.call(void 0, `Unexpected character '${String.fromCharCode(code)}'`, _base.state.pos);\n} exports.getTokenFromCode = getTokenFromCode;\n\nfunction finishOp(type, size) {\n _base.state.pos += size;\n finishToken(type);\n}\n\nfunction readRegexp() {\n const start = _base.state.pos;\n let escaped = false;\n let inClass = false;\n for (;;) {\n if (_base.state.pos >= _base.input.length) {\n _util.unexpected.call(void 0, \"Unterminated regular expression\", start);\n return;\n }\n const code = _base.input.charCodeAt(_base.state.pos);\n if (escaped) {\n escaped = false;\n } else {\n if (code === _charcodes.charCodes.leftSquareBracket) {\n inClass = true;\n } else if (code === _charcodes.charCodes.rightSquareBracket && inClass) {\n inClass = false;\n } else if (code === _charcodes.charCodes.slash && !inClass) {\n break;\n }\n escaped = code === _charcodes.charCodes.backslash;\n }\n ++_base.state.pos;\n }\n ++_base.state.pos;\n // Need to use `skipWord` because '\\uXXXX' sequences are allowed here (don't ask).\n skipWord();\n\n finishToken(_types.TokenType.regexp);\n}\n\n// Read an integer. We allow any valid digit, including hex digits, plus numeric separators, and\n// stop at any other character.\nfunction readInt() {\n while (true) {\n const code = _base.input.charCodeAt(_base.state.pos);\n if (\n (code >= _charcodes.charCodes.digit0 && code <= _charcodes.charCodes.digit9) ||\n (code >= _charcodes.charCodes.lowercaseA && code <= _charcodes.charCodes.lowercaseF) ||\n (code >= _charcodes.charCodes.uppercaseA && code <= _charcodes.charCodes.uppercaseF) ||\n code === _charcodes.charCodes.underscore\n ) {\n _base.state.pos++;\n } else {\n break;\n }\n }\n}\n\nfunction readRadixNumber() {\n let isBigInt = false;\n const start = _base.state.pos;\n\n _base.state.pos += 2; // 0x\n readInt();\n\n const nextChar = _base.input.charCodeAt(_base.state.pos);\n if (nextChar === _charcodes.charCodes.lowercaseN) {\n ++_base.state.pos;\n isBigInt = true;\n } else if (nextChar === _charcodes.charCodes.lowercaseM) {\n _util.unexpected.call(void 0, \"Invalid decimal\", start);\n }\n\n if (isBigInt) {\n finishToken(_types.TokenType.bigint);\n return;\n }\n\n finishToken(_types.TokenType.num);\n}\n\n// Read an integer, octal integer, or floating-point number.\nfunction readNumber(startsWithDot) {\n let isBigInt = false;\n let isDecimal = false;\n\n if (!startsWithDot) {\n readInt();\n }\n\n let nextChar = _base.input.charCodeAt(_base.state.pos);\n if (nextChar === _charcodes.charCodes.dot) {\n ++_base.state.pos;\n readInt();\n nextChar = _base.input.charCodeAt(_base.state.pos);\n }\n\n if (nextChar === _charcodes.charCodes.uppercaseE || nextChar === _charcodes.charCodes.lowercaseE) {\n nextChar = _base.input.charCodeAt(++_base.state.pos);\n if (nextChar === _charcodes.charCodes.plusSign || nextChar === _charcodes.charCodes.dash) {\n ++_base.state.pos;\n }\n readInt();\n nextChar = _base.input.charCodeAt(_base.state.pos);\n }\n\n if (nextChar === _charcodes.charCodes.lowercaseN) {\n ++_base.state.pos;\n isBigInt = true;\n } else if (nextChar === _charcodes.charCodes.lowercaseM) {\n ++_base.state.pos;\n isDecimal = true;\n }\n\n if (isBigInt) {\n finishToken(_types.TokenType.bigint);\n return;\n }\n\n if (isDecimal) {\n finishToken(_types.TokenType.decimal);\n return;\n }\n\n finishToken(_types.TokenType.num);\n}\n\nfunction readString(quote) {\n _base.state.pos++;\n for (;;) {\n if (_base.state.pos >= _base.input.length) {\n _util.unexpected.call(void 0, \"Unterminated string constant\");\n return;\n }\n const ch = _base.input.charCodeAt(_base.state.pos);\n if (ch === _charcodes.charCodes.backslash) {\n _base.state.pos++;\n } else if (ch === quote) {\n break;\n }\n _base.state.pos++;\n }\n _base.state.pos++;\n finishToken(_types.TokenType.string);\n}\n\n// Reads template string tokens.\nfunction readTmplToken() {\n for (;;) {\n if (_base.state.pos >= _base.input.length) {\n _util.unexpected.call(void 0, \"Unterminated template\");\n return;\n }\n const ch = _base.input.charCodeAt(_base.state.pos);\n if (\n ch === _charcodes.charCodes.graveAccent ||\n (ch === _charcodes.charCodes.dollarSign && _base.input.charCodeAt(_base.state.pos + 1) === _charcodes.charCodes.leftCurlyBrace)\n ) {\n if (_base.state.pos === _base.state.start && match(_types.TokenType.template)) {\n if (ch === _charcodes.charCodes.dollarSign) {\n _base.state.pos += 2;\n finishToken(_types.TokenType.dollarBraceL);\n return;\n } else {\n ++_base.state.pos;\n finishToken(_types.TokenType.backQuote);\n return;\n }\n }\n finishToken(_types.TokenType.template);\n return;\n }\n if (ch === _charcodes.charCodes.backslash) {\n _base.state.pos++;\n }\n _base.state.pos++;\n }\n}\n\n// Skip to the end of the current word. Note that this is the same as the snippet at the end of\n// readWord, but calling skipWord from readWord seems to slightly hurt performance from some rough\n// measurements.\n function skipWord() {\n while (_base.state.pos < _base.input.length) {\n const ch = _base.input.charCodeAt(_base.state.pos);\n if (_identifier.IS_IDENTIFIER_CHAR[ch]) {\n _base.state.pos++;\n } else if (ch === _charcodes.charCodes.backslash) {\n // \\u\n _base.state.pos += 2;\n if (_base.input.charCodeAt(_base.state.pos) === _charcodes.charCodes.leftCurlyBrace) {\n while (\n _base.state.pos < _base.input.length &&\n _base.input.charCodeAt(_base.state.pos) !== _charcodes.charCodes.rightCurlyBrace\n ) {\n _base.state.pos++;\n }\n _base.state.pos++;\n }\n } else {\n break;\n }\n }\n} exports.skipWord = skipWord;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var ContextualKeyword; (function (ContextualKeyword) {\n const NONE = 0; ContextualKeyword[ContextualKeyword[\"NONE\"] = NONE] = \"NONE\";\n const _abstract = NONE + 1; ContextualKeyword[ContextualKeyword[\"_abstract\"] = _abstract] = \"_abstract\";\n const _as = _abstract + 1; ContextualKeyword[ContextualKeyword[\"_as\"] = _as] = \"_as\";\n const _asserts = _as + 1; ContextualKeyword[ContextualKeyword[\"_asserts\"] = _asserts] = \"_asserts\";\n const _async = _asserts + 1; ContextualKeyword[ContextualKeyword[\"_async\"] = _async] = \"_async\";\n const _await = _async + 1; ContextualKeyword[ContextualKeyword[\"_await\"] = _await] = \"_await\";\n const _checks = _await + 1; ContextualKeyword[ContextualKeyword[\"_checks\"] = _checks] = \"_checks\";\n const _constructor = _checks + 1; ContextualKeyword[ContextualKeyword[\"_constructor\"] = _constructor] = \"_constructor\";\n const _declare = _constructor + 1; ContextualKeyword[ContextualKeyword[\"_declare\"] = _declare] = \"_declare\";\n const _enum = _declare + 1; ContextualKeyword[ContextualKeyword[\"_enum\"] = _enum] = \"_enum\";\n const _exports = _enum + 1; ContextualKeyword[ContextualKeyword[\"_exports\"] = _exports] = \"_exports\";\n const _from = _exports + 1; ContextualKeyword[ContextualKeyword[\"_from\"] = _from] = \"_from\";\n const _get = _from + 1; ContextualKeyword[ContextualKeyword[\"_get\"] = _get] = \"_get\";\n const _global = _get + 1; ContextualKeyword[ContextualKeyword[\"_global\"] = _global] = \"_global\";\n const _implements = _global + 1; ContextualKeyword[ContextualKeyword[\"_implements\"] = _implements] = \"_implements\";\n const _infer = _implements + 1; ContextualKeyword[ContextualKeyword[\"_infer\"] = _infer] = \"_infer\";\n const _interface = _infer + 1; ContextualKeyword[ContextualKeyword[\"_interface\"] = _interface] = \"_interface\";\n const _is = _interface + 1; ContextualKeyword[ContextualKeyword[\"_is\"] = _is] = \"_is\";\n const _keyof = _is + 1; ContextualKeyword[ContextualKeyword[\"_keyof\"] = _keyof] = \"_keyof\";\n const _mixins = _keyof + 1; ContextualKeyword[ContextualKeyword[\"_mixins\"] = _mixins] = \"_mixins\";\n const _module = _mixins + 1; ContextualKeyword[ContextualKeyword[\"_module\"] = _module] = \"_module\";\n const _namespace = _module + 1; ContextualKeyword[ContextualKeyword[\"_namespace\"] = _namespace] = \"_namespace\";\n const _of = _namespace + 1; ContextualKeyword[ContextualKeyword[\"_of\"] = _of] = \"_of\";\n const _opaque = _of + 1; ContextualKeyword[ContextualKeyword[\"_opaque\"] = _opaque] = \"_opaque\";\n const _private = _opaque + 1; ContextualKeyword[ContextualKeyword[\"_private\"] = _private] = \"_private\";\n const _protected = _private + 1; ContextualKeyword[ContextualKeyword[\"_protected\"] = _protected] = \"_protected\";\n const _proto = _protected + 1; ContextualKeyword[ContextualKeyword[\"_proto\"] = _proto] = \"_proto\";\n const _public = _proto + 1; ContextualKeyword[ContextualKeyword[\"_public\"] = _public] = \"_public\";\n const _readonly = _public + 1; ContextualKeyword[ContextualKeyword[\"_readonly\"] = _readonly] = \"_readonly\";\n const _require = _readonly + 1; ContextualKeyword[ContextualKeyword[\"_require\"] = _require] = \"_require\";\n const _set = _require + 1; ContextualKeyword[ContextualKeyword[\"_set\"] = _set] = \"_set\";\n const _static = _set + 1; ContextualKeyword[ContextualKeyword[\"_static\"] = _static] = \"_static\";\n const _type = _static + 1; ContextualKeyword[ContextualKeyword[\"_type\"] = _type] = \"_type\";\n const _unique = _type + 1; ContextualKeyword[ContextualKeyword[\"_unique\"] = _unique] = \"_unique\";\n})(ContextualKeyword || (exports.ContextualKeyword = ContextualKeyword = {}));\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _base = require('../traverser/base');\nvar _charcodes = require('../util/charcodes');\nvar _identifier = require('../util/identifier');\nvar _index = require('./index');\nvar _readWordTree = require('./readWordTree');\nvar _types = require('./types');\n\n/**\n * Read an identifier, producing either a name token or matching on one of the existing keywords.\n * For performance, we pre-generate big decision tree that we traverse. Each node represents a\n * prefix and has 27 values, where the first value is the token or contextual token, if any (-1 if\n * not), and the other 26 values are the transitions to other nodes, or -1 to stop.\n */\n function readWord() {\n let treePos = 0;\n let code = 0;\n let pos = _base.state.pos;\n while (pos < _base.input.length) {\n code = _base.input.charCodeAt(pos);\n if (code < _charcodes.charCodes.lowercaseA || code > _charcodes.charCodes.lowercaseZ) {\n break;\n }\n const next = _readWordTree.READ_WORD_TREE[treePos + (code - _charcodes.charCodes.lowercaseA) + 1];\n if (next === -1) {\n break;\n } else {\n treePos = next;\n pos++;\n }\n }\n\n const keywordValue = _readWordTree.READ_WORD_TREE[treePos];\n if (keywordValue > -1 && !_identifier.IS_IDENTIFIER_CHAR[code]) {\n _base.state.pos = pos;\n if (keywordValue & 1) {\n _index.finishToken.call(void 0, keywordValue >>> 1);\n } else {\n _index.finishToken.call(void 0, _types.TokenType.name, keywordValue >>> 1);\n }\n return;\n }\n\n while (pos < _base.input.length) {\n const ch = _base.input.charCodeAt(pos);\n if (_identifier.IS_IDENTIFIER_CHAR[ch]) {\n pos++;\n } else if (ch === _charcodes.charCodes.backslash) {\n // \\u\n pos += 2;\n if (_base.input.charCodeAt(pos) === _charcodes.charCodes.leftCurlyBrace) {\n while (pos < _base.input.length && _base.input.charCodeAt(pos) !== _charcodes.charCodes.rightCurlyBrace) {\n pos++;\n }\n pos++;\n }\n } else if (ch === _charcodes.charCodes.atSign && _base.input.charCodeAt(pos + 1) === _charcodes.charCodes.atSign) {\n pos += 2;\n } else {\n break;\n }\n }\n _base.state.pos = pos;\n _index.finishToken.call(void 0, _types.TokenType.name);\n} exports.default = readWord;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});// Generated file, do not edit! Run \"yarn generate\" to re-generate this file.\nvar _keywords = require('./keywords');\nvar _types = require('./types');\n\n// prettier-ignore\n const READ_WORD_TREE = new Int32Array([\n // \"\"\n -1, 27, 594, 729, 1566, 2187, 2673, 3294, -1, 3510, -1, 4428, 4563, 4644, 4941, 5319, 5508, -1, 6048, 6507, 6966, 7398, 7560, 7722, -1, 7938, -1,\n // \"a\"\n -1, -1, 54, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 243, -1, -1, -1, 486, -1, -1, -1,\n // \"ab\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 81, -1, -1, -1, -1, -1, -1, -1,\n // \"abs\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 108, -1, -1, -1, -1, -1, -1,\n // \"abst\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 135, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"abstr\"\n -1, 162, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"abstra\"\n -1, -1, -1, 189, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"abstrac\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 216, -1, -1, -1, -1, -1, -1,\n // \"abstract\"\n _keywords.ContextualKeyword._abstract << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"as\"\n _keywords.ContextualKeyword._as << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 270, -1, -1, -1, -1, -1, 405, -1,\n // \"ass\"\n -1, -1, -1, -1, -1, 297, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"asse\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 324, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"asser\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 351, -1, -1, -1, -1, -1, -1,\n // \"assert\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 378, -1, -1, -1, -1, -1, -1, -1,\n // \"asserts\"\n _keywords.ContextualKeyword._asserts << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"asy\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 432, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"asyn\"\n -1, -1, -1, 459, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"async\"\n _keywords.ContextualKeyword._async << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"aw\"\n -1, 513, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"awa\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 540, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"awai\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 567, -1, -1, -1, -1, -1, -1,\n // \"await\"\n _keywords.ContextualKeyword._await << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"b\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 621, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"br\"\n -1, -1, -1, -1, -1, 648, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"bre\"\n -1, 675, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"brea\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 702, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"break\"\n (_types.TokenType._break << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"c\"\n -1, 756, -1, -1, -1, -1, -1, -1, 918, -1, -1, -1, 1053, -1, -1, 1161, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"ca\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 783, 837, -1, -1, -1, -1, -1, -1,\n // \"cas\"\n -1, -1, -1, -1, -1, 810, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"case\"\n (_types.TokenType._case << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"cat\"\n -1, -1, -1, 864, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"catc\"\n -1, -1, -1, -1, -1, -1, -1, -1, 891, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"catch\"\n (_types.TokenType._catch << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"ch\"\n -1, -1, -1, -1, -1, 945, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"che\"\n -1, -1, -1, 972, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"chec\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 999, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"check\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1026, -1, -1, -1, -1, -1, -1, -1,\n // \"checks\"\n _keywords.ContextualKeyword._checks << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"cl\"\n -1, 1080, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"cla\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1107, -1, -1, -1, -1, -1, -1, -1,\n // \"clas\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1134, -1, -1, -1, -1, -1, -1, -1,\n // \"class\"\n (_types.TokenType._class << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"co\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1188, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"con\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1215, 1431, -1, -1, -1, -1, -1, -1,\n // \"cons\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1242, -1, -1, -1, -1, -1, -1,\n // \"const\"\n (_types.TokenType._const << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1269, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"constr\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1296, -1, -1, -1, -1, -1,\n // \"constru\"\n -1, -1, -1, 1323, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"construc\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1350, -1, -1, -1, -1, -1, -1,\n // \"construct\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1377, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"constructo\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1404, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"constructor\"\n _keywords.ContextualKeyword._constructor << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"cont\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 1458, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"conti\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1485, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"contin\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1512, -1, -1, -1, -1, -1,\n // \"continu\"\n -1, -1, -1, -1, -1, 1539, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"continue\"\n (_types.TokenType._continue << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"d\"\n -1, -1, -1, -1, -1, 1593, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2160, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"de\"\n -1, -1, 1620, 1782, -1, -1, 1917, -1, -1, -1, -1, -1, 2052, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"deb\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1647, -1, -1, -1, -1, -1,\n // \"debu\"\n -1, -1, -1, -1, -1, -1, -1, 1674, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"debug\"\n -1, -1, -1, -1, -1, -1, -1, 1701, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"debugg\"\n -1, -1, -1, -1, -1, 1728, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"debugge\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1755, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"debugger\"\n (_types.TokenType._debugger << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"dec\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1809, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"decl\"\n -1, 1836, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"decla\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1863, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"declar\"\n -1, -1, -1, -1, -1, 1890, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"declare\"\n _keywords.ContextualKeyword._declare << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"def\"\n -1, 1944, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"defa\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1971, -1, -1, -1, -1, -1,\n // \"defau\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 1998, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"defaul\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2025, -1, -1, -1, -1, -1, -1,\n // \"default\"\n (_types.TokenType._default << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"del\"\n -1, -1, -1, -1, -1, 2079, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"dele\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2106, -1, -1, -1, -1, -1, -1,\n // \"delet\"\n -1, -1, -1, -1, -1, 2133, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"delete\"\n (_types.TokenType._delete << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"do\"\n (_types.TokenType._do << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"e\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2214, -1, 2295, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2376, -1, -1,\n // \"el\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2241, -1, -1, -1, -1, -1, -1, -1,\n // \"els\"\n -1, -1, -1, -1, -1, 2268, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"else\"\n (_types.TokenType._else << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"en\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2322, -1, -1, -1, -1, -1,\n // \"enu\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2349, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"enum\"\n _keywords.ContextualKeyword._enum << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"ex\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2403, -1, -1, -1, 2538, -1, -1, -1, -1, -1, -1,\n // \"exp\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2430, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"expo\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2457, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"expor\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2484, -1, -1, -1, -1, -1, -1,\n // \"export\"\n (_types.TokenType._export << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2511, -1, -1, -1, -1, -1, -1, -1,\n // \"exports\"\n _keywords.ContextualKeyword._exports << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"ext\"\n -1, -1, -1, -1, -1, 2565, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"exte\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2592, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"exten\"\n -1, -1, -1, -1, 2619, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"extend\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2646, -1, -1, -1, -1, -1, -1, -1,\n // \"extends\"\n (_types.TokenType._extends << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"f\"\n -1, 2700, -1, -1, -1, -1, -1, -1, -1, 2808, -1, -1, -1, -1, -1, 2970, -1, -1, 3024, -1, -1, 3105, -1, -1, -1, -1, -1,\n // \"fa\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2727, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"fal\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2754, -1, -1, -1, -1, -1, -1, -1,\n // \"fals\"\n -1, -1, -1, -1, -1, 2781, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"false\"\n (_types.TokenType._false << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"fi\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2835, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"fin\"\n -1, 2862, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"fina\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2889, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"final\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2916, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"finall\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2943, -1,\n // \"finally\"\n (_types.TokenType._finally << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"fo\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 2997, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"for\"\n (_types.TokenType._for << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"fr\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3051, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"fro\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3078, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"from\"\n _keywords.ContextualKeyword._from << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"fu\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3132, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"fun\"\n -1, -1, -1, 3159, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"func\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3186, -1, -1, -1, -1, -1, -1,\n // \"funct\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 3213, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"functi\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3240, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"functio\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3267, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"function\"\n (_types.TokenType._function << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"g\"\n -1, -1, -1, -1, -1, 3321, -1, -1, -1, -1, -1, -1, 3375, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"ge\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3348, -1, -1, -1, -1, -1, -1,\n // \"get\"\n _keywords.ContextualKeyword._get << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"gl\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3402, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"glo\"\n -1, -1, 3429, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"glob\"\n -1, 3456, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"globa\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3483, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"global\"\n _keywords.ContextualKeyword._global << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"i\"\n -1, -1, -1, -1, -1, -1, 3537, -1, -1, -1, -1, -1, -1, 3564, 3888, -1, -1, -1, -1, 4401, -1, -1, -1, -1, -1, -1, -1,\n // \"if\"\n (_types.TokenType._if << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"im\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3591, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"imp\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3618, -1, -1, 3807, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"impl\"\n -1, -1, -1, -1, -1, 3645, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"imple\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3672, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"implem\"\n -1, -1, -1, -1, -1, 3699, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"impleme\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3726, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"implemen\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3753, -1, -1, -1, -1, -1, -1,\n // \"implement\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3780, -1, -1, -1, -1, -1, -1, -1,\n // \"implements\"\n _keywords.ContextualKeyword._implements << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"impo\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3834, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"impor\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3861, -1, -1, -1, -1, -1, -1,\n // \"import\"\n (_types.TokenType._import << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"in\"\n (_types.TokenType._in << 1) + 1, -1, -1, -1, -1, -1, 3915, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3996, 4212, -1, -1, -1, -1, -1, -1,\n // \"inf\"\n -1, -1, -1, -1, -1, 3942, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"infe\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 3969, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"infer\"\n _keywords.ContextualKeyword._infer << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"ins\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4023, -1, -1, -1, -1, -1, -1,\n // \"inst\"\n -1, 4050, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"insta\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4077, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"instan\"\n -1, -1, -1, 4104, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"instanc\"\n -1, -1, -1, -1, -1, 4131, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"instance\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4158, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"instanceo\"\n -1, -1, -1, -1, -1, -1, 4185, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"instanceof\"\n (_types.TokenType._instanceof << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"int\"\n -1, -1, -1, -1, -1, 4239, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"inte\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4266, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"inter\"\n -1, -1, -1, -1, -1, -1, 4293, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"interf\"\n -1, 4320, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"interfa\"\n -1, -1, -1, 4347, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"interfac\"\n -1, -1, -1, -1, -1, 4374, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"interface\"\n _keywords.ContextualKeyword._interface << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"is\"\n _keywords.ContextualKeyword._is << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"k\"\n -1, -1, -1, -1, -1, 4455, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"ke\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4482, -1,\n // \"key\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4509, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"keyo\"\n -1, -1, -1, -1, -1, -1, 4536, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"keyof\"\n _keywords.ContextualKeyword._keyof << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"l\"\n -1, -1, -1, -1, -1, 4590, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"le\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4617, -1, -1, -1, -1, -1, -1,\n // \"let\"\n (_types.TokenType._let << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"m\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 4671, -1, -1, -1, -1, -1, 4806, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"mi\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4698, -1, -1,\n // \"mix\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 4725, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"mixi\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4752, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"mixin\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4779, -1, -1, -1, -1, -1, -1, -1,\n // \"mixins\"\n _keywords.ContextualKeyword._mixins << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"mo\"\n -1, -1, -1, -1, 4833, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"mod\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4860, -1, -1, -1, -1, -1,\n // \"modu\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4887, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"modul\"\n -1, -1, -1, -1, -1, 4914, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"module\"\n _keywords.ContextualKeyword._module << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"n\"\n -1, 4968, -1, -1, -1, 5184, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5238, -1, -1, -1, -1, -1,\n // \"na\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 4995, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"nam\"\n -1, -1, -1, -1, -1, 5022, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"name\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5049, -1, -1, -1, -1, -1, -1, -1,\n // \"names\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5076, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"namesp\"\n -1, 5103, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"namespa\"\n -1, -1, -1, 5130, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"namespac\"\n -1, -1, -1, -1, -1, 5157, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"namespace\"\n _keywords.ContextualKeyword._namespace << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"ne\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5211, -1, -1, -1,\n // \"new\"\n (_types.TokenType._new << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"nu\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5265, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"nul\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5292, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"null\"\n (_types.TokenType._null << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"o\"\n -1, -1, -1, -1, -1, -1, 5346, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5373, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"of\"\n _keywords.ContextualKeyword._of << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"op\"\n -1, 5400, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"opa\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5427, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"opaq\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5454, -1, -1, -1, -1, -1,\n // \"opaqu\"\n -1, -1, -1, -1, -1, 5481, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"opaque\"\n _keywords.ContextualKeyword._opaque << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"p\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5535, -1, -1, 5913, -1, -1, -1, -1, -1,\n // \"pr\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 5562, -1, -1, -1, -1, -1, 5697, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"pri\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5589, -1, -1, -1, -1,\n // \"priv\"\n -1, 5616, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"priva\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5643, -1, -1, -1, -1, -1, -1,\n // \"privat\"\n -1, -1, -1, -1, -1, 5670, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"private\"\n _keywords.ContextualKeyword._private << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"pro\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5724, -1, -1, -1, -1, -1, -1,\n // \"prot\"\n -1, -1, -1, -1, -1, 5751, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5886, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"prote\"\n -1, -1, -1, 5778, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"protec\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5805, -1, -1, -1, -1, -1, -1,\n // \"protect\"\n -1, -1, -1, -1, -1, 5832, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"protecte\"\n -1, -1, -1, -1, 5859, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"protected\"\n _keywords.ContextualKeyword._protected << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"proto\"\n _keywords.ContextualKeyword._proto << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"pu\"\n -1, -1, 5940, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"pub\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 5967, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"publ\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 5994, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"publi\"\n -1, -1, -1, 6021, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"public\"\n _keywords.ContextualKeyword._public << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"r\"\n -1, -1, -1, -1, -1, 6075, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"re\"\n -1, 6102, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6264, -1, -1, 6399, -1, -1, -1, -1, -1, -1,\n // \"rea\"\n -1, -1, -1, -1, 6129, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"read\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6156, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"reado\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6183, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"readon\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6210, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"readonl\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6237, -1,\n // \"readonly\"\n _keywords.ContextualKeyword._readonly << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"req\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6291, -1, -1, -1, -1, -1,\n // \"requ\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 6318, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"requi\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6345, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"requir\"\n -1, -1, -1, -1, -1, 6372, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"require\"\n _keywords.ContextualKeyword._require << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"ret\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6426, -1, -1, -1, -1, -1,\n // \"retu\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6453, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"retur\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6480, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"return\"\n (_types.TokenType._return << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"s\"\n -1, -1, -1, -1, -1, 6534, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6588, 6723, -1, 6831, -1, -1, -1,\n // \"se\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6561, -1, -1, -1, -1, -1, -1,\n // \"set\"\n _keywords.ContextualKeyword._set << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"st\"\n -1, 6615, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"sta\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6642, -1, -1, -1, -1, -1, -1,\n // \"stat\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 6669, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"stati\"\n -1, -1, -1, 6696, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"static\"\n _keywords.ContextualKeyword._static << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"su\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6750, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"sup\"\n -1, -1, -1, -1, -1, 6777, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"supe\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6804, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"super\"\n (_types.TokenType._super << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"sw\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 6858, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"swi\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 6885, -1, -1, -1, -1, -1, -1,\n // \"swit\"\n -1, -1, -1, 6912, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"switc\"\n -1, -1, -1, -1, -1, -1, -1, -1, 6939, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"switch\"\n (_types.TokenType._switch << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"t\"\n -1, -1, -1, -1, -1, -1, -1, -1, 6993, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7155, -1, -1, -1, -1, -1, -1, 7263, -1,\n // \"th\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 7020, -1, -1, -1, -1, -1, -1, -1, -1, 7074, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"thi\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7047, -1, -1, -1, -1, -1, -1, -1,\n // \"this\"\n (_types.TokenType._this << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"thr\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7101, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"thro\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7128, -1, -1, -1,\n // \"throw\"\n (_types.TokenType._throw << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"tr\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7182, -1, -1, -1, 7236, -1,\n // \"tru\"\n -1, -1, -1, -1, -1, 7209, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"true\"\n (_types.TokenType._true << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"try\"\n (_types.TokenType._try << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"ty\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7290, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"typ\"\n -1, -1, -1, -1, -1, 7317, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"type\"\n _keywords.ContextualKeyword._type << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7344, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"typeo\"\n -1, -1, -1, -1, -1, -1, 7371, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"typeof\"\n (_types.TokenType._typeof << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"u\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7425, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"un\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 7452, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"uni\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7479, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"uniq\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7506, -1, -1, -1, -1, -1,\n // \"uniqu\"\n -1, -1, -1, -1, -1, 7533, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"unique\"\n _keywords.ContextualKeyword._unique << 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"v\"\n -1, 7587, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7641, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"va\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7614, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"var\"\n (_types.TokenType._var << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"vo\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 7668, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"voi\"\n -1, -1, -1, -1, 7695, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"void\"\n (_types.TokenType._void << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"w\"\n -1, -1, -1, -1, -1, -1, -1, -1, 7749, 7857, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"wh\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 7776, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"whi\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7803, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"whil\"\n -1, -1, -1, -1, -1, 7830, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"while\"\n (_types.TokenType._while << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"wi\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 7884, -1, -1, -1, -1, -1, -1,\n // \"wit\"\n -1, -1, -1, -1, -1, -1, -1, -1, 7911, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"with\"\n (_types.TokenType._with << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"y\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, 7965, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"yi\"\n -1, -1, -1, -1, -1, 7992, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"yie\"\n -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 8019, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"yiel\"\n -1, -1, -1, -1, 8046, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n // \"yield\"\n (_types.TokenType._yield << 1) + 1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,\n]); exports.READ_WORD_TREE = READ_WORD_TREE;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\nvar _keywords = require('./keywords');\nvar _types = require('./types');\n\n class Scope {\n \n \n \n\n constructor(startTokenIndex, endTokenIndex, isFunctionScope) {\n this.startTokenIndex = startTokenIndex;\n this.endTokenIndex = endTokenIndex;\n this.isFunctionScope = isFunctionScope;\n }\n} exports.Scope = Scope;\n\n class StateSnapshot {\n constructor(\n potentialArrowAt,\n noAnonFunctionType,\n tokensLength,\n scopesLength,\n pos,\n type,\n contextualKeyword,\n start,\n end,\n isType,\n scopeDepth,\n error,\n ) {;this.potentialArrowAt = potentialArrowAt;this.noAnonFunctionType = noAnonFunctionType;this.tokensLength = tokensLength;this.scopesLength = scopesLength;this.pos = pos;this.type = type;this.contextualKeyword = contextualKeyword;this.start = start;this.end = end;this.isType = isType;this.scopeDepth = scopeDepth;this.error = error;}\n} exports.StateSnapshot = StateSnapshot;\n\n class State {constructor() { State.prototype.__init.call(this);State.prototype.__init2.call(this);State.prototype.__init3.call(this);State.prototype.__init4.call(this);State.prototype.__init5.call(this);State.prototype.__init6.call(this);State.prototype.__init7.call(this);State.prototype.__init8.call(this);State.prototype.__init9.call(this);State.prototype.__init10.call(this);State.prototype.__init11.call(this);State.prototype.__init12.call(this); }\n // Used to signify the start of a potential arrow function\n __init() {this.potentialArrowAt = -1}\n\n // Used by Flow to handle an edge case involving function type parsing.\n __init2() {this.noAnonFunctionType = false}\n\n // Token store.\n __init3() {this.tokens = []}\n\n // Array of all observed scopes, ordered by their ending position.\n __init4() {this.scopes = []}\n\n // The current position of the tokenizer in the input.\n __init5() {this.pos = 0}\n\n // Information about the current token.\n __init6() {this.type = _types.TokenType.eof}\n __init7() {this.contextualKeyword = _keywords.ContextualKeyword.NONE}\n __init8() {this.start = 0}\n __init9() {this.end = 0}\n\n __init10() {this.isType = false}\n __init11() {this.scopeDepth = 0}\n\n /**\n * If the parser is in an error state, then the token is always tt.eof and all functions can\n * keep executing but should be written so they don't get into an infinite loop in this situation.\n *\n * This approach, combined with the ability to snapshot and restore state, allows us to implement\n * backtracking without exceptions and without needing to explicitly propagate error states\n * everywhere.\n */\n __init12() {this.error = null}\n\n snapshot() {\n return new StateSnapshot(\n this.potentialArrowAt,\n this.noAnonFunctionType,\n this.tokens.length,\n this.scopes.length,\n this.pos,\n this.type,\n this.contextualKeyword,\n this.start,\n this.end,\n this.isType,\n this.scopeDepth,\n this.error,\n );\n }\n\n restoreFromSnapshot(snapshot) {\n this.potentialArrowAt = snapshot.potentialArrowAt;\n this.noAnonFunctionType = snapshot.noAnonFunctionType;\n this.tokens.length = snapshot.tokensLength;\n this.scopes.length = snapshot.scopesLength;\n this.pos = snapshot.pos;\n this.type = snapshot.type;\n this.contextualKeyword = snapshot.contextualKeyword;\n this.start = snapshot.start;\n this.end = snapshot.end;\n this.isType = snapshot.isType;\n this.scopeDepth = snapshot.scopeDepth;\n this.error = snapshot.error;\n }\n} exports.default = State;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});// Generated file, do not edit! Run \"yarn generate\" to re-generate this file.\n/**\n * Enum of all token types, with bit fields to signify meaningful properties.\n */\nvar TokenType; (function (TokenType) {\n // Precedence 0 means not an operator; otherwise it is a positive number up to 12.\n const PRECEDENCE_MASK = 0xf; TokenType[TokenType[\"PRECEDENCE_MASK\"] = PRECEDENCE_MASK] = \"PRECEDENCE_MASK\";\n const IS_KEYWORD = 1 << 4; TokenType[TokenType[\"IS_KEYWORD\"] = IS_KEYWORD] = \"IS_KEYWORD\";\n const IS_ASSIGN = 1 << 5; TokenType[TokenType[\"IS_ASSIGN\"] = IS_ASSIGN] = \"IS_ASSIGN\";\n const IS_RIGHT_ASSOCIATIVE = 1 << 6; TokenType[TokenType[\"IS_RIGHT_ASSOCIATIVE\"] = IS_RIGHT_ASSOCIATIVE] = \"IS_RIGHT_ASSOCIATIVE\";\n const IS_PREFIX = 1 << 7; TokenType[TokenType[\"IS_PREFIX\"] = IS_PREFIX] = \"IS_PREFIX\";\n const IS_POSTFIX = 1 << 8; TokenType[TokenType[\"IS_POSTFIX\"] = IS_POSTFIX] = \"IS_POSTFIX\";\n\n const num = 0; TokenType[TokenType[\"num\"] = num] = \"num\"; // num\n const bigint = 512; TokenType[TokenType[\"bigint\"] = bigint] = \"bigint\"; // bigint\n const decimal = 1024; TokenType[TokenType[\"decimal\"] = decimal] = \"decimal\"; // decimal\n const regexp = 1536; TokenType[TokenType[\"regexp\"] = regexp] = \"regexp\"; // regexp\n const string = 2048; TokenType[TokenType[\"string\"] = string] = \"string\"; // string\n const name = 2560; TokenType[TokenType[\"name\"] = name] = \"name\"; // name\n const eof = 3072; TokenType[TokenType[\"eof\"] = eof] = \"eof\"; // eof\n const bracketL = 3584; TokenType[TokenType[\"bracketL\"] = bracketL] = \"bracketL\"; // [\n const bracketR = 4096; TokenType[TokenType[\"bracketR\"] = bracketR] = \"bracketR\"; // ]\n const braceL = 4608; TokenType[TokenType[\"braceL\"] = braceL] = \"braceL\"; // {\n const braceBarL = 5120; TokenType[TokenType[\"braceBarL\"] = braceBarL] = \"braceBarL\"; // {|\n const braceR = 5632; TokenType[TokenType[\"braceR\"] = braceR] = \"braceR\"; // }\n const braceBarR = 6144; TokenType[TokenType[\"braceBarR\"] = braceBarR] = \"braceBarR\"; // |}\n const parenL = 6656; TokenType[TokenType[\"parenL\"] = parenL] = \"parenL\"; // (\n const parenR = 7168; TokenType[TokenType[\"parenR\"] = parenR] = \"parenR\"; // )\n const comma = 7680; TokenType[TokenType[\"comma\"] = comma] = \"comma\"; // ,\n const semi = 8192; TokenType[TokenType[\"semi\"] = semi] = \"semi\"; // ;\n const colon = 8704; TokenType[TokenType[\"colon\"] = colon] = \"colon\"; // :\n const doubleColon = 9216; TokenType[TokenType[\"doubleColon\"] = doubleColon] = \"doubleColon\"; // ::\n const dot = 9728; TokenType[TokenType[\"dot\"] = dot] = \"dot\"; // .\n const question = 10240; TokenType[TokenType[\"question\"] = question] = \"question\"; // ?\n const questionDot = 10752; TokenType[TokenType[\"questionDot\"] = questionDot] = \"questionDot\"; // ?.\n const arrow = 11264; TokenType[TokenType[\"arrow\"] = arrow] = \"arrow\"; // =>\n const template = 11776; TokenType[TokenType[\"template\"] = template] = \"template\"; // template\n const ellipsis = 12288; TokenType[TokenType[\"ellipsis\"] = ellipsis] = \"ellipsis\"; // ...\n const backQuote = 12800; TokenType[TokenType[\"backQuote\"] = backQuote] = \"backQuote\"; // `\n const dollarBraceL = 13312; TokenType[TokenType[\"dollarBraceL\"] = dollarBraceL] = \"dollarBraceL\"; // ${\n const at = 13824; TokenType[TokenType[\"at\"] = at] = \"at\"; // @\n const hash = 14336; TokenType[TokenType[\"hash\"] = hash] = \"hash\"; // #\n const eq = 14880; TokenType[TokenType[\"eq\"] = eq] = \"eq\"; // = isAssign\n const assign = 15392; TokenType[TokenType[\"assign\"] = assign] = \"assign\"; // _= isAssign\n const preIncDec = 16256; TokenType[TokenType[\"preIncDec\"] = preIncDec] = \"preIncDec\"; // ++/-- prefix postfix\n const postIncDec = 16768; TokenType[TokenType[\"postIncDec\"] = postIncDec] = \"postIncDec\"; // ++/-- prefix postfix\n const bang = 17024; TokenType[TokenType[\"bang\"] = bang] = \"bang\"; // ! prefix\n const tilde = 17536; TokenType[TokenType[\"tilde\"] = tilde] = \"tilde\"; // ~ prefix\n const pipeline = 17921; TokenType[TokenType[\"pipeline\"] = pipeline] = \"pipeline\"; // |> prec:1\n const nullishCoalescing = 18434; TokenType[TokenType[\"nullishCoalescing\"] = nullishCoalescing] = \"nullishCoalescing\"; // ?? prec:2\n const logicalOR = 18946; TokenType[TokenType[\"logicalOR\"] = logicalOR] = \"logicalOR\"; // || prec:2\n const logicalAND = 19459; TokenType[TokenType[\"logicalAND\"] = logicalAND] = \"logicalAND\"; // && prec:3\n const bitwiseOR = 19972; TokenType[TokenType[\"bitwiseOR\"] = bitwiseOR] = \"bitwiseOR\"; // | prec:4\n const bitwiseXOR = 20485; TokenType[TokenType[\"bitwiseXOR\"] = bitwiseXOR] = \"bitwiseXOR\"; // ^ prec:5\n const bitwiseAND = 20998; TokenType[TokenType[\"bitwiseAND\"] = bitwiseAND] = \"bitwiseAND\"; // & prec:6\n const equality = 21511; TokenType[TokenType[\"equality\"] = equality] = \"equality\"; // ==/!= prec:7\n const lessThan = 22024; TokenType[TokenType[\"lessThan\"] = lessThan] = \"lessThan\"; // < prec:8\n const greaterThan = 22536; TokenType[TokenType[\"greaterThan\"] = greaterThan] = \"greaterThan\"; // > prec:8\n const relationalOrEqual = 23048; TokenType[TokenType[\"relationalOrEqual\"] = relationalOrEqual] = \"relationalOrEqual\"; // <=/>= prec:8\n const bitShift = 23561; TokenType[TokenType[\"bitShift\"] = bitShift] = \"bitShift\"; // <</>> prec:9\n const plus = 24202; TokenType[TokenType[\"plus\"] = plus] = \"plus\"; // + prec:10 prefix\n const minus = 24714; TokenType[TokenType[\"minus\"] = minus] = \"minus\"; // - prec:10 prefix\n const modulo = 25099; TokenType[TokenType[\"modulo\"] = modulo] = \"modulo\"; // % prec:11\n const star = 25611; TokenType[TokenType[\"star\"] = star] = \"star\"; // * prec:11\n const slash = 26123; TokenType[TokenType[\"slash\"] = slash] = \"slash\"; // / prec:11\n const exponent = 26700; TokenType[TokenType[\"exponent\"] = exponent] = \"exponent\"; // ** prec:12 rightAssociative\n const jsxName = 27136; TokenType[TokenType[\"jsxName\"] = jsxName] = \"jsxName\"; // jsxName\n const jsxText = 27648; TokenType[TokenType[\"jsxText\"] = jsxText] = \"jsxText\"; // jsxText\n const jsxTagStart = 28160; TokenType[TokenType[\"jsxTagStart\"] = jsxTagStart] = \"jsxTagStart\"; // jsxTagStart\n const jsxTagEnd = 28672; TokenType[TokenType[\"jsxTagEnd\"] = jsxTagEnd] = \"jsxTagEnd\"; // jsxTagEnd\n const typeParameterStart = 29184; TokenType[TokenType[\"typeParameterStart\"] = typeParameterStart] = \"typeParameterStart\"; // typeParameterStart\n const nonNullAssertion = 29696; TokenType[TokenType[\"nonNullAssertion\"] = nonNullAssertion] = \"nonNullAssertion\"; // nonNullAssertion\n const _break = 30224; TokenType[TokenType[\"_break\"] = _break] = \"_break\"; // break keyword\n const _case = 30736; TokenType[TokenType[\"_case\"] = _case] = \"_case\"; // case keyword\n const _catch = 31248; TokenType[TokenType[\"_catch\"] = _catch] = \"_catch\"; // catch keyword\n const _continue = 31760; TokenType[TokenType[\"_continue\"] = _continue] = \"_continue\"; // continue keyword\n const _debugger = 32272; TokenType[TokenType[\"_debugger\"] = _debugger] = \"_debugger\"; // debugger keyword\n const _default = 32784; TokenType[TokenType[\"_default\"] = _default] = \"_default\"; // default keyword\n const _do = 33296; TokenType[TokenType[\"_do\"] = _do] = \"_do\"; // do keyword\n const _else = 33808; TokenType[TokenType[\"_else\"] = _else] = \"_else\"; // else keyword\n const _finally = 34320; TokenType[TokenType[\"_finally\"] = _finally] = \"_finally\"; // finally keyword\n const _for = 34832; TokenType[TokenType[\"_for\"] = _for] = \"_for\"; // for keyword\n const _function = 35344; TokenType[TokenType[\"_function\"] = _function] = \"_function\"; // function keyword\n const _if = 35856; TokenType[TokenType[\"_if\"] = _if] = \"_if\"; // if keyword\n const _return = 36368; TokenType[TokenType[\"_return\"] = _return] = \"_return\"; // return keyword\n const _switch = 36880; TokenType[TokenType[\"_switch\"] = _switch] = \"_switch\"; // switch keyword\n const _throw = 37520; TokenType[TokenType[\"_throw\"] = _throw] = \"_throw\"; // throw keyword prefix\n const _try = 37904; TokenType[TokenType[\"_try\"] = _try] = \"_try\"; // try keyword\n const _var = 38416; TokenType[TokenType[\"_var\"] = _var] = \"_var\"; // var keyword\n const _let = 38928; TokenType[TokenType[\"_let\"] = _let] = \"_let\"; // let keyword\n const _const = 39440; TokenType[TokenType[\"_const\"] = _const] = \"_const\"; // const keyword\n const _while = 39952; TokenType[TokenType[\"_while\"] = _while] = \"_while\"; // while keyword\n const _with = 40464; TokenType[TokenType[\"_with\"] = _with] = \"_with\"; // with keyword\n const _new = 40976; TokenType[TokenType[\"_new\"] = _new] = \"_new\"; // new keyword\n const _this = 41488; TokenType[TokenType[\"_this\"] = _this] = \"_this\"; // this keyword\n const _super = 42000; TokenType[TokenType[\"_super\"] = _super] = \"_super\"; // super keyword\n const _class = 42512; TokenType[TokenType[\"_class\"] = _class] = \"_class\"; // class keyword\n const _extends = 43024; TokenType[TokenType[\"_extends\"] = _extends] = \"_extends\"; // extends keyword\n const _export = 43536; TokenType[TokenType[\"_export\"] = _export] = \"_export\"; // export keyword\n const _import = 44048; TokenType[TokenType[\"_import\"] = _import] = \"_import\"; // import keyword\n const _yield = 44560; TokenType[TokenType[\"_yield\"] = _yield] = \"_yield\"; // yield keyword\n const _null = 45072; TokenType[TokenType[\"_null\"] = _null] = \"_null\"; // null keyword\n const _true = 45584; TokenType[TokenType[\"_true\"] = _true] = \"_true\"; // true keyword\n const _false = 46096; TokenType[TokenType[\"_false\"] = _false] = \"_false\"; // false keyword\n const _in = 46616; TokenType[TokenType[\"_in\"] = _in] = \"_in\"; // in prec:8 keyword\n const _instanceof = 47128; TokenType[TokenType[\"_instanceof\"] = _instanceof] = \"_instanceof\"; // instanceof prec:8 keyword\n const _typeof = 47760; TokenType[TokenType[\"_typeof\"] = _typeof] = \"_typeof\"; // typeof keyword prefix\n const _void = 48272; TokenType[TokenType[\"_void\"] = _void] = \"_void\"; // void keyword prefix\n const _delete = 48784; TokenType[TokenType[\"_delete\"] = _delete] = \"_delete\"; // delete keyword prefix\n const _async = 49168; TokenType[TokenType[\"_async\"] = _async] = \"_async\"; // async keyword\n const _get = 49680; TokenType[TokenType[\"_get\"] = _get] = \"_get\"; // get keyword\n const _set = 50192; TokenType[TokenType[\"_set\"] = _set] = \"_set\"; // set keyword\n const _declare = 50704; TokenType[TokenType[\"_declare\"] = _declare] = \"_declare\"; // declare keyword\n const _readonly = 51216; TokenType[TokenType[\"_readonly\"] = _readonly] = \"_readonly\"; // readonly keyword\n const _abstract = 51728; TokenType[TokenType[\"_abstract\"] = _abstract] = \"_abstract\"; // abstract keyword\n const _static = 52240; TokenType[TokenType[\"_static\"] = _static] = \"_static\"; // static keyword\n const _public = 52752; TokenType[TokenType[\"_public\"] = _public] = \"_public\"; // public keyword\n const _private = 53264; TokenType[TokenType[\"_private\"] = _private] = \"_private\"; // private keyword\n const _protected = 53776; TokenType[TokenType[\"_protected\"] = _protected] = \"_protected\"; // protected keyword\n const _as = 54288; TokenType[TokenType[\"_as\"] = _as] = \"_as\"; // as keyword\n const _enum = 54800; TokenType[TokenType[\"_enum\"] = _enum] = \"_enum\"; // enum keyword\n const _type = 55312; TokenType[TokenType[\"_type\"] = _type] = \"_type\"; // type keyword\n const _implements = 55824; TokenType[TokenType[\"_implements\"] = _implements] = \"_implements\"; // implements keyword\n})(TokenType || (exports.TokenType = TokenType = {}));\n function formatTokenType(tokenType) {\n switch (tokenType) {\n case TokenType.num:\n return \"num\";\n case TokenType.bigint:\n return \"bigint\";\n case TokenType.decimal:\n return \"decimal\";\n case TokenType.regexp:\n return \"regexp\";\n case TokenType.string:\n return \"string\";\n case TokenType.name:\n return \"name\";\n case TokenType.eof:\n return \"eof\";\n case TokenType.bracketL:\n return \"[\";\n case TokenType.bracketR:\n return \"]\";\n case TokenType.braceL:\n return \"{\";\n case TokenType.braceBarL:\n return \"{|\";\n case TokenType.braceR:\n return \"}\";\n case TokenType.braceBarR:\n return \"|}\";\n case TokenType.parenL:\n return \"(\";\n case TokenType.parenR:\n return \")\";\n case TokenType.comma:\n return \",\";\n case TokenType.semi:\n return \";\";\n case TokenType.colon:\n return \":\";\n case TokenType.doubleColon:\n return \"::\";\n case TokenType.dot:\n return \".\";\n case TokenType.question:\n return \"?\";\n case TokenType.questionDot:\n return \"?.\";\n case TokenType.arrow:\n return \"=>\";\n case TokenType.template:\n return \"template\";\n case TokenType.ellipsis:\n return \"...\";\n case TokenType.backQuote:\n return \"`\";\n case TokenType.dollarBraceL:\n return \"${\";\n case TokenType.at:\n return \"@\";\n case TokenType.hash:\n return \"#\";\n case TokenType.eq:\n return \"=\";\n case TokenType.assign:\n return \"_=\";\n case TokenType.preIncDec:\n return \"++/--\";\n case TokenType.postIncDec:\n return \"++/--\";\n case TokenType.bang:\n return \"!\";\n case TokenType.tilde:\n return \"~\";\n case TokenType.pipeline:\n return \"|>\";\n case TokenType.nullishCoalescing:\n return \"??\";\n case TokenType.logicalOR:\n return \"||\";\n case TokenType.logicalAND:\n return \"&&\";\n case TokenType.bitwiseOR:\n return \"|\";\n case TokenType.bitwiseXOR:\n return \"^\";\n case TokenType.bitwiseAND:\n return \"&\";\n case TokenType.equality:\n return \"==/!=\";\n case TokenType.lessThan:\n return \"<\";\n case TokenType.greaterThan:\n return \">\";\n case TokenType.relationalOrEqual:\n return \"<=/>=\";\n case TokenType.bitShift:\n return \"<</>>\";\n case TokenType.plus:\n return \"+\";\n case TokenType.minus:\n return \"-\";\n case TokenType.modulo:\n return \"%\";\n case TokenType.star:\n return \"*\";\n case TokenType.slash:\n return \"/\";\n case TokenType.exponent:\n return \"**\";\n case TokenType.jsxName:\n return \"jsxName\";\n case TokenType.jsxText:\n return \"jsxText\";\n case TokenType.jsxTagStart:\n return \"jsxTagStart\";\n case TokenType.jsxTagEnd:\n return \"jsxTagEnd\";\n case TokenType.typeParameterStart:\n return \"typeParameterStart\";\n case TokenType.nonNullAssertion:\n return \"nonNullAssertion\";\n case TokenType._break:\n return \"break\";\n case TokenType._case:\n return \"case\";\n case TokenType._catch:\n return \"catch\";\n case TokenType._continue:\n return \"continue\";\n case TokenType._debugger:\n return \"debugger\";\n case TokenType._default:\n return \"default\";\n case TokenType._do:\n return \"do\";\n case TokenType._else:\n return \"else\";\n case TokenType._finally:\n return \"finally\";\n case TokenType._for:\n return \"for\";\n case TokenType._function:\n return \"function\";\n case TokenType._if:\n return \"if\";\n case TokenType._return:\n return \"return\";\n case TokenType._switch:\n return \"switch\";\n case TokenType._throw:\n return \"throw\";\n case TokenType._try:\n return \"try\";\n case TokenType._var:\n return \"var\";\n case TokenType._let:\n return \"let\";\n case TokenType._const:\n return \"const\";\n case TokenType._while:\n return \"while\";\n case TokenType._with:\n return \"with\";\n case TokenType._new:\n return \"new\";\n case TokenType._this:\n return \"this\";\n case TokenType._super:\n return \"super\";\n case TokenType._class:\n return \"class\";\n case TokenType._extends:\n return \"extends\";\n case TokenType._export:\n return \"export\";\n case TokenType._import:\n return \"import\";\n case TokenType._yield:\n return \"yield\";\n case TokenType._null:\n return \"null\";\n case TokenType._true:\n return \"true\";\n case TokenType._false:\n return \"false\";\n case TokenType._in:\n return \"in\";\n case TokenType._instanceof:\n return \"instanceof\";\n case TokenType._typeof:\n return \"typeof\";\n case TokenType._void:\n return \"void\";\n case TokenType._delete:\n return \"delete\";\n case TokenType._async:\n return \"async\";\n case TokenType._get:\n return \"get\";\n case TokenType._set:\n return \"set\";\n case TokenType._declare:\n return \"declare\";\n case TokenType._readonly:\n return \"readonly\";\n case TokenType._abstract:\n return \"abstract\";\n case TokenType._static:\n return \"static\";\n case TokenType._public:\n return \"public\";\n case TokenType._private:\n return \"private\";\n case TokenType._protected:\n return \"protected\";\n case TokenType._as:\n return \"as\";\n case TokenType._enum:\n return \"enum\";\n case TokenType._type:\n return \"type\";\n case TokenType._implements:\n return \"implements\";\n default:\n return \"\";\n }\n} exports.formatTokenType = formatTokenType;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _state = require('../tokenizer/state'); var _state2 = _interopRequireDefault(_state);\nvar _charcodes = require('../util/charcodes');\n\n exports.isJSXEnabled;\n exports.isTypeScriptEnabled;\n exports.isFlowEnabled;\n exports.state;\n exports.input;\n exports.nextContextId;\n\n function getNextContextId() {\n return exports.nextContextId++;\n} exports.getNextContextId = getNextContextId;\n\n// tslint:disable-next-line no-any\n function augmentError(error) {\n if (\"pos\" in error) {\n const loc = locationForIndex(error.pos);\n error.message += ` (${loc.line}:${loc.column})`;\n error.loc = loc;\n }\n return error;\n} exports.augmentError = augmentError;\n\n class Loc {\n \n \n constructor(line, column) {\n this.line = line;\n this.column = column;\n }\n} exports.Loc = Loc;\n\n function locationForIndex(pos) {\n let line = 1;\n let column = 1;\n for (let i = 0; i < pos; i++) {\n if (exports.input.charCodeAt(i) === _charcodes.charCodes.lineFeed) {\n line++;\n column = 1;\n } else {\n column++;\n }\n }\n return new Loc(line, column);\n} exports.locationForIndex = locationForIndex;\n\n function initParser(\n inputCode,\n isJSXEnabledArg,\n isTypeScriptEnabledArg,\n isFlowEnabledArg,\n) {\n exports.input = inputCode;\n exports.state = new (0, _state2.default)();\n exports.nextContextId = 1;\n exports.isJSXEnabled = isJSXEnabledArg;\n exports.isTypeScriptEnabled = isTypeScriptEnabledArg;\n exports.isFlowEnabled = isFlowEnabledArg;\n} exports.initParser = initParser;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});/* eslint max-len: 0 */\n\n// A recursive descent parser operates by defining functions for all\n// syntactic elements, and recursively calling those, each function\n// advancing the input stream and returning an AST node. Precedence\n// of constructs (for example, the fact that `!x[1]` means `!(x[1])`\n// instead of `(!x)[1]` is handled by the fact that the parser\n// function that parses unary prefix operators is called first, and\n// in turn calls the function that parses `[]` subscripts — that\n// way, it'll receive the node for `x[1]` already parsed, and wraps\n// *that* in the unary operator node.\n//\n// Acorn uses an [operator precedence parser][opp] to handle binary\n// operator precedence, because it is much more compact than using\n// the technique outlined above, which uses different, nesting\n// functions to specify precedence, for all of the ten binary\n// precedence levels that JavaScript defines.\n//\n// [opp]: http://en.wikipedia.org/wiki/Operator-precedence_parser\n\n\n\n\n\n\n\n\n\n\n\nvar _flow = require('../plugins/flow');\nvar _index = require('../plugins/jsx/index');\nvar _types = require('../plugins/types');\n\n\n\n\n\n\n\n\n\n\nvar _typescript = require('../plugins/typescript');\n\n\n\n\n\n\n\n\n\n\n\nvar _index3 = require('../tokenizer/index');\nvar _keywords = require('../tokenizer/keywords');\nvar _state = require('../tokenizer/state');\nvar _types3 = require('../tokenizer/types');\nvar _charcodes = require('../util/charcodes');\nvar _identifier = require('../util/identifier');\nvar _base = require('./base');\n\n\n\n\n\n\nvar _lval = require('./lval');\n\n\n\n\n\n\nvar _statement = require('./statement');\n\n\n\n\n\n\n\nvar _util = require('./util');\n\n class StopState {\n \n constructor(stop) {\n this.stop = stop;\n }\n} exports.StopState = StopState;\n\n// ### Expression parsing\n\n// These nest, from the most general expression type at the top to\n// 'atomic', nondivisible expression types at the bottom. Most of\n// the functions will simply let the function (s) below them parse,\n// and, *if* the syntactic construct they handle is present, wrap\n// the AST node that the inner parser gave them in another node.\n function parseExpression(noIn = false) {\n parseMaybeAssign(noIn);\n if (_index3.match.call(void 0, _types3.TokenType.comma)) {\n while (_index3.eat.call(void 0, _types3.TokenType.comma)) {\n parseMaybeAssign(noIn);\n }\n }\n} exports.parseExpression = parseExpression;\n\n/**\n * noIn is used when parsing a for loop so that we don't interpret a following \"in\" as the binary\n * operatior.\n * isWithinParens is used to indicate that we're parsing something that might be a comma expression\n * or might be an arrow function or might be a Flow type assertion (which requires explicit parens).\n * In these cases, we should allow : and ?: after the initial \"left\" part.\n */\n function parseMaybeAssign(noIn = false, isWithinParens = false) {\n if (_base.isTypeScriptEnabled) {\n return _typescript.tsParseMaybeAssign.call(void 0, noIn, isWithinParens);\n } else if (_base.isFlowEnabled) {\n return _flow.flowParseMaybeAssign.call(void 0, noIn, isWithinParens);\n } else {\n return baseParseMaybeAssign(noIn, isWithinParens);\n }\n} exports.parseMaybeAssign = parseMaybeAssign;\n\n// Parse an assignment expression. This includes applications of\n// operators like `+=`.\n// Returns true if the expression was an arrow function.\n function baseParseMaybeAssign(noIn, isWithinParens) {\n if (_index3.match.call(void 0, _types3.TokenType._yield)) {\n parseYield();\n return false;\n }\n\n if (_index3.match.call(void 0, _types3.TokenType.parenL) || _index3.match.call(void 0, _types3.TokenType.name) || _index3.match.call(void 0, _types3.TokenType._yield)) {\n _base.state.potentialArrowAt = _base.state.start;\n }\n\n const wasArrow = parseMaybeConditional(noIn);\n if (isWithinParens) {\n parseParenItem();\n }\n if (_base.state.type & _types3.TokenType.IS_ASSIGN) {\n _index3.next.call(void 0, );\n parseMaybeAssign(noIn);\n return false;\n }\n return wasArrow;\n} exports.baseParseMaybeAssign = baseParseMaybeAssign;\n\n// Parse a ternary conditional (`?:`) operator.\n// Returns true if the expression was an arrow function.\nfunction parseMaybeConditional(noIn) {\n const wasArrow = parseExprOps(noIn);\n if (wasArrow) {\n return true;\n }\n parseConditional(noIn);\n return false;\n}\n\nfunction parseConditional(noIn) {\n if (_base.isTypeScriptEnabled || _base.isFlowEnabled) {\n _types.typedParseConditional.call(void 0, noIn);\n } else {\n baseParseConditional(noIn);\n }\n}\n\n function baseParseConditional(noIn) {\n if (_index3.eat.call(void 0, _types3.TokenType.question)) {\n parseMaybeAssign();\n _util.expect.call(void 0, _types3.TokenType.colon);\n parseMaybeAssign(noIn);\n }\n} exports.baseParseConditional = baseParseConditional;\n\n// Start the precedence parser.\n// Returns true if this was an arrow function\nfunction parseExprOps(noIn) {\n const startTokenIndex = _base.state.tokens.length;\n const wasArrow = parseMaybeUnary();\n if (wasArrow) {\n return true;\n }\n parseExprOp(startTokenIndex, -1, noIn);\n return false;\n}\n\n// Parse binary operators with the operator precedence parsing\n// algorithm. `left` is the left-hand side of the operator.\n// `minPrec` provides context that allows the function to stop and\n// defer further parser to one of its callers when it encounters an\n// operator that has a lower precedence than the set it is parsing.\nfunction parseExprOp(startTokenIndex, minPrec, noIn) {\n if (\n _base.isTypeScriptEnabled &&\n (_types3.TokenType._in & _types3.TokenType.PRECEDENCE_MASK) > minPrec &&\n !_util.hasPrecedingLineBreak.call(void 0, ) &&\n _util.eatContextual.call(void 0, _keywords.ContextualKeyword._as)\n ) {\n _base.state.tokens[_base.state.tokens.length - 1].type = _types3.TokenType._as;\n const oldIsType = _index3.pushTypeContext.call(void 0, 1);\n _typescript.tsParseType.call(void 0, );\n _index3.popTypeContext.call(void 0, oldIsType);\n parseExprOp(startTokenIndex, minPrec, noIn);\n return;\n }\n\n const prec = _base.state.type & _types3.TokenType.PRECEDENCE_MASK;\n if (prec > 0 && (!noIn || !_index3.match.call(void 0, _types3.TokenType._in))) {\n if (prec > minPrec) {\n const op = _base.state.type;\n _index3.next.call(void 0, );\n if (op === _types3.TokenType.nullishCoalescing) {\n _base.state.tokens[_base.state.tokens.length - 1].nullishStartIndex = startTokenIndex;\n }\n\n const rhsStartTokenIndex = _base.state.tokens.length;\n parseMaybeUnary();\n // Extend the right operand of this operator if possible.\n parseExprOp(rhsStartTokenIndex, op & _types3.TokenType.IS_RIGHT_ASSOCIATIVE ? prec - 1 : prec, noIn);\n if (op === _types3.TokenType.nullishCoalescing) {\n _base.state.tokens[startTokenIndex].numNullishCoalesceStarts++;\n _base.state.tokens[_base.state.tokens.length - 1].numNullishCoalesceEnds++;\n }\n // Continue with any future operator holding this expression as the left operand.\n parseExprOp(startTokenIndex, minPrec, noIn);\n }\n }\n}\n\n// Parse unary operators, both prefix and postfix.\n// Returns true if this was an arrow function.\n function parseMaybeUnary() {\n if (_base.isTypeScriptEnabled && !_base.isJSXEnabled && _index3.eat.call(void 0, _types3.TokenType.lessThan)) {\n _typescript.tsParseTypeAssertion.call(void 0, );\n return false;\n }\n\n if (_base.state.type & _types3.TokenType.IS_PREFIX) {\n _index3.next.call(void 0, );\n parseMaybeUnary();\n return false;\n }\n\n const wasArrow = parseExprSubscripts();\n if (wasArrow) {\n return true;\n }\n while (_base.state.type & _types3.TokenType.IS_POSTFIX && !_util.canInsertSemicolon.call(void 0, )) {\n // The tokenizer calls everything a preincrement, so make it a postincrement when\n // we see it in that context.\n if (_base.state.type === _types3.TokenType.preIncDec) {\n _base.state.type = _types3.TokenType.postIncDec;\n }\n _index3.next.call(void 0, );\n }\n return false;\n} exports.parseMaybeUnary = parseMaybeUnary;\n\n// Parse call, dot, and `[]`-subscript expressions.\n// Returns true if this was an arrow function.\n function parseExprSubscripts() {\n const startTokenIndex = _base.state.tokens.length;\n const wasArrow = parseExprAtom();\n if (wasArrow) {\n return true;\n }\n parseSubscripts(startTokenIndex);\n // If there was any optional chain operation, the start token would be marked\n // as such, so also mark the end now.\n if (_base.state.tokens.length > startTokenIndex && _base.state.tokens[startTokenIndex].isOptionalChainStart) {\n _base.state.tokens[_base.state.tokens.length - 1].isOptionalChainEnd = true;\n }\n return false;\n} exports.parseExprSubscripts = parseExprSubscripts;\n\nfunction parseSubscripts(startTokenIndex, noCalls = false) {\n if (_base.isFlowEnabled) {\n _flow.flowParseSubscripts.call(void 0, startTokenIndex, noCalls);\n } else {\n baseParseSubscripts(startTokenIndex, noCalls);\n }\n}\n\n function baseParseSubscripts(startTokenIndex, noCalls = false) {\n const stopState = new StopState(false);\n do {\n parseSubscript(startTokenIndex, noCalls, stopState);\n } while (!stopState.stop && !_base.state.error);\n} exports.baseParseSubscripts = baseParseSubscripts;\n\nfunction parseSubscript(startTokenIndex, noCalls, stopState) {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsParseSubscript.call(void 0, startTokenIndex, noCalls, stopState);\n } else if (_base.isFlowEnabled) {\n _flow.flowParseSubscript.call(void 0, startTokenIndex, noCalls, stopState);\n } else {\n baseParseSubscript(startTokenIndex, noCalls, stopState);\n }\n}\n\n/** Set 'state.stop = true' to indicate that we should stop parsing subscripts. */\n function baseParseSubscript(\n startTokenIndex,\n noCalls,\n stopState,\n) {\n if (!noCalls && _index3.eat.call(void 0, _types3.TokenType.doubleColon)) {\n parseNoCallExpr();\n stopState.stop = true;\n // Propagate startTokenIndex so that `a::b?.()` will keep `a` as the first token. We may want\n // to revisit this in the future when fully supporting bind syntax.\n parseSubscripts(startTokenIndex, noCalls);\n } else if (_index3.match.call(void 0, _types3.TokenType.questionDot)) {\n _base.state.tokens[startTokenIndex].isOptionalChainStart = true;\n if (noCalls && _index3.lookaheadType.call(void 0, ) === _types3.TokenType.parenL) {\n stopState.stop = true;\n return;\n }\n _index3.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].subscriptStartIndex = startTokenIndex;\n\n if (_index3.eat.call(void 0, _types3.TokenType.bracketL)) {\n parseExpression();\n _util.expect.call(void 0, _types3.TokenType.bracketR);\n } else if (_index3.eat.call(void 0, _types3.TokenType.parenL)) {\n parseCallExpressionArguments();\n } else {\n parseMaybePrivateName();\n }\n } else if (_index3.eat.call(void 0, _types3.TokenType.dot)) {\n _base.state.tokens[_base.state.tokens.length - 1].subscriptStartIndex = startTokenIndex;\n parseMaybePrivateName();\n } else if (_index3.eat.call(void 0, _types3.TokenType.bracketL)) {\n _base.state.tokens[_base.state.tokens.length - 1].subscriptStartIndex = startTokenIndex;\n parseExpression();\n _util.expect.call(void 0, _types3.TokenType.bracketR);\n } else if (!noCalls && _index3.match.call(void 0, _types3.TokenType.parenL)) {\n if (atPossibleAsync()) {\n // We see \"async\", but it's possible it's a usage of the name \"async\". Parse as if it's a\n // function call, and if we see an arrow later, backtrack and re-parse as a parameter list.\n const snapshot = _base.state.snapshot();\n const asyncStartTokenIndex = _base.state.tokens.length;\n _index3.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].subscriptStartIndex = startTokenIndex;\n\n const callContextId = _base.getNextContextId.call(void 0, );\n\n _base.state.tokens[_base.state.tokens.length - 1].contextId = callContextId;\n parseCallExpressionArguments();\n _base.state.tokens[_base.state.tokens.length - 1].contextId = callContextId;\n\n if (shouldParseAsyncArrow()) {\n // We hit an arrow, so backtrack and start again parsing function parameters.\n _base.state.restoreFromSnapshot(snapshot);\n stopState.stop = true;\n _base.state.scopeDepth++;\n\n _statement.parseFunctionParams.call(void 0, );\n parseAsyncArrowFromCallExpression(asyncStartTokenIndex);\n }\n } else {\n _index3.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].subscriptStartIndex = startTokenIndex;\n const callContextId = _base.getNextContextId.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].contextId = callContextId;\n parseCallExpressionArguments();\n _base.state.tokens[_base.state.tokens.length - 1].contextId = callContextId;\n }\n } else if (_index3.match.call(void 0, _types3.TokenType.backQuote)) {\n // Tagged template expression.\n parseTemplate();\n } else {\n stopState.stop = true;\n }\n} exports.baseParseSubscript = baseParseSubscript;\n\n function atPossibleAsync() {\n // This was made less strict than the original version to avoid passing around nodes, but it\n // should be safe to have rare false positives here.\n return (\n _base.state.tokens[_base.state.tokens.length - 1].contextualKeyword === _keywords.ContextualKeyword._async &&\n !_util.canInsertSemicolon.call(void 0, )\n );\n} exports.atPossibleAsync = atPossibleAsync;\n\n function parseCallExpressionArguments() {\n let first = true;\n while (!_index3.eat.call(void 0, _types3.TokenType.parenR) && !_base.state.error) {\n if (first) {\n first = false;\n } else {\n _util.expect.call(void 0, _types3.TokenType.comma);\n if (_index3.eat.call(void 0, _types3.TokenType.parenR)) {\n break;\n }\n }\n\n parseExprListItem(false);\n }\n} exports.parseCallExpressionArguments = parseCallExpressionArguments;\n\nfunction shouldParseAsyncArrow() {\n return _index3.match.call(void 0, _types3.TokenType.colon) || _index3.match.call(void 0, _types3.TokenType.arrow);\n}\n\nfunction parseAsyncArrowFromCallExpression(startTokenIndex) {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsStartParseAsyncArrowFromCallExpression.call(void 0, );\n } else if (_base.isFlowEnabled) {\n _flow.flowStartParseAsyncArrowFromCallExpression.call(void 0, );\n }\n _util.expect.call(void 0, _types3.TokenType.arrow);\n parseArrowExpression(startTokenIndex);\n}\n\n// Parse a no-call expression (like argument of `new` or `::` operators).\n\nfunction parseNoCallExpr() {\n const startTokenIndex = _base.state.tokens.length;\n parseExprAtom();\n parseSubscripts(startTokenIndex, true);\n}\n\n// Parse an atomic expression — either a single token that is an\n// expression, an expression started by a keyword like `function` or\n// `new`, or an expression wrapped in punctuation like `()`, `[]`,\n// or `{}`.\n// Returns true if the parsed expression was an arrow function.\n function parseExprAtom() {\n if (_index3.eat.call(void 0, _types3.TokenType.modulo)) {\n // V8 intrinsic expression. Just parse the identifier, and the function invocation is parsed\n // naturally.\n parseIdentifier();\n return false;\n }\n\n if (_index3.match.call(void 0, _types3.TokenType.jsxText)) {\n parseLiteral();\n return false;\n } else if (_index3.match.call(void 0, _types3.TokenType.lessThan) && _base.isJSXEnabled) {\n _base.state.type = _types3.TokenType.jsxTagStart;\n _index.jsxParseElement.call(void 0, );\n _index3.next.call(void 0, );\n return false;\n }\n\n const canBeArrow = _base.state.potentialArrowAt === _base.state.start;\n switch (_base.state.type) {\n case _types3.TokenType.slash:\n case _types3.TokenType.assign:\n _index3.retokenizeSlashAsRegex.call(void 0, );\n // Fall through.\n\n case _types3.TokenType._super:\n case _types3.TokenType._this:\n case _types3.TokenType.regexp:\n case _types3.TokenType.num:\n case _types3.TokenType.bigint:\n case _types3.TokenType.decimal:\n case _types3.TokenType.string:\n case _types3.TokenType._null:\n case _types3.TokenType._true:\n case _types3.TokenType._false:\n _index3.next.call(void 0, );\n return false;\n\n case _types3.TokenType._import:\n _index3.next.call(void 0, );\n if (_index3.match.call(void 0, _types3.TokenType.dot)) {\n // import.meta\n _base.state.tokens[_base.state.tokens.length - 1].type = _types3.TokenType.name;\n _index3.next.call(void 0, );\n parseIdentifier();\n }\n return false;\n\n case _types3.TokenType.name: {\n const startTokenIndex = _base.state.tokens.length;\n const functionStart = _base.state.start;\n const contextualKeyword = _base.state.contextualKeyword;\n parseIdentifier();\n if (contextualKeyword === _keywords.ContextualKeyword._await) {\n parseAwait();\n return false;\n } else if (\n contextualKeyword === _keywords.ContextualKeyword._async &&\n _index3.match.call(void 0, _types3.TokenType._function) &&\n !_util.canInsertSemicolon.call(void 0, )\n ) {\n _index3.next.call(void 0, );\n _statement.parseFunction.call(void 0, functionStart, false);\n return false;\n } else if (\n canBeArrow &&\n !_util.canInsertSemicolon.call(void 0, ) &&\n contextualKeyword === _keywords.ContextualKeyword._async &&\n _index3.match.call(void 0, _types3.TokenType.name)\n ) {\n _base.state.scopeDepth++;\n _lval.parseBindingIdentifier.call(void 0, false);\n _util.expect.call(void 0, _types3.TokenType.arrow);\n // let foo = async bar => {};\n parseArrowExpression(startTokenIndex);\n return true;\n }\n\n if (canBeArrow && !_util.canInsertSemicolon.call(void 0, ) && _index3.match.call(void 0, _types3.TokenType.arrow)) {\n _base.state.scopeDepth++;\n _lval.markPriorBindingIdentifier.call(void 0, false);\n _util.expect.call(void 0, _types3.TokenType.arrow);\n parseArrowExpression(startTokenIndex);\n return true;\n }\n\n _base.state.tokens[_base.state.tokens.length - 1].identifierRole = _index3.IdentifierRole.Access;\n return false;\n }\n\n case _types3.TokenType._do: {\n _index3.next.call(void 0, );\n _statement.parseBlock.call(void 0, );\n return false;\n }\n\n case _types3.TokenType.parenL: {\n const wasArrow = parseParenAndDistinguishExpression(canBeArrow);\n return wasArrow;\n }\n\n case _types3.TokenType.bracketL:\n _index3.next.call(void 0, );\n parseExprList(_types3.TokenType.bracketR, true);\n return false;\n\n case _types3.TokenType.braceL:\n parseObj(false, false);\n return false;\n\n case _types3.TokenType._function:\n parseFunctionExpression();\n return false;\n\n case _types3.TokenType.at:\n _statement.parseDecorators.call(void 0, );\n // Fall through.\n\n case _types3.TokenType._class:\n _statement.parseClass.call(void 0, false);\n return false;\n\n case _types3.TokenType._new:\n parseNew();\n return false;\n\n case _types3.TokenType.backQuote:\n parseTemplate();\n return false;\n\n case _types3.TokenType.doubleColon: {\n _index3.next.call(void 0, );\n parseNoCallExpr();\n return false;\n }\n\n case _types3.TokenType.hash: {\n const code = _index3.lookaheadCharCode.call(void 0, );\n if (_identifier.IS_IDENTIFIER_START[code] || code === _charcodes.charCodes.backslash) {\n parseMaybePrivateName();\n } else {\n _index3.next.call(void 0, );\n }\n // Smart pipeline topic reference.\n return false;\n }\n\n default:\n _util.unexpected.call(void 0, );\n return false;\n }\n} exports.parseExprAtom = parseExprAtom;\n\nfunction parseMaybePrivateName() {\n _index3.eat.call(void 0, _types3.TokenType.hash);\n parseIdentifier();\n}\n\nfunction parseFunctionExpression() {\n const functionStart = _base.state.start;\n parseIdentifier();\n if (_index3.eat.call(void 0, _types3.TokenType.dot)) {\n // function.sent\n parseIdentifier();\n }\n _statement.parseFunction.call(void 0, functionStart, false);\n}\n\n function parseLiteral() {\n _index3.next.call(void 0, );\n} exports.parseLiteral = parseLiteral;\n\n function parseParenExpression() {\n _util.expect.call(void 0, _types3.TokenType.parenL);\n parseExpression();\n _util.expect.call(void 0, _types3.TokenType.parenR);\n} exports.parseParenExpression = parseParenExpression;\n\n// Returns true if this was an arrow expression.\nfunction parseParenAndDistinguishExpression(canBeArrow) {\n // Assume this is a normal parenthesized expression, but if we see an arrow, we'll bail and\n // start over as a parameter list.\n const snapshot = _base.state.snapshot();\n\n const startTokenIndex = _base.state.tokens.length;\n _util.expect.call(void 0, _types3.TokenType.parenL);\n\n let first = true;\n\n while (!_index3.match.call(void 0, _types3.TokenType.parenR) && !_base.state.error) {\n if (first) {\n first = false;\n } else {\n _util.expect.call(void 0, _types3.TokenType.comma);\n if (_index3.match.call(void 0, _types3.TokenType.parenR)) {\n break;\n }\n }\n\n if (_index3.match.call(void 0, _types3.TokenType.ellipsis)) {\n _lval.parseRest.call(void 0, false /* isBlockScope */);\n parseParenItem();\n break;\n } else {\n parseMaybeAssign(false, true);\n }\n }\n\n _util.expect.call(void 0, _types3.TokenType.parenR);\n\n if (canBeArrow && shouldParseArrow()) {\n const wasArrow = parseArrow();\n if (wasArrow) {\n // It was an arrow function this whole time, so start over and parse it as params so that we\n // get proper token annotations.\n _base.state.restoreFromSnapshot(snapshot);\n _base.state.scopeDepth++;\n // Don't specify a context ID because arrow functions don't need a context ID.\n _statement.parseFunctionParams.call(void 0, );\n parseArrow();\n parseArrowExpression(startTokenIndex);\n return true;\n }\n }\n\n return false;\n}\n\nfunction shouldParseArrow() {\n return _index3.match.call(void 0, _types3.TokenType.colon) || !_util.canInsertSemicolon.call(void 0, );\n}\n\n// Returns whether there was an arrow token.\n function parseArrow() {\n if (_base.isTypeScriptEnabled) {\n return _typescript.tsParseArrow.call(void 0, );\n } else if (_base.isFlowEnabled) {\n return _flow.flowParseArrow.call(void 0, );\n } else {\n return _index3.eat.call(void 0, _types3.TokenType.arrow);\n }\n} exports.parseArrow = parseArrow;\n\nfunction parseParenItem() {\n if (_base.isTypeScriptEnabled || _base.isFlowEnabled) {\n _types.typedParseParenItem.call(void 0, );\n }\n}\n\n// New's precedence is slightly tricky. It must allow its argument to\n// be a `[]` or dot subscript expression, but not a call — at least,\n// not without wrapping it in parentheses. Thus, it uses the noCalls\n// argument to parseSubscripts to prevent it from consuming the\n// argument list.\nfunction parseNew() {\n _util.expect.call(void 0, _types3.TokenType._new);\n if (_index3.eat.call(void 0, _types3.TokenType.dot)) {\n // new.target\n parseIdentifier();\n return;\n }\n parseNoCallExpr();\n _index3.eat.call(void 0, _types3.TokenType.questionDot);\n parseNewArguments();\n}\n\nfunction parseNewArguments() {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsStartParseNewArguments.call(void 0, );\n } else if (_base.isFlowEnabled) {\n _flow.flowStartParseNewArguments.call(void 0, );\n }\n if (_index3.eat.call(void 0, _types3.TokenType.parenL)) {\n parseExprList(_types3.TokenType.parenR);\n }\n}\n\n function parseTemplate() {\n // Finish `, read quasi\n _index3.nextTemplateToken.call(void 0, );\n // Finish quasi, read ${\n _index3.nextTemplateToken.call(void 0, );\n while (!_index3.match.call(void 0, _types3.TokenType.backQuote) && !_base.state.error) {\n _util.expect.call(void 0, _types3.TokenType.dollarBraceL);\n parseExpression();\n // Finish }, read quasi\n _index3.nextTemplateToken.call(void 0, );\n // Finish quasi, read either ${ or `\n _index3.nextTemplateToken.call(void 0, );\n }\n _index3.next.call(void 0, );\n} exports.parseTemplate = parseTemplate;\n\n// Parse an object literal or binding pattern.\n function parseObj(isPattern, isBlockScope) {\n // Attach a context ID to the object open and close brace and each object key.\n const contextId = _base.getNextContextId.call(void 0, );\n let first = true;\n\n _index3.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].contextId = contextId;\n\n while (!_index3.eat.call(void 0, _types3.TokenType.braceR) && !_base.state.error) {\n if (first) {\n first = false;\n } else {\n _util.expect.call(void 0, _types3.TokenType.comma);\n if (_index3.eat.call(void 0, _types3.TokenType.braceR)) {\n break;\n }\n }\n\n let isGenerator = false;\n if (_index3.match.call(void 0, _types3.TokenType.ellipsis)) {\n const previousIndex = _base.state.tokens.length;\n _lval.parseSpread.call(void 0, );\n if (isPattern) {\n // Mark role when the only thing being spread over is an identifier.\n if (_base.state.tokens.length === previousIndex + 2) {\n _lval.markPriorBindingIdentifier.call(void 0, isBlockScope);\n }\n if (_index3.eat.call(void 0, _types3.TokenType.braceR)) {\n break;\n }\n }\n continue;\n }\n\n if (!isPattern) {\n isGenerator = _index3.eat.call(void 0, _types3.TokenType.star);\n }\n\n if (!isPattern && _util.isContextual.call(void 0, _keywords.ContextualKeyword._async)) {\n if (isGenerator) _util.unexpected.call(void 0, );\n\n parseIdentifier();\n if (\n _index3.match.call(void 0, _types3.TokenType.colon) ||\n _index3.match.call(void 0, _types3.TokenType.parenL) ||\n _index3.match.call(void 0, _types3.TokenType.braceR) ||\n _index3.match.call(void 0, _types3.TokenType.eq) ||\n _index3.match.call(void 0, _types3.TokenType.comma)\n ) {\n // This is a key called \"async\" rather than an async function.\n } else {\n if (_index3.match.call(void 0, _types3.TokenType.star)) {\n _index3.next.call(void 0, );\n isGenerator = true;\n }\n parsePropertyName(contextId);\n }\n } else {\n parsePropertyName(contextId);\n }\n\n parseObjPropValue(isPattern, isBlockScope, contextId);\n }\n\n _base.state.tokens[_base.state.tokens.length - 1].contextId = contextId;\n} exports.parseObj = parseObj;\n\nfunction isGetterOrSetterMethod(isPattern) {\n // We go off of the next and don't bother checking if the node key is actually \"get\" or \"set\".\n // This lets us avoid generating a node, and should only make the validation worse.\n return (\n !isPattern &&\n (_index3.match.call(void 0, _types3.TokenType.string) || // get \"string\"() {}\n _index3.match.call(void 0, _types3.TokenType.num) || // get 1() {}\n _index3.match.call(void 0, _types3.TokenType.bracketL) || // get [\"string\"]() {}\n _index3.match.call(void 0, _types3.TokenType.name) || // get foo() {}\n !!(_base.state.type & _types3.TokenType.IS_KEYWORD)) // get debugger() {}\n );\n}\n\n// Returns true if this was a method.\nfunction parseObjectMethod(isPattern, objectContextId) {\n // We don't need to worry about modifiers because object methods can't have optional bodies, so\n // the start will never be used.\n const functionStart = _base.state.start;\n if (_index3.match.call(void 0, _types3.TokenType.parenL)) {\n if (isPattern) _util.unexpected.call(void 0, );\n parseMethod(functionStart, /* isConstructor */ false);\n return true;\n }\n\n if (isGetterOrSetterMethod(isPattern)) {\n parsePropertyName(objectContextId);\n parseMethod(functionStart, /* isConstructor */ false);\n return true;\n }\n return false;\n}\n\nfunction parseObjectProperty(isPattern, isBlockScope) {\n if (_index3.eat.call(void 0, _types3.TokenType.colon)) {\n if (isPattern) {\n _lval.parseMaybeDefault.call(void 0, isBlockScope);\n } else {\n parseMaybeAssign(false);\n }\n return;\n }\n\n // Since there's no colon, we assume this is an object shorthand.\n\n // If we're in a destructuring, we've now discovered that the key was actually an assignee, so\n // we need to tag it as a declaration with the appropriate scope. Otherwise, we might need to\n // transform it on access, so mark it as a normal object shorthand.\n let identifierRole;\n if (isPattern) {\n if (_base.state.scopeDepth === 0) {\n identifierRole = _index3.IdentifierRole.ObjectShorthandTopLevelDeclaration;\n } else if (isBlockScope) {\n identifierRole = _index3.IdentifierRole.ObjectShorthandBlockScopedDeclaration;\n } else {\n identifierRole = _index3.IdentifierRole.ObjectShorthandFunctionScopedDeclaration;\n }\n } else {\n identifierRole = _index3.IdentifierRole.ObjectShorthand;\n }\n _base.state.tokens[_base.state.tokens.length - 1].identifierRole = identifierRole;\n\n // Regardless of whether we know this to be a pattern or if we're in an ambiguous context, allow\n // parsing as if there's a default value.\n _lval.parseMaybeDefault.call(void 0, isBlockScope, true);\n}\n\nfunction parseObjPropValue(\n isPattern,\n isBlockScope,\n objectContextId,\n) {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsStartParseObjPropValue.call(void 0, );\n } else if (_base.isFlowEnabled) {\n _flow.flowStartParseObjPropValue.call(void 0, );\n }\n const wasMethod = parseObjectMethod(isPattern, objectContextId);\n if (!wasMethod) {\n parseObjectProperty(isPattern, isBlockScope);\n }\n}\n\n function parsePropertyName(objectContextId) {\n if (_base.isFlowEnabled) {\n _flow.flowParseVariance.call(void 0, );\n }\n if (_index3.eat.call(void 0, _types3.TokenType.bracketL)) {\n _base.state.tokens[_base.state.tokens.length - 1].contextId = objectContextId;\n parseMaybeAssign();\n _util.expect.call(void 0, _types3.TokenType.bracketR);\n _base.state.tokens[_base.state.tokens.length - 1].contextId = objectContextId;\n } else {\n if (_index3.match.call(void 0, _types3.TokenType.num) || _index3.match.call(void 0, _types3.TokenType.string) || _index3.match.call(void 0, _types3.TokenType.bigint) || _index3.match.call(void 0, _types3.TokenType.decimal)) {\n parseExprAtom();\n } else {\n parseMaybePrivateName();\n }\n\n _base.state.tokens[_base.state.tokens.length - 1].identifierRole = _index3.IdentifierRole.ObjectKey;\n _base.state.tokens[_base.state.tokens.length - 1].contextId = objectContextId;\n }\n} exports.parsePropertyName = parsePropertyName;\n\n// Parse object or class method.\n function parseMethod(functionStart, isConstructor) {\n const funcContextId = _base.getNextContextId.call(void 0, );\n\n _base.state.scopeDepth++;\n const startTokenIndex = _base.state.tokens.length;\n const allowModifiers = isConstructor; // For TypeScript parameter properties\n _statement.parseFunctionParams.call(void 0, allowModifiers, funcContextId);\n parseFunctionBodyAndFinish(functionStart, funcContextId);\n const endTokenIndex = _base.state.tokens.length;\n _base.state.scopes.push(new (0, _state.Scope)(startTokenIndex, endTokenIndex, true));\n _base.state.scopeDepth--;\n} exports.parseMethod = parseMethod;\n\n// Parse arrow function expression.\n// If the parameters are provided, they will be converted to an\n// assignable list.\n function parseArrowExpression(startTokenIndex) {\n parseFunctionBody(true);\n const endTokenIndex = _base.state.tokens.length;\n _base.state.scopes.push(new (0, _state.Scope)(startTokenIndex, endTokenIndex, true));\n _base.state.scopeDepth--;\n} exports.parseArrowExpression = parseArrowExpression;\n\n function parseFunctionBodyAndFinish(functionStart, funcContextId = 0) {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsParseFunctionBodyAndFinish.call(void 0, functionStart, funcContextId);\n } else if (_base.isFlowEnabled) {\n _flow.flowParseFunctionBodyAndFinish.call(void 0, funcContextId);\n } else {\n parseFunctionBody(false, funcContextId);\n }\n} exports.parseFunctionBodyAndFinish = parseFunctionBodyAndFinish;\n\n function parseFunctionBody(allowExpression, funcContextId = 0) {\n const isExpression = allowExpression && !_index3.match.call(void 0, _types3.TokenType.braceL);\n\n if (isExpression) {\n parseMaybeAssign();\n } else {\n _statement.parseBlock.call(void 0, true /* isFunctionScope */, funcContextId);\n }\n} exports.parseFunctionBody = parseFunctionBody;\n\n// Parses a comma-separated list of expressions, and returns them as\n// an array. `close` is the token type that ends the list, and\n// `allowEmpty` can be turned on to allow subsequent commas with\n// nothing in between them to be parsed as `null` (which is needed\n// for array literals).\n\nfunction parseExprList(close, allowEmpty = false) {\n let first = true;\n while (!_index3.eat.call(void 0, close) && !_base.state.error) {\n if (first) {\n first = false;\n } else {\n _util.expect.call(void 0, _types3.TokenType.comma);\n if (_index3.eat.call(void 0, close)) break;\n }\n parseExprListItem(allowEmpty);\n }\n}\n\nfunction parseExprListItem(allowEmpty) {\n if (allowEmpty && _index3.match.call(void 0, _types3.TokenType.comma)) {\n // Empty item; nothing more to parse for this item.\n } else if (_index3.match.call(void 0, _types3.TokenType.ellipsis)) {\n _lval.parseSpread.call(void 0, );\n parseParenItem();\n } else if (_index3.match.call(void 0, _types3.TokenType.question)) {\n // Partial function application proposal.\n _index3.next.call(void 0, );\n } else {\n parseMaybeAssign(false, true);\n }\n}\n\n// Parse the next token as an identifier.\n function parseIdentifier() {\n _index3.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].type = _types3.TokenType.name;\n} exports.parseIdentifier = parseIdentifier;\n\n// Parses await expression inside async function.\nfunction parseAwait() {\n parseMaybeUnary();\n}\n\n// Parses yield expression inside generator.\nfunction parseYield() {\n _index3.next.call(void 0, );\n if (!_index3.match.call(void 0, _types3.TokenType.semi) && !_util.canInsertSemicolon.call(void 0, )) {\n _index3.eat.call(void 0, _types3.TokenType.star);\n parseMaybeAssign();\n }\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\nvar _index = require('../tokenizer/index');\nvar _charcodes = require('../util/charcodes');\nvar _base = require('./base');\nvar _statement = require('./statement');\n\n function parseFile() {\n // If enabled, skip leading hashbang line.\n if (\n _base.state.pos === 0 &&\n _base.input.charCodeAt(0) === _charcodes.charCodes.numberSign &&\n _base.input.charCodeAt(1) === _charcodes.charCodes.exclamationMark\n ) {\n _index.skipLineComment.call(void 0, 2);\n }\n _index.nextToken.call(void 0, );\n return _statement.parseTopLevel.call(void 0, );\n} exports.parseFile = parseFile;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _flow = require('../plugins/flow');\n\n\n\n\nvar _typescript = require('../plugins/typescript');\n\n\n\n\n\n\n\nvar _index = require('../tokenizer/index');\nvar _keywords = require('../tokenizer/keywords');\nvar _types = require('../tokenizer/types');\nvar _base = require('./base');\nvar _expression = require('./expression');\nvar _util = require('./util');\n\n function parseSpread() {\n _index.next.call(void 0, );\n _expression.parseMaybeAssign.call(void 0, false);\n} exports.parseSpread = parseSpread;\n\n function parseRest(isBlockScope) {\n _index.next.call(void 0, );\n parseBindingAtom(isBlockScope);\n} exports.parseRest = parseRest;\n\n function parseBindingIdentifier(isBlockScope) {\n _expression.parseIdentifier.call(void 0, );\n markPriorBindingIdentifier(isBlockScope);\n} exports.parseBindingIdentifier = parseBindingIdentifier;\n\n function parseImportedIdentifier() {\n _expression.parseIdentifier.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].identifierRole = _index.IdentifierRole.ImportDeclaration;\n} exports.parseImportedIdentifier = parseImportedIdentifier;\n\n function markPriorBindingIdentifier(isBlockScope) {\n let identifierRole;\n if (_base.state.scopeDepth === 0) {\n identifierRole = _index.IdentifierRole.TopLevelDeclaration;\n } else if (isBlockScope) {\n identifierRole = _index.IdentifierRole.BlockScopedDeclaration;\n } else {\n identifierRole = _index.IdentifierRole.FunctionScopedDeclaration;\n }\n _base.state.tokens[_base.state.tokens.length - 1].identifierRole = identifierRole;\n} exports.markPriorBindingIdentifier = markPriorBindingIdentifier;\n\n// Parses lvalue (assignable) atom.\n function parseBindingAtom(isBlockScope) {\n switch (_base.state.type) {\n case _types.TokenType._this: {\n // In TypeScript, \"this\" may be the name of a parameter, so allow it.\n const oldIsType = _index.pushTypeContext.call(void 0, 0);\n _index.next.call(void 0, );\n _index.popTypeContext.call(void 0, oldIsType);\n return;\n }\n\n case _types.TokenType._yield:\n case _types.TokenType.name: {\n _base.state.type = _types.TokenType.name;\n parseBindingIdentifier(isBlockScope);\n return;\n }\n\n case _types.TokenType.bracketL: {\n _index.next.call(void 0, );\n parseBindingList(_types.TokenType.bracketR, isBlockScope, true /* allowEmpty */);\n return;\n }\n\n case _types.TokenType.braceL:\n _expression.parseObj.call(void 0, true, isBlockScope);\n return;\n\n default:\n _util.unexpected.call(void 0, );\n }\n} exports.parseBindingAtom = parseBindingAtom;\n\n function parseBindingList(\n close,\n isBlockScope,\n allowEmpty = false,\n allowModifiers = false,\n contextId = 0,\n) {\n let first = true;\n\n let hasRemovedComma = false;\n const firstItemTokenIndex = _base.state.tokens.length;\n\n while (!_index.eat.call(void 0, close) && !_base.state.error) {\n if (first) {\n first = false;\n } else {\n _util.expect.call(void 0, _types.TokenType.comma);\n _base.state.tokens[_base.state.tokens.length - 1].contextId = contextId;\n // After a \"this\" type in TypeScript, we need to set the following comma (if any) to also be\n // a type token so that it will be removed.\n if (!hasRemovedComma && _base.state.tokens[firstItemTokenIndex].isType) {\n _base.state.tokens[_base.state.tokens.length - 1].isType = true;\n hasRemovedComma = true;\n }\n }\n if (allowEmpty && _index.match.call(void 0, _types.TokenType.comma)) {\n // Empty item; nothing further to parse for this item.\n } else if (_index.eat.call(void 0, close)) {\n break;\n } else if (_index.match.call(void 0, _types.TokenType.ellipsis)) {\n parseRest(isBlockScope);\n parseAssignableListItemTypes();\n // Support rest element trailing commas allowed by TypeScript <2.9.\n _index.eat.call(void 0, _types.TokenType.comma);\n _util.expect.call(void 0, close);\n break;\n } else {\n parseAssignableListItem(allowModifiers, isBlockScope);\n }\n }\n} exports.parseBindingList = parseBindingList;\n\nfunction parseAssignableListItem(allowModifiers, isBlockScope) {\n if (allowModifiers) {\n _typescript.tsParseAccessModifier.call(void 0, );\n _typescript.tsParseModifier.call(void 0, [_keywords.ContextualKeyword._readonly]);\n }\n\n parseMaybeDefault(isBlockScope);\n parseAssignableListItemTypes();\n parseMaybeDefault(isBlockScope, true /* leftAlreadyParsed */);\n}\n\nfunction parseAssignableListItemTypes() {\n if (_base.isFlowEnabled) {\n _flow.flowParseAssignableListItemTypes.call(void 0, );\n } else if (_base.isTypeScriptEnabled) {\n _typescript.tsParseAssignableListItemTypes.call(void 0, );\n }\n}\n\n// Parses assignment pattern around given atom if possible.\n function parseMaybeDefault(isBlockScope, leftAlreadyParsed = false) {\n if (!leftAlreadyParsed) {\n parseBindingAtom(isBlockScope);\n }\n if (!_index.eat.call(void 0, _types.TokenType.eq)) {\n return;\n }\n const eqIndex = _base.state.tokens.length - 1;\n _expression.parseMaybeAssign.call(void 0, );\n _base.state.tokens[eqIndex].rhsEndIndex = _base.state.tokens.length;\n} exports.parseMaybeDefault = parseMaybeDefault;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});/* eslint max-len: 0 */\n\nvar _index = require('../index');\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar _flow = require('../plugins/flow');\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvar _typescript = require('../plugins/typescript');\n\n\n\n\n\n\n\n\n\n\n\nvar _tokenizer = require('../tokenizer');\nvar _keywords = require('../tokenizer/keywords');\nvar _state = require('../tokenizer/state');\nvar _types = require('../tokenizer/types');\nvar _charcodes = require('../util/charcodes');\nvar _base = require('./base');\n\n\n\n\n\n\n\n\n\n\n\nvar _expression = require('./expression');\n\n\n\n\n\nvar _lval = require('./lval');\n\n\n\n\n\n\n\n\n\nvar _util = require('./util');\n\n function parseTopLevel() {\n parseBlockBody(_types.TokenType.eof);\n _base.state.scopes.push(new (0, _state.Scope)(0, _base.state.tokens.length, true));\n if (_base.state.scopeDepth !== 0) {\n throw new Error(`Invalid scope depth at end of file: ${_base.state.scopeDepth}`);\n }\n return new (0, _index.File)(_base.state.tokens, _base.state.scopes);\n} exports.parseTopLevel = parseTopLevel;\n\n// Parse a single statement.\n//\n// If expecting a statement and finding a slash operator, parse a\n// regular expression literal. This is to handle cases like\n// `if (foo) /blah/.exec(foo)`, where looking at the previous token\n// does not help.\n\n function parseStatement(declaration) {\n if (_base.isFlowEnabled) {\n if (_flow.flowTryParseStatement.call(void 0, )) {\n return;\n }\n }\n if (_tokenizer.match.call(void 0, _types.TokenType.at)) {\n parseDecorators();\n }\n parseStatementContent(declaration);\n} exports.parseStatement = parseStatement;\n\nfunction parseStatementContent(declaration) {\n if (_base.isTypeScriptEnabled) {\n if (_typescript.tsTryParseStatementContent.call(void 0, )) {\n return;\n }\n }\n\n const starttype = _base.state.type;\n\n // Most types of statements are recognized by the keyword they\n // start with. Many are trivial to parse, some require a bit of\n // complexity.\n\n switch (starttype) {\n case _types.TokenType._break:\n case _types.TokenType._continue:\n parseBreakContinueStatement();\n return;\n case _types.TokenType._debugger:\n parseDebuggerStatement();\n return;\n case _types.TokenType._do:\n parseDoStatement();\n return;\n case _types.TokenType._for:\n parseForStatement();\n return;\n case _types.TokenType._function:\n if (_tokenizer.lookaheadType.call(void 0, ) === _types.TokenType.dot) break;\n if (!declaration) _util.unexpected.call(void 0, );\n parseFunctionStatement();\n return;\n\n case _types.TokenType._class:\n if (!declaration) _util.unexpected.call(void 0, );\n parseClass(true);\n return;\n\n case _types.TokenType._if:\n parseIfStatement();\n return;\n case _types.TokenType._return:\n parseReturnStatement();\n return;\n case _types.TokenType._switch:\n parseSwitchStatement();\n return;\n case _types.TokenType._throw:\n parseThrowStatement();\n return;\n case _types.TokenType._try:\n parseTryStatement();\n return;\n\n case _types.TokenType._let:\n case _types.TokenType._const:\n if (!declaration) _util.unexpected.call(void 0, ); // NOTE: falls through to _var\n\n case _types.TokenType._var:\n parseVarStatement(starttype);\n return;\n\n case _types.TokenType._while:\n parseWhileStatement();\n return;\n case _types.TokenType.braceL:\n parseBlock();\n return;\n case _types.TokenType.semi:\n parseEmptyStatement();\n return;\n case _types.TokenType._export:\n case _types.TokenType._import: {\n const nextType = _tokenizer.lookaheadType.call(void 0, );\n if (nextType === _types.TokenType.parenL || nextType === _types.TokenType.dot) {\n break;\n }\n _tokenizer.next.call(void 0, );\n if (starttype === _types.TokenType._import) {\n parseImport();\n } else {\n parseExport();\n }\n return;\n }\n case _types.TokenType.name:\n if (_base.state.contextualKeyword === _keywords.ContextualKeyword._async) {\n const functionStart = _base.state.start;\n // peek ahead and see if next token is a function\n const snapshot = _base.state.snapshot();\n _tokenizer.next.call(void 0, );\n if (_tokenizer.match.call(void 0, _types.TokenType._function) && !_util.canInsertSemicolon.call(void 0, )) {\n _util.expect.call(void 0, _types.TokenType._function);\n parseFunction(functionStart, true);\n return;\n } else {\n _base.state.restoreFromSnapshot(snapshot);\n }\n }\n default:\n // Do nothing.\n break;\n }\n\n // If the statement does not start with a statement keyword or a\n // brace, it's an ExpressionStatement or LabeledStatement. We\n // simply start parsing an expression, and afterwards, if the\n // next token is a colon and the expression was a simple\n // Identifier node, we switch to interpreting it as a label.\n const initialTokensLength = _base.state.tokens.length;\n _expression.parseExpression.call(void 0, );\n let simpleName = null;\n if (_base.state.tokens.length === initialTokensLength + 1) {\n const token = _base.state.tokens[_base.state.tokens.length - 1];\n if (token.type === _types.TokenType.name) {\n simpleName = token.contextualKeyword;\n }\n }\n if (simpleName == null) {\n _util.semicolon.call(void 0, );\n return;\n }\n if (_tokenizer.eat.call(void 0, _types.TokenType.colon)) {\n parseLabeledStatement();\n } else {\n // This was an identifier, so we might want to handle flow/typescript-specific cases.\n parseIdentifierStatement(simpleName);\n }\n}\n\n function parseDecorators() {\n while (_tokenizer.match.call(void 0, _types.TokenType.at)) {\n parseDecorator();\n }\n} exports.parseDecorators = parseDecorators;\n\nfunction parseDecorator() {\n _tokenizer.next.call(void 0, );\n if (_tokenizer.eat.call(void 0, _types.TokenType.parenL)) {\n _expression.parseExpression.call(void 0, );\n _util.expect.call(void 0, _types.TokenType.parenR);\n } else {\n _expression.parseIdentifier.call(void 0, );\n while (_tokenizer.eat.call(void 0, _types.TokenType.dot)) {\n _expression.parseIdentifier.call(void 0, );\n }\n }\n parseMaybeDecoratorArguments();\n}\n\nfunction parseMaybeDecoratorArguments() {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsParseMaybeDecoratorArguments.call(void 0, );\n } else {\n baseParseMaybeDecoratorArguments();\n }\n}\n\n function baseParseMaybeDecoratorArguments() {\n if (_tokenizer.eat.call(void 0, _types.TokenType.parenL)) {\n _expression.parseCallExpressionArguments.call(void 0, );\n }\n} exports.baseParseMaybeDecoratorArguments = baseParseMaybeDecoratorArguments;\n\nfunction parseBreakContinueStatement() {\n _tokenizer.next.call(void 0, );\n if (!_util.isLineTerminator.call(void 0, )) {\n _expression.parseIdentifier.call(void 0, );\n _util.semicolon.call(void 0, );\n }\n}\n\nfunction parseDebuggerStatement() {\n _tokenizer.next.call(void 0, );\n _util.semicolon.call(void 0, );\n}\n\nfunction parseDoStatement() {\n _tokenizer.next.call(void 0, );\n parseStatement(false);\n _util.expect.call(void 0, _types.TokenType._while);\n _expression.parseParenExpression.call(void 0, );\n _tokenizer.eat.call(void 0, _types.TokenType.semi);\n}\n\nfunction parseForStatement() {\n _base.state.scopeDepth++;\n const startTokenIndex = _base.state.tokens.length;\n parseAmbiguousForStatement();\n const endTokenIndex = _base.state.tokens.length;\n _base.state.scopes.push(new (0, _state.Scope)(startTokenIndex, endTokenIndex, false));\n _base.state.scopeDepth--;\n}\n\n// Disambiguating between a `for` and a `for`/`in` or `for`/`of`\n// loop is non-trivial. Basically, we have to parse the init `var`\n// statement or expression, disallowing the `in` operator (see\n// the second parameter to `parseExpression`), and then check\n// whether the next token is `in` or `of`. When there is no init\n// part (semicolon immediately after the opening parenthesis), it\n// is a regular `for` loop.\nfunction parseAmbiguousForStatement() {\n _tokenizer.next.call(void 0, );\n\n let forAwait = false;\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._await)) {\n forAwait = true;\n _tokenizer.next.call(void 0, );\n }\n _util.expect.call(void 0, _types.TokenType.parenL);\n\n if (_tokenizer.match.call(void 0, _types.TokenType.semi)) {\n if (forAwait) {\n _util.unexpected.call(void 0, );\n }\n parseFor();\n return;\n }\n\n if (_tokenizer.match.call(void 0, _types.TokenType._var) || _tokenizer.match.call(void 0, _types.TokenType._let) || _tokenizer.match.call(void 0, _types.TokenType._const)) {\n const varKind = _base.state.type;\n _tokenizer.next.call(void 0, );\n parseVar(true, varKind);\n if (_tokenizer.match.call(void 0, _types.TokenType._in) || _util.isContextual.call(void 0, _keywords.ContextualKeyword._of)) {\n parseForIn(forAwait);\n return;\n }\n parseFor();\n return;\n }\n\n _expression.parseExpression.call(void 0, true);\n if (_tokenizer.match.call(void 0, _types.TokenType._in) || _util.isContextual.call(void 0, _keywords.ContextualKeyword._of)) {\n parseForIn(forAwait);\n return;\n }\n if (forAwait) {\n _util.unexpected.call(void 0, );\n }\n parseFor();\n}\n\nfunction parseFunctionStatement() {\n const functionStart = _base.state.start;\n _tokenizer.next.call(void 0, );\n parseFunction(functionStart, true);\n}\n\nfunction parseIfStatement() {\n _tokenizer.next.call(void 0, );\n _expression.parseParenExpression.call(void 0, );\n parseStatement(false);\n if (_tokenizer.eat.call(void 0, _types.TokenType._else)) {\n parseStatement(false);\n }\n}\n\nfunction parseReturnStatement() {\n _tokenizer.next.call(void 0, );\n\n // In `return` (and `break`/`continue`), the keywords with\n // optional arguments, we eagerly look for a semicolon or the\n // possibility to insert one.\n\n if (!_util.isLineTerminator.call(void 0, )) {\n _expression.parseExpression.call(void 0, );\n _util.semicolon.call(void 0, );\n }\n}\n\nfunction parseSwitchStatement() {\n _tokenizer.next.call(void 0, );\n _expression.parseParenExpression.call(void 0, );\n _base.state.scopeDepth++;\n const startTokenIndex = _base.state.tokens.length;\n _util.expect.call(void 0, _types.TokenType.braceL);\n\n // Don't bother validation; just go through any sequence of cases, defaults, and statements.\n while (!_tokenizer.match.call(void 0, _types.TokenType.braceR) && !_base.state.error) {\n if (_tokenizer.match.call(void 0, _types.TokenType._case) || _tokenizer.match.call(void 0, _types.TokenType._default)) {\n const isCase = _tokenizer.match.call(void 0, _types.TokenType._case);\n _tokenizer.next.call(void 0, );\n if (isCase) {\n _expression.parseExpression.call(void 0, );\n }\n _util.expect.call(void 0, _types.TokenType.colon);\n } else {\n parseStatement(true);\n }\n }\n _tokenizer.next.call(void 0, ); // Closing brace\n const endTokenIndex = _base.state.tokens.length;\n _base.state.scopes.push(new (0, _state.Scope)(startTokenIndex, endTokenIndex, false));\n _base.state.scopeDepth--;\n}\n\nfunction parseThrowStatement() {\n _tokenizer.next.call(void 0, );\n _expression.parseExpression.call(void 0, );\n _util.semicolon.call(void 0, );\n}\n\nfunction parseCatchClauseParam() {\n _lval.parseBindingAtom.call(void 0, true /* isBlockScope */);\n\n if (_base.isTypeScriptEnabled) {\n _typescript.tsTryParseTypeAnnotation.call(void 0, );\n }\n}\n\nfunction parseTryStatement() {\n _tokenizer.next.call(void 0, );\n\n parseBlock();\n\n if (_tokenizer.match.call(void 0, _types.TokenType._catch)) {\n _tokenizer.next.call(void 0, );\n let catchBindingStartTokenIndex = null;\n if (_tokenizer.match.call(void 0, _types.TokenType.parenL)) {\n _base.state.scopeDepth++;\n catchBindingStartTokenIndex = _base.state.tokens.length;\n _util.expect.call(void 0, _types.TokenType.parenL);\n parseCatchClauseParam();\n _util.expect.call(void 0, _types.TokenType.parenR);\n }\n parseBlock();\n if (catchBindingStartTokenIndex != null) {\n // We need a special scope for the catch binding which includes the binding itself and the\n // catch block.\n const endTokenIndex = _base.state.tokens.length;\n _base.state.scopes.push(new (0, _state.Scope)(catchBindingStartTokenIndex, endTokenIndex, false));\n _base.state.scopeDepth--;\n }\n }\n if (_tokenizer.eat.call(void 0, _types.TokenType._finally)) {\n parseBlock();\n }\n}\n\n function parseVarStatement(kind) {\n _tokenizer.next.call(void 0, );\n parseVar(false, kind);\n _util.semicolon.call(void 0, );\n} exports.parseVarStatement = parseVarStatement;\n\nfunction parseWhileStatement() {\n _tokenizer.next.call(void 0, );\n _expression.parseParenExpression.call(void 0, );\n parseStatement(false);\n}\n\nfunction parseEmptyStatement() {\n _tokenizer.next.call(void 0, );\n}\n\nfunction parseLabeledStatement() {\n parseStatement(true);\n}\n\n/**\n * Parse a statement starting with an identifier of the given name. Subclasses match on the name\n * to handle statements like \"declare\".\n */\nfunction parseIdentifierStatement(contextualKeyword) {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsParseIdentifierStatement.call(void 0, contextualKeyword);\n } else if (_base.isFlowEnabled) {\n _flow.flowParseIdentifierStatement.call(void 0, contextualKeyword);\n } else {\n _util.semicolon.call(void 0, );\n }\n}\n\n// Parse a semicolon-enclosed block of statements.\n function parseBlock(isFunctionScope = false, contextId = 0) {\n const startTokenIndex = _base.state.tokens.length;\n _base.state.scopeDepth++;\n _util.expect.call(void 0, _types.TokenType.braceL);\n if (contextId) {\n _base.state.tokens[_base.state.tokens.length - 1].contextId = contextId;\n }\n parseBlockBody(_types.TokenType.braceR);\n if (contextId) {\n _base.state.tokens[_base.state.tokens.length - 1].contextId = contextId;\n }\n const endTokenIndex = _base.state.tokens.length;\n _base.state.scopes.push(new (0, _state.Scope)(startTokenIndex, endTokenIndex, isFunctionScope));\n _base.state.scopeDepth--;\n} exports.parseBlock = parseBlock;\n\n function parseBlockBody(end) {\n while (!_tokenizer.eat.call(void 0, end) && !_base.state.error) {\n parseStatement(true);\n }\n} exports.parseBlockBody = parseBlockBody;\n\n// Parse a regular `for` loop. The disambiguation code in\n// `parseStatement` will already have parsed the init statement or\n// expression.\n\nfunction parseFor() {\n _util.expect.call(void 0, _types.TokenType.semi);\n if (!_tokenizer.match.call(void 0, _types.TokenType.semi)) {\n _expression.parseExpression.call(void 0, );\n }\n _util.expect.call(void 0, _types.TokenType.semi);\n if (!_tokenizer.match.call(void 0, _types.TokenType.parenR)) {\n _expression.parseExpression.call(void 0, );\n }\n _util.expect.call(void 0, _types.TokenType.parenR);\n parseStatement(false);\n}\n\n// Parse a `for`/`in` and `for`/`of` loop, which are almost\n// same from parser's perspective.\n\nfunction parseForIn(forAwait) {\n if (forAwait) {\n _util.eatContextual.call(void 0, _keywords.ContextualKeyword._of);\n } else {\n _tokenizer.next.call(void 0, );\n }\n _expression.parseExpression.call(void 0, );\n _util.expect.call(void 0, _types.TokenType.parenR);\n parseStatement(false);\n}\n\n// Parse a list of variable declarations.\n\nfunction parseVar(isFor, kind) {\n while (true) {\n const isBlockScope = kind === _types.TokenType._const || kind === _types.TokenType._let;\n parseVarHead(isBlockScope);\n if (_tokenizer.eat.call(void 0, _types.TokenType.eq)) {\n const eqIndex = _base.state.tokens.length - 1;\n _expression.parseMaybeAssign.call(void 0, isFor);\n _base.state.tokens[eqIndex].rhsEndIndex = _base.state.tokens.length;\n }\n if (!_tokenizer.eat.call(void 0, _types.TokenType.comma)) {\n break;\n }\n }\n}\n\nfunction parseVarHead(isBlockScope) {\n _lval.parseBindingAtom.call(void 0, isBlockScope);\n if (_base.isTypeScriptEnabled) {\n _typescript.tsAfterParseVarHead.call(void 0, );\n } else if (_base.isFlowEnabled) {\n _flow.flowAfterParseVarHead.call(void 0, );\n }\n}\n\n// Parse a function declaration or literal (depending on the\n// `isStatement` parameter).\n\n function parseFunction(\n functionStart,\n isStatement,\n optionalId = false,\n) {\n if (_tokenizer.match.call(void 0, _types.TokenType.star)) {\n _tokenizer.next.call(void 0, );\n }\n\n if (isStatement && !optionalId && !_tokenizer.match.call(void 0, _types.TokenType.name) && !_tokenizer.match.call(void 0, _types.TokenType._yield)) {\n _util.unexpected.call(void 0, );\n }\n\n let nameScopeStartTokenIndex = null;\n\n if (_tokenizer.match.call(void 0, _types.TokenType.name)) {\n // Expression-style functions should limit their name's scope to the function body, so we make\n // a new function scope to enforce that.\n if (!isStatement) {\n nameScopeStartTokenIndex = _base.state.tokens.length;\n _base.state.scopeDepth++;\n }\n _lval.parseBindingIdentifier.call(void 0, false);\n }\n\n const startTokenIndex = _base.state.tokens.length;\n _base.state.scopeDepth++;\n parseFunctionParams();\n _expression.parseFunctionBodyAndFinish.call(void 0, functionStart);\n const endTokenIndex = _base.state.tokens.length;\n // In addition to the block scope of the function body, we need a separate function-style scope\n // that includes the params.\n _base.state.scopes.push(new (0, _state.Scope)(startTokenIndex, endTokenIndex, true));\n _base.state.scopeDepth--;\n if (nameScopeStartTokenIndex !== null) {\n _base.state.scopes.push(new (0, _state.Scope)(nameScopeStartTokenIndex, endTokenIndex, true));\n _base.state.scopeDepth--;\n }\n} exports.parseFunction = parseFunction;\n\n function parseFunctionParams(\n allowModifiers = false,\n funcContextId = 0,\n) {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsStartParseFunctionParams.call(void 0, );\n } else if (_base.isFlowEnabled) {\n _flow.flowStartParseFunctionParams.call(void 0, );\n }\n\n _util.expect.call(void 0, _types.TokenType.parenL);\n if (funcContextId) {\n _base.state.tokens[_base.state.tokens.length - 1].contextId = funcContextId;\n }\n _lval.parseBindingList.call(void 0, \n _types.TokenType.parenR,\n false /* isBlockScope */,\n false /* allowEmpty */,\n allowModifiers,\n funcContextId,\n );\n if (funcContextId) {\n _base.state.tokens[_base.state.tokens.length - 1].contextId = funcContextId;\n }\n} exports.parseFunctionParams = parseFunctionParams;\n\n// Parse a class declaration or literal (depending on the\n// `isStatement` parameter).\n\n function parseClass(isStatement, optionalId = false) {\n // Put a context ID on the class keyword, the open-brace, and the close-brace, so that later\n // code can easily navigate to meaningful points on the class.\n const contextId = _base.getNextContextId.call(void 0, );\n\n _tokenizer.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].contextId = contextId;\n _base.state.tokens[_base.state.tokens.length - 1].isExpression = !isStatement;\n // Like with functions, we declare a special \"name scope\" from the start of the name to the end\n // of the class, but only with expression-style classes, to represent the fact that the name is\n // available to the body of the class but not an outer declaration.\n let nameScopeStartTokenIndex = null;\n if (!isStatement) {\n nameScopeStartTokenIndex = _base.state.tokens.length;\n _base.state.scopeDepth++;\n }\n parseClassId(isStatement, optionalId);\n parseClassSuper();\n const openBraceIndex = _base.state.tokens.length;\n parseClassBody(contextId);\n if (_base.state.error) {\n return;\n }\n _base.state.tokens[openBraceIndex].contextId = contextId;\n _base.state.tokens[_base.state.tokens.length - 1].contextId = contextId;\n if (nameScopeStartTokenIndex !== null) {\n const endTokenIndex = _base.state.tokens.length;\n _base.state.scopes.push(new (0, _state.Scope)(nameScopeStartTokenIndex, endTokenIndex, false));\n _base.state.scopeDepth--;\n }\n} exports.parseClass = parseClass;\n\nfunction isClassProperty() {\n return _tokenizer.match.call(void 0, _types.TokenType.eq) || _tokenizer.match.call(void 0, _types.TokenType.semi) || _tokenizer.match.call(void 0, _types.TokenType.braceR) || _tokenizer.match.call(void 0, _types.TokenType.bang) || _tokenizer.match.call(void 0, _types.TokenType.colon);\n}\n\nfunction isClassMethod() {\n return _tokenizer.match.call(void 0, _types.TokenType.parenL) || _tokenizer.match.call(void 0, _types.TokenType.lessThan);\n}\n\nfunction parseClassBody(classContextId) {\n _util.expect.call(void 0, _types.TokenType.braceL);\n\n while (!_tokenizer.eat.call(void 0, _types.TokenType.braceR) && !_base.state.error) {\n if (_tokenizer.eat.call(void 0, _types.TokenType.semi)) {\n continue;\n }\n\n if (_tokenizer.match.call(void 0, _types.TokenType.at)) {\n parseDecorator();\n continue;\n }\n const memberStart = _base.state.start;\n parseClassMember(memberStart, classContextId);\n }\n}\n\nfunction parseClassMember(memberStart, classContextId) {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsParseModifier.call(void 0, [_keywords.ContextualKeyword._declare]);\n _typescript.tsParseAccessModifier.call(void 0, );\n _typescript.tsParseModifier.call(void 0, [_keywords.ContextualKeyword._declare]);\n }\n let isStatic = false;\n if (_tokenizer.match.call(void 0, _types.TokenType.name) && _base.state.contextualKeyword === _keywords.ContextualKeyword._static) {\n _expression.parseIdentifier.call(void 0, ); // eats 'static'\n if (isClassMethod()) {\n parseClassMethod(memberStart, /* isConstructor */ false);\n return;\n } else if (isClassProperty()) {\n parseClassProperty();\n return;\n }\n // otherwise something static\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._static;\n isStatic = true;\n\n if (_tokenizer.match.call(void 0, _types.TokenType.braceL)) {\n // This is a static block. Mark the word \"static\" with the class context ID for class element\n // detection and parse as a regular block.\n _base.state.tokens[_base.state.tokens.length - 1].contextId = classContextId;\n parseBlock();\n return;\n }\n }\n\n parseClassMemberWithIsStatic(memberStart, isStatic, classContextId);\n}\n\nfunction parseClassMemberWithIsStatic(\n memberStart,\n isStatic,\n classContextId,\n) {\n if (_base.isTypeScriptEnabled) {\n if (_typescript.tsTryParseClassMemberWithIsStatic.call(void 0, isStatic, classContextId)) {\n return;\n }\n }\n if (_tokenizer.eat.call(void 0, _types.TokenType.star)) {\n // a generator\n parseClassPropertyName(classContextId);\n parseClassMethod(memberStart, /* isConstructor */ false);\n return;\n }\n\n // Get the identifier name so we can tell if it's actually a keyword like \"async\", \"get\", or\n // \"set\".\n parseClassPropertyName(classContextId);\n let isConstructor = false;\n const token = _base.state.tokens[_base.state.tokens.length - 1];\n // We allow \"constructor\" as either an identifier or a string.\n if (token.contextualKeyword === _keywords.ContextualKeyword._constructor) {\n isConstructor = true;\n }\n parsePostMemberNameModifiers();\n\n if (isClassMethod()) {\n parseClassMethod(memberStart, isConstructor);\n } else if (isClassProperty()) {\n parseClassProperty();\n } else if (token.contextualKeyword === _keywords.ContextualKeyword._async && !_util.isLineTerminator.call(void 0, )) {\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._async;\n // an async method\n const isGenerator = _tokenizer.match.call(void 0, _types.TokenType.star);\n if (isGenerator) {\n _tokenizer.next.call(void 0, );\n }\n\n // The so-called parsed name would have been \"async\": get the real name.\n parseClassPropertyName(classContextId);\n parsePostMemberNameModifiers();\n parseClassMethod(memberStart, false /* isConstructor */);\n } else if (\n (token.contextualKeyword === _keywords.ContextualKeyword._get ||\n token.contextualKeyword === _keywords.ContextualKeyword._set) &&\n !(_util.isLineTerminator.call(void 0, ) && _tokenizer.match.call(void 0, _types.TokenType.star))\n ) {\n if (token.contextualKeyword === _keywords.ContextualKeyword._get) {\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._get;\n } else {\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._set;\n }\n // `get\\n*` is an uninitialized property named 'get' followed by a generator.\n // a getter or setter\n // The so-called parsed name would have been \"get/set\": get the real name.\n parseClassPropertyName(classContextId);\n parseClassMethod(memberStart, /* isConstructor */ false);\n } else if (_util.isLineTerminator.call(void 0, )) {\n // an uninitialized class property (due to ASI, since we don't otherwise recognize the next token)\n parseClassProperty();\n } else {\n _util.unexpected.call(void 0, );\n }\n}\n\nfunction parseClassMethod(functionStart, isConstructor) {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsTryParseTypeParameters.call(void 0, );\n } else if (_base.isFlowEnabled) {\n if (_tokenizer.match.call(void 0, _types.TokenType.lessThan)) {\n _flow.flowParseTypeParameterDeclaration.call(void 0, );\n }\n }\n _expression.parseMethod.call(void 0, functionStart, isConstructor);\n}\n\n// Return the name of the class property, if it is a simple identifier.\n function parseClassPropertyName(classContextId) {\n _expression.parsePropertyName.call(void 0, classContextId);\n} exports.parseClassPropertyName = parseClassPropertyName;\n\n function parsePostMemberNameModifiers() {\n if (_base.isTypeScriptEnabled) {\n const oldIsType = _tokenizer.pushTypeContext.call(void 0, 0);\n _tokenizer.eat.call(void 0, _types.TokenType.question);\n _tokenizer.popTypeContext.call(void 0, oldIsType);\n }\n} exports.parsePostMemberNameModifiers = parsePostMemberNameModifiers;\n\n function parseClassProperty() {\n if (_base.isTypeScriptEnabled) {\n _tokenizer.eat.call(void 0, _types.TokenType.bang);\n _typescript.tsTryParseTypeAnnotation.call(void 0, );\n } else if (_base.isFlowEnabled) {\n if (_tokenizer.match.call(void 0, _types.TokenType.colon)) {\n _flow.flowParseTypeAnnotation.call(void 0, );\n }\n }\n\n if (_tokenizer.match.call(void 0, _types.TokenType.eq)) {\n const equalsTokenIndex = _base.state.tokens.length;\n _tokenizer.next.call(void 0, );\n _expression.parseMaybeAssign.call(void 0, );\n _base.state.tokens[equalsTokenIndex].rhsEndIndex = _base.state.tokens.length;\n }\n _util.semicolon.call(void 0, );\n} exports.parseClassProperty = parseClassProperty;\n\nfunction parseClassId(isStatement, optionalId = false) {\n if (\n _base.isTypeScriptEnabled &&\n (!isStatement || optionalId) &&\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._implements)\n ) {\n return;\n }\n\n if (_tokenizer.match.call(void 0, _types.TokenType.name)) {\n _lval.parseBindingIdentifier.call(void 0, true);\n }\n\n if (_base.isTypeScriptEnabled) {\n _typescript.tsTryParseTypeParameters.call(void 0, );\n } else if (_base.isFlowEnabled) {\n if (_tokenizer.match.call(void 0, _types.TokenType.lessThan)) {\n _flow.flowParseTypeParameterDeclaration.call(void 0, );\n }\n }\n}\n\n// Returns true if there was a superclass.\nfunction parseClassSuper() {\n let hasSuper = false;\n if (_tokenizer.eat.call(void 0, _types.TokenType._extends)) {\n _expression.parseExprSubscripts.call(void 0, );\n hasSuper = true;\n } else {\n hasSuper = false;\n }\n if (_base.isTypeScriptEnabled) {\n _typescript.tsAfterParseClassSuper.call(void 0, hasSuper);\n } else if (_base.isFlowEnabled) {\n _flow.flowAfterParseClassSuper.call(void 0, hasSuper);\n }\n}\n\n// Parses module export declaration.\n\n function parseExport() {\n const exportIndex = _base.state.tokens.length - 1;\n if (_base.isTypeScriptEnabled) {\n if (_typescript.tsTryParseExport.call(void 0, )) {\n return;\n }\n }\n // export * from '...'\n if (shouldParseExportStar()) {\n parseExportStar();\n } else if (isExportDefaultSpecifier()) {\n // export default from\n _expression.parseIdentifier.call(void 0, );\n if (_tokenizer.match.call(void 0, _types.TokenType.comma) && _tokenizer.lookaheadType.call(void 0, ) === _types.TokenType.star) {\n _util.expect.call(void 0, _types.TokenType.comma);\n _util.expect.call(void 0, _types.TokenType.star);\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._as);\n _expression.parseIdentifier.call(void 0, );\n } else {\n parseExportSpecifiersMaybe();\n }\n parseExportFrom();\n } else if (_tokenizer.eat.call(void 0, _types.TokenType._default)) {\n // export default ...\n parseExportDefaultExpression();\n } else if (shouldParseExportDeclaration()) {\n parseExportDeclaration();\n } else {\n // export { x, y as z } [from '...']\n parseExportSpecifiers();\n parseExportFrom();\n }\n _base.state.tokens[exportIndex].rhsEndIndex = _base.state.tokens.length;\n} exports.parseExport = parseExport;\n\nfunction parseExportDefaultExpression() {\n if (_base.isTypeScriptEnabled) {\n if (_typescript.tsTryParseExportDefaultExpression.call(void 0, )) {\n return;\n }\n }\n const functionStart = _base.state.start;\n if (_tokenizer.eat.call(void 0, _types.TokenType._function)) {\n parseFunction(functionStart, true, true);\n } else if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._async) && _tokenizer.lookaheadType.call(void 0, ) === _types.TokenType._function) {\n // async function declaration\n _util.eatContextual.call(void 0, _keywords.ContextualKeyword._async);\n _tokenizer.eat.call(void 0, _types.TokenType._function);\n parseFunction(functionStart, true, true);\n } else if (_tokenizer.match.call(void 0, _types.TokenType._class)) {\n parseClass(true, true);\n } else if (_tokenizer.match.call(void 0, _types.TokenType.at)) {\n parseDecorators();\n parseClass(true, true);\n } else {\n _expression.parseMaybeAssign.call(void 0, );\n _util.semicolon.call(void 0, );\n }\n}\n\nfunction parseExportDeclaration() {\n if (_base.isTypeScriptEnabled) {\n _typescript.tsParseExportDeclaration.call(void 0, );\n } else if (_base.isFlowEnabled) {\n _flow.flowParseExportDeclaration.call(void 0, );\n } else {\n parseStatement(true);\n }\n}\n\nfunction isExportDefaultSpecifier() {\n if (_base.isTypeScriptEnabled && _typescript.tsIsDeclarationStart.call(void 0, )) {\n return false;\n } else if (_base.isFlowEnabled && _flow.flowShouldDisallowExportDefaultSpecifier.call(void 0, )) {\n return false;\n }\n if (_tokenizer.match.call(void 0, _types.TokenType.name)) {\n return _base.state.contextualKeyword !== _keywords.ContextualKeyword._async;\n }\n\n if (!_tokenizer.match.call(void 0, _types.TokenType._default)) {\n return false;\n }\n\n const _next = _tokenizer.nextTokenStart.call(void 0, );\n const lookahead = _tokenizer.lookaheadTypeAndKeyword.call(void 0, );\n const hasFrom =\n lookahead.type === _types.TokenType.name && lookahead.contextualKeyword === _keywords.ContextualKeyword._from;\n if (lookahead.type === _types.TokenType.comma) {\n return true;\n }\n // lookahead again when `export default from` is seen\n if (hasFrom) {\n const nextAfterFrom = _base.input.charCodeAt(_tokenizer.nextTokenStartSince.call(void 0, _next + 4));\n return nextAfterFrom === _charcodes.charCodes.quotationMark || nextAfterFrom === _charcodes.charCodes.apostrophe;\n }\n return false;\n}\n\nfunction parseExportSpecifiersMaybe() {\n if (_tokenizer.eat.call(void 0, _types.TokenType.comma)) {\n parseExportSpecifiers();\n }\n}\n\n function parseExportFrom() {\n if (_util.eatContextual.call(void 0, _keywords.ContextualKeyword._from)) {\n _expression.parseExprAtom.call(void 0, );\n }\n _util.semicolon.call(void 0, );\n} exports.parseExportFrom = parseExportFrom;\n\nfunction shouldParseExportStar() {\n if (_base.isFlowEnabled) {\n return _flow.flowShouldParseExportStar.call(void 0, );\n } else {\n return _tokenizer.match.call(void 0, _types.TokenType.star);\n }\n}\n\nfunction parseExportStar() {\n if (_base.isFlowEnabled) {\n _flow.flowParseExportStar.call(void 0, );\n } else {\n baseParseExportStar();\n }\n}\n\n function baseParseExportStar() {\n _util.expect.call(void 0, _types.TokenType.star);\n\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._as)) {\n parseExportNamespace();\n } else {\n parseExportFrom();\n }\n} exports.baseParseExportStar = baseParseExportStar;\n\nfunction parseExportNamespace() {\n _tokenizer.next.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].type = _types.TokenType._as;\n _expression.parseIdentifier.call(void 0, );\n parseExportSpecifiersMaybe();\n parseExportFrom();\n}\n\nfunction shouldParseExportDeclaration() {\n return (\n (_base.isTypeScriptEnabled && _typescript.tsIsDeclarationStart.call(void 0, )) ||\n (_base.isFlowEnabled && _flow.flowShouldParseExportDeclaration.call(void 0, )) ||\n _base.state.type === _types.TokenType._var ||\n _base.state.type === _types.TokenType._const ||\n _base.state.type === _types.TokenType._let ||\n _base.state.type === _types.TokenType._function ||\n _base.state.type === _types.TokenType._class ||\n _util.isContextual.call(void 0, _keywords.ContextualKeyword._async) ||\n _tokenizer.match.call(void 0, _types.TokenType.at)\n );\n}\n\n// Parses a comma-separated list of module exports.\n function parseExportSpecifiers() {\n let first = true;\n\n // export { x, y as z } [from '...']\n _util.expect.call(void 0, _types.TokenType.braceL);\n\n while (!_tokenizer.eat.call(void 0, _types.TokenType.braceR) && !_base.state.error) {\n if (first) {\n first = false;\n } else {\n _util.expect.call(void 0, _types.TokenType.comma);\n if (_tokenizer.eat.call(void 0, _types.TokenType.braceR)) {\n break;\n }\n }\n\n _expression.parseIdentifier.call(void 0, );\n _base.state.tokens[_base.state.tokens.length - 1].identifierRole = _tokenizer.IdentifierRole.ExportAccess;\n if (_util.eatContextual.call(void 0, _keywords.ContextualKeyword._as)) {\n _expression.parseIdentifier.call(void 0, );\n }\n }\n} exports.parseExportSpecifiers = parseExportSpecifiers;\n\n// Parses import declaration.\n\n function parseImport() {\n if (_base.isTypeScriptEnabled && _tokenizer.match.call(void 0, _types.TokenType.name) && _tokenizer.lookaheadType.call(void 0, ) === _types.TokenType.eq) {\n _typescript.tsParseImportEqualsDeclaration.call(void 0, );\n return;\n }\n if (_base.isTypeScriptEnabled) {\n _util.eatContextual.call(void 0, _keywords.ContextualKeyword._type);\n }\n\n // import '...'\n if (_tokenizer.match.call(void 0, _types.TokenType.string)) {\n _expression.parseExprAtom.call(void 0, );\n } else {\n parseImportSpecifiers();\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._from);\n _expression.parseExprAtom.call(void 0, );\n }\n _util.semicolon.call(void 0, );\n} exports.parseImport = parseImport;\n\n// eslint-disable-next-line no-unused-vars\nfunction shouldParseDefaultImport() {\n return _tokenizer.match.call(void 0, _types.TokenType.name);\n}\n\nfunction parseImportSpecifierLocal() {\n _lval.parseImportedIdentifier.call(void 0, );\n}\n\n// Parses a comma-separated list of module imports.\nfunction parseImportSpecifiers() {\n if (_base.isFlowEnabled) {\n _flow.flowStartParseImportSpecifiers.call(void 0, );\n }\n\n let first = true;\n if (shouldParseDefaultImport()) {\n // import defaultObj, { x, y as z } from '...'\n parseImportSpecifierLocal();\n\n if (!_tokenizer.eat.call(void 0, _types.TokenType.comma)) return;\n }\n\n if (_tokenizer.match.call(void 0, _types.TokenType.star)) {\n _tokenizer.next.call(void 0, );\n _util.expectContextual.call(void 0, _keywords.ContextualKeyword._as);\n\n parseImportSpecifierLocal();\n\n return;\n }\n\n _util.expect.call(void 0, _types.TokenType.braceL);\n while (!_tokenizer.eat.call(void 0, _types.TokenType.braceR) && !_base.state.error) {\n if (first) {\n first = false;\n } else {\n // Detect an attempt to deep destructure\n if (_tokenizer.eat.call(void 0, _types.TokenType.colon)) {\n _util.unexpected.call(void 0, \n \"ES2015 named imports do not destructure. Use another statement for destructuring after the import.\",\n );\n }\n\n _util.expect.call(void 0, _types.TokenType.comma);\n if (_tokenizer.eat.call(void 0, _types.TokenType.braceR)) {\n break;\n }\n }\n\n parseImportSpecifier();\n }\n}\n\nfunction parseImportSpecifier() {\n if (_base.isFlowEnabled) {\n _flow.flowParseImportSpecifier.call(void 0, );\n return;\n }\n _lval.parseImportedIdentifier.call(void 0, );\n if (_util.isContextual.call(void 0, _keywords.ContextualKeyword._as)) {\n _base.state.tokens[_base.state.tokens.length - 1].identifierRole = _tokenizer.IdentifierRole.ImportAccess;\n _tokenizer.next.call(void 0, );\n _lval.parseImportedIdentifier.call(void 0, );\n }\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _index = require('../tokenizer/index');\n\nvar _types = require('../tokenizer/types');\nvar _charcodes = require('../util/charcodes');\nvar _base = require('./base');\n\n// ## Parser utilities\n\n// Tests whether parsed token is a contextual keyword.\n function isContextual(contextualKeyword) {\n return _base.state.contextualKeyword === contextualKeyword;\n} exports.isContextual = isContextual;\n\n function isLookaheadContextual(contextualKeyword) {\n const l = _index.lookaheadTypeAndKeyword.call(void 0, );\n return l.type === _types.TokenType.name && l.contextualKeyword === contextualKeyword;\n} exports.isLookaheadContextual = isLookaheadContextual;\n\n// Consumes contextual keyword if possible.\n function eatContextual(contextualKeyword) {\n return _base.state.contextualKeyword === contextualKeyword && _index.eat.call(void 0, _types.TokenType.name);\n} exports.eatContextual = eatContextual;\n\n// Asserts that following token is given contextual keyword.\n function expectContextual(contextualKeyword) {\n if (!eatContextual(contextualKeyword)) {\n unexpected();\n }\n} exports.expectContextual = expectContextual;\n\n// Test whether a semicolon can be inserted at the current position.\n function canInsertSemicolon() {\n return _index.match.call(void 0, _types.TokenType.eof) || _index.match.call(void 0, _types.TokenType.braceR) || hasPrecedingLineBreak();\n} exports.canInsertSemicolon = canInsertSemicolon;\n\n function hasPrecedingLineBreak() {\n const prevToken = _base.state.tokens[_base.state.tokens.length - 1];\n const lastTokEnd = prevToken ? prevToken.end : 0;\n for (let i = lastTokEnd; i < _base.state.start; i++) {\n const code = _base.input.charCodeAt(i);\n if (\n code === _charcodes.charCodes.lineFeed ||\n code === _charcodes.charCodes.carriageReturn ||\n code === 0x2028 ||\n code === 0x2029\n ) {\n return true;\n }\n }\n return false;\n} exports.hasPrecedingLineBreak = hasPrecedingLineBreak;\n\n function isLineTerminator() {\n return _index.eat.call(void 0, _types.TokenType.semi) || canInsertSemicolon();\n} exports.isLineTerminator = isLineTerminator;\n\n// Consume a semicolon, or, failing that, see if we are allowed to\n// pretend that there is a semicolon at this position.\n function semicolon() {\n if (!isLineTerminator()) {\n unexpected('Unexpected token, expected \";\"');\n }\n} exports.semicolon = semicolon;\n\n// Expect a token of a given type. If found, consume it, otherwise,\n// raise an unexpected token error at given pos.\n function expect(type) {\n const matched = _index.eat.call(void 0, type);\n if (!matched) {\n unexpected(`Unexpected token, expected \"${_types.formatTokenType.call(void 0, type)}\"`);\n }\n} exports.expect = expect;\n\n/**\n * Transition the parser to an error state. All code needs to be written to naturally unwind in this\n * state, which allows us to backtrack without exceptions and without error plumbing everywhere.\n */\n function unexpected(message = \"Unexpected token\", pos = _base.state.start) {\n if (_base.state.error) {\n return;\n }\n // tslint:disable-next-line no-any\n const err = new SyntaxError(message);\n err.pos = pos;\n _base.state.error = err;\n _base.state.pos = _base.input.length;\n _index.finishToken.call(void 0, _types.TokenType.eof);\n} exports.unexpected = unexpected;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var charCodes; (function (charCodes) {\n const backSpace = 8; charCodes[charCodes[\"backSpace\"] = backSpace] = \"backSpace\";\n const lineFeed = 10; charCodes[charCodes[\"lineFeed\"] = lineFeed] = \"lineFeed\"; // '\\n'\n const carriageReturn = 13; charCodes[charCodes[\"carriageReturn\"] = carriageReturn] = \"carriageReturn\"; // '\\r'\n const shiftOut = 14; charCodes[charCodes[\"shiftOut\"] = shiftOut] = \"shiftOut\";\n const space = 32; charCodes[charCodes[\"space\"] = space] = \"space\";\n const exclamationMark = 33; charCodes[charCodes[\"exclamationMark\"] = exclamationMark] = \"exclamationMark\"; // '!'\n const quotationMark = 34; charCodes[charCodes[\"quotationMark\"] = quotationMark] = \"quotationMark\"; // '\"'\n const numberSign = 35; charCodes[charCodes[\"numberSign\"] = numberSign] = \"numberSign\"; // '#'\n const dollarSign = 36; charCodes[charCodes[\"dollarSign\"] = dollarSign] = \"dollarSign\"; // '$'\n const percentSign = 37; charCodes[charCodes[\"percentSign\"] = percentSign] = \"percentSign\"; // '%'\n const ampersand = 38; charCodes[charCodes[\"ampersand\"] = ampersand] = \"ampersand\"; // '&'\n const apostrophe = 39; charCodes[charCodes[\"apostrophe\"] = apostrophe] = \"apostrophe\"; // '''\n const leftParenthesis = 40; charCodes[charCodes[\"leftParenthesis\"] = leftParenthesis] = \"leftParenthesis\"; // '('\n const rightParenthesis = 41; charCodes[charCodes[\"rightParenthesis\"] = rightParenthesis] = \"rightParenthesis\"; // ')'\n const asterisk = 42; charCodes[charCodes[\"asterisk\"] = asterisk] = \"asterisk\"; // '*'\n const plusSign = 43; charCodes[charCodes[\"plusSign\"] = plusSign] = \"plusSign\"; // '+'\n const comma = 44; charCodes[charCodes[\"comma\"] = comma] = \"comma\"; // ','\n const dash = 45; charCodes[charCodes[\"dash\"] = dash] = \"dash\"; // '-'\n const dot = 46; charCodes[charCodes[\"dot\"] = dot] = \"dot\"; // '.'\n const slash = 47; charCodes[charCodes[\"slash\"] = slash] = \"slash\"; // '/'\n const digit0 = 48; charCodes[charCodes[\"digit0\"] = digit0] = \"digit0\"; // '0'\n const digit1 = 49; charCodes[charCodes[\"digit1\"] = digit1] = \"digit1\"; // '1'\n const digit2 = 50; charCodes[charCodes[\"digit2\"] = digit2] = \"digit2\"; // '2'\n const digit3 = 51; charCodes[charCodes[\"digit3\"] = digit3] = \"digit3\"; // '3'\n const digit4 = 52; charCodes[charCodes[\"digit4\"] = digit4] = \"digit4\"; // '4'\n const digit5 = 53; charCodes[charCodes[\"digit5\"] = digit5] = \"digit5\"; // '5'\n const digit6 = 54; charCodes[charCodes[\"digit6\"] = digit6] = \"digit6\"; // '6'\n const digit7 = 55; charCodes[charCodes[\"digit7\"] = digit7] = \"digit7\"; // '7'\n const digit8 = 56; charCodes[charCodes[\"digit8\"] = digit8] = \"digit8\"; // '8'\n const digit9 = 57; charCodes[charCodes[\"digit9\"] = digit9] = \"digit9\"; // '9'\n const colon = 58; charCodes[charCodes[\"colon\"] = colon] = \"colon\"; // ':'\n const semicolon = 59; charCodes[charCodes[\"semicolon\"] = semicolon] = \"semicolon\"; // ';'\n const lessThan = 60; charCodes[charCodes[\"lessThan\"] = lessThan] = \"lessThan\"; // '<'\n const equalsTo = 61; charCodes[charCodes[\"equalsTo\"] = equalsTo] = \"equalsTo\"; // '='\n const greaterThan = 62; charCodes[charCodes[\"greaterThan\"] = greaterThan] = \"greaterThan\"; // '>'\n const questionMark = 63; charCodes[charCodes[\"questionMark\"] = questionMark] = \"questionMark\"; // '?'\n const atSign = 64; charCodes[charCodes[\"atSign\"] = atSign] = \"atSign\"; // '@'\n const uppercaseA = 65; charCodes[charCodes[\"uppercaseA\"] = uppercaseA] = \"uppercaseA\"; // 'A'\n const uppercaseB = 66; charCodes[charCodes[\"uppercaseB\"] = uppercaseB] = \"uppercaseB\"; // 'B'\n const uppercaseC = 67; charCodes[charCodes[\"uppercaseC\"] = uppercaseC] = \"uppercaseC\"; // 'C'\n const uppercaseD = 68; charCodes[charCodes[\"uppercaseD\"] = uppercaseD] = \"uppercaseD\"; // 'D'\n const uppercaseE = 69; charCodes[charCodes[\"uppercaseE\"] = uppercaseE] = \"uppercaseE\"; // 'E'\n const uppercaseF = 70; charCodes[charCodes[\"uppercaseF\"] = uppercaseF] = \"uppercaseF\"; // 'F'\n const uppercaseG = 71; charCodes[charCodes[\"uppercaseG\"] = uppercaseG] = \"uppercaseG\"; // 'G'\n const uppercaseH = 72; charCodes[charCodes[\"uppercaseH\"] = uppercaseH] = \"uppercaseH\"; // 'H'\n const uppercaseI = 73; charCodes[charCodes[\"uppercaseI\"] = uppercaseI] = \"uppercaseI\"; // 'I'\n const uppercaseJ = 74; charCodes[charCodes[\"uppercaseJ\"] = uppercaseJ] = \"uppercaseJ\"; // 'J'\n const uppercaseK = 75; charCodes[charCodes[\"uppercaseK\"] = uppercaseK] = \"uppercaseK\"; // 'K'\n const uppercaseL = 76; charCodes[charCodes[\"uppercaseL\"] = uppercaseL] = \"uppercaseL\"; // 'L'\n const uppercaseM = 77; charCodes[charCodes[\"uppercaseM\"] = uppercaseM] = \"uppercaseM\"; // 'M'\n const uppercaseN = 78; charCodes[charCodes[\"uppercaseN\"] = uppercaseN] = \"uppercaseN\"; // 'N'\n const uppercaseO = 79; charCodes[charCodes[\"uppercaseO\"] = uppercaseO] = \"uppercaseO\"; // 'O'\n const uppercaseP = 80; charCodes[charCodes[\"uppercaseP\"] = uppercaseP] = \"uppercaseP\"; // 'P'\n const uppercaseQ = 81; charCodes[charCodes[\"uppercaseQ\"] = uppercaseQ] = \"uppercaseQ\"; // 'Q'\n const uppercaseR = 82; charCodes[charCodes[\"uppercaseR\"] = uppercaseR] = \"uppercaseR\"; // 'R'\n const uppercaseS = 83; charCodes[charCodes[\"uppercaseS\"] = uppercaseS] = \"uppercaseS\"; // 'S'\n const uppercaseT = 84; charCodes[charCodes[\"uppercaseT\"] = uppercaseT] = \"uppercaseT\"; // 'T'\n const uppercaseU = 85; charCodes[charCodes[\"uppercaseU\"] = uppercaseU] = \"uppercaseU\"; // 'U'\n const uppercaseV = 86; charCodes[charCodes[\"uppercaseV\"] = uppercaseV] = \"uppercaseV\"; // 'V'\n const uppercaseW = 87; charCodes[charCodes[\"uppercaseW\"] = uppercaseW] = \"uppercaseW\"; // 'W'\n const uppercaseX = 88; charCodes[charCodes[\"uppercaseX\"] = uppercaseX] = \"uppercaseX\"; // 'X'\n const uppercaseY = 89; charCodes[charCodes[\"uppercaseY\"] = uppercaseY] = \"uppercaseY\"; // 'Y'\n const uppercaseZ = 90; charCodes[charCodes[\"uppercaseZ\"] = uppercaseZ] = \"uppercaseZ\"; // 'Z'\n const leftSquareBracket = 91; charCodes[charCodes[\"leftSquareBracket\"] = leftSquareBracket] = \"leftSquareBracket\"; // '['\n const backslash = 92; charCodes[charCodes[\"backslash\"] = backslash] = \"backslash\"; // '\\ '\n const rightSquareBracket = 93; charCodes[charCodes[\"rightSquareBracket\"] = rightSquareBracket] = \"rightSquareBracket\"; // ']'\n const caret = 94; charCodes[charCodes[\"caret\"] = caret] = \"caret\"; // '^'\n const underscore = 95; charCodes[charCodes[\"underscore\"] = underscore] = \"underscore\"; // '_'\n const graveAccent = 96; charCodes[charCodes[\"graveAccent\"] = graveAccent] = \"graveAccent\"; // '`'\n const lowercaseA = 97; charCodes[charCodes[\"lowercaseA\"] = lowercaseA] = \"lowercaseA\"; // 'a'\n const lowercaseB = 98; charCodes[charCodes[\"lowercaseB\"] = lowercaseB] = \"lowercaseB\"; // 'b'\n const lowercaseC = 99; charCodes[charCodes[\"lowercaseC\"] = lowercaseC] = \"lowercaseC\"; // 'c'\n const lowercaseD = 100; charCodes[charCodes[\"lowercaseD\"] = lowercaseD] = \"lowercaseD\"; // 'd'\n const lowercaseE = 101; charCodes[charCodes[\"lowercaseE\"] = lowercaseE] = \"lowercaseE\"; // 'e'\n const lowercaseF = 102; charCodes[charCodes[\"lowercaseF\"] = lowercaseF] = \"lowercaseF\"; // 'f'\n const lowercaseG = 103; charCodes[charCodes[\"lowercaseG\"] = lowercaseG] = \"lowercaseG\"; // 'g'\n const lowercaseH = 104; charCodes[charCodes[\"lowercaseH\"] = lowercaseH] = \"lowercaseH\"; // 'h'\n const lowercaseI = 105; charCodes[charCodes[\"lowercaseI\"] = lowercaseI] = \"lowercaseI\"; // 'i'\n const lowercaseJ = 106; charCodes[charCodes[\"lowercaseJ\"] = lowercaseJ] = \"lowercaseJ\"; // 'j'\n const lowercaseK = 107; charCodes[charCodes[\"lowercaseK\"] = lowercaseK] = \"lowercaseK\"; // 'k'\n const lowercaseL = 108; charCodes[charCodes[\"lowercaseL\"] = lowercaseL] = \"lowercaseL\"; // 'l'\n const lowercaseM = 109; charCodes[charCodes[\"lowercaseM\"] = lowercaseM] = \"lowercaseM\"; // 'm'\n const lowercaseN = 110; charCodes[charCodes[\"lowercaseN\"] = lowercaseN] = \"lowercaseN\"; // 'n'\n const lowercaseO = 111; charCodes[charCodes[\"lowercaseO\"] = lowercaseO] = \"lowercaseO\"; // 'o'\n const lowercaseP = 112; charCodes[charCodes[\"lowercaseP\"] = lowercaseP] = \"lowercaseP\"; // 'p'\n const lowercaseQ = 113; charCodes[charCodes[\"lowercaseQ\"] = lowercaseQ] = \"lowercaseQ\"; // 'q'\n const lowercaseR = 114; charCodes[charCodes[\"lowercaseR\"] = lowercaseR] = \"lowercaseR\"; // 'r'\n const lowercaseS = 115; charCodes[charCodes[\"lowercaseS\"] = lowercaseS] = \"lowercaseS\"; // 's'\n const lowercaseT = 116; charCodes[charCodes[\"lowercaseT\"] = lowercaseT] = \"lowercaseT\"; // 't'\n const lowercaseU = 117; charCodes[charCodes[\"lowercaseU\"] = lowercaseU] = \"lowercaseU\"; // 'u'\n const lowercaseV = 118; charCodes[charCodes[\"lowercaseV\"] = lowercaseV] = \"lowercaseV\"; // 'v'\n const lowercaseW = 119; charCodes[charCodes[\"lowercaseW\"] = lowercaseW] = \"lowercaseW\"; // 'w'\n const lowercaseX = 120; charCodes[charCodes[\"lowercaseX\"] = lowercaseX] = \"lowercaseX\"; // 'x'\n const lowercaseY = 121; charCodes[charCodes[\"lowercaseY\"] = lowercaseY] = \"lowercaseY\"; // 'y'\n const lowercaseZ = 122; charCodes[charCodes[\"lowercaseZ\"] = lowercaseZ] = \"lowercaseZ\"; // 'z'\n const leftCurlyBrace = 123; charCodes[charCodes[\"leftCurlyBrace\"] = leftCurlyBrace] = \"leftCurlyBrace\"; // '{'\n const verticalBar = 124; charCodes[charCodes[\"verticalBar\"] = verticalBar] = \"verticalBar\"; // '|'\n const rightCurlyBrace = 125; charCodes[charCodes[\"rightCurlyBrace\"] = rightCurlyBrace] = \"rightCurlyBrace\"; // '}'\n const tilde = 126; charCodes[charCodes[\"tilde\"] = tilde] = \"tilde\"; // '~'\n const nonBreakingSpace = 160; charCodes[charCodes[\"nonBreakingSpace\"] = nonBreakingSpace] = \"nonBreakingSpace\";\n // eslint-disable-next-line no-irregular-whitespace\n const oghamSpaceMark = 5760; charCodes[charCodes[\"oghamSpaceMark\"] = oghamSpaceMark] = \"oghamSpaceMark\"; // ' '\n const lineSeparator = 8232; charCodes[charCodes[\"lineSeparator\"] = lineSeparator] = \"lineSeparator\";\n const paragraphSeparator = 8233; charCodes[charCodes[\"paragraphSeparator\"] = paragraphSeparator] = \"paragraphSeparator\";\n})(charCodes || (exports.charCodes = charCodes = {}));\n\n function isDigit(code) {\n return (\n (code >= charCodes.digit0 && code <= charCodes.digit9) ||\n (code >= charCodes.lowercaseA && code <= charCodes.lowercaseF) ||\n (code >= charCodes.uppercaseA && code <= charCodes.uppercaseF)\n );\n} exports.isDigit = isDigit;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _charcodes = require('./charcodes');\nvar _whitespace = require('./whitespace');\n\nfunction computeIsIdentifierChar(code) {\n if (code < 48) return code === 36;\n if (code < 58) return true;\n if (code < 65) return false;\n if (code < 91) return true;\n if (code < 97) return code === 95;\n if (code < 123) return true;\n if (code < 128) return false;\n throw new Error(\"Should not be called with non-ASCII char code.\");\n}\n\n const IS_IDENTIFIER_CHAR = new Uint8Array(65536); exports.IS_IDENTIFIER_CHAR = IS_IDENTIFIER_CHAR;\nfor (let i = 0; i < 128; i++) {\n exports.IS_IDENTIFIER_CHAR[i] = computeIsIdentifierChar(i) ? 1 : 0;\n}\nfor (let i = 128; i < 65536; i++) {\n exports.IS_IDENTIFIER_CHAR[i] = 1;\n}\n// Aside from whitespace and newlines, all characters outside the ASCII space are either\n// identifier characters or invalid. Since we're not performing code validation, we can just\n// treat all invalid characters as identifier characters.\nfor (const whitespaceChar of _whitespace.WHITESPACE_CHARS) {\n exports.IS_IDENTIFIER_CHAR[whitespaceChar] = 0;\n}\nexports.IS_IDENTIFIER_CHAR[0x2028] = 0;\nexports.IS_IDENTIFIER_CHAR[0x2029] = 0;\n\n const IS_IDENTIFIER_START = exports.IS_IDENTIFIER_CHAR.slice(); exports.IS_IDENTIFIER_START = IS_IDENTIFIER_START;\nfor (let numChar = _charcodes.charCodes.digit0; numChar <= _charcodes.charCodes.digit9; numChar++) {\n exports.IS_IDENTIFIER_START[numChar] = 0;\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _charcodes = require('./charcodes');\n\n// https://tc39.github.io/ecma262/#sec-white-space\n const WHITESPACE_CHARS = [\n 0x0009,\n 0x000b,\n 0x000c,\n _charcodes.charCodes.space,\n _charcodes.charCodes.nonBreakingSpace,\n _charcodes.charCodes.oghamSpaceMark,\n 0x2000, // EN QUAD\n 0x2001, // EM QUAD\n 0x2002, // EN SPACE\n 0x2003, // EM SPACE\n 0x2004, // THREE-PER-EM SPACE\n 0x2005, // FOUR-PER-EM SPACE\n 0x2006, // SIX-PER-EM SPACE\n 0x2007, // FIGURE SPACE\n 0x2008, // PUNCTUATION SPACE\n 0x2009, // THIN SPACE\n 0x200a, // HAIR SPACE\n 0x202f, // NARROW NO-BREAK SPACE\n 0x205f, // MEDIUM MATHEMATICAL SPACE\n 0x3000, // IDEOGRAPHIC SPACE\n 0xfeff, // ZERO WIDTH NO-BREAK SPACE\n]; exports.WHITESPACE_CHARS = WHITESPACE_CHARS;\n\n const skipWhiteSpace = /(?:\\s|\\/\\/.*|\\/\\*[^]*?\\*\\/)*/g; exports.skipWhiteSpace = skipWhiteSpace;\n\n const IS_WHITESPACE = new Uint8Array(65536); exports.IS_WHITESPACE = IS_WHITESPACE;\nfor (const char of exports.WHITESPACE_CHARS) {\n exports.IS_WHITESPACE[char] = 1;\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _tokenizer = require('../parser/tokenizer');\nvar _keywords = require('../parser/tokenizer/keywords');\nvar _types = require('../parser/tokenizer/types');\n\nvar _elideImportEquals = require('../util/elideImportEquals'); var _elideImportEquals2 = _interopRequireDefault(_elideImportEquals);\n\n\n\nvar _getDeclarationInfo = require('../util/getDeclarationInfo'); var _getDeclarationInfo2 = _interopRequireDefault(_getDeclarationInfo);\nvar _shouldElideDefaultExport = require('../util/shouldElideDefaultExport'); var _shouldElideDefaultExport2 = _interopRequireDefault(_shouldElideDefaultExport);\n\n\nvar _Transformer = require('./Transformer'); var _Transformer2 = _interopRequireDefault(_Transformer);\n\n/**\n * Class for editing import statements when we are transforming to commonjs.\n */\n class CJSImportTransformer extends _Transformer2.default {\n __init() {this.hadExport = false}\n __init2() {this.hadNamedExport = false}\n __init3() {this.hadDefaultExport = false}\n \n\n constructor(\n rootTransformer,\n tokens,\n importProcessor,\n nameManager,\n reactHotLoaderTransformer,\n enableLegacyBabel5ModuleInterop,\n isTypeScriptTransformEnabled,\n ) {\n super();this.rootTransformer = rootTransformer;this.tokens = tokens;this.importProcessor = importProcessor;this.nameManager = nameManager;this.reactHotLoaderTransformer = reactHotLoaderTransformer;this.enableLegacyBabel5ModuleInterop = enableLegacyBabel5ModuleInterop;this.isTypeScriptTransformEnabled = isTypeScriptTransformEnabled;CJSImportTransformer.prototype.__init.call(this);CJSImportTransformer.prototype.__init2.call(this);CJSImportTransformer.prototype.__init3.call(this);;\n this.declarationInfo = isTypeScriptTransformEnabled\n ? _getDeclarationInfo2.default.call(void 0, tokens)\n : _getDeclarationInfo.EMPTY_DECLARATION_INFO;\n }\n\n getPrefixCode() {\n let prefix = \"\";\n if (this.hadExport) {\n prefix += 'Object.defineProperty(exports, \"__esModule\", {value: true});';\n }\n return prefix;\n }\n\n getSuffixCode() {\n if (this.enableLegacyBabel5ModuleInterop && this.hadDefaultExport && !this.hadNamedExport) {\n return \"\\nmodule.exports = exports.default;\\n\";\n }\n return \"\";\n }\n\n process() {\n // TypeScript `import foo = require('foo');` should always just be translated to plain require.\n if (this.tokens.matches3(_types.TokenType._import, _types.TokenType.name, _types.TokenType.eq)) {\n return this.processImportEquals();\n }\n if (this.tokens.matches1(_types.TokenType._import)) {\n this.processImport();\n return true;\n }\n if (this.tokens.matches2(_types.TokenType._export, _types.TokenType.eq)) {\n this.tokens.replaceToken(\"module.exports\");\n return true;\n }\n if (this.tokens.matches1(_types.TokenType._export) && !this.tokens.currentToken().isType) {\n this.hadExport = true;\n return this.processExport();\n }\n if (this.tokens.matches2(_types.TokenType.name, _types.TokenType.postIncDec)) {\n // Fall through to normal identifier matching if this doesn't apply.\n if (this.processPostIncDec()) {\n return true;\n }\n }\n if (this.tokens.matches1(_types.TokenType.name) || this.tokens.matches1(_types.TokenType.jsxName)) {\n return this.processIdentifier();\n }\n if (this.tokens.matches1(_types.TokenType.eq)) {\n return this.processAssignment();\n }\n if (this.tokens.matches1(_types.TokenType.assign)) {\n return this.processComplexAssignment();\n }\n if (this.tokens.matches1(_types.TokenType.preIncDec)) {\n return this.processPreIncDec();\n }\n return false;\n }\n\n processImportEquals() {\n const importName = this.tokens.identifierNameAtIndex(this.tokens.currentIndex() + 1);\n if (this.importProcessor.isTypeName(importName)) {\n // If this name is only used as a type, elide the whole import.\n _elideImportEquals2.default.call(void 0, this.tokens);\n } else {\n // Otherwise, switch `import` to `const`.\n this.tokens.replaceToken(\"const\");\n }\n return true;\n }\n\n /**\n * Transform this:\n * import foo, {bar} from 'baz';\n * into\n * var _baz = require('baz'); var _baz2 = _interopRequireDefault(_baz);\n *\n * The import code was already generated in the import preprocessing step, so\n * we just need to look it up.\n */\n processImport() {\n if (this.tokens.matches2(_types.TokenType._import, _types.TokenType.parenL)) {\n this.tokens.replaceToken(\"Promise.resolve().then(() => require\");\n const contextId = this.tokens.currentToken().contextId;\n if (contextId == null) {\n throw new Error(\"Expected context ID on dynamic import invocation.\");\n }\n this.tokens.copyToken();\n while (!this.tokens.matchesContextIdAndLabel(_types.TokenType.parenR, contextId)) {\n this.rootTransformer.processToken();\n }\n this.tokens.replaceToken(\"))\");\n return;\n }\n\n const wasOnlyTypes = this.removeImportAndDetectIfType();\n\n if (wasOnlyTypes) {\n this.tokens.removeToken();\n } else {\n const path = this.tokens.stringValue();\n this.tokens.replaceTokenTrimmingLeftWhitespace(this.importProcessor.claimImportCode(path));\n this.tokens.appendCode(this.importProcessor.claimImportCode(path));\n }\n if (this.tokens.matches1(_types.TokenType.semi)) {\n this.tokens.removeToken();\n }\n }\n\n /**\n * Erase this import, and return true if it was either of the form \"import type\" or contained only\n * \"type\" named imports. Such imports should not even do a side-effect import.\n *\n * The position should end at the import string.\n */\n removeImportAndDetectIfType() {\n this.tokens.removeInitialToken();\n if (\n this.tokens.matchesContextual(_keywords.ContextualKeyword._type) &&\n !this.tokens.matches1AtIndex(this.tokens.currentIndex() + 1, _types.TokenType.comma) &&\n !this.tokens.matchesContextualAtIndex(this.tokens.currentIndex() + 1, _keywords.ContextualKeyword._from)\n ) {\n // This is an \"import type\" statement, so exit early.\n this.removeRemainingImport();\n return true;\n }\n\n if (this.tokens.matches1(_types.TokenType.name) || this.tokens.matches1(_types.TokenType.star)) {\n // We have a default import or namespace import, so there must be some\n // non-type import.\n this.removeRemainingImport();\n return false;\n }\n\n if (this.tokens.matches1(_types.TokenType.string)) {\n // This is a bare import, so we should proceed with the import.\n return false;\n }\n\n let foundNonType = false;\n while (!this.tokens.matches1(_types.TokenType.string)) {\n // Check if any named imports are of the form \"foo\" or \"foo as bar\", with\n // no leading \"type\".\n if ((!foundNonType && this.tokens.matches1(_types.TokenType.braceL)) || this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.removeToken();\n if (\n this.tokens.matches2(_types.TokenType.name, _types.TokenType.comma) ||\n this.tokens.matches2(_types.TokenType.name, _types.TokenType.braceR) ||\n this.tokens.matches4(_types.TokenType.name, _types.TokenType.name, _types.TokenType.name, _types.TokenType.comma) ||\n this.tokens.matches4(_types.TokenType.name, _types.TokenType.name, _types.TokenType.name, _types.TokenType.braceR)\n ) {\n foundNonType = true;\n }\n }\n this.tokens.removeToken();\n }\n return !foundNonType;\n }\n\n removeRemainingImport() {\n while (!this.tokens.matches1(_types.TokenType.string)) {\n this.tokens.removeToken();\n }\n }\n\n processIdentifier() {\n const token = this.tokens.currentToken();\n if (token.shadowsGlobal) {\n return false;\n }\n\n if (token.identifierRole === _tokenizer.IdentifierRole.ObjectShorthand) {\n return this.processObjectShorthand();\n }\n\n if (token.identifierRole !== _tokenizer.IdentifierRole.Access) {\n return false;\n }\n const replacement = this.importProcessor.getIdentifierReplacement(\n this.tokens.identifierNameForToken(token),\n );\n if (!replacement) {\n return false;\n }\n // Tolerate any number of closing parens while looking for an opening paren\n // that indicates a function call.\n let possibleOpenParenIndex = this.tokens.currentIndex() + 1;\n while (\n possibleOpenParenIndex < this.tokens.tokens.length &&\n this.tokens.tokens[possibleOpenParenIndex].type === _types.TokenType.parenR\n ) {\n possibleOpenParenIndex++;\n }\n // Avoid treating imported functions as methods of their `exports` object\n // by using `(0, f)` when the identifier is in a paren expression. Else\n // use `Function.prototype.call` when the identifier is a guaranteed\n // function call. When using `call`, pass undefined as the context.\n if (this.tokens.tokens[possibleOpenParenIndex].type === _types.TokenType.parenL) {\n if (\n this.tokens.tokenAtRelativeIndex(1).type === _types.TokenType.parenL &&\n this.tokens.tokenAtRelativeIndex(-1).type !== _types.TokenType._new\n ) {\n this.tokens.replaceToken(`${replacement}.call(void 0, `);\n // Remove the old paren.\n this.tokens.removeToken();\n // Balance out the new paren.\n this.rootTransformer.processBalancedCode();\n this.tokens.copyExpectedToken(_types.TokenType.parenR);\n } else {\n // See here: http://2ality.com/2015/12/references.html\n this.tokens.replaceToken(`(0, ${replacement})`);\n }\n } else {\n this.tokens.replaceToken(replacement);\n }\n return true;\n }\n\n processObjectShorthand() {\n const identifier = this.tokens.identifierName();\n const replacement = this.importProcessor.getIdentifierReplacement(identifier);\n if (!replacement) {\n return false;\n }\n this.tokens.replaceToken(`${identifier}: ${replacement}`);\n return true;\n }\n\n processExport() {\n if (\n this.tokens.matches2(_types.TokenType._export, _types.TokenType._enum) ||\n this.tokens.matches3(_types.TokenType._export, _types.TokenType._const, _types.TokenType._enum)\n ) {\n // Let the TypeScript transform handle it.\n return false;\n }\n if (this.tokens.matches2(_types.TokenType._export, _types.TokenType._default)) {\n this.processExportDefault();\n this.hadDefaultExport = true;\n return true;\n }\n this.hadNamedExport = true;\n if (\n this.tokens.matches2(_types.TokenType._export, _types.TokenType._var) ||\n this.tokens.matches2(_types.TokenType._export, _types.TokenType._let) ||\n this.tokens.matches2(_types.TokenType._export, _types.TokenType._const)\n ) {\n this.processExportVar();\n return true;\n } else if (\n this.tokens.matches2(_types.TokenType._export, _types.TokenType._function) ||\n // export async function\n this.tokens.matches3(_types.TokenType._export, _types.TokenType.name, _types.TokenType._function)\n ) {\n this.processExportFunction();\n return true;\n } else if (\n this.tokens.matches2(_types.TokenType._export, _types.TokenType._class) ||\n this.tokens.matches3(_types.TokenType._export, _types.TokenType._abstract, _types.TokenType._class)\n ) {\n this.processExportClass();\n return true;\n } else if (this.tokens.matches2(_types.TokenType._export, _types.TokenType.braceL)) {\n this.processExportBindings();\n return true;\n } else if (this.tokens.matches2(_types.TokenType._export, _types.TokenType.star)) {\n this.processExportStar();\n return true;\n } else if (\n this.tokens.matches3(_types.TokenType._export, _types.TokenType.name, _types.TokenType.braceL) &&\n this.tokens.matchesContextualAtIndex(this.tokens.currentIndex() + 1, _keywords.ContextualKeyword._type)\n ) {\n // TS `export type {` case: just remove the export entirely.\n this.tokens.removeInitialToken();\n while (!this.tokens.matches1(_types.TokenType.braceR)) {\n this.tokens.removeToken();\n }\n this.tokens.removeToken();\n\n // Remove type re-export `... } from './T'`\n if (\n this.tokens.matchesContextual(_keywords.ContextualKeyword._from) &&\n this.tokens.matches1AtIndex(this.tokens.currentIndex() + 1, _types.TokenType.string)\n ) {\n this.tokens.removeToken();\n this.tokens.removeToken();\n }\n return true;\n } else {\n throw new Error(\"Unrecognized export syntax.\");\n }\n }\n\n processAssignment() {\n const index = this.tokens.currentIndex();\n const identifierToken = this.tokens.tokens[index - 1];\n // If the LHS is a type identifier, this must be a declaration like `let a: b = c;`,\n // with `b` as the identifier, so nothing needs to be done in that case.\n if (identifierToken.isType || identifierToken.type !== _types.TokenType.name) {\n return false;\n }\n if (identifierToken.shadowsGlobal) {\n return false;\n }\n if (index >= 2 && this.tokens.matches1AtIndex(index - 2, _types.TokenType.dot)) {\n return false;\n }\n if (index >= 2 && [_types.TokenType._var, _types.TokenType._let, _types.TokenType._const].includes(this.tokens.tokens[index - 2].type)) {\n // Declarations don't need an extra assignment. This doesn't avoid the\n // assignment for comma-separated declarations, but it's still correct\n // since the assignment is just redundant.\n return false;\n }\n const assignmentSnippet = this.importProcessor.resolveExportBinding(\n this.tokens.identifierNameForToken(identifierToken),\n );\n if (!assignmentSnippet) {\n return false;\n }\n this.tokens.copyToken();\n this.tokens.appendCode(` ${assignmentSnippet} =`);\n return true;\n }\n\n /**\n * Process something like `a += 3`, where `a` might be an exported value.\n */\n processComplexAssignment() {\n const index = this.tokens.currentIndex();\n const identifierToken = this.tokens.tokens[index - 1];\n if (identifierToken.type !== _types.TokenType.name) {\n return false;\n }\n if (identifierToken.shadowsGlobal) {\n return false;\n }\n if (index >= 2 && this.tokens.matches1AtIndex(index - 2, _types.TokenType.dot)) {\n return false;\n }\n const assignmentSnippet = this.importProcessor.resolveExportBinding(\n this.tokens.identifierNameForToken(identifierToken),\n );\n if (!assignmentSnippet) {\n return false;\n }\n this.tokens.appendCode(` = ${assignmentSnippet}`);\n this.tokens.copyToken();\n return true;\n }\n\n /**\n * Process something like `++a`, where `a` might be an exported value.\n */\n processPreIncDec() {\n const index = this.tokens.currentIndex();\n const identifierToken = this.tokens.tokens[index + 1];\n if (identifierToken.type !== _types.TokenType.name) {\n return false;\n }\n if (identifierToken.shadowsGlobal) {\n return false;\n }\n // Ignore things like ++a.b and ++a[b] and ++a().b.\n if (\n index + 2 < this.tokens.tokens.length &&\n (this.tokens.matches1AtIndex(index + 2, _types.TokenType.dot) ||\n this.tokens.matches1AtIndex(index + 2, _types.TokenType.bracketL) ||\n this.tokens.matches1AtIndex(index + 2, _types.TokenType.parenL))\n ) {\n return false;\n }\n const identifierName = this.tokens.identifierNameForToken(identifierToken);\n const assignmentSnippet = this.importProcessor.resolveExportBinding(identifierName);\n if (!assignmentSnippet) {\n return false;\n }\n this.tokens.appendCode(`${assignmentSnippet} = `);\n this.tokens.copyToken();\n return true;\n }\n\n /**\n * Process something like `a++`, where `a` might be an exported value.\n * This starts at the `a`, not at the `++`.\n */\n processPostIncDec() {\n const index = this.tokens.currentIndex();\n const identifierToken = this.tokens.tokens[index];\n const operatorToken = this.tokens.tokens[index + 1];\n if (identifierToken.type !== _types.TokenType.name) {\n return false;\n }\n if (identifierToken.shadowsGlobal) {\n return false;\n }\n if (index >= 1 && this.tokens.matches1AtIndex(index - 1, _types.TokenType.dot)) {\n return false;\n }\n const identifierName = this.tokens.identifierNameForToken(identifierToken);\n const assignmentSnippet = this.importProcessor.resolveExportBinding(identifierName);\n if (!assignmentSnippet) {\n return false;\n }\n const operatorCode = this.tokens.rawCodeForToken(operatorToken);\n // We might also replace the identifier with something like exports.x, so\n // do that replacement here as well.\n const base = this.importProcessor.getIdentifierReplacement(identifierName) || identifierName;\n if (operatorCode === \"++\") {\n this.tokens.replaceToken(`(${base} = ${assignmentSnippet} = ${base} + 1, ${base} - 1)`);\n } else if (operatorCode === \"--\") {\n this.tokens.replaceToken(`(${base} = ${assignmentSnippet} = ${base} - 1, ${base} + 1)`);\n } else {\n throw new Error(`Unexpected operator: ${operatorCode}`);\n }\n this.tokens.removeToken();\n return true;\n }\n\n processExportDefault() {\n if (\n this.tokens.matches4(_types.TokenType._export, _types.TokenType._default, _types.TokenType._function, _types.TokenType.name) ||\n // export default async function\n this.tokens.matches5(_types.TokenType._export, _types.TokenType._default, _types.TokenType.name, _types.TokenType._function, _types.TokenType.name)\n ) {\n this.tokens.removeInitialToken();\n this.tokens.removeToken();\n // Named function export case: change it to a top-level function\n // declaration followed by exports statement.\n const name = this.processNamedFunction();\n this.tokens.appendCode(` exports.default = ${name};`);\n } else if (\n this.tokens.matches4(_types.TokenType._export, _types.TokenType._default, _types.TokenType._class, _types.TokenType.name) ||\n this.tokens.matches5(_types.TokenType._export, _types.TokenType._default, _types.TokenType._abstract, _types.TokenType._class, _types.TokenType.name)\n ) {\n this.tokens.removeInitialToken();\n this.tokens.removeToken();\n if (this.tokens.matches1(_types.TokenType._abstract)) {\n this.tokens.removeToken();\n }\n const name = this.rootTransformer.processNamedClass();\n this.tokens.appendCode(` exports.default = ${name};`);\n } else if (this.tokens.matches3(_types.TokenType._export, _types.TokenType._default, _types.TokenType.at)) {\n throw new Error(\"Export default statements with decorators are not yet supported.\");\n // After this point, this is a plain \"export default E\" statement.\n } else if (\n _shouldElideDefaultExport2.default.call(void 0, this.isTypeScriptTransformEnabled, this.tokens, this.declarationInfo)\n ) {\n // If the exported value is just an identifier and should be elided by TypeScript\n // rules, then remove it entirely. It will always have the form `export default e`,\n // where `e` is an identifier.\n this.tokens.removeInitialToken();\n this.tokens.removeToken();\n this.tokens.removeToken();\n } else if (this.reactHotLoaderTransformer) {\n // We need to assign E to a variable. Change \"export default E\" to\n // \"let _default; exports.default = _default = E\"\n const defaultVarName = this.nameManager.claimFreeName(\"_default\");\n this.tokens.replaceToken(`let ${defaultVarName}; exports.`);\n this.tokens.copyToken();\n this.tokens.appendCode(` = ${defaultVarName} =`);\n this.reactHotLoaderTransformer.setExtractedDefaultExportName(defaultVarName);\n } else {\n // Change \"export default E\" to \"exports.default = E\"\n this.tokens.replaceToken(\"exports.\");\n this.tokens.copyToken();\n this.tokens.appendCode(\" =\");\n }\n }\n\n /**\n * Transform a declaration like `export var`, `export let`, or `export const`.\n */\n processExportVar() {\n if (this.isSimpleExportVar()) {\n this.processSimpleExportVar();\n } else {\n this.processComplexExportVar();\n }\n }\n\n /**\n * Determine if the export is of the form:\n * export var/let/const [varName] = [expr];\n * In other words, determine if function name inference might apply.\n */\n isSimpleExportVar() {\n let tokenIndex = this.tokens.currentIndex();\n // export\n tokenIndex++;\n // var/let/const\n tokenIndex++;\n if (!this.tokens.matches1AtIndex(tokenIndex, _types.TokenType.name)) {\n return false;\n }\n tokenIndex++;\n while (tokenIndex < this.tokens.tokens.length && this.tokens.tokens[tokenIndex].isType) {\n tokenIndex++;\n }\n if (!this.tokens.matches1AtIndex(tokenIndex, _types.TokenType.eq)) {\n return false;\n }\n return true;\n }\n\n /**\n * Transform an `export var` declaration initializing a single variable.\n *\n * For example, this:\n * export const f = () => {};\n * becomes this:\n * const f = () => {}; exports.f = f;\n *\n * The variable is unused (e.g. exports.f has the true value of the export).\n * We need to produce an assignment of this form so that the function will\n * have an inferred name of \"f\", which wouldn't happen in the more general\n * case below.\n */\n processSimpleExportVar() {\n // export\n this.tokens.removeInitialToken();\n // var/let/const\n this.tokens.copyToken();\n const varName = this.tokens.identifierName();\n // x: number -> x\n while (!this.tokens.matches1(_types.TokenType.eq)) {\n this.rootTransformer.processToken();\n }\n const endIndex = this.tokens.currentToken().rhsEndIndex;\n if (endIndex == null) {\n throw new Error(\"Expected = token with an end index.\");\n }\n while (this.tokens.currentIndex() < endIndex) {\n this.rootTransformer.processToken();\n }\n this.tokens.appendCode(`; exports.${varName} = ${varName}`);\n }\n\n /**\n * Transform normal declaration exports, including handling destructuring.\n * For example, this:\n * export const {x: [a = 2, b], c} = d;\n * becomes this:\n * ({x: [exports.a = 2, exports.b], c: exports.c} = d;)\n */\n processComplexExportVar() {\n this.tokens.removeInitialToken();\n this.tokens.removeToken();\n const needsParens = this.tokens.matches1(_types.TokenType.braceL);\n if (needsParens) {\n this.tokens.appendCode(\"(\");\n }\n\n let depth = 0;\n while (true) {\n if (\n this.tokens.matches1(_types.TokenType.braceL) ||\n this.tokens.matches1(_types.TokenType.dollarBraceL) ||\n this.tokens.matches1(_types.TokenType.bracketL)\n ) {\n depth++;\n this.tokens.copyToken();\n } else if (this.tokens.matches1(_types.TokenType.braceR) || this.tokens.matches1(_types.TokenType.bracketR)) {\n depth--;\n this.tokens.copyToken();\n } else if (\n depth === 0 &&\n !this.tokens.matches1(_types.TokenType.name) &&\n !this.tokens.currentToken().isType\n ) {\n break;\n } else if (this.tokens.matches1(_types.TokenType.eq)) {\n // Default values might have assignments in the RHS that we want to ignore, so skip past\n // them.\n const endIndex = this.tokens.currentToken().rhsEndIndex;\n if (endIndex == null) {\n throw new Error(\"Expected = token with an end index.\");\n }\n while (this.tokens.currentIndex() < endIndex) {\n this.rootTransformer.processToken();\n }\n } else {\n const token = this.tokens.currentToken();\n if (_tokenizer.isDeclaration.call(void 0, token)) {\n const name = this.tokens.identifierName();\n let replacement = this.importProcessor.getIdentifierReplacement(name);\n if (replacement === null) {\n throw new Error(`Expected a replacement for ${name} in \\`export var\\` syntax.`);\n }\n if (_tokenizer.isObjectShorthandDeclaration.call(void 0, token)) {\n replacement = `${name}: ${replacement}`;\n }\n this.tokens.replaceToken(replacement);\n } else {\n this.rootTransformer.processToken();\n }\n }\n }\n\n if (needsParens) {\n // Seek to the end of the RHS.\n const endIndex = this.tokens.currentToken().rhsEndIndex;\n if (endIndex == null) {\n throw new Error(\"Expected = token with an end index.\");\n }\n while (this.tokens.currentIndex() < endIndex) {\n this.rootTransformer.processToken();\n }\n this.tokens.appendCode(\")\");\n }\n }\n\n /**\n * Transform this:\n * export function foo() {}\n * into this:\n * function foo() {} exports.foo = foo;\n */\n processExportFunction() {\n this.tokens.replaceToken(\"\");\n const name = this.processNamedFunction();\n this.tokens.appendCode(` exports.${name} = ${name};`);\n }\n\n /**\n * Skip past a function with a name and return that name.\n */\n processNamedFunction() {\n if (this.tokens.matches1(_types.TokenType._function)) {\n this.tokens.copyToken();\n } else if (this.tokens.matches2(_types.TokenType.name, _types.TokenType._function)) {\n if (!this.tokens.matchesContextual(_keywords.ContextualKeyword._async)) {\n throw new Error(\"Expected async keyword in function export.\");\n }\n this.tokens.copyToken();\n this.tokens.copyToken();\n }\n if (this.tokens.matches1(_types.TokenType.star)) {\n this.tokens.copyToken();\n }\n if (!this.tokens.matches1(_types.TokenType.name)) {\n throw new Error(\"Expected identifier for exported function name.\");\n }\n const name = this.tokens.identifierName();\n this.tokens.copyToken();\n if (this.tokens.currentToken().isType) {\n this.tokens.removeInitialToken();\n while (this.tokens.currentToken().isType) {\n this.tokens.removeToken();\n }\n }\n this.tokens.copyExpectedToken(_types.TokenType.parenL);\n this.rootTransformer.processBalancedCode();\n this.tokens.copyExpectedToken(_types.TokenType.parenR);\n this.rootTransformer.processPossibleTypeRange();\n this.tokens.copyExpectedToken(_types.TokenType.braceL);\n this.rootTransformer.processBalancedCode();\n this.tokens.copyExpectedToken(_types.TokenType.braceR);\n return name;\n }\n\n /**\n * Transform this:\n * export class A {}\n * into this:\n * class A {} exports.A = A;\n */\n processExportClass() {\n this.tokens.removeInitialToken();\n if (this.tokens.matches1(_types.TokenType._abstract)) {\n this.tokens.removeToken();\n }\n const name = this.rootTransformer.processNamedClass();\n this.tokens.appendCode(` exports.${name} = ${name};`);\n }\n\n /**\n * Transform this:\n * export {a, b as c};\n * into this:\n * exports.a = a; exports.c = b;\n *\n * OR\n *\n * Transform this:\n * export {a, b as c} from './foo';\n * into the pre-generated Object.defineProperty code from the ImportProcessor.\n *\n * For the first case, if the TypeScript transform is enabled, we need to skip\n * exports that are only defined as types.\n */\n processExportBindings() {\n this.tokens.removeInitialToken();\n this.tokens.removeToken();\n\n const exportStatements = [];\n while (true) {\n if (this.tokens.matches1(_types.TokenType.braceR)) {\n this.tokens.removeToken();\n break;\n }\n\n const localName = this.tokens.identifierName();\n let exportedName;\n this.tokens.removeToken();\n if (this.tokens.matchesContextual(_keywords.ContextualKeyword._as)) {\n this.tokens.removeToken();\n exportedName = this.tokens.identifierName();\n this.tokens.removeToken();\n } else {\n exportedName = localName;\n }\n if (!this.shouldElideExportedIdentifier(localName)) {\n const newLocalName = this.importProcessor.getIdentifierReplacement(localName);\n exportStatements.push(`exports.${exportedName} = ${newLocalName || localName};`);\n }\n\n if (this.tokens.matches1(_types.TokenType.braceR)) {\n this.tokens.removeToken();\n break;\n }\n if (this.tokens.matches2(_types.TokenType.comma, _types.TokenType.braceR)) {\n this.tokens.removeToken();\n this.tokens.removeToken();\n break;\n } else if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.removeToken();\n } else {\n throw new Error(`Unexpected token: ${JSON.stringify(this.tokens.currentToken())}`);\n }\n }\n\n if (this.tokens.matchesContextual(_keywords.ContextualKeyword._from)) {\n // This is an export...from, so throw away the normal named export code\n // and use the Object.defineProperty code from ImportProcessor.\n this.tokens.removeToken();\n const path = this.tokens.stringValue();\n this.tokens.replaceTokenTrimmingLeftWhitespace(this.importProcessor.claimImportCode(path));\n } else {\n // This is a normal named export, so use that.\n this.tokens.appendCode(exportStatements.join(\" \"));\n }\n\n if (this.tokens.matches1(_types.TokenType.semi)) {\n this.tokens.removeToken();\n }\n }\n\n processExportStar() {\n this.tokens.removeInitialToken();\n while (!this.tokens.matches1(_types.TokenType.string)) {\n this.tokens.removeToken();\n }\n const path = this.tokens.stringValue();\n this.tokens.replaceTokenTrimmingLeftWhitespace(this.importProcessor.claimImportCode(path));\n if (this.tokens.matches1(_types.TokenType.semi)) {\n this.tokens.removeToken();\n }\n }\n\n shouldElideExportedIdentifier(name) {\n return this.isTypeScriptTransformEnabled && !this.declarationInfo.valueDeclarations.has(name);\n }\n} exports.default = CJSImportTransformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _keywords = require('../parser/tokenizer/keywords');\nvar _types = require('../parser/tokenizer/types');\n\nvar _elideImportEquals = require('../util/elideImportEquals'); var _elideImportEquals2 = _interopRequireDefault(_elideImportEquals);\n\n\n\nvar _getDeclarationInfo = require('../util/getDeclarationInfo'); var _getDeclarationInfo2 = _interopRequireDefault(_getDeclarationInfo);\nvar _getNonTypeIdentifiers = require('../util/getNonTypeIdentifiers');\nvar _shouldElideDefaultExport = require('../util/shouldElideDefaultExport'); var _shouldElideDefaultExport2 = _interopRequireDefault(_shouldElideDefaultExport);\n\nvar _Transformer = require('./Transformer'); var _Transformer2 = _interopRequireDefault(_Transformer);\n\n/**\n * Class for editing import statements when we are keeping the code as ESM. We still need to remove\n * type-only imports in TypeScript and Flow.\n */\n class ESMImportTransformer extends _Transformer2.default {\n \n \n\n constructor(\n tokens,\n nameManager,\n reactHotLoaderTransformer,\n isTypeScriptTransformEnabled,\n options,\n ) {\n super();this.tokens = tokens;this.nameManager = nameManager;this.reactHotLoaderTransformer = reactHotLoaderTransformer;this.isTypeScriptTransformEnabled = isTypeScriptTransformEnabled;;\n this.nonTypeIdentifiers = isTypeScriptTransformEnabled\n ? _getNonTypeIdentifiers.getNonTypeIdentifiers.call(void 0, tokens, options)\n : new Set();\n this.declarationInfo = isTypeScriptTransformEnabled\n ? _getDeclarationInfo2.default.call(void 0, tokens)\n : _getDeclarationInfo.EMPTY_DECLARATION_INFO;\n }\n\n process() {\n // TypeScript `import foo = require('foo');` should always just be translated to plain require.\n if (this.tokens.matches3(_types.TokenType._import, _types.TokenType.name, _types.TokenType.eq)) {\n return this.processImportEquals();\n }\n if (this.tokens.matches2(_types.TokenType._export, _types.TokenType.eq)) {\n this.tokens.replaceToken(\"module.exports\");\n return true;\n }\n if (this.tokens.matches1(_types.TokenType._import)) {\n return this.processImport();\n }\n if (this.tokens.matches2(_types.TokenType._export, _types.TokenType._default)) {\n return this.processExportDefault();\n }\n if (this.tokens.matches2(_types.TokenType._export, _types.TokenType.braceL)) {\n return this.processNamedExports();\n }\n if (\n this.tokens.matches3(_types.TokenType._export, _types.TokenType.name, _types.TokenType.braceL) &&\n this.tokens.matchesContextualAtIndex(this.tokens.currentIndex() + 1, _keywords.ContextualKeyword._type)\n ) {\n // TS `export type {` case: just remove the export entirely.\n this.tokens.removeInitialToken();\n while (!this.tokens.matches1(_types.TokenType.braceR)) {\n this.tokens.removeToken();\n }\n this.tokens.removeToken();\n\n // Remove type re-export `... } from './T'`\n if (\n this.tokens.matchesContextual(_keywords.ContextualKeyword._from) &&\n this.tokens.matches1AtIndex(this.tokens.currentIndex() + 1, _types.TokenType.string)\n ) {\n this.tokens.removeToken();\n this.tokens.removeToken();\n }\n return true;\n }\n return false;\n }\n\n processImportEquals() {\n const importName = this.tokens.identifierNameAtIndex(this.tokens.currentIndex() + 1);\n if (this.isTypeName(importName)) {\n // If this name is only used as a type, elide the whole import.\n _elideImportEquals2.default.call(void 0, this.tokens);\n } else {\n // Otherwise, switch `import` to `const`.\n this.tokens.replaceToken(\"const\");\n }\n return true;\n }\n\n processImport() {\n if (this.tokens.matches2(_types.TokenType._import, _types.TokenType.parenL)) {\n // Dynamic imports don't need to be transformed.\n return false;\n }\n\n const snapshot = this.tokens.snapshot();\n const allImportsRemoved = this.removeImportTypeBindings();\n if (allImportsRemoved) {\n this.tokens.restoreToSnapshot(snapshot);\n while (!this.tokens.matches1(_types.TokenType.string)) {\n this.tokens.removeToken();\n }\n this.tokens.removeToken();\n if (this.tokens.matches1(_types.TokenType.semi)) {\n this.tokens.removeToken();\n }\n }\n return true;\n }\n\n /**\n * Remove type bindings from this import, leaving the rest of the import intact.\n *\n * Return true if this import was ONLY types, and thus is eligible for removal. This will bail out\n * of the replacement operation, so we can return early here.\n */\n removeImportTypeBindings() {\n this.tokens.copyExpectedToken(_types.TokenType._import);\n if (\n this.tokens.matchesContextual(_keywords.ContextualKeyword._type) &&\n !this.tokens.matches1AtIndex(this.tokens.currentIndex() + 1, _types.TokenType.comma) &&\n !this.tokens.matchesContextualAtIndex(this.tokens.currentIndex() + 1, _keywords.ContextualKeyword._from)\n ) {\n // This is an \"import type\" statement, so exit early.\n return true;\n }\n\n if (this.tokens.matches1(_types.TokenType.string)) {\n // This is a bare import, so we should proceed with the import.\n this.tokens.copyToken();\n return false;\n }\n\n let foundNonTypeImport = false;\n\n if (this.tokens.matches1(_types.TokenType.name)) {\n if (this.isTypeName(this.tokens.identifierName())) {\n this.tokens.removeToken();\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.removeToken();\n }\n } else {\n foundNonTypeImport = true;\n this.tokens.copyToken();\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.copyToken();\n }\n }\n }\n\n if (this.tokens.matches1(_types.TokenType.star)) {\n if (this.isTypeName(this.tokens.identifierNameAtIndex(this.tokens.currentIndex() + 2))) {\n this.tokens.removeToken();\n this.tokens.removeToken();\n this.tokens.removeToken();\n } else {\n foundNonTypeImport = true;\n this.tokens.copyExpectedToken(_types.TokenType.star);\n this.tokens.copyExpectedToken(_types.TokenType.name);\n this.tokens.copyExpectedToken(_types.TokenType.name);\n }\n } else if (this.tokens.matches1(_types.TokenType.braceL)) {\n this.tokens.copyToken();\n while (!this.tokens.matches1(_types.TokenType.braceR)) {\n if (\n this.tokens.matches3(_types.TokenType.name, _types.TokenType.name, _types.TokenType.comma) ||\n this.tokens.matches3(_types.TokenType.name, _types.TokenType.name, _types.TokenType.braceR)\n ) {\n // type foo\n this.tokens.removeToken();\n this.tokens.removeToken();\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.removeToken();\n }\n } else if (\n this.tokens.matches5(_types.TokenType.name, _types.TokenType.name, _types.TokenType.name, _types.TokenType.name, _types.TokenType.comma) ||\n this.tokens.matches5(_types.TokenType.name, _types.TokenType.name, _types.TokenType.name, _types.TokenType.name, _types.TokenType.braceR)\n ) {\n // type foo as bar\n this.tokens.removeToken();\n this.tokens.removeToken();\n this.tokens.removeToken();\n this.tokens.removeToken();\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.removeToken();\n }\n } else if (\n this.tokens.matches2(_types.TokenType.name, _types.TokenType.comma) ||\n this.tokens.matches2(_types.TokenType.name, _types.TokenType.braceR)\n ) {\n // foo\n if (this.isTypeName(this.tokens.identifierName())) {\n this.tokens.removeToken();\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.removeToken();\n }\n } else {\n foundNonTypeImport = true;\n this.tokens.copyToken();\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.copyToken();\n }\n }\n } else if (\n this.tokens.matches4(_types.TokenType.name, _types.TokenType.name, _types.TokenType.name, _types.TokenType.comma) ||\n this.tokens.matches4(_types.TokenType.name, _types.TokenType.name, _types.TokenType.name, _types.TokenType.braceR)\n ) {\n // foo as bar\n if (this.isTypeName(this.tokens.identifierNameAtIndex(this.tokens.currentIndex() + 2))) {\n this.tokens.removeToken();\n this.tokens.removeToken();\n this.tokens.removeToken();\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.removeToken();\n }\n } else {\n foundNonTypeImport = true;\n this.tokens.copyToken();\n this.tokens.copyToken();\n this.tokens.copyToken();\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.copyToken();\n }\n }\n } else {\n throw new Error(\"Unexpected import form.\");\n }\n }\n this.tokens.copyExpectedToken(_types.TokenType.braceR);\n }\n\n return !foundNonTypeImport;\n }\n\n isTypeName(name) {\n return this.isTypeScriptTransformEnabled && !this.nonTypeIdentifiers.has(name);\n }\n\n processExportDefault() {\n if (\n _shouldElideDefaultExport2.default.call(void 0, this.isTypeScriptTransformEnabled, this.tokens, this.declarationInfo)\n ) {\n // If the exported value is just an identifier and should be elided by TypeScript\n // rules, then remove it entirely. It will always have the form `export default e`,\n // where `e` is an identifier.\n this.tokens.removeInitialToken();\n this.tokens.removeToken();\n this.tokens.removeToken();\n return true;\n }\n\n const alreadyHasName =\n this.tokens.matches4(_types.TokenType._export, _types.TokenType._default, _types.TokenType._function, _types.TokenType.name) ||\n // export default async function\n this.tokens.matches5(_types.TokenType._export, _types.TokenType._default, _types.TokenType.name, _types.TokenType._function, _types.TokenType.name) ||\n this.tokens.matches4(_types.TokenType._export, _types.TokenType._default, _types.TokenType._class, _types.TokenType.name) ||\n this.tokens.matches5(_types.TokenType._export, _types.TokenType._default, _types.TokenType._abstract, _types.TokenType._class, _types.TokenType.name);\n\n if (!alreadyHasName && this.reactHotLoaderTransformer) {\n // This is a plain \"export default E\" statement and we need to assign E to a variable.\n // Change \"export default E\" to \"let _default; export default _default = E\"\n const defaultVarName = this.nameManager.claimFreeName(\"_default\");\n this.tokens.replaceToken(`let ${defaultVarName}; export`);\n this.tokens.copyToken();\n this.tokens.appendCode(` ${defaultVarName} =`);\n this.reactHotLoaderTransformer.setExtractedDefaultExportName(defaultVarName);\n return true;\n }\n return false;\n }\n\n /**\n * In TypeScript, we need to remove named exports that were never declared or only declared as a\n * type.\n */\n processNamedExports() {\n if (!this.isTypeScriptTransformEnabled) {\n return false;\n }\n this.tokens.copyExpectedToken(_types.TokenType._export);\n this.tokens.copyExpectedToken(_types.TokenType.braceL);\n\n while (!this.tokens.matches1(_types.TokenType.braceR)) {\n if (!this.tokens.matches1(_types.TokenType.name)) {\n throw new Error(\"Expected identifier at the start of named export.\");\n }\n if (this.shouldElideExportedName(this.tokens.identifierName())) {\n while (\n !this.tokens.matches1(_types.TokenType.comma) &&\n !this.tokens.matches1(_types.TokenType.braceR) &&\n !this.tokens.isAtEnd()\n ) {\n this.tokens.removeToken();\n }\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.removeToken();\n }\n } else {\n while (\n !this.tokens.matches1(_types.TokenType.comma) &&\n !this.tokens.matches1(_types.TokenType.braceR) &&\n !this.tokens.isAtEnd()\n ) {\n this.tokens.copyToken();\n }\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.copyToken();\n }\n }\n }\n this.tokens.copyExpectedToken(_types.TokenType.braceR);\n return true;\n }\n\n /**\n * ESM elides all imports with the rule that we only elide if we see that it's\n * a type and never see it as a value. This is in contract to CJS, which\n * elides imports that are completely unknown.\n */\n shouldElideExportedName(name) {\n return (\n this.isTypeScriptTransformEnabled &&\n this.declarationInfo.typeDeclarations.has(name) &&\n !this.declarationInfo.valueDeclarations.has(name)\n );\n }\n} exports.default = ESMImportTransformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _Transformer = require('./Transformer'); var _Transformer2 = _interopRequireDefault(_Transformer);\n\n class FlowTransformer extends _Transformer2.default {\n constructor( rootTransformer, tokens) {\n super();this.rootTransformer = rootTransformer;this.tokens = tokens;;\n }\n\n process() {\n return (\n this.rootTransformer.processPossibleArrowParamEnd() ||\n this.rootTransformer.processPossibleAsyncArrowWithTypeParams() ||\n this.rootTransformer.processPossibleTypeRange()\n );\n }\n} exports.default = FlowTransformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n\nvar _xhtml = require('../parser/plugins/jsx/xhtml'); var _xhtml2 = _interopRequireDefault(_xhtml);\nvar _types = require('../parser/tokenizer/types');\nvar _charcodes = require('../parser/util/charcodes');\n\nvar _getJSXPragmaInfo = require('../util/getJSXPragmaInfo'); var _getJSXPragmaInfo2 = _interopRequireDefault(_getJSXPragmaInfo);\n\nvar _Transformer = require('./Transformer'); var _Transformer2 = _interopRequireDefault(_Transformer);\n\nconst HEX_NUMBER = /^[\\da-fA-F]+$/;\nconst DECIMAL_NUMBER = /^\\d+$/;\n\n class JSXTransformer extends _Transformer2.default {\n __init() {this.lastLineNumber = 1}\n __init2() {this.lastIndex = 0}\n __init3() {this.filenameVarName = null}\n \n\n constructor(\n rootTransformer,\n tokens,\n importProcessor,\n nameManager,\n options,\n ) {\n super();this.rootTransformer = rootTransformer;this.tokens = tokens;this.importProcessor = importProcessor;this.nameManager = nameManager;this.options = options;JSXTransformer.prototype.__init.call(this);JSXTransformer.prototype.__init2.call(this);JSXTransformer.prototype.__init3.call(this);;\n this.jsxPragmaInfo = _getJSXPragmaInfo2.default.call(void 0, options);\n }\n\n process() {\n if (this.tokens.matches1(_types.TokenType.jsxTagStart)) {\n this.processJSXTag();\n return true;\n }\n return false;\n }\n\n getPrefixCode() {\n if (this.filenameVarName) {\n return `const ${this.filenameVarName} = ${JSON.stringify(this.options.filePath || \"\")};`;\n } else {\n return \"\";\n }\n }\n\n /**\n * Lazily calculate line numbers to avoid unneeded work. We assume this is always called in\n * increasing order by index.\n */\n getLineNumberForIndex(index) {\n const code = this.tokens.code;\n while (this.lastIndex < index && this.lastIndex < code.length) {\n if (code[this.lastIndex] === \"\\n\") {\n this.lastLineNumber++;\n }\n this.lastIndex++;\n }\n return this.lastLineNumber;\n }\n\n getFilenameVarName() {\n if (!this.filenameVarName) {\n this.filenameVarName = this.nameManager.claimFreeName(\"_jsxFileName\");\n }\n return this.filenameVarName;\n }\n\n processProps(firstTokenStart) {\n const lineNumber = this.getLineNumberForIndex(firstTokenStart);\n const devProps = this.options.production\n ? \"\"\n : `__self: this, __source: {fileName: ${this.getFilenameVarName()}, lineNumber: ${lineNumber}}`;\n if (!this.tokens.matches1(_types.TokenType.jsxName) && !this.tokens.matches1(_types.TokenType.braceL)) {\n if (devProps) {\n this.tokens.appendCode(`, {${devProps}}`);\n } else {\n this.tokens.appendCode(`, null`);\n }\n return;\n }\n this.tokens.appendCode(`, {`);\n while (true) {\n if (this.tokens.matches2(_types.TokenType.jsxName, _types.TokenType.eq)) {\n this.processPropKeyName();\n this.tokens.replaceToken(\": \");\n if (this.tokens.matches1(_types.TokenType.braceL)) {\n this.tokens.replaceToken(\"\");\n this.rootTransformer.processBalancedCode();\n this.tokens.replaceToken(\"\");\n } else if (this.tokens.matches1(_types.TokenType.jsxTagStart)) {\n this.processJSXTag();\n } else {\n this.processStringPropValue();\n }\n } else if (this.tokens.matches1(_types.TokenType.jsxName)) {\n this.processPropKeyName();\n this.tokens.appendCode(\": true\");\n } else if (this.tokens.matches1(_types.TokenType.braceL)) {\n this.tokens.replaceToken(\"\");\n this.rootTransformer.processBalancedCode();\n this.tokens.replaceToken(\"\");\n } else {\n break;\n }\n this.tokens.appendCode(\",\");\n }\n if (devProps) {\n this.tokens.appendCode(` ${devProps}}`);\n } else {\n this.tokens.appendCode(\"}\");\n }\n }\n\n processPropKeyName() {\n const keyName = this.tokens.identifierName();\n if (keyName.includes(\"-\")) {\n this.tokens.replaceToken(`'${keyName}'`);\n } else {\n this.tokens.copyToken();\n }\n }\n\n processStringPropValue() {\n const token = this.tokens.currentToken();\n const valueCode = this.tokens.code.slice(token.start + 1, token.end - 1);\n const replacementCode = formatJSXTextReplacement(valueCode);\n const literalCode = formatJSXStringValueLiteral(valueCode);\n this.tokens.replaceToken(literalCode + replacementCode);\n }\n\n /**\n * Process the first part of a tag, before any props.\n */\n processTagIntro() {\n // Walk forward until we see one of these patterns:\n // jsxName to start the first prop, preceded by another jsxName to end the tag name.\n // jsxName to start the first prop, preceded by greaterThan to end the type argument.\n // [open brace] to start the first prop.\n // [jsxTagEnd] to end the open-tag.\n // [slash, jsxTagEnd] to end the self-closing tag.\n let introEnd = this.tokens.currentIndex() + 1;\n while (\n this.tokens.tokens[introEnd].isType ||\n (!this.tokens.matches2AtIndex(introEnd - 1, _types.TokenType.jsxName, _types.TokenType.jsxName) &&\n !this.tokens.matches2AtIndex(introEnd - 1, _types.TokenType.greaterThan, _types.TokenType.jsxName) &&\n !this.tokens.matches1AtIndex(introEnd, _types.TokenType.braceL) &&\n !this.tokens.matches1AtIndex(introEnd, _types.TokenType.jsxTagEnd) &&\n !this.tokens.matches2AtIndex(introEnd, _types.TokenType.slash, _types.TokenType.jsxTagEnd))\n ) {\n introEnd++;\n }\n if (introEnd === this.tokens.currentIndex() + 1) {\n const tagName = this.tokens.identifierName();\n if (startsWithLowerCase(tagName)) {\n this.tokens.replaceToken(`'${tagName}'`);\n }\n }\n while (this.tokens.currentIndex() < introEnd) {\n this.rootTransformer.processToken();\n }\n }\n\n processChildren() {\n while (true) {\n if (this.tokens.matches2(_types.TokenType.jsxTagStart, _types.TokenType.slash)) {\n // Closing tag, so no more children.\n return;\n }\n if (this.tokens.matches1(_types.TokenType.braceL)) {\n if (this.tokens.matches2(_types.TokenType.braceL, _types.TokenType.braceR)) {\n // Empty interpolations and comment-only interpolations are allowed\n // and don't create an extra child arg.\n this.tokens.replaceToken(\"\");\n this.tokens.replaceToken(\"\");\n } else {\n // Interpolated expression.\n this.tokens.replaceToken(\", \");\n this.rootTransformer.processBalancedCode();\n this.tokens.replaceToken(\"\");\n }\n } else if (this.tokens.matches1(_types.TokenType.jsxTagStart)) {\n // Child JSX element\n this.tokens.appendCode(\", \");\n this.processJSXTag();\n } else if (this.tokens.matches1(_types.TokenType.jsxText)) {\n this.processChildTextElement();\n } else {\n throw new Error(\"Unexpected token when processing JSX children.\");\n }\n }\n }\n\n processChildTextElement() {\n const token = this.tokens.currentToken();\n const valueCode = this.tokens.code.slice(token.start, token.end);\n const replacementCode = formatJSXTextReplacement(valueCode);\n const literalCode = formatJSXTextLiteral(valueCode);\n if (literalCode === '\"\"') {\n this.tokens.replaceToken(replacementCode);\n } else {\n this.tokens.replaceToken(`, ${literalCode}${replacementCode}`);\n }\n }\n\n processJSXTag() {\n const {jsxPragmaInfo} = this;\n const resolvedPragmaBaseName = this.importProcessor\n ? this.importProcessor.getIdentifierReplacement(jsxPragmaInfo.base) || jsxPragmaInfo.base\n : jsxPragmaInfo.base;\n const firstTokenStart = this.tokens.currentToken().start;\n // First tag is always jsxTagStart.\n this.tokens.replaceToken(`${resolvedPragmaBaseName}${jsxPragmaInfo.suffix}(`);\n\n if (this.tokens.matches1(_types.TokenType.jsxTagEnd)) {\n // Fragment syntax.\n const resolvedFragmentPragmaBaseName = this.importProcessor\n ? this.importProcessor.getIdentifierReplacement(jsxPragmaInfo.fragmentBase) ||\n jsxPragmaInfo.fragmentBase\n : jsxPragmaInfo.fragmentBase;\n this.tokens.replaceToken(\n `${resolvedFragmentPragmaBaseName}${jsxPragmaInfo.fragmentSuffix}, null`,\n );\n // Tag with children.\n this.processChildren();\n while (!this.tokens.matches1(_types.TokenType.jsxTagEnd)) {\n this.tokens.replaceToken(\"\");\n }\n this.tokens.replaceToken(\")\");\n } else {\n // Normal open tag or self-closing tag.\n this.processTagIntro();\n this.processProps(firstTokenStart);\n\n if (this.tokens.matches2(_types.TokenType.slash, _types.TokenType.jsxTagEnd)) {\n // Self-closing tag.\n this.tokens.replaceToken(\"\");\n this.tokens.replaceToken(\")\");\n } else if (this.tokens.matches1(_types.TokenType.jsxTagEnd)) {\n this.tokens.replaceToken(\"\");\n // Tag with children.\n this.processChildren();\n while (!this.tokens.matches1(_types.TokenType.jsxTagEnd)) {\n this.tokens.replaceToken(\"\");\n }\n this.tokens.replaceToken(\")\");\n } else {\n throw new Error(\"Expected either /> or > at the end of the tag.\");\n }\n }\n }\n} exports.default = JSXTransformer;\n\n/**\n * Spec for identifiers: https://tc39.github.io/ecma262/#prod-IdentifierStart.\n *\n * Really only treat anything starting with a-z as tag names. `_`, `$`, `é`\n * should be treated as copmonent names\n */\n function startsWithLowerCase(s) {\n const firstChar = s.charCodeAt(0);\n return firstChar >= _charcodes.charCodes.lowercaseA && firstChar <= _charcodes.charCodes.lowercaseZ;\n} exports.startsWithLowerCase = startsWithLowerCase;\n\n/**\n * Turn the given jsxText string into a JS string literal. Leading and trailing\n * whitespace on lines is removed, except immediately after the open-tag and\n * before the close-tag. Empty lines are completely removed, and spaces are\n * added between lines after that.\n *\n * We use JSON.stringify to introduce escape characters as necessary, and trim\n * the start and end of each line and remove blank lines.\n */\nfunction formatJSXTextLiteral(text) {\n let result = \"\";\n let whitespace = \"\";\n\n let isInInitialLineWhitespace = false;\n let seenNonWhitespace = false;\n for (let i = 0; i < text.length; i++) {\n const c = text[i];\n if (c === \" \" || c === \"\\t\" || c === \"\\r\") {\n if (!isInInitialLineWhitespace) {\n whitespace += c;\n }\n } else if (c === \"\\n\") {\n whitespace = \"\";\n isInInitialLineWhitespace = true;\n } else {\n if (seenNonWhitespace && isInInitialLineWhitespace) {\n result += \" \";\n }\n result += whitespace;\n whitespace = \"\";\n if (c === \"&\") {\n const {entity, newI} = processEntity(text, i + 1);\n i = newI - 1;\n result += entity;\n } else {\n result += c;\n }\n seenNonWhitespace = true;\n isInInitialLineWhitespace = false;\n }\n }\n if (!isInInitialLineWhitespace) {\n result += whitespace;\n }\n return JSON.stringify(result);\n}\n\n/**\n * Produce the code that should be printed after the JSX text string literal,\n * with most content removed, but all newlines preserved and all spacing at the\n * end preserved.\n */\nfunction formatJSXTextReplacement(text) {\n let numNewlines = 0;\n let numSpaces = 0;\n for (const c of text) {\n if (c === \"\\n\") {\n numNewlines++;\n numSpaces = 0;\n } else if (c === \" \") {\n numSpaces++;\n }\n }\n return \"\\n\".repeat(numNewlines) + \" \".repeat(numSpaces);\n}\n\n/**\n * Format a string in the value position of a JSX prop.\n *\n * Use the same implementation as convertAttribute from\n * babel-helper-builder-react-jsx.\n */\nfunction formatJSXStringValueLiteral(text) {\n let result = \"\";\n for (let i = 0; i < text.length; i++) {\n const c = text[i];\n if (c === \"\\n\") {\n if (/\\s/.test(text[i + 1])) {\n result += \" \";\n while (i < text.length && /\\s/.test(text[i + 1])) {\n i++;\n }\n } else {\n result += \"\\n\";\n }\n } else if (c === \"&\") {\n const {entity, newI} = processEntity(text, i + 1);\n result += entity;\n i = newI - 1;\n } else {\n result += c;\n }\n }\n return JSON.stringify(result);\n}\n\n/**\n * Modified from jsxReadString in Babylon.\n */\nfunction processEntity(text, indexAfterAmpersand) {\n let str = \"\";\n let count = 0;\n let entity;\n let i = indexAfterAmpersand;\n\n while (i < text.length && count++ < 10) {\n const ch = text[i];\n i++;\n if (ch === \";\") {\n if (str[0] === \"#\") {\n if (str[1] === \"x\") {\n str = str.substr(2);\n if (HEX_NUMBER.test(str)) {\n entity = String.fromCodePoint(parseInt(str, 16));\n }\n } else {\n str = str.substr(1);\n if (DECIMAL_NUMBER.test(str)) {\n entity = String.fromCodePoint(parseInt(str, 10));\n }\n }\n } else {\n entity = _xhtml2.default[str];\n }\n break;\n }\n str += ch;\n }\n if (!entity) {\n return {entity: \"&\", newI: indexAfterAmpersand};\n }\n return {entity, newI: i};\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _types = require('../parser/tokenizer/types');\n\nvar _Transformer = require('./Transformer'); var _Transformer2 = _interopRequireDefault(_Transformer);\n\n class NumericSeparatorTransformer extends _Transformer2.default {\n constructor( tokens) {\n super();this.tokens = tokens;;\n }\n\n process() {\n if (this.tokens.matches1(_types.TokenType.num)) {\n const code = this.tokens.currentTokenCode();\n if (code.includes(\"_\")) {\n this.tokens.replaceToken(code.replace(/_/g, \"\"));\n return true;\n }\n }\n return false;\n }\n} exports.default = NumericSeparatorTransformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _types = require('../parser/tokenizer/types');\n\nvar _Transformer = require('./Transformer'); var _Transformer2 = _interopRequireDefault(_Transformer);\n\n class OptionalCatchBindingTransformer extends _Transformer2.default {\n constructor( tokens, nameManager) {\n super();this.tokens = tokens;this.nameManager = nameManager;;\n }\n\n process() {\n if (this.tokens.matches2(_types.TokenType._catch, _types.TokenType.braceL)) {\n this.tokens.copyToken();\n this.tokens.appendCode(` (${this.nameManager.claimFreeName(\"e\")})`);\n return true;\n }\n return false;\n }\n} exports.default = OptionalCatchBindingTransformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _types = require('../parser/tokenizer/types');\n\nvar _Transformer = require('./Transformer'); var _Transformer2 = _interopRequireDefault(_Transformer);\n\n/**\n * Transformer supporting the optional chaining and nullish coalescing operators.\n *\n * Tech plan here:\n * https://github.com/alangpierce/sucrase/wiki/Sucrase-Optional-Chaining-and-Nullish-Coalescing-Technical-Plan\n *\n * The prefix and suffix code snippets are handled by TokenProcessor, and this transformer handles\n * the operators themselves.\n */\n class OptionalChainingNullishTransformer extends _Transformer2.default {\n constructor( tokens, nameManager) {\n super();this.tokens = tokens;this.nameManager = nameManager;;\n }\n\n process() {\n if (this.tokens.matches1(_types.TokenType.nullishCoalescing)) {\n const token = this.tokens.currentToken();\n if (this.tokens.tokens[token.nullishStartIndex].isAsyncOperation) {\n this.tokens.replaceTokenTrimmingLeftWhitespace(\", async () => (\");\n } else {\n this.tokens.replaceTokenTrimmingLeftWhitespace(\", () => (\");\n }\n return true;\n }\n if (this.tokens.matches1(_types.TokenType._delete)) {\n const nextToken = this.tokens.tokenAtRelativeIndex(1);\n if (nextToken.isOptionalChainStart) {\n this.tokens.removeInitialToken();\n return true;\n }\n }\n const token = this.tokens.currentToken();\n const chainStart = token.subscriptStartIndex;\n if (\n chainStart != null &&\n this.tokens.tokens[chainStart].isOptionalChainStart &&\n // Super subscripts can't be optional (since super is never null/undefined), and the syntax\n // relies on the subscript being intact, so leave this token alone.\n this.tokens.tokenAtRelativeIndex(-1).type !== _types.TokenType._super\n ) {\n const param = this.nameManager.claimFreeName(\"_\");\n let arrowStartSnippet;\n if (\n chainStart > 0 &&\n this.tokens.matches1AtIndex(chainStart - 1, _types.TokenType._delete) &&\n this.isLastSubscriptInChain()\n ) {\n // Delete operations are special: we already removed the delete keyword, and to still\n // perform a delete, we need to insert a delete in the very last part of the chain, which\n // in correct code will always be a property access.\n arrowStartSnippet = `${param} => delete ${param}`;\n } else {\n arrowStartSnippet = `${param} => ${param}`;\n }\n if (this.tokens.tokens[chainStart].isAsyncOperation) {\n arrowStartSnippet = `async ${arrowStartSnippet}`;\n }\n if (\n this.tokens.matches2(_types.TokenType.questionDot, _types.TokenType.parenL) ||\n this.tokens.matches2(_types.TokenType.questionDot, _types.TokenType.lessThan)\n ) {\n if (this.justSkippedSuper()) {\n this.tokens.appendCode(\".bind(this)\");\n }\n this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'optionalCall', ${arrowStartSnippet}`);\n } else if (this.tokens.matches2(_types.TokenType.questionDot, _types.TokenType.bracketL)) {\n this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'optionalAccess', ${arrowStartSnippet}`);\n } else if (this.tokens.matches1(_types.TokenType.questionDot)) {\n this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'optionalAccess', ${arrowStartSnippet}.`);\n } else if (this.tokens.matches1(_types.TokenType.dot)) {\n this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'access', ${arrowStartSnippet}.`);\n } else if (this.tokens.matches1(_types.TokenType.bracketL)) {\n this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'access', ${arrowStartSnippet}[`);\n } else if (this.tokens.matches1(_types.TokenType.parenL)) {\n if (this.justSkippedSuper()) {\n this.tokens.appendCode(\".bind(this)\");\n }\n this.tokens.replaceTokenTrimmingLeftWhitespace(`, 'call', ${arrowStartSnippet}(`);\n } else {\n throw new Error(\"Unexpected subscript operator in optional chain.\");\n }\n return true;\n }\n return false;\n }\n\n /**\n * Determine if the current token is the last of its chain, so that we know whether it's eligible\n * to have a delete op inserted.\n *\n * We can do this by walking forward until we determine one way or another. Each\n * isOptionalChainStart token must be paired with exactly one isOptionalChainEnd token after it in\n * a nesting way, so we can track depth and walk to the end of the chain (the point where the\n * depth goes negative) and see if any other subscript token is after us in the chain.\n */\n isLastSubscriptInChain() {\n let depth = 0;\n for (let i = this.tokens.currentIndex() + 1; ; i++) {\n if (i >= this.tokens.tokens.length) {\n throw new Error(\"Reached the end of the code while finding the end of the access chain.\");\n }\n if (this.tokens.tokens[i].isOptionalChainStart) {\n depth++;\n } else if (this.tokens.tokens[i].isOptionalChainEnd) {\n depth--;\n }\n if (depth < 0) {\n return true;\n }\n\n // This subscript token is a later one in the same chain.\n if (depth === 0 && this.tokens.tokens[i].subscriptStartIndex != null) {\n return false;\n }\n }\n }\n\n /**\n * Determine if we are the open-paren in an expression like super.a()?.b.\n *\n * We can do this by walking backward to find the previous subscript. If that subscript was\n * preceded by a super, then we must be the subscript after it, so if this is a call expression,\n * we'll need to attach the right context.\n */\n justSkippedSuper() {\n let depth = 0;\n let index = this.tokens.currentIndex() - 1;\n while (true) {\n if (index < 0) {\n throw new Error(\n \"Reached the start of the code while finding the start of the access chain.\",\n );\n }\n if (this.tokens.tokens[index].isOptionalChainStart) {\n depth--;\n } else if (this.tokens.tokens[index].isOptionalChainEnd) {\n depth++;\n }\n if (depth < 0) {\n return false;\n }\n\n // This subscript token is a later one in the same chain.\n if (depth === 0 && this.tokens.tokens[index].subscriptStartIndex != null) {\n return this.tokens.tokens[index - 1].type === _types.TokenType._super;\n }\n index--;\n }\n }\n} exports.default = OptionalChainingNullishTransformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _tokenizer = require('../parser/tokenizer');\nvar _types = require('../parser/tokenizer/types');\n\n\nvar _Transformer = require('./Transformer'); var _Transformer2 = _interopRequireDefault(_Transformer);\n\n/**\n * Implementation of babel-plugin-transform-react-display-name, which adds a\n * display name to usages of React.createClass and createReactClass.\n */\n class ReactDisplayNameTransformer extends _Transformer2.default {\n constructor(\n rootTransformer,\n tokens,\n importProcessor,\n options,\n ) {\n super();this.rootTransformer = rootTransformer;this.tokens = tokens;this.importProcessor = importProcessor;this.options = options;;\n }\n\n process() {\n const startIndex = this.tokens.currentIndex();\n if (this.tokens.identifierName() === \"createReactClass\") {\n const newName =\n this.importProcessor && this.importProcessor.getIdentifierReplacement(\"createReactClass\");\n if (newName) {\n this.tokens.replaceToken(`(0, ${newName})`);\n } else {\n this.tokens.copyToken();\n }\n this.tryProcessCreateClassCall(startIndex);\n return true;\n }\n if (\n this.tokens.matches3(_types.TokenType.name, _types.TokenType.dot, _types.TokenType.name) &&\n this.tokens.identifierName() === \"React\" &&\n this.tokens.identifierNameAtIndex(this.tokens.currentIndex() + 2) === \"createClass\"\n ) {\n const newName = this.importProcessor\n ? this.importProcessor.getIdentifierReplacement(\"React\") || \"React\"\n : \"React\";\n if (newName) {\n this.tokens.replaceToken(newName);\n this.tokens.copyToken();\n this.tokens.copyToken();\n } else {\n this.tokens.copyToken();\n this.tokens.copyToken();\n this.tokens.copyToken();\n }\n this.tryProcessCreateClassCall(startIndex);\n return true;\n }\n return false;\n }\n\n /**\n * This is called with the token position at the open-paren.\n */\n tryProcessCreateClassCall(startIndex) {\n const displayName = this.findDisplayName(startIndex);\n if (!displayName) {\n return;\n }\n\n if (this.classNeedsDisplayName()) {\n this.tokens.copyExpectedToken(_types.TokenType.parenL);\n this.tokens.copyExpectedToken(_types.TokenType.braceL);\n this.tokens.appendCode(`displayName: '${displayName}',`);\n this.rootTransformer.processBalancedCode();\n this.tokens.copyExpectedToken(_types.TokenType.braceR);\n this.tokens.copyExpectedToken(_types.TokenType.parenR);\n }\n }\n\n findDisplayName(startIndex) {\n if (startIndex < 2) {\n return null;\n }\n if (this.tokens.matches2AtIndex(startIndex - 2, _types.TokenType.name, _types.TokenType.eq)) {\n // This is an assignment (or declaration) and the LHS is either an identifier or a member\n // expression ending in an identifier, so use that identifier name.\n return this.tokens.identifierNameAtIndex(startIndex - 2);\n }\n if (\n startIndex >= 2 &&\n this.tokens.tokens[startIndex - 2].identifierRole === _tokenizer.IdentifierRole.ObjectKey\n ) {\n // This is an object literal value.\n return this.tokens.identifierNameAtIndex(startIndex - 2);\n }\n if (this.tokens.matches2AtIndex(startIndex - 2, _types.TokenType._export, _types.TokenType._default)) {\n return this.getDisplayNameFromFilename();\n }\n return null;\n }\n\n getDisplayNameFromFilename() {\n const filePath = this.options.filePath || \"unknown\";\n const pathSegments = filePath.split(\"/\");\n const filename = pathSegments[pathSegments.length - 1];\n const dotIndex = filename.lastIndexOf(\".\");\n const baseFilename = dotIndex === -1 ? filename : filename.slice(0, dotIndex);\n if (baseFilename === \"index\" && pathSegments[pathSegments.length - 2]) {\n return pathSegments[pathSegments.length - 2];\n } else {\n return baseFilename;\n }\n }\n\n /**\n * We only want to add a display name when this is a function call containing\n * one argument, which is an object literal without `displayName` as an\n * existing key.\n */\n classNeedsDisplayName() {\n let index = this.tokens.currentIndex();\n if (!this.tokens.matches2(_types.TokenType.parenL, _types.TokenType.braceL)) {\n return false;\n }\n // The block starts on the {, and we expect any displayName key to be in\n // that context. We need to ignore other other contexts to avoid matching\n // nested displayName keys.\n const objectStartIndex = index + 1;\n const objectContextId = this.tokens.tokens[objectStartIndex].contextId;\n if (objectContextId == null) {\n throw new Error(\"Expected non-null context ID on object open-brace.\");\n }\n\n for (; index < this.tokens.tokens.length; index++) {\n const token = this.tokens.tokens[index];\n if (token.type === _types.TokenType.braceR && token.contextId === objectContextId) {\n index++;\n break;\n }\n\n if (\n this.tokens.identifierNameAtIndex(index) === \"displayName\" &&\n this.tokens.tokens[index].identifierRole === _tokenizer.IdentifierRole.ObjectKey &&\n token.contextId === objectContextId\n ) {\n // We found a displayName key, so bail out.\n return false;\n }\n }\n\n if (index === this.tokens.tokens.length) {\n throw new Error(\"Unexpected end of input when processing React class.\");\n }\n\n // If we got this far, we know we have createClass with an object with no\n // display name, so we want to proceed as long as that was the only argument.\n return (\n this.tokens.matches1AtIndex(index, _types.TokenType.parenR) ||\n this.tokens.matches2AtIndex(index, _types.TokenType.comma, _types.TokenType.parenR)\n );\n }\n} exports.default = ReactDisplayNameTransformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _tokenizer = require('../parser/tokenizer');\n\nvar _Transformer = require('./Transformer'); var _Transformer2 = _interopRequireDefault(_Transformer);\n\n class ReactHotLoaderTransformer extends _Transformer2.default {\n __init() {this.extractedDefaultExportName = null}\n\n constructor( tokens, filePath) {\n super();this.tokens = tokens;this.filePath = filePath;ReactHotLoaderTransformer.prototype.__init.call(this);;\n }\n\n setExtractedDefaultExportName(extractedDefaultExportName) {\n this.extractedDefaultExportName = extractedDefaultExportName;\n }\n\n getPrefixCode() {\n return `\n (function () {\n var enterModule = require('react-hot-loader').enterModule;\n enterModule && enterModule(module);\n })();`\n .replace(/\\s+/g, \" \")\n .trim();\n }\n\n getSuffixCode() {\n const topLevelNames = new Set();\n for (const token of this.tokens.tokens) {\n if (\n !token.isType &&\n _tokenizer.isTopLevelDeclaration.call(void 0, token) &&\n token.identifierRole !== _tokenizer.IdentifierRole.ImportDeclaration\n ) {\n topLevelNames.add(this.tokens.identifierNameForToken(token));\n }\n }\n const namesToRegister = Array.from(topLevelNames).map((name) => ({\n variableName: name,\n uniqueLocalName: name,\n }));\n if (this.extractedDefaultExportName) {\n namesToRegister.push({\n variableName: this.extractedDefaultExportName,\n uniqueLocalName: \"default\",\n });\n }\n return `\n;(function () {\n var reactHotLoader = require('react-hot-loader').default;\n var leaveModule = require('react-hot-loader').leaveModule;\n if (!reactHotLoader) {\n return;\n }\n${namesToRegister\n .map(\n ({variableName, uniqueLocalName}) =>\n ` reactHotLoader.register(${variableName}, \"${uniqueLocalName}\", ${JSON.stringify(\n this.filePath || \"\",\n )});`,\n )\n .join(\"\\n\")}\n leaveModule(module);\n})();`;\n }\n\n process() {\n return false;\n }\n} exports.default = ReactHotLoaderTransformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n\nvar _keywords = require('../parser/tokenizer/keywords');\nvar _types = require('../parser/tokenizer/types');\n\nvar _getClassInfo = require('../util/getClassInfo'); var _getClassInfo2 = _interopRequireDefault(_getClassInfo);\nvar _CJSImportTransformer = require('./CJSImportTransformer'); var _CJSImportTransformer2 = _interopRequireDefault(_CJSImportTransformer);\nvar _ESMImportTransformer = require('./ESMImportTransformer'); var _ESMImportTransformer2 = _interopRequireDefault(_ESMImportTransformer);\nvar _FlowTransformer = require('./FlowTransformer'); var _FlowTransformer2 = _interopRequireDefault(_FlowTransformer);\nvar _JSXTransformer = require('./JSXTransformer'); var _JSXTransformer2 = _interopRequireDefault(_JSXTransformer);\nvar _NumericSeparatorTransformer = require('./NumericSeparatorTransformer'); var _NumericSeparatorTransformer2 = _interopRequireDefault(_NumericSeparatorTransformer);\nvar _OptionalCatchBindingTransformer = require('./OptionalCatchBindingTransformer'); var _OptionalCatchBindingTransformer2 = _interopRequireDefault(_OptionalCatchBindingTransformer);\nvar _OptionalChainingNullishTransformer = require('./OptionalChainingNullishTransformer'); var _OptionalChainingNullishTransformer2 = _interopRequireDefault(_OptionalChainingNullishTransformer);\nvar _ReactDisplayNameTransformer = require('./ReactDisplayNameTransformer'); var _ReactDisplayNameTransformer2 = _interopRequireDefault(_ReactDisplayNameTransformer);\nvar _ReactHotLoaderTransformer = require('./ReactHotLoaderTransformer'); var _ReactHotLoaderTransformer2 = _interopRequireDefault(_ReactHotLoaderTransformer);\n\nvar _TypeScriptTransformer = require('./TypeScriptTransformer'); var _TypeScriptTransformer2 = _interopRequireDefault(_TypeScriptTransformer);\n\n class RootTransformer {\n __init() {this.transformers = []}\n \n \n __init2() {this.generatedVariables = []}\n \n \n \n\n constructor(\n sucraseContext,\n transforms,\n enableLegacyBabel5ModuleInterop,\n options,\n ) {;RootTransformer.prototype.__init.call(this);RootTransformer.prototype.__init2.call(this);\n this.nameManager = sucraseContext.nameManager;\n this.helperManager = sucraseContext.helperManager;\n const {tokenProcessor, importProcessor} = sucraseContext;\n this.tokens = tokenProcessor;\n this.isImportsTransformEnabled = transforms.includes(\"imports\");\n this.isReactHotLoaderTransformEnabled = transforms.includes(\"react-hot-loader\");\n\n this.transformers.push(\n new (0, _OptionalChainingNullishTransformer2.default)(tokenProcessor, this.nameManager),\n );\n this.transformers.push(new (0, _NumericSeparatorTransformer2.default)(tokenProcessor));\n this.transformers.push(new (0, _OptionalCatchBindingTransformer2.default)(tokenProcessor, this.nameManager));\n if (transforms.includes(\"jsx\")) {\n this.transformers.push(\n new (0, _JSXTransformer2.default)(this, tokenProcessor, importProcessor, this.nameManager, options),\n );\n this.transformers.push(\n new (0, _ReactDisplayNameTransformer2.default)(this, tokenProcessor, importProcessor, options),\n );\n }\n\n let reactHotLoaderTransformer = null;\n if (transforms.includes(\"react-hot-loader\")) {\n if (!options.filePath) {\n throw new Error(\"filePath is required when using the react-hot-loader transform.\");\n }\n reactHotLoaderTransformer = new (0, _ReactHotLoaderTransformer2.default)(tokenProcessor, options.filePath);\n this.transformers.push(reactHotLoaderTransformer);\n }\n\n // Note that we always want to enable the imports transformer, even when the import transform\n // itself isn't enabled, since we need to do type-only import pruning for both Flow and\n // TypeScript.\n if (transforms.includes(\"imports\")) {\n if (importProcessor === null) {\n throw new Error(\"Expected non-null importProcessor with imports transform enabled.\");\n }\n this.transformers.push(\n new (0, _CJSImportTransformer2.default)(\n this,\n tokenProcessor,\n importProcessor,\n this.nameManager,\n reactHotLoaderTransformer,\n enableLegacyBabel5ModuleInterop,\n transforms.includes(\"typescript\"),\n ),\n );\n } else {\n this.transformers.push(\n new (0, _ESMImportTransformer2.default)(\n tokenProcessor,\n this.nameManager,\n reactHotLoaderTransformer,\n transforms.includes(\"typescript\"),\n options,\n ),\n );\n }\n\n if (transforms.includes(\"flow\")) {\n this.transformers.push(new (0, _FlowTransformer2.default)(this, tokenProcessor));\n }\n if (transforms.includes(\"typescript\")) {\n this.transformers.push(\n new (0, _TypeScriptTransformer2.default)(this, tokenProcessor, transforms.includes(\"imports\")),\n );\n }\n }\n\n transform() {\n this.tokens.reset();\n this.processBalancedCode();\n const shouldAddUseStrict = this.isImportsTransformEnabled;\n // \"use strict\" always needs to be first, so override the normal transformer order.\n let prefix = shouldAddUseStrict ? '\"use strict\";' : \"\";\n for (const transformer of this.transformers) {\n prefix += transformer.getPrefixCode();\n }\n prefix += this.helperManager.emitHelpers();\n prefix += this.generatedVariables.map((v) => ` var ${v};`).join(\"\");\n let suffix = \"\";\n for (const transformer of this.transformers) {\n suffix += transformer.getSuffixCode();\n }\n let code = this.tokens.finish();\n if (code.startsWith(\"#!\")) {\n let newlineIndex = code.indexOf(\"\\n\");\n if (newlineIndex === -1) {\n newlineIndex = code.length;\n code += \"\\n\";\n }\n return code.slice(0, newlineIndex + 1) + prefix + code.slice(newlineIndex + 1) + suffix;\n } else {\n return prefix + this.tokens.finish() + suffix;\n }\n }\n\n processBalancedCode() {\n let braceDepth = 0;\n let parenDepth = 0;\n while (!this.tokens.isAtEnd()) {\n if (this.tokens.matches1(_types.TokenType.braceL) || this.tokens.matches1(_types.TokenType.dollarBraceL)) {\n braceDepth++;\n } else if (this.tokens.matches1(_types.TokenType.braceR)) {\n if (braceDepth === 0) {\n return;\n }\n braceDepth--;\n }\n if (this.tokens.matches1(_types.TokenType.parenL)) {\n parenDepth++;\n } else if (this.tokens.matches1(_types.TokenType.parenR)) {\n if (parenDepth === 0) {\n return;\n }\n parenDepth--;\n }\n this.processToken();\n }\n }\n\n processToken() {\n if (this.tokens.matches1(_types.TokenType._class)) {\n this.processClass();\n return;\n }\n for (const transformer of this.transformers) {\n const wasProcessed = transformer.process();\n if (wasProcessed) {\n return;\n }\n }\n this.tokens.copyToken();\n }\n\n /**\n * Skip past a class with a name and return that name.\n */\n processNamedClass() {\n if (!this.tokens.matches2(_types.TokenType._class, _types.TokenType.name)) {\n throw new Error(\"Expected identifier for exported class name.\");\n }\n const name = this.tokens.identifierNameAtIndex(this.tokens.currentIndex() + 1);\n this.processClass();\n return name;\n }\n\n processClass() {\n const classInfo = _getClassInfo2.default.call(void 0, this, this.tokens, this.nameManager);\n\n // Both static and instance initializers need a class name to use to invoke the initializer, so\n // assign to one if necessary.\n const needsCommaExpression =\n classInfo.headerInfo.isExpression &&\n classInfo.staticInitializerNames.length + classInfo.instanceInitializerNames.length > 0;\n\n let className = classInfo.headerInfo.className;\n if (needsCommaExpression) {\n className = this.nameManager.claimFreeName(\"_class\");\n this.generatedVariables.push(className);\n this.tokens.appendCode(` (${className} =`);\n }\n\n const classToken = this.tokens.currentToken();\n const contextId = classToken.contextId;\n if (contextId == null) {\n throw new Error(\"Expected class to have a context ID.\");\n }\n this.tokens.copyExpectedToken(_types.TokenType._class);\n while (!this.tokens.matchesContextIdAndLabel(_types.TokenType.braceL, contextId)) {\n this.processToken();\n }\n\n this.processClassBody(classInfo, className);\n\n const staticInitializerStatements = classInfo.staticInitializerNames.map(\n (name) => `${className}.${name}()`,\n );\n if (needsCommaExpression) {\n this.tokens.appendCode(\n `, ${staticInitializerStatements.map((s) => `${s}, `).join(\"\")}${className})`,\n );\n } else if (classInfo.staticInitializerNames.length > 0) {\n this.tokens.appendCode(` ${staticInitializerStatements.map((s) => `${s};`).join(\" \")}`);\n }\n }\n\n /**\n * We want to just handle class fields in all contexts, since TypeScript supports them. Later,\n * when some JS implementations support class fields, this should be made optional.\n */\n processClassBody(classInfo, className) {\n const {\n headerInfo,\n constructorInsertPos,\n constructorInitializerStatements,\n fields,\n instanceInitializerNames,\n rangesToRemove,\n } = classInfo;\n let fieldIndex = 0;\n let rangeToRemoveIndex = 0;\n const classContextId = this.tokens.currentToken().contextId;\n if (classContextId == null) {\n throw new Error(\"Expected non-null context ID on class.\");\n }\n this.tokens.copyExpectedToken(_types.TokenType.braceL);\n if (this.isReactHotLoaderTransformEnabled) {\n this.tokens.appendCode(\n \"__reactstandin__regenerateByEval(key, code) {this[key] = eval(code);}\",\n );\n }\n\n const needsConstructorInit =\n constructorInitializerStatements.length + instanceInitializerNames.length > 0;\n\n if (constructorInsertPos === null && needsConstructorInit) {\n const constructorInitializersCode = this.makeConstructorInitCode(\n constructorInitializerStatements,\n instanceInitializerNames,\n className,\n );\n if (headerInfo.hasSuperclass) {\n const argsName = this.nameManager.claimFreeName(\"args\");\n this.tokens.appendCode(\n `constructor(...${argsName}) { super(...${argsName}); ${constructorInitializersCode}; }`,\n );\n } else {\n this.tokens.appendCode(`constructor() { ${constructorInitializersCode}; }`);\n }\n }\n\n while (!this.tokens.matchesContextIdAndLabel(_types.TokenType.braceR, classContextId)) {\n if (fieldIndex < fields.length && this.tokens.currentIndex() === fields[fieldIndex].start) {\n let needsCloseBrace = false;\n if (this.tokens.matches1(_types.TokenType.bracketL)) {\n this.tokens.copyTokenWithPrefix(`${fields[fieldIndex].initializerName}() {this`);\n } else if (this.tokens.matches1(_types.TokenType.string) || this.tokens.matches1(_types.TokenType.num)) {\n this.tokens.copyTokenWithPrefix(`${fields[fieldIndex].initializerName}() {this[`);\n needsCloseBrace = true;\n } else {\n this.tokens.copyTokenWithPrefix(`${fields[fieldIndex].initializerName}() {this.`);\n }\n while (this.tokens.currentIndex() < fields[fieldIndex].end) {\n if (needsCloseBrace && this.tokens.currentIndex() === fields[fieldIndex].equalsIndex) {\n this.tokens.appendCode(\"]\");\n }\n this.processToken();\n }\n this.tokens.appendCode(\"}\");\n fieldIndex++;\n } else if (\n rangeToRemoveIndex < rangesToRemove.length &&\n this.tokens.currentIndex() === rangesToRemove[rangeToRemoveIndex].start\n ) {\n this.tokens.removeInitialToken();\n while (this.tokens.currentIndex() < rangesToRemove[rangeToRemoveIndex].end) {\n this.tokens.removeToken();\n }\n rangeToRemoveIndex++;\n } else if (this.tokens.currentIndex() === constructorInsertPos) {\n this.tokens.copyToken();\n if (needsConstructorInit) {\n this.tokens.appendCode(\n `;${this.makeConstructorInitCode(\n constructorInitializerStatements,\n instanceInitializerNames,\n className,\n )};`,\n );\n }\n this.processToken();\n } else {\n this.processToken();\n }\n }\n this.tokens.copyExpectedToken(_types.TokenType.braceR);\n }\n\n makeConstructorInitCode(\n constructorInitializerStatements,\n instanceInitializerNames,\n className,\n ) {\n return [\n ...constructorInitializerStatements,\n ...instanceInitializerNames.map((name) => `${className}.prototype.${name}.call(this)`),\n ].join(\";\");\n }\n\n /**\n * Normally it's ok to simply remove type tokens, but we need to be more careful when dealing with\n * arrow function return types since they can confuse the parser. In that case, we want to move\n * the close-paren to the same line as the arrow.\n *\n * See https://github.com/alangpierce/sucrase/issues/391 for more details.\n */\n processPossibleArrowParamEnd() {\n if (this.tokens.matches2(_types.TokenType.parenR, _types.TokenType.colon) && this.tokens.tokenAtRelativeIndex(1).isType) {\n let nextNonTypeIndex = this.tokens.currentIndex() + 1;\n // Look ahead to see if this is an arrow function or something else.\n while (this.tokens.tokens[nextNonTypeIndex].isType) {\n nextNonTypeIndex++;\n }\n if (this.tokens.matches1AtIndex(nextNonTypeIndex, _types.TokenType.arrow)) {\n this.tokens.removeInitialToken();\n while (this.tokens.currentIndex() < nextNonTypeIndex) {\n this.tokens.removeToken();\n }\n this.tokens.replaceTokenTrimmingLeftWhitespace(\") =>\");\n return true;\n }\n }\n return false;\n }\n\n /**\n * An async arrow function might be of the form:\n *\n * async <\n * T\n * >() => {}\n *\n * in which case, removing the type parameters will cause a syntax error. Detect this case and\n * move the open-paren earlier.\n */\n processPossibleAsyncArrowWithTypeParams() {\n if (\n !this.tokens.matchesContextual(_keywords.ContextualKeyword._async) &&\n !this.tokens.matches1(_types.TokenType._async)\n ) {\n return false;\n }\n const nextToken = this.tokens.tokenAtRelativeIndex(1);\n if (nextToken.type !== _types.TokenType.lessThan || !nextToken.isType) {\n return false;\n }\n\n let nextNonTypeIndex = this.tokens.currentIndex() + 1;\n // Look ahead to see if this is an arrow function or something else.\n while (this.tokens.tokens[nextNonTypeIndex].isType) {\n nextNonTypeIndex++;\n }\n if (this.tokens.matches1AtIndex(nextNonTypeIndex, _types.TokenType.parenL)) {\n this.tokens.replaceToken(\"async (\");\n this.tokens.removeInitialToken();\n while (this.tokens.currentIndex() < nextNonTypeIndex) {\n this.tokens.removeToken();\n }\n this.tokens.removeToken();\n // We ate a ( token, so we need to process the tokens in between and then the ) token so that\n // we remain balanced.\n this.processBalancedCode();\n this.processToken();\n return true;\n }\n return false;\n }\n\n processPossibleTypeRange() {\n if (this.tokens.currentToken().isType) {\n this.tokens.removeInitialToken();\n while (this.tokens.currentToken().isType) {\n this.tokens.removeToken();\n }\n return true;\n }\n return false;\n }\n} exports.default = RootTransformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); class Transformer {\n // Return true if anything was processed, false otherwise.\n \n\n getPrefixCode() {\n return \"\";\n }\n\n getSuffixCode() {\n return \"\";\n }\n} exports.default = Transformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _types = require('../parser/tokenizer/types');\n\nvar _isIdentifier = require('../util/isIdentifier'); var _isIdentifier2 = _interopRequireDefault(_isIdentifier);\n\nvar _Transformer = require('./Transformer'); var _Transformer2 = _interopRequireDefault(_Transformer);\n\n class TypeScriptTransformer extends _Transformer2.default {\n constructor(\n rootTransformer,\n tokens,\n isImportsTransformEnabled,\n ) {\n super();this.rootTransformer = rootTransformer;this.tokens = tokens;this.isImportsTransformEnabled = isImportsTransformEnabled;;\n }\n\n process() {\n if (\n this.rootTransformer.processPossibleArrowParamEnd() ||\n this.rootTransformer.processPossibleAsyncArrowWithTypeParams() ||\n this.rootTransformer.processPossibleTypeRange()\n ) {\n return true;\n }\n if (\n this.tokens.matches1(_types.TokenType._public) ||\n this.tokens.matches1(_types.TokenType._protected) ||\n this.tokens.matches1(_types.TokenType._private) ||\n this.tokens.matches1(_types.TokenType._abstract) ||\n this.tokens.matches1(_types.TokenType._readonly) ||\n this.tokens.matches1(_types.TokenType.nonNullAssertion)\n ) {\n this.tokens.removeInitialToken();\n return true;\n }\n if (this.tokens.matches1(_types.TokenType._enum) || this.tokens.matches2(_types.TokenType._const, _types.TokenType._enum)) {\n this.processEnum();\n return true;\n }\n if (\n this.tokens.matches2(_types.TokenType._export, _types.TokenType._enum) ||\n this.tokens.matches3(_types.TokenType._export, _types.TokenType._const, _types.TokenType._enum)\n ) {\n this.processEnum(true);\n return true;\n }\n return false;\n }\n\n processEnum(isExport = false) {\n // We might have \"export const enum\", so just remove all relevant tokens.\n this.tokens.removeInitialToken();\n while (this.tokens.matches1(_types.TokenType._const) || this.tokens.matches1(_types.TokenType._enum)) {\n this.tokens.removeToken();\n }\n const enumName = this.tokens.identifierName();\n this.tokens.removeToken();\n if (isExport && !this.isImportsTransformEnabled) {\n this.tokens.appendCode(\"export \");\n }\n this.tokens.appendCode(`var ${enumName}; (function (${enumName})`);\n this.tokens.copyExpectedToken(_types.TokenType.braceL);\n this.processEnumBody(enumName);\n this.tokens.copyExpectedToken(_types.TokenType.braceR);\n if (isExport && this.isImportsTransformEnabled) {\n this.tokens.appendCode(`)(${enumName} || (exports.${enumName} = ${enumName} = {}));`);\n } else {\n this.tokens.appendCode(`)(${enumName} || (${enumName} = {}));`);\n }\n }\n\n /**\n * Rather than try to compute the actual enum values at compile time, we just create variables for\n * each one and let everything evaluate at runtime. There's some additional complexity due to\n * handling string literal names, including ones that happen to be valid identifiers.\n */\n processEnumBody(enumName) {\n let isPreviousValidIdentifier = false;\n let lastValueReference = null;\n while (true) {\n if (this.tokens.matches1(_types.TokenType.braceR)) {\n break;\n }\n const nameToken = this.tokens.currentToken();\n let name;\n let nameStringCode;\n if (nameToken.type === _types.TokenType.name) {\n name = this.tokens.identifierNameForToken(nameToken);\n nameStringCode = `\"${name}\"`;\n } else if (nameToken.type === _types.TokenType.string) {\n name = this.tokens.stringValueForToken(nameToken);\n nameStringCode = this.tokens.code.slice(nameToken.start, nameToken.end);\n } else {\n throw new Error(\"Expected name or string at beginning of enum element.\");\n }\n const isValidIdentifier = _isIdentifier2.default.call(void 0, name);\n this.tokens.removeInitialToken();\n\n let valueIsString;\n let valueCode;\n\n if (this.tokens.matches1(_types.TokenType.eq)) {\n const rhsEndIndex = this.tokens.currentToken().rhsEndIndex;\n if (rhsEndIndex == null) {\n throw new Error(\"Expected rhsEndIndex on enum assign.\");\n }\n this.tokens.removeToken();\n if (\n this.tokens.matches2(_types.TokenType.string, _types.TokenType.comma) ||\n this.tokens.matches2(_types.TokenType.string, _types.TokenType.braceR)\n ) {\n valueIsString = true;\n }\n const startToken = this.tokens.currentToken();\n while (this.tokens.currentIndex() < rhsEndIndex) {\n this.tokens.removeToken();\n }\n valueCode = this.tokens.code.slice(\n startToken.start,\n this.tokens.tokenAtRelativeIndex(-1).end,\n );\n } else {\n valueIsString = false;\n if (lastValueReference != null) {\n if (isPreviousValidIdentifier) {\n valueCode = `${lastValueReference} + 1`;\n } else {\n valueCode = `(${lastValueReference}) + 1`;\n }\n } else {\n valueCode = \"0\";\n }\n }\n if (this.tokens.matches1(_types.TokenType.comma)) {\n this.tokens.removeToken();\n }\n\n let valueReference;\n if (isValidIdentifier) {\n this.tokens.appendCode(`const ${name} = ${valueCode}; `);\n valueReference = name;\n } else {\n valueReference = valueCode;\n }\n\n if (valueIsString) {\n this.tokens.appendCode(`${enumName}[${nameStringCode}] = ${valueReference};`);\n } else {\n this.tokens.appendCode(\n `${enumName}[${enumName}[${nameStringCode}] = ${valueReference}] = ${nameStringCode};`,\n );\n }\n lastValueReference = valueReference;\n isPreviousValidIdentifier = isValidIdentifier;\n }\n }\n} exports.default = TypeScriptTransformer;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _types = require('../parser/tokenizer/types');\n\n\n function elideImportEquals(tokens) {\n // import\n tokens.removeInitialToken();\n // name\n tokens.removeToken();\n // =\n tokens.removeToken();\n // name or require\n tokens.removeToken();\n // Handle either `import A = require('A')` or `import A = B.C.D`.\n if (tokens.matches1(_types.TokenType.parenL)) {\n // (\n tokens.removeToken();\n // path string\n tokens.removeToken();\n // )\n tokens.removeToken();\n } else {\n while (tokens.matches1(_types.TokenType.dot)) {\n // .\n tokens.removeToken();\n // name\n tokens.removeToken();\n }\n }\n} exports.default = elideImportEquals;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _linesandcolumns = require('lines-and-columns'); var _linesandcolumns2 = _interopRequireDefault(_linesandcolumns);\n\nvar _types = require('../parser/tokenizer/types');\n\n function formatTokens(code, tokens) {\n if (tokens.length === 0) {\n return \"\";\n }\n\n const tokenKeys = Object.keys(tokens[0]).filter(\n (k) => k !== \"type\" && k !== \"value\" && k !== \"start\" && k !== \"end\" && k !== \"loc\",\n );\n const typeKeys = Object.keys(tokens[0].type).filter((k) => k !== \"label\" && k !== \"keyword\");\n\n const headings = [\"Location\", \"Label\", \"Raw\", ...tokenKeys, ...typeKeys];\n\n const lines = new (0, _linesandcolumns2.default)(code);\n const rows = [headings, ...tokens.map(getTokenComponents)];\n const padding = headings.map(() => 0);\n for (const components of rows) {\n for (let i = 0; i < components.length; i++) {\n padding[i] = Math.max(padding[i], components[i].length);\n }\n }\n return rows\n .map((components) => components.map((component, i) => component.padEnd(padding[i])).join(\" \"))\n .join(\"\\n\");\n\n function getTokenComponents(token) {\n const raw = code.slice(token.start, token.end);\n return [\n formatRange(token.start, token.end),\n _types.formatTokenType.call(void 0, token.type),\n truncate(String(raw), 14),\n ...tokenKeys.map((key) => formatValue(token[key], key)),\n ...typeKeys.map((key) => formatValue(token.type[key], key)),\n ];\n }\n\n // tslint:disable-next-line no-any\n function formatValue(value, key) {\n if (value === true) {\n return key;\n } else if (value === false || value === null) {\n return \"\";\n } else {\n return String(value);\n }\n }\n\n function formatRange(start, end) {\n return `${formatPos(start)}-${formatPos(end)}`;\n }\n\n function formatPos(pos) {\n const location = lines.locationForIndex(pos);\n if (!location) {\n return \"Unknown\";\n } else {\n return `${location.line + 1}:${location.column + 1}`;\n }\n }\n} exports.default = formatTokens;\n\nfunction truncate(s, length) {\n if (s.length > length) {\n return `${s.slice(0, length - 3)}...`;\n } else {\n return s;\n }\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\n\nvar _keywords = require('../parser/tokenizer/keywords');\nvar _types = require('../parser/tokenizer/types');\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/**\n * Get information about the class fields for this class, given a token processor pointing to the\n * open-brace at the start of the class.\n */\n function getClassInfo(\n rootTransformer,\n tokens,\n nameManager,\n) {\n const snapshot = tokens.snapshot();\n\n const headerInfo = processClassHeader(tokens);\n\n let constructorInitializerStatements = [];\n const instanceInitializerNames = [];\n const staticInitializerNames = [];\n let constructorInsertPos = null;\n const fields = [];\n const rangesToRemove = [];\n\n const classContextId = tokens.currentToken().contextId;\n if (classContextId == null) {\n throw new Error(\"Expected non-null class context ID on class open-brace.\");\n }\n\n tokens.nextToken();\n while (!tokens.matchesContextIdAndLabel(_types.TokenType.braceR, classContextId)) {\n if (tokens.matchesContextual(_keywords.ContextualKeyword._constructor) && !tokens.currentToken().isType) {\n ({constructorInitializerStatements, constructorInsertPos} = processConstructor(tokens));\n } else if (tokens.matches1(_types.TokenType.semi)) {\n rangesToRemove.push({start: tokens.currentIndex(), end: tokens.currentIndex() + 1});\n tokens.nextToken();\n } else if (tokens.currentToken().isType) {\n tokens.nextToken();\n } else {\n // Either a method or a field. Skip to the identifier part.\n const statementStartIndex = tokens.currentIndex();\n let isStatic = false;\n let isESPrivate = false;\n while (isAccessModifier(tokens.currentToken())) {\n if (tokens.matches1(_types.TokenType._static)) {\n isStatic = true;\n }\n if (tokens.matches1(_types.TokenType.hash)) {\n isESPrivate = true;\n }\n tokens.nextToken();\n }\n if (isStatic && tokens.matches1(_types.TokenType.braceL)) {\n // This is a static block, so don't process it in any special way.\n skipToNextClassElement(tokens, classContextId);\n continue;\n }\n if (isESPrivate) {\n // Sucrase doesn't attempt to transpile private fields; just leave them as-is.\n skipToNextClassElement(tokens, classContextId);\n continue;\n }\n if (\n tokens.matchesContextual(_keywords.ContextualKeyword._constructor) &&\n !tokens.currentToken().isType\n ) {\n ({constructorInitializerStatements, constructorInsertPos} = processConstructor(tokens));\n continue;\n }\n\n const nameStartIndex = tokens.currentIndex();\n skipFieldName(tokens);\n if (tokens.matches1(_types.TokenType.lessThan) || tokens.matches1(_types.TokenType.parenL)) {\n // This is a method, so nothing to process.\n skipToNextClassElement(tokens, classContextId);\n continue;\n }\n // There might be a type annotation that we need to skip.\n while (tokens.currentToken().isType) {\n tokens.nextToken();\n }\n if (tokens.matches1(_types.TokenType.eq)) {\n const equalsIndex = tokens.currentIndex();\n // This is an initializer, so we need to wrap in an initializer method.\n const valueEnd = tokens.currentToken().rhsEndIndex;\n if (valueEnd == null) {\n throw new Error(\"Expected rhsEndIndex on class field assignment.\");\n }\n tokens.nextToken();\n while (tokens.currentIndex() < valueEnd) {\n rootTransformer.processToken();\n }\n let initializerName;\n if (isStatic) {\n initializerName = nameManager.claimFreeName(\"__initStatic\");\n staticInitializerNames.push(initializerName);\n } else {\n initializerName = nameManager.claimFreeName(\"__init\");\n instanceInitializerNames.push(initializerName);\n }\n // Fields start at the name, so `static x = 1;` has a field range of `x = 1;`.\n fields.push({\n initializerName,\n equalsIndex,\n start: nameStartIndex,\n end: tokens.currentIndex(),\n });\n } else {\n // This is just a declaration, so doesn't need to produce any code in the output.\n rangesToRemove.push({start: statementStartIndex, end: tokens.currentIndex()});\n }\n }\n }\n\n tokens.restoreToSnapshot(snapshot);\n return {\n headerInfo,\n constructorInitializerStatements,\n instanceInitializerNames,\n staticInitializerNames,\n constructorInsertPos,\n fields,\n rangesToRemove,\n };\n} exports.default = getClassInfo;\n\n/**\n * Move the token processor to the next method/field in the class.\n *\n * To do that, we seek forward to the next start of a class name (either an open\n * bracket or an identifier, or the closing curly brace), then seek backward to\n * include any access modifiers.\n */\nfunction skipToNextClassElement(tokens, classContextId) {\n tokens.nextToken();\n while (tokens.currentToken().contextId !== classContextId) {\n tokens.nextToken();\n }\n while (isAccessModifier(tokens.tokenAtRelativeIndex(-1))) {\n tokens.previousToken();\n }\n}\n\nfunction processClassHeader(tokens) {\n const classToken = tokens.currentToken();\n const contextId = classToken.contextId;\n if (contextId == null) {\n throw new Error(\"Expected context ID on class token.\");\n }\n const isExpression = classToken.isExpression;\n if (isExpression == null) {\n throw new Error(\"Expected isExpression on class token.\");\n }\n let className = null;\n let hasSuperclass = false;\n tokens.nextToken();\n if (tokens.matches1(_types.TokenType.name)) {\n className = tokens.identifierName();\n }\n while (!tokens.matchesContextIdAndLabel(_types.TokenType.braceL, contextId)) {\n // If this has a superclass, there will always be an `extends` token. If it doesn't have a\n // superclass, only type parameters and `implements` clauses can show up here, all of which\n // consist only of type tokens. A declaration like `class A<B extends C> {` should *not* count\n // as having a superclass.\n if (tokens.matches1(_types.TokenType._extends) && !tokens.currentToken().isType) {\n hasSuperclass = true;\n }\n tokens.nextToken();\n }\n return {isExpression, className, hasSuperclass};\n}\n\n/**\n * Extract useful information out of a constructor, starting at the \"constructor\" name.\n */\nfunction processConstructor(\n tokens,\n) {\n const constructorInitializerStatements = [];\n\n tokens.nextToken();\n const constructorContextId = tokens.currentToken().contextId;\n if (constructorContextId == null) {\n throw new Error(\"Expected context ID on open-paren starting constructor params.\");\n }\n // Advance through parameters looking for access modifiers.\n while (!tokens.matchesContextIdAndLabel(_types.TokenType.parenR, constructorContextId)) {\n if (tokens.currentToken().contextId === constructorContextId) {\n // Current token is an open paren or comma just before a param, so check\n // that param for access modifiers.\n tokens.nextToken();\n if (isAccessModifier(tokens.currentToken())) {\n tokens.nextToken();\n while (isAccessModifier(tokens.currentToken())) {\n tokens.nextToken();\n }\n const token = tokens.currentToken();\n if (token.type !== _types.TokenType.name) {\n throw new Error(\"Expected identifier after access modifiers in constructor arg.\");\n }\n const name = tokens.identifierNameForToken(token);\n constructorInitializerStatements.push(`this.${name} = ${name}`);\n }\n } else {\n tokens.nextToken();\n }\n }\n // )\n tokens.nextToken();\n let constructorInsertPos = tokens.currentIndex();\n\n // Advance through body looking for a super call.\n let foundSuperCall = false;\n while (!tokens.matchesContextIdAndLabel(_types.TokenType.braceR, constructorContextId)) {\n if (!foundSuperCall && tokens.matches2(_types.TokenType._super, _types.TokenType.parenL)) {\n tokens.nextToken();\n const superCallContextId = tokens.currentToken().contextId;\n if (superCallContextId == null) {\n throw new Error(\"Expected a context ID on the super call\");\n }\n while (!tokens.matchesContextIdAndLabel(_types.TokenType.parenR, superCallContextId)) {\n tokens.nextToken();\n }\n constructorInsertPos = tokens.currentIndex();\n foundSuperCall = true;\n }\n tokens.nextToken();\n }\n // }\n tokens.nextToken();\n\n return {constructorInitializerStatements, constructorInsertPos};\n}\n\n/**\n * Determine if this is any token that can go before the name in a method/field.\n */\nfunction isAccessModifier(token) {\n return [\n _types.TokenType._async,\n _types.TokenType._get,\n _types.TokenType._set,\n _types.TokenType.plus,\n _types.TokenType.minus,\n _types.TokenType._readonly,\n _types.TokenType._static,\n _types.TokenType._public,\n _types.TokenType._private,\n _types.TokenType._protected,\n _types.TokenType._abstract,\n _types.TokenType.star,\n _types.TokenType._declare,\n _types.TokenType.hash,\n ].includes(token.type);\n}\n\n/**\n * The next token or set of tokens is either an identifier or an expression in square brackets, for\n * a method or field name.\n */\nfunction skipFieldName(tokens) {\n if (tokens.matches1(_types.TokenType.bracketL)) {\n const startToken = tokens.currentToken();\n const classContextId = startToken.contextId;\n if (classContextId == null) {\n throw new Error(\"Expected class context ID on computed name open bracket.\");\n }\n while (!tokens.matchesContextIdAndLabel(_types.TokenType.bracketR, classContextId)) {\n tokens.nextToken();\n }\n tokens.nextToken();\n } else {\n tokens.nextToken();\n }\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _tokenizer = require('../parser/tokenizer');\nvar _types = require('../parser/tokenizer/types');\n\n\n\n\n\n\n\n const EMPTY_DECLARATION_INFO = {\n typeDeclarations: new Set(),\n valueDeclarations: new Set(),\n}; exports.EMPTY_DECLARATION_INFO = EMPTY_DECLARATION_INFO;\n\n/**\n * Get all top-level identifiers that should be preserved when exported in TypeScript.\n *\n * Examples:\n * - If an identifier is declared as `const x`, then `export {x}` should be preserved.\n * - If it's declared as `type x`, then `export {x}` should be removed.\n * - If it's declared as both `const x` and `type x`, then the export should be preserved.\n * - Classes and enums should be preserved (even though they also introduce types).\n * - Imported identifiers should be preserved since we don't have enough information to\n * rule them out. --isolatedModules disallows re-exports, which catches errors here.\n */\n function getDeclarationInfo(tokens) {\n const typeDeclarations = new Set();\n const valueDeclarations = new Set();\n for (let i = 0; i < tokens.tokens.length; i++) {\n const token = tokens.tokens[i];\n if (token.type === _types.TokenType.name && _tokenizer.isTopLevelDeclaration.call(void 0, token)) {\n if (token.isType) {\n typeDeclarations.add(tokens.identifierNameForToken(token));\n } else {\n valueDeclarations.add(tokens.identifierNameForToken(token));\n }\n }\n }\n return {typeDeclarations, valueDeclarations};\n} exports.default = getDeclarationInfo;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\nvar _types = require('../parser/tokenizer/types');\n\n/**\n * Get all identifier names in the code, in order, including duplicates.\n */\n function getIdentifierNames(code, tokens) {\n const names = [];\n for (const token of tokens) {\n if (token.type === _types.TokenType.name) {\n names.push(code.slice(token.start, token.end));\n }\n }\n return names;\n} exports.default = getIdentifierNames;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});\n\n\n\n\n\n\n\n\n function getJSXPragmaInfo(options) {\n const [base, suffix] = splitPragma(options.jsxPragma || \"React.createElement\");\n const [fragmentBase, fragmentSuffix] = splitPragma(options.jsxFragmentPragma || \"React.Fragment\");\n return {base, suffix, fragmentBase, fragmentSuffix};\n} exports.default = getJSXPragmaInfo;\n\nfunction splitPragma(pragma) {\n let dotIndex = pragma.indexOf(\".\");\n if (dotIndex === -1) {\n dotIndex = pragma.length;\n }\n return [pragma.slice(0, dotIndex), pragma.slice(dotIndex)];\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\nvar _tokenizer = require('../parser/tokenizer');\nvar _types = require('../parser/tokenizer/types');\n\nvar _JSXTransformer = require('../transformers/JSXTransformer');\nvar _getJSXPragmaInfo = require('./getJSXPragmaInfo'); var _getJSXPragmaInfo2 = _interopRequireDefault(_getJSXPragmaInfo);\n\n function getNonTypeIdentifiers(tokens, options) {\n const jsxPragmaInfo = _getJSXPragmaInfo2.default.call(void 0, options);\n const nonTypeIdentifiers = new Set();\n for (let i = 0; i < tokens.tokens.length; i++) {\n const token = tokens.tokens[i];\n if (\n token.type === _types.TokenType.name &&\n !token.isType &&\n (token.identifierRole === _tokenizer.IdentifierRole.Access ||\n token.identifierRole === _tokenizer.IdentifierRole.ObjectShorthand ||\n token.identifierRole === _tokenizer.IdentifierRole.ExportAccess) &&\n !token.shadowsGlobal\n ) {\n nonTypeIdentifiers.add(tokens.identifierNameForToken(token));\n }\n if (token.type === _types.TokenType.jsxTagStart) {\n nonTypeIdentifiers.add(jsxPragmaInfo.base);\n }\n if (\n token.type === _types.TokenType.jsxTagStart &&\n i + 1 < tokens.tokens.length &&\n tokens.tokens[i + 1].type === _types.TokenType.jsxTagEnd\n ) {\n nonTypeIdentifiers.add(jsxPragmaInfo.base);\n nonTypeIdentifiers.add(jsxPragmaInfo.fragmentBase);\n }\n if (token.type === _types.TokenType.jsxName && token.identifierRole === _tokenizer.IdentifierRole.Access) {\n const identifierName = tokens.identifierNameForToken(token);\n // Lower-case single-component tag names like \"div\" don't count.\n if (!_JSXTransformer.startsWithLowerCase.call(void 0, identifierName) || tokens.tokens[i + 1].type === _types.TokenType.dot) {\n nonTypeIdentifiers.add(tokens.identifierNameForToken(token));\n }\n }\n }\n return nonTypeIdentifiers;\n} exports.getNonTypeIdentifiers = getNonTypeIdentifiers;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _keywords = require('../parser/tokenizer/keywords');\nvar _types = require('../parser/tokenizer/types');\n\n\n/**\n * Special case code to scan for imported names in ESM TypeScript. We need to do this so we can\n * properly get globals so we can compute shadowed globals.\n *\n * This is similar to logic in CJSImportProcessor, but trimmed down to avoid logic with CJS\n * replacement and flow type imports.\n */\n function getTSImportedNames(tokens) {\n const importedNames = new Set();\n for (let i = 0; i < tokens.tokens.length; i++) {\n if (\n tokens.matches1AtIndex(i, _types.TokenType._import) &&\n !tokens.matches3AtIndex(i, _types.TokenType._import, _types.TokenType.name, _types.TokenType.eq)\n ) {\n collectNamesForImport(tokens, i, importedNames);\n }\n }\n return importedNames;\n} exports.default = getTSImportedNames;\n\nfunction collectNamesForImport(\n tokens,\n index,\n importedNames,\n) {\n index++;\n\n if (tokens.matches1AtIndex(index, _types.TokenType.parenL)) {\n // Dynamic import, so nothing to do\n return;\n }\n\n if (tokens.matches1AtIndex(index, _types.TokenType.name)) {\n importedNames.add(tokens.identifierNameAtIndex(index));\n index++;\n if (tokens.matches1AtIndex(index, _types.TokenType.comma)) {\n index++;\n }\n }\n\n if (tokens.matches1AtIndex(index, _types.TokenType.star)) {\n // * as\n index += 2;\n importedNames.add(tokens.identifierNameAtIndex(index));\n index++;\n }\n\n if (tokens.matches1AtIndex(index, _types.TokenType.braceL)) {\n index++;\n collectNamesForNamedImport(tokens, index, importedNames);\n }\n}\n\nfunction collectNamesForNamedImport(\n tokens,\n index,\n importedNames,\n) {\n while (true) {\n if (tokens.matches1AtIndex(index, _types.TokenType.braceR)) {\n return;\n }\n\n // We care about the local name, which might be the first token, or if there's an \"as\", is the\n // one after that.\n let name = tokens.identifierNameAtIndex(index);\n index++;\n if (tokens.matchesContextualAtIndex(index, _keywords.ContextualKeyword._as)) {\n index++;\n name = tokens.identifierNameAtIndex(index);\n index++;\n }\n importedNames.add(name);\n if (tokens.matches2AtIndex(index, _types.TokenType.comma, _types.TokenType.braceR)) {\n return;\n } else if (tokens.matches1AtIndex(index, _types.TokenType.braceR)) {\n return;\n } else if (tokens.matches1AtIndex(index, _types.TokenType.comma)) {\n index++;\n } else {\n throw new Error(`Unexpected token: ${JSON.stringify(tokens.tokens[index])}`);\n }\n }\n}\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _keywords = require('../parser/tokenizer/keywords');\n\n\n/**\n * Determine whether this optional chain or nullish coalescing operation has any await statements in\n * it. If so, we'll need to transpile to an async operation.\n *\n * We compute this by walking the length of the operation and returning true if we see an await\n * keyword used as a real await (rather than an object key or property access). Nested optional\n * chain/nullish operations need to be tracked but don't silence await, but a nested async function\n * (or any other nested scope) will make the await not count.\n */\n function isAsyncOperation(tokens) {\n let index = tokens.currentIndex();\n let depth = 0;\n const startToken = tokens.currentToken();\n do {\n const token = tokens.tokens[index];\n if (token.isOptionalChainStart) {\n depth++;\n }\n if (token.isOptionalChainEnd) {\n depth--;\n }\n depth += token.numNullishCoalesceStarts;\n depth -= token.numNullishCoalesceEnds;\n\n if (\n token.contextualKeyword === _keywords.ContextualKeyword._await &&\n token.identifierRole == null &&\n token.scopeDepth === startToken.scopeDepth\n ) {\n return true;\n }\n index += 1;\n } while (depth > 0 && index < tokens.tokens.length);\n return false;\n} exports.default = isAsyncOperation;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _identifier = require('../parser/util/identifier');\n\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar\n// Hard-code a list of reserved words rather than trying to use keywords or contextual keywords\n// from the parser, since currently there are various exceptions, like `package` being reserved\n// but unused and various contextual keywords being reserved. Note that we assume that all code\n// compiled by Sucrase is in a module, so strict mode words and await are all considered reserved\n// here.\nconst RESERVED_WORDS = new Set([\n // Reserved keywords as of ECMAScript 2015\n \"break\",\n \"case\",\n \"catch\",\n \"class\",\n \"const\",\n \"continue\",\n \"debugger\",\n \"default\",\n \"delete\",\n \"do\",\n \"else\",\n \"export\",\n \"extends\",\n \"finally\",\n \"for\",\n \"function\",\n \"if\",\n \"import\",\n \"in\",\n \"instanceof\",\n \"new\",\n \"return\",\n \"super\",\n \"switch\",\n \"this\",\n \"throw\",\n \"try\",\n \"typeof\",\n \"var\",\n \"void\",\n \"while\",\n \"with\",\n \"yield\",\n // Future reserved keywords\n \"enum\",\n \"implements\",\n \"interface\",\n \"let\",\n \"package\",\n \"private\",\n \"protected\",\n \"public\",\n \"static\",\n \"await\",\n]);\n\n function isIdentifier(name) {\n if (name.length === 0) {\n return false;\n }\n if (!_identifier.IS_IDENTIFIER_START[name.charCodeAt(0)]) {\n return false;\n }\n for (let i = 1; i < name.length; i++) {\n if (!_identifier.IS_IDENTIFIER_CHAR[name.charCodeAt(i)]) {\n return false;\n }\n }\n return !RESERVED_WORDS.has(name);\n} exports.default = isIdentifier;\n","\"use strict\";Object.defineProperty(exports, \"__esModule\", {value: true});var _types = require('../parser/tokenizer/types');\n\n\n\n/**\n * Common method sharing code between CJS and ESM cases, since they're the same here.\n */\n function shouldElideDefaultExport(\n isTypeScriptTransformEnabled,\n tokens,\n declarationInfo,\n) {\n if (!isTypeScriptTransformEnabled) {\n return false;\n }\n const exportToken = tokens.currentToken();\n if (exportToken.rhsEndIndex == null) {\n throw new Error(\"Expected non-null rhsEndIndex on export token.\");\n }\n // The export must be of the form `export default a` or `export default a;`.\n const numTokens = exportToken.rhsEndIndex - tokens.currentIndex();\n if (\n numTokens !== 3 &&\n !(numTokens === 4 && tokens.matches1AtIndex(exportToken.rhsEndIndex - 1, _types.TokenType.semi))\n ) {\n return false;\n }\n const identifierToken = tokens.tokenAtRelativeIndex(2);\n if (identifierToken.type !== _types.TokenType.name) {\n return false;\n }\n const exportedName = tokens.identifierNameForToken(identifierToken);\n return (\n declarationInfo.typeDeclarations.has(exportedName) &&\n !declarationInfo.valueDeclarations.has(exportedName)\n );\n} exports.default = shouldElideDefaultExport;\n","\"use strict\";\nvar __spreadArrays = (this && this.__spreadArrays) || function () {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.Checker = exports.createCheckers = void 0;\nvar types_1 = require(\"./types\");\nvar util_1 = require(\"./util\");\n/**\n * Export functions used to define interfaces.\n */\nvar types_2 = require(\"./types\");\nObject.defineProperty(exports, \"TArray\", { enumerable: true, get: function () { return types_2.TArray; } });\nObject.defineProperty(exports, \"TEnumType\", { enumerable: true, get: function () { return types_2.TEnumType; } });\nObject.defineProperty(exports, \"TEnumLiteral\", { enumerable: true, get: function () { return types_2.TEnumLiteral; } });\nObject.defineProperty(exports, \"TFunc\", { enumerable: true, get: function () { return types_2.TFunc; } });\nObject.defineProperty(exports, \"TIface\", { enumerable: true, get: function () { return types_2.TIface; } });\nObject.defineProperty(exports, \"TLiteral\", { enumerable: true, get: function () { return types_2.TLiteral; } });\nObject.defineProperty(exports, \"TName\", { enumerable: true, get: function () { return types_2.TName; } });\nObject.defineProperty(exports, \"TOptional\", { enumerable: true, get: function () { return types_2.TOptional; } });\nObject.defineProperty(exports, \"TParam\", { enumerable: true, get: function () { return types_2.TParam; } });\nObject.defineProperty(exports, \"TParamList\", { enumerable: true, get: function () { return types_2.TParamList; } });\nObject.defineProperty(exports, \"TProp\", { enumerable: true, get: function () { return types_2.TProp; } });\nObject.defineProperty(exports, \"TTuple\", { enumerable: true, get: function () { return types_2.TTuple; } });\nObject.defineProperty(exports, \"TType\", { enumerable: true, get: function () { return types_2.TType; } });\nObject.defineProperty(exports, \"TUnion\", { enumerable: true, get: function () { return types_2.TUnion; } });\nObject.defineProperty(exports, \"TIntersection\", { enumerable: true, get: function () { return types_2.TIntersection; } });\nObject.defineProperty(exports, \"array\", { enumerable: true, get: function () { return types_2.array; } });\nObject.defineProperty(exports, \"enumlit\", { enumerable: true, get: function () { return types_2.enumlit; } });\nObject.defineProperty(exports, \"enumtype\", { enumerable: true, get: function () { return types_2.enumtype; } });\nObject.defineProperty(exports, \"func\", { enumerable: true, get: function () { return types_2.func; } });\nObject.defineProperty(exports, \"iface\", { enumerable: true, get: function () { return types_2.iface; } });\nObject.defineProperty(exports, \"lit\", { enumerable: true, get: function () { return types_2.lit; } });\nObject.defineProperty(exports, \"name\", { enumerable: true, get: function () { return types_2.name; } });\nObject.defineProperty(exports, \"opt\", { enumerable: true, get: function () { return types_2.opt; } });\nObject.defineProperty(exports, \"param\", { enumerable: true, get: function () { return types_2.param; } });\nObject.defineProperty(exports, \"tuple\", { enumerable: true, get: function () { return types_2.tuple; } });\nObject.defineProperty(exports, \"union\", { enumerable: true, get: function () { return types_2.union; } });\nObject.defineProperty(exports, \"intersection\", { enumerable: true, get: function () { return types_2.intersection; } });\nObject.defineProperty(exports, \"BasicType\", { enumerable: true, get: function () { return types_2.BasicType; } });\nvar util_2 = require(\"./util\");\nObject.defineProperty(exports, \"VError\", { enumerable: true, get: function () { return util_2.VError; } });\n/**\n * Takes one of more type suites (e.g. a module generated by `ts-interface-builder`), and combines\n * them into a suite of interface checkers. If a type is used by name, that name should be present\n * among the passed-in type suites.\n *\n * The returned object maps type names to Checker objects.\n */\nfunction createCheckers() {\n var typeSuite = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n typeSuite[_i] = arguments[_i];\n }\n var fullSuite = Object.assign.apply(Object, __spreadArrays([{}, types_1.basicTypes], typeSuite));\n var checkers = {};\n for (var _a = 0, typeSuite_1 = typeSuite; _a < typeSuite_1.length; _a++) {\n var suite_1 = typeSuite_1[_a];\n for (var _b = 0, _c = Object.keys(suite_1); _b < _c.length; _b++) {\n var name = _c[_b];\n checkers[name] = new Checker(fullSuite, suite_1[name]);\n }\n }\n return checkers;\n}\nexports.createCheckers = createCheckers;\n/**\n * Checker implements validation of objects, and also includes accessors to validate method calls.\n * Checkers should be created using `createCheckers()`.\n */\nvar Checker = /** @class */ (function () {\n // Create checkers by using `createCheckers()` function.\n function Checker(suite, ttype, _path) {\n if (_path === void 0) { _path = 'value'; }\n this.suite = suite;\n this.ttype = ttype;\n this._path = _path;\n this.props = new Map();\n if (ttype instanceof types_1.TIface) {\n for (var _i = 0, _a = ttype.props; _i < _a.length; _i++) {\n var p = _a[_i];\n this.props.set(p.name, p.ttype);\n }\n }\n this.checkerPlain = this.ttype.getChecker(suite, false);\n this.checkerStrict = this.ttype.getChecker(suite, true);\n }\n /**\n * Set the path to report in errors, instead of the default \"value\". (E.g. if the Checker is for\n * a \"person\" interface, set path to \"person\" to report e.g. \"person.name is not a string\".)\n */\n Checker.prototype.setReportedPath = function (path) {\n this._path = path;\n };\n /**\n * Check that the given value satisfies this checker's type, or throw Error.\n */\n Checker.prototype.check = function (value) { return this._doCheck(this.checkerPlain, value); };\n /**\n * A fast check for whether or not the given value satisfies this Checker's type. This returns\n * true or false, does not produce an error message, and is fast both on success and on failure.\n */\n Checker.prototype.test = function (value) {\n return this.checkerPlain(value, new util_1.NoopContext());\n };\n /**\n * Returns an error object describing the errors if the given value does not satisfy this\n * Checker's type, or null if it does.\n */\n Checker.prototype.validate = function (value) {\n return this._doValidate(this.checkerPlain, value);\n };\n /**\n * Check that the given value satisfies this checker's type strictly. This checks that objects\n * and tuples have no extra members. Note that this prevents backward compatibility, so usually\n * a plain check() is more appropriate.\n */\n Checker.prototype.strictCheck = function (value) { return this._doCheck(this.checkerStrict, value); };\n /**\n * A fast strict check for whether or not the given value satisfies this Checker's type. Returns\n * true or false, does not produce an error message, and is fast both on success and on failure.\n */\n Checker.prototype.strictTest = function (value) {\n return this.checkerStrict(value, new util_1.NoopContext());\n };\n /**\n * Returns an error object describing the errors if the given value does not satisfy this\n * Checker's type strictly, or null if it does.\n */\n Checker.prototype.strictValidate = function (value) {\n return this._doValidate(this.checkerStrict, value);\n };\n /**\n * If this checker is for an interface, returns a Checker for the type required for the given\n * property of this interface.\n */\n Checker.prototype.getProp = function (prop) {\n var ttype = this.props.get(prop);\n if (!ttype) {\n throw new Error(\"Type has no property \" + prop);\n }\n return new Checker(this.suite, ttype, this._path + \".\" + prop);\n };\n /**\n * If this checker is for an interface, returns a Checker for the argument-list required to call\n * the given method of this interface. E.g. if this Checker is for the interface:\n * interface Foo {\n * find(s: string, pos?: number): number;\n * }\n * Then methodArgs(\"find\").check(...) will succeed for [\"foo\"] and [\"foo\", 3], but not for [17].\n */\n Checker.prototype.methodArgs = function (methodName) {\n var tfunc = this._getMethod(methodName);\n return new Checker(this.suite, tfunc.paramList);\n };\n /**\n * If this checker is for an interface, returns a Checker for the return value of the given\n * method of this interface.\n */\n Checker.prototype.methodResult = function (methodName) {\n var tfunc = this._getMethod(methodName);\n return new Checker(this.suite, tfunc.result);\n };\n /**\n * If this checker is for a function, returns a Checker for its argument-list.\n */\n Checker.prototype.getArgs = function () {\n if (!(this.ttype instanceof types_1.TFunc)) {\n throw new Error(\"getArgs() applied to non-function\");\n }\n return new Checker(this.suite, this.ttype.paramList);\n };\n /**\n * If this checker is for a function, returns a Checker for its result.\n */\n Checker.prototype.getResult = function () {\n if (!(this.ttype instanceof types_1.TFunc)) {\n throw new Error(\"getResult() applied to non-function\");\n }\n return new Checker(this.suite, this.ttype.result);\n };\n /**\n * Return the type for which this is a checker.\n */\n Checker.prototype.getType = function () {\n return this.ttype;\n };\n /**\n * Actual implementation of check() and strictCheck().\n */\n Checker.prototype._doCheck = function (checkerFunc, value) {\n var noopCtx = new util_1.NoopContext();\n if (!checkerFunc(value, noopCtx)) {\n var detailCtx = new util_1.DetailContext();\n checkerFunc(value, detailCtx);\n throw detailCtx.getError(this._path);\n }\n };\n Checker.prototype._doValidate = function (checkerFunc, value) {\n var noopCtx = new util_1.NoopContext();\n if (checkerFunc(value, noopCtx)) {\n return null;\n }\n var detailCtx = new util_1.DetailContext();\n checkerFunc(value, detailCtx);\n return detailCtx.getErrorDetail(this._path);\n };\n Checker.prototype._getMethod = function (methodName) {\n var ttype = this.props.get(methodName);\n if (!ttype) {\n throw new Error(\"Type has no property \" + methodName);\n }\n if (!(ttype instanceof types_1.TFunc)) {\n throw new Error(\"Property \" + methodName + \" is not a method\");\n }\n return ttype;\n };\n return Checker;\n}());\nexports.Checker = Checker;\n","\"use strict\";\n/**\n * This module defines nodes used to define types and validations for objects and interfaces.\n */\n// tslint:disable:no-shadowed-variable prefer-for-of\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.basicTypes = exports.BasicType = exports.TParamList = exports.TParam = exports.param = exports.TFunc = exports.func = exports.TProp = exports.TOptional = exports.opt = exports.TIface = exports.iface = exports.TEnumLiteral = exports.enumlit = exports.TEnumType = exports.enumtype = exports.TIntersection = exports.intersection = exports.TUnion = exports.union = exports.TTuple = exports.tuple = exports.TArray = exports.array = exports.TLiteral = exports.lit = exports.TName = exports.name = exports.TType = void 0;\nvar util_1 = require(\"./util\");\n/** Node that represents a type. */\nvar TType = /** @class */ (function () {\n function TType() {\n }\n return TType;\n}());\nexports.TType = TType;\n/** Parses a type spec into a TType node. */\nfunction parseSpec(typeSpec) {\n return typeof typeSpec === \"string\" ? name(typeSpec) : typeSpec;\n}\nfunction getNamedType(suite, name) {\n var ttype = suite[name];\n if (!ttype) {\n throw new Error(\"Unknown type \" + name);\n }\n return ttype;\n}\n/**\n * Defines a type name, either built-in, or defined in this suite. It can typically be included in\n * the specs as just a plain string.\n */\nfunction name(value) { return new TName(value); }\nexports.name = name;\nvar TName = /** @class */ (function (_super) {\n __extends(TName, _super);\n function TName(name) {\n var _this = _super.call(this) || this;\n _this.name = name;\n _this._failMsg = \"is not a \" + name;\n return _this;\n }\n TName.prototype.getChecker = function (suite, strict, allowedProps) {\n var _this = this;\n var ttype = getNamedType(suite, this.name);\n var checker = ttype.getChecker(suite, strict, allowedProps);\n if (ttype instanceof BasicType || ttype instanceof TName) {\n return checker;\n }\n // For complex types, add an additional \"is not a <Type>\" message on failure.\n return function (value, ctx) { return checker(value, ctx) ? true : ctx.fail(null, _this._failMsg, 0); };\n };\n return TName;\n}(TType));\nexports.TName = TName;\n/**\n * Defines a literal value, e.g. lit('hello') or lit(123).\n */\nfunction lit(value) { return new TLiteral(value); }\nexports.lit = lit;\nvar TLiteral = /** @class */ (function (_super) {\n __extends(TLiteral, _super);\n function TLiteral(value) {\n var _this = _super.call(this) || this;\n _this.value = value;\n _this.name = JSON.stringify(value);\n _this._failMsg = \"is not \" + _this.name;\n return _this;\n }\n TLiteral.prototype.getChecker = function (suite, strict) {\n var _this = this;\n return function (value, ctx) { return (value === _this.value) ? true : ctx.fail(null, _this._failMsg, -1); };\n };\n return TLiteral;\n}(TType));\nexports.TLiteral = TLiteral;\n/**\n * Defines an array type, e.g. array('number').\n */\nfunction array(typeSpec) { return new TArray(parseSpec(typeSpec)); }\nexports.array = array;\nvar TArray = /** @class */ (function (_super) {\n __extends(TArray, _super);\n function TArray(ttype) {\n var _this = _super.call(this) || this;\n _this.ttype = ttype;\n return _this;\n }\n TArray.prototype.getChecker = function (suite, strict) {\n var itemChecker = this.ttype.getChecker(suite, strict);\n return function (value, ctx) {\n if (!Array.isArray(value)) {\n return ctx.fail(null, \"is not an array\", 0);\n }\n for (var i = 0; i < value.length; i++) {\n var ok = itemChecker(value[i], ctx);\n if (!ok) {\n return ctx.fail(i, null, 1);\n }\n }\n return true;\n };\n };\n return TArray;\n}(TType));\nexports.TArray = TArray;\n/**\n * Defines a tuple type, e.g. tuple('string', 'number').\n */\nfunction tuple() {\n var typeSpec = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n typeSpec[_i] = arguments[_i];\n }\n return new TTuple(typeSpec.map(function (t) { return parseSpec(t); }));\n}\nexports.tuple = tuple;\nvar TTuple = /** @class */ (function (_super) {\n __extends(TTuple, _super);\n function TTuple(ttypes) {\n var _this = _super.call(this) || this;\n _this.ttypes = ttypes;\n return _this;\n }\n TTuple.prototype.getChecker = function (suite, strict) {\n var itemCheckers = this.ttypes.map(function (t) { return t.getChecker(suite, strict); });\n var checker = function (value, ctx) {\n if (!Array.isArray(value)) {\n return ctx.fail(null, \"is not an array\", 0);\n }\n for (var i = 0; i < itemCheckers.length; i++) {\n var ok = itemCheckers[i](value[i], ctx);\n if (!ok) {\n return ctx.fail(i, null, 1);\n }\n }\n return true;\n };\n if (!strict) {\n return checker;\n }\n return function (value, ctx) {\n if (!checker(value, ctx)) {\n return false;\n }\n return value.length <= itemCheckers.length ? true :\n ctx.fail(itemCheckers.length, \"is extraneous\", 2);\n };\n };\n return TTuple;\n}(TType));\nexports.TTuple = TTuple;\n/**\n * Defines a union type, e.g. union('number', 'null').\n */\nfunction union() {\n var typeSpec = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n typeSpec[_i] = arguments[_i];\n }\n return new TUnion(typeSpec.map(function (t) { return parseSpec(t); }));\n}\nexports.union = union;\nvar TUnion = /** @class */ (function (_super) {\n __extends(TUnion, _super);\n function TUnion(ttypes) {\n var _this = _super.call(this) || this;\n _this.ttypes = ttypes;\n var names = ttypes.map(function (t) { return t instanceof TName || t instanceof TLiteral ? t.name : null; })\n .filter(function (n) { return n; });\n var otherTypes = ttypes.length - names.length;\n if (names.length) {\n if (otherTypes > 0) {\n names.push(otherTypes + \" more\");\n }\n _this._failMsg = \"is none of \" + names.join(\", \");\n }\n else {\n _this._failMsg = \"is none of \" + otherTypes + \" types\";\n }\n return _this;\n }\n TUnion.prototype.getChecker = function (suite, strict) {\n var _this = this;\n var itemCheckers = this.ttypes.map(function (t) { return t.getChecker(suite, strict); });\n return function (value, ctx) {\n var ur = ctx.unionResolver();\n for (var i = 0; i < itemCheckers.length; i++) {\n var ok = itemCheckers[i](value, ur.createContext());\n if (ok) {\n return true;\n }\n }\n ctx.resolveUnion(ur);\n return ctx.fail(null, _this._failMsg, 0);\n };\n };\n return TUnion;\n}(TType));\nexports.TUnion = TUnion;\n/**\n * Defines an intersection type, e.g. intersection('number', 'null').\n */\nfunction intersection() {\n var typeSpec = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n typeSpec[_i] = arguments[_i];\n }\n return new TIntersection(typeSpec.map(function (t) { return parseSpec(t); }));\n}\nexports.intersection = intersection;\nvar TIntersection = /** @class */ (function (_super) {\n __extends(TIntersection, _super);\n function TIntersection(ttypes) {\n var _this = _super.call(this) || this;\n _this.ttypes = ttypes;\n return _this;\n }\n TIntersection.prototype.getChecker = function (suite, strict) {\n var allowedProps = new Set();\n var itemCheckers = this.ttypes.map(function (t) { return t.getChecker(suite, strict, allowedProps); });\n return function (value, ctx) {\n var ok = itemCheckers.every(function (checker) { return checker(value, ctx); });\n if (ok) {\n return true;\n }\n return ctx.fail(null, null, 0);\n };\n };\n return TIntersection;\n}(TType));\nexports.TIntersection = TIntersection;\n/**\n * Defines an enum type, e.g. enum({'A': 1, 'B': 2}).\n */\nfunction enumtype(values) {\n return new TEnumType(values);\n}\nexports.enumtype = enumtype;\nvar TEnumType = /** @class */ (function (_super) {\n __extends(TEnumType, _super);\n function TEnumType(members) {\n var _this = _super.call(this) || this;\n _this.members = members;\n _this.validValues = new Set();\n _this._failMsg = \"is not a valid enum value\";\n _this.validValues = new Set(Object.keys(members).map(function (name) { return members[name]; }));\n return _this;\n }\n TEnumType.prototype.getChecker = function (suite, strict) {\n var _this = this;\n return function (value, ctx) {\n return (_this.validValues.has(value) ? true : ctx.fail(null, _this._failMsg, 0));\n };\n };\n return TEnumType;\n}(TType));\nexports.TEnumType = TEnumType;\n/**\n * Defines a literal enum value, such as Direction.Up, specified as enumlit(\"Direction\", \"Up\").\n */\nfunction enumlit(name, prop) {\n return new TEnumLiteral(name, prop);\n}\nexports.enumlit = enumlit;\nvar TEnumLiteral = /** @class */ (function (_super) {\n __extends(TEnumLiteral, _super);\n function TEnumLiteral(enumName, prop) {\n var _this = _super.call(this) || this;\n _this.enumName = enumName;\n _this.prop = prop;\n _this._failMsg = \"is not \" + enumName + \".\" + prop;\n return _this;\n }\n TEnumLiteral.prototype.getChecker = function (suite, strict) {\n var _this = this;\n var ttype = getNamedType(suite, this.enumName);\n if (!(ttype instanceof TEnumType)) {\n throw new Error(\"Type \" + this.enumName + \" used in enumlit is not an enum type\");\n }\n var val = ttype.members[this.prop];\n if (!ttype.members.hasOwnProperty(this.prop)) {\n throw new Error(\"Unknown value \" + this.enumName + \".\" + this.prop + \" used in enumlit\");\n }\n return function (value, ctx) { return (value === val) ? true : ctx.fail(null, _this._failMsg, -1); };\n };\n return TEnumLiteral;\n}(TType));\nexports.TEnumLiteral = TEnumLiteral;\nfunction makeIfaceProps(props) {\n return Object.keys(props).map(function (name) { return makeIfaceProp(name, props[name]); });\n}\nfunction makeIfaceProp(name, prop) {\n return prop instanceof TOptional ?\n new TProp(name, prop.ttype, true) :\n new TProp(name, parseSpec(prop), false);\n}\n/**\n * Defines an interface. The first argument is an array of interfaces that it extends, and the\n * second is an array of properties.\n */\nfunction iface(bases, props) {\n return new TIface(bases, makeIfaceProps(props));\n}\nexports.iface = iface;\nvar TIface = /** @class */ (function (_super) {\n __extends(TIface, _super);\n function TIface(bases, props) {\n var _this = _super.call(this) || this;\n _this.bases = bases;\n _this.props = props;\n _this.propSet = new Set(props.map(function (p) { return p.name; }));\n return _this;\n }\n TIface.prototype.getChecker = function (suite, strict, allowedProps) {\n var _this = this;\n var baseCheckers = this.bases.map(function (b) { return getNamedType(suite, b).getChecker(suite, strict); });\n var propCheckers = this.props.map(function (prop) { return prop.ttype.getChecker(suite, strict); });\n var testCtx = new util_1.NoopContext();\n // Consider a prop required if it's not optional AND does not allow for undefined as a value.\n var isPropRequired = this.props.map(function (prop, i) {\n return !prop.isOpt && !propCheckers[i](undefined, testCtx);\n });\n var checker = function (value, ctx) {\n if (typeof value !== \"object\" || value === null) {\n return ctx.fail(null, \"is not an object\", 0);\n }\n for (var i = 0; i < baseCheckers.length; i++) {\n if (!baseCheckers[i](value, ctx)) {\n return false;\n }\n }\n for (var i = 0; i < propCheckers.length; i++) {\n var name_1 = _this.props[i].name;\n var v = value[name_1];\n if (v === undefined) {\n if (isPropRequired[i]) {\n return ctx.fail(name_1, \"is missing\", 1);\n }\n }\n else {\n var ok = propCheckers[i](v, ctx);\n if (!ok) {\n return ctx.fail(name_1, null, 1);\n }\n }\n }\n return true;\n };\n if (!strict) {\n return checker;\n }\n var propSet = this.propSet;\n if (allowedProps) {\n this.propSet.forEach(function (prop) { return allowedProps.add(prop); });\n propSet = allowedProps;\n }\n // In strict mode, check also for unknown enumerable properties.\n return function (value, ctx) {\n if (!checker(value, ctx)) {\n return false;\n }\n for (var prop in value) {\n if (!propSet.has(prop)) {\n return ctx.fail(prop, \"is extraneous\", 2);\n }\n }\n return true;\n };\n };\n return TIface;\n}(TType));\nexports.TIface = TIface;\n/**\n * Defines an optional property on an interface.\n */\nfunction opt(typeSpec) { return new TOptional(parseSpec(typeSpec)); }\nexports.opt = opt;\nvar TOptional = /** @class */ (function (_super) {\n __extends(TOptional, _super);\n function TOptional(ttype) {\n var _this = _super.call(this) || this;\n _this.ttype = ttype;\n return _this;\n }\n TOptional.prototype.getChecker = function (suite, strict) {\n var itemChecker = this.ttype.getChecker(suite, strict);\n return function (value, ctx) {\n return value === undefined || itemChecker(value, ctx);\n };\n };\n return TOptional;\n}(TType));\nexports.TOptional = TOptional;\n/**\n * Defines a property in an interface.\n */\nvar TProp = /** @class */ (function () {\n function TProp(name, ttype, isOpt) {\n this.name = name;\n this.ttype = ttype;\n this.isOpt = isOpt;\n }\n return TProp;\n}());\nexports.TProp = TProp;\n/**\n * Defines a function. The first argument declares the function's return type, the rest declare\n * its parameters.\n */\nfunction func(resultSpec) {\n var params = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n params[_i - 1] = arguments[_i];\n }\n return new TFunc(new TParamList(params), parseSpec(resultSpec));\n}\nexports.func = func;\nvar TFunc = /** @class */ (function (_super) {\n __extends(TFunc, _super);\n function TFunc(paramList, result) {\n var _this = _super.call(this) || this;\n _this.paramList = paramList;\n _this.result = result;\n return _this;\n }\n TFunc.prototype.getChecker = function (suite, strict) {\n return function (value, ctx) {\n return typeof value === \"function\" ? true : ctx.fail(null, \"is not a function\", 0);\n };\n };\n return TFunc;\n}(TType));\nexports.TFunc = TFunc;\n/**\n * Defines a function parameter.\n */\nfunction param(name, typeSpec, isOpt) {\n return new TParam(name, parseSpec(typeSpec), Boolean(isOpt));\n}\nexports.param = param;\nvar TParam = /** @class */ (function () {\n function TParam(name, ttype, isOpt) {\n this.name = name;\n this.ttype = ttype;\n this.isOpt = isOpt;\n }\n return TParam;\n}());\nexports.TParam = TParam;\n/**\n * Defines a function parameter list.\n */\nvar TParamList = /** @class */ (function (_super) {\n __extends(TParamList, _super);\n function TParamList(params) {\n var _this = _super.call(this) || this;\n _this.params = params;\n return _this;\n }\n TParamList.prototype.getChecker = function (suite, strict) {\n var _this = this;\n var itemCheckers = this.params.map(function (t) { return t.ttype.getChecker(suite, strict); });\n var testCtx = new util_1.NoopContext();\n var isParamRequired = this.params.map(function (param, i) {\n return !param.isOpt && !itemCheckers[i](undefined, testCtx);\n });\n var checker = function (value, ctx) {\n if (!Array.isArray(value)) {\n return ctx.fail(null, \"is not an array\", 0);\n }\n for (var i = 0; i < itemCheckers.length; i++) {\n var p = _this.params[i];\n if (value[i] === undefined) {\n if (isParamRequired[i]) {\n return ctx.fail(p.name, \"is missing\", 1);\n }\n }\n else {\n var ok = itemCheckers[i](value[i], ctx);\n if (!ok) {\n return ctx.fail(p.name, null, 1);\n }\n }\n }\n return true;\n };\n if (!strict) {\n return checker;\n }\n return function (value, ctx) {\n if (!checker(value, ctx)) {\n return false;\n }\n return value.length <= itemCheckers.length ? true :\n ctx.fail(itemCheckers.length, \"is extraneous\", 2);\n };\n };\n return TParamList;\n}(TType));\nexports.TParamList = TParamList;\n/**\n * Single TType implementation for all basic built-in types.\n */\nvar BasicType = /** @class */ (function (_super) {\n __extends(BasicType, _super);\n function BasicType(validator, message) {\n var _this = _super.call(this) || this;\n _this.validator = validator;\n _this.message = message;\n return _this;\n }\n BasicType.prototype.getChecker = function (suite, strict) {\n var _this = this;\n return function (value, ctx) { return _this.validator(value) ? true : ctx.fail(null, _this.message, 0); };\n };\n return BasicType;\n}(TType));\nexports.BasicType = BasicType;\n/**\n * Defines the suite of basic types.\n */\nexports.basicTypes = {\n any: new BasicType(function (v) { return true; }, \"is invalid\"),\n number: new BasicType(function (v) { return (typeof v === \"number\"); }, \"is not a number\"),\n object: new BasicType(function (v) { return (typeof v === \"object\" && v); }, \"is not an object\"),\n boolean: new BasicType(function (v) { return (typeof v === \"boolean\"); }, \"is not a boolean\"),\n string: new BasicType(function (v) { return (typeof v === \"string\"); }, \"is not a string\"),\n symbol: new BasicType(function (v) { return (typeof v === \"symbol\"); }, \"is not a symbol\"),\n void: new BasicType(function (v) { return (v == null); }, \"is not void\"),\n undefined: new BasicType(function (v) { return (v === undefined); }, \"is not undefined\"),\n null: new BasicType(function (v) { return (v === null); }, \"is not null\"),\n never: new BasicType(function (v) { return false; }, \"is unexpected\"),\n Date: new BasicType(getIsNativeChecker(\"[object Date]\"), \"is not a Date\"),\n RegExp: new BasicType(getIsNativeChecker(\"[object RegExp]\"), \"is not a RegExp\"),\n};\n// This approach for checking native object types mirrors that of lodash. Its advantage over\n// `isinstance` is that it can still return true for native objects created in different JS\n// execution environments.\nvar nativeToString = Object.prototype.toString;\nfunction getIsNativeChecker(tag) {\n return function (v) { return typeof v === \"object\" && v && nativeToString.call(v) === tag; };\n}\nif (typeof Buffer !== \"undefined\") {\n exports.basicTypes.Buffer = new BasicType(function (v) { return Buffer.isBuffer(v); }, \"is not a Buffer\");\n}\nvar _loop_1 = function (array_1) {\n exports.basicTypes[array_1.name] = new BasicType(function (v) { return (v instanceof array_1); }, \"is not a \" + array_1.name);\n};\n// Support typed arrays of various flavors\nfor (var _i = 0, _a = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array,\n Int32Array, Uint32Array, Float32Array, Float64Array, ArrayBuffer]; _i < _a.length; _i++) {\n var array_1 = _a[_i];\n _loop_1(array_1);\n}\n","\"use strict\";\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.DetailContext = exports.NoopContext = exports.VError = void 0;\n/**\n * Error thrown by validation. Besides an informative message, it includes the path to the\n * property which triggered the failure.\n */\nvar VError = /** @class */ (function (_super) {\n __extends(VError, _super);\n function VError(path, message) {\n var _this = _super.call(this, message) || this;\n _this.path = path;\n // See https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes#extending-built-ins-like-error-array-and-map-may-no-longer-work for info about this workaround.\n Object.setPrototypeOf(_this, VError.prototype);\n return _this;\n }\n return VError;\n}(Error));\nexports.VError = VError;\n/**\n * Fast implementation of IContext used for first-pass validation. If that fails, we can validate\n * using DetailContext to collect error messages. That's faster for the common case when messages\n * normally pass validation.\n */\nvar NoopContext = /** @class */ (function () {\n function NoopContext() {\n }\n NoopContext.prototype.fail = function (relPath, message, score) {\n return false;\n };\n NoopContext.prototype.unionResolver = function () { return this; };\n NoopContext.prototype.createContext = function () { return this; };\n NoopContext.prototype.resolveUnion = function (ur) { };\n return NoopContext;\n}());\nexports.NoopContext = NoopContext;\n/**\n * Complete implementation of IContext that collects meaningfull errors.\n */\nvar DetailContext = /** @class */ (function () {\n function DetailContext() {\n // Stack of property names and associated messages for reporting helpful error messages.\n this._propNames = [\"\"];\n this._messages = [null];\n // Score is used to choose the best union member whose DetailContext to use for reporting.\n // Higher score means better match (or rather less severe mismatch).\n this._score = 0;\n }\n DetailContext.prototype.fail = function (relPath, message, score) {\n this._propNames.push(relPath);\n this._messages.push(message);\n this._score += score;\n return false;\n };\n DetailContext.prototype.unionResolver = function () {\n return new DetailUnionResolver();\n };\n DetailContext.prototype.resolveUnion = function (unionResolver) {\n var _a, _b;\n var u = unionResolver;\n var best = null;\n for (var _i = 0, _c = u.contexts; _i < _c.length; _i++) {\n var ctx = _c[_i];\n if (!best || ctx._score >= best._score) {\n best = ctx;\n }\n }\n if (best && best._score > 0) {\n (_a = this._propNames).push.apply(_a, best._propNames);\n (_b = this._messages).push.apply(_b, best._messages);\n }\n };\n DetailContext.prototype.getError = function (path) {\n var msgParts = [];\n for (var i = this._propNames.length - 1; i >= 0; i--) {\n var p = this._propNames[i];\n path += (typeof p === \"number\") ? \"[\" + p + \"]\" : (p ? \".\" + p : \"\");\n var m = this._messages[i];\n if (m) {\n msgParts.push(path + \" \" + m);\n }\n }\n return new VError(path, msgParts.join(\"; \"));\n };\n DetailContext.prototype.getErrorDetail = function (path) {\n var details = [];\n for (var i = this._propNames.length - 1; i >= 0; i--) {\n var p = this._propNames[i];\n path += (typeof p === \"number\") ? \"[\" + p + \"]\" : (p ? \".\" + p : \"\");\n var message = this._messages[i];\n if (message) {\n details.push({ path: path, message: message });\n }\n }\n var detail = null;\n for (var i = details.length - 1; i >= 0; i--) {\n if (detail) {\n details[i].nested = [detail];\n }\n detail = details[i];\n }\n return detail;\n };\n return DetailContext;\n}());\nexports.DetailContext = DetailContext;\nvar DetailUnionResolver = /** @class */ (function () {\n function DetailUnionResolver() {\n this.contexts = [];\n }\n DetailUnionResolver.prototype.createContext = function () {\n var ctx = new DetailContext();\n this.contexts.push(ctx);\n return ctx;\n };\n return DetailUnionResolver;\n}());\n","import {transform} from 'sucrase';\n\nexport default function (code) {\n return transform(code, {\n transforms: ['typescript']\n }).code;\n}","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tif(__webpack_module_cache__[moduleId]) {\n\t\treturn __webpack_module_cache__[moduleId].exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","// module exports must be returned from runtime so entry inlining is disabled\n// startup\n// Load entry module and return exports\nreturn __webpack_require__(\"./src/editor/transformTs.js\");\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/examples/zh/editor.html b/examples/zh/editor.html
index 2789fc6..333272d 100644
--- a/examples/zh/editor.html
+++ b/examples/zh/editor.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,12 +10,12 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="ec-example-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/examples/">旧版本示例</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="ec-example-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/examples/">旧版本示例</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site';
</script><script type="text/javascript">window.globalArgsExtra = {
page: 'editor',
locale: 'zh'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1630485133448';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/examples/zh/index.html b/examples/zh/index.html
index 35178a3..83562ca 100644
--- a/examples/zh/index.html
+++ b/examples/zh/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,12 +10,12 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="ec-example-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/examples/">旧版本示例</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="ec-example-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/examples/">旧版本示例</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site';
</script><script type="text/javascript">window.globalArgsExtra = {
page: 'explore',
locale: 'zh'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1630485133448';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/examples/zh/view.html b/examples/zh/view.html
index 4d99bc0..6101a11 100644
--- a/examples/zh/view.html
+++ b/examples/zh/view.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,11 +10,11 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site';
</script><script type="text/javascript">window.globalArgsExtra = {
page: 'view',
locale: 'zh'
-};</script><script type="text/javascript">window.globalArgsExtra.version = '1630485133448';
+};</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);
diff --git a/handbook/200.html b/handbook/200.html
index b2302c7..47fad43 100644
--- a/handbook/200.html
+++ b/handbook/200.html
@@ -4,12 +4,13 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Apache ECharts Handbook"><link data-n-head="1" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><base href="/handbook/"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script">
- <link href="/handbook/_nuxt/css/4989614.css" rel="stylesheet"><link href="/handbook/_nuxt/css/f96d2a2.css" rel="stylesheet"></head>
+ <title>Handbook - Apache ECharts</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Apache ECharts Handbook"><link data-n-head="1" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><base href="/handbook/"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script">
+ <link href="/handbook/_nuxt/css/6d160d4.css" rel="stylesheet"><link href="/handbook/_nuxt/css/8cca5bf.css" rel="stylesheet"></head>
<body>
<div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}</script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
- <script src="/handbook/_nuxt/e7e8128.js"></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js"></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js"></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js"></script></body>
+ <script src="/handbook/_nuxt/6146f21.js"></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js"></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js"></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js"></script></body>
</html>
diff --git a/handbook/_nuxt/e7e8128.js b/handbook/_nuxt/6146f21.js
similarity index 95%
rename from handbook/_nuxt/e7e8128.js
rename to handbook/_nuxt/6146f21.js
index c580421..8a451ee 100644
--- a/handbook/_nuxt/e7e8128.js
+++ b/handbook/_nuxt/6146f21.js
@@ -1 +1 @@
-!function(e){function f(data){for(var f,d,t=data[0],o=data[1],l=data[2],i=0,h=[];i<t.length;i++)d=t[i],Object.prototype.hasOwnProperty.call(r,d)&&r[d]&&h.push(r[d][0]),r[d]=0;for(f in o)Object.prototype.hasOwnProperty.call(o,f)&&(e[f]=o[f]);for(m&&m(data);h.length;)h.shift()();return n.push.apply(n,l||[]),c()}function c(){for(var e,i=0;i<n.length;i++){for(var f=n[i],c=!0,d=1;d<f.length;d++){var t=f[d];0!==r[t]&&(c=!1)}c&&(n.splice(i--,1),e=o(o.s=f[0]))}return e}var d={},t={4:0},r={4:0},n=[];function o(f){if(d[f])return d[f].exports;var c=d[f]={i:f,l:!1,exports:{}};return e[f].call(c.exports,c,c.exports,o),c.l=!0,c.exports}o.e=function(e){var f=[],c=function(){try{return document.createElement("link").relList.supports("preload")}catch(e){return!1}}();t[e]?f.push(t[e]):0!==t[e]&&{2:1,6:1}[e]&&f.push(t[e]=new Promise((function(f,d){for(var r="css/"+{2:"89761e6",3:"31d6cfe",6:"1c37eb7",7:"31d6cfe",8:"31d6cfe",9:"31d6cfe",10:"31d6cfe",11:"31d6cfe",12:"31d6cfe",13:"31d6cfe",14:"31d6cfe",15:"31d6cfe",16:"31d6cfe",17:"31d6cfe",18:"31d6cfe",19:"31d6cfe",20:"31d6cfe",21:"31d6cfe",22:"31d6cfe",23:"31d6cfe",24:"31d6cfe",25:"31d6cfe",26:"31d6cfe",27:"31d6cfe",28:"31d6cfe",29:"31d6cfe",30:"31d6cfe",31:"31d6cfe",32:"31d6cfe",33:"31d6cfe",34:"31d6cfe",35:"31d6cfe",36:"31d6cfe",37:"31d6cfe",38:"31d6cfe",39:"31d6cfe",40:"31d6cfe",41:"31d6cfe",42:"31d6cfe",43:"31d6cfe",44:"31d6cfe",45:"31d6cfe",46:"31d6cfe",47:"31d6cfe",48:"31d6cfe",49:"31d6cfe",50:"31d6cfe",51:"31d6cfe",52:"31d6cfe",53:"31d6cfe",54:"31d6cfe",55:"31d6cfe",56:"31d6cfe",57:"31d6cfe",58:"31d6cfe",59:"31d6cfe",60:"31d6cfe",61:"31d6cfe",62:"31d6cfe",63:"31d6cfe",64:"31d6cfe",65:"31d6cfe",66:"31d6cfe",67:"31d6cfe",68:"31d6cfe",69:"31d6cfe",70:"31d6cfe",71:"31d6cfe",72:"31d6cfe",73:"31d6cfe",74:"31d6cfe",75:"31d6cfe",76:"31d6cfe",77:"31d6cfe",78:"31d6cfe",79:"31d6cfe",80:"31d6cfe",81:"31d6cfe",82:"31d6cfe",83:"31d6cfe",84:"31d6cfe",85:"31d6cfe",86:"31d6cfe",87:"31d6cfe",88:"31d6cfe",89:"31d6cfe",90:"31d6cfe",91:"31d6cfe",92:"31d6cfe",93:"31d6cfe",94:"31d6cfe",95:"31d6cfe",96:"31d6cfe",97:"31d6cfe",98:"31d6cfe",99:"31d6cfe",100:"31d6cfe",101:"31d6cfe",102:"31d6cfe",103:"31d6cfe",104:"31d6cfe",105:"31d6cfe",106:"31d6cfe",107:"31d6cfe",108:"31d6cfe",109:"31d6cfe",110:"31d6cfe",111:"31d6cfe",112:"31d6cfe",113:"31d6cfe",114:"31d6cfe",115:"31d6cfe",116:"31d6cfe",117:"31d6cfe",118:"31d6cfe",119:"31d6cfe",120:"31d6cfe",121:"31d6cfe",122:"31d6cfe",123:"31d6cfe",124:"31d6cfe",125:"31d6cfe",126:"31d6cfe",127:"31d6cfe"}[e]+".css",n=o.p+r,l=document.getElementsByTagName("link"),i=0;i<l.length;i++){var h=(y=l[i]).getAttribute("data-href")||y.getAttribute("href");if(!("stylesheet"!==y.rel&&"preload"!==y.rel||h!==r&&h!==n))return f()}var m=document.getElementsByTagName("style");for(i=0;i<m.length;i++){var y;if((h=(y=m[i]).getAttribute("data-href"))===r||h===n)return f()}var v=document.createElement("link");v.rel=c?"preload":"stylesheet",c?v.as="style":v.type="text/css",v.onload=f,v.onerror=function(f){var c=f&&f.target&&f.target.src||n,r=new Error("Loading CSS chunk "+e+" failed.\n("+c+")");r.code="CSS_CHUNK_LOAD_FAILED",r.request=c,delete t[e],v.parentNode.removeChild(v),d(r)},v.href=n,document.getElementsByTagName("head")[0].appendChild(v)})).then((function(){if(t[e]=0,c){var f=document.createElement("link");f.href=o.p+"css/"+{2:"89761e6",3:"31d6cfe",6:"1c37eb7",7:"31d6cfe",8:"31d6cfe",9:"31d6cfe",10:"31d6cfe",11:"31d6cfe",12:"31d6cfe",13:"31d6cfe",14:"31d6cfe",15:"31d6cfe",16:"31d6cfe",17:"31d6cfe",18:"31d6cfe",19:"31d6cfe",20:"31d6cfe",21:"31d6cfe",22:"31d6cfe",23:"31d6cfe",24:"31d6cfe",25:"31d6cfe",26:"31d6cfe",27:"31d6cfe",28:"31d6cfe",29:"31d6cfe",30:"31d6cfe",31:"31d6cfe",32:"31d6cfe",33:"31d6cfe",34:"31d6cfe",35:"31d6cfe",36:"31d6cfe",37:"31d6cfe",38:"31d6cfe",39:"31d6cfe",40:"31d6cfe",41:"31d6cfe",42:"31d6cfe",43:"31d6cfe",44:"31d6cfe",45:"31d6cfe",46:"31d6cfe",47:"31d6cfe",48:"31d6cfe",49:"31d6cfe",50:"31d6cfe",51:"31d6cfe",52:"31d6cfe",53:"31d6cfe",54:"31d6cfe",55:"31d6cfe",56:"31d6cfe",57:"31d6cfe",58:"31d6cfe",59:"31d6cfe",60:"31d6cfe",61:"31d6cfe",62:"31d6cfe",63:"31d6cfe",64:"31d6cfe",65:"31d6cfe",66:"31d6cfe",67:"31d6cfe",68:"31d6cfe",69:"31d6cfe",70:"31d6cfe",71:"31d6cfe",72:"31d6cfe",73:"31d6cfe",74:"31d6cfe",75:"31d6cfe",76:"31d6cfe",77:"31d6cfe",78:"31d6cfe",79:"31d6cfe",80:"31d6cfe",81:"31d6cfe",82:"31d6cfe",83:"31d6cfe",84:"31d6cfe",85:"31d6cfe",86:"31d6cfe",87:"31d6cfe",88:"31d6cfe",89:"31d6cfe",90:"31d6cfe",91:"31d6cfe",92:"31d6cfe",93:"31d6cfe",94:"31d6cfe",95:"31d6cfe",96:"31d6cfe",97:"31d6cfe",98:"31d6cfe",99:"31d6cfe",100:"31d6cfe",101:"31d6cfe",102:"31d6cfe",103:"31d6cfe",104:"31d6cfe",105:"31d6cfe",106:"31d6cfe",107:"31d6cfe",108:"31d6cfe",109:"31d6cfe",110:"31d6cfe",111:"31d6cfe",112:"31d6cfe",113:"31d6cfe",114:"31d6cfe",115:"31d6cfe",116:"31d6cfe",117:"31d6cfe",118:"31d6cfe",119:"31d6cfe",120:"31d6cfe",121:"31d6cfe",122:"31d6cfe",123:"31d6cfe",124:"31d6cfe",125:"31d6cfe",126:"31d6cfe",127:"31d6cfe"}[e]+".css",f.rel="stylesheet",f.type="text/css",document.body.appendChild(f)}})));var d=r[e];if(0!==d)if(d)f.push(d[2]);else{var n=new Promise((function(f,c){d=r[e]=[f,c]}));f.push(d[2]=n);var l,script=document.createElement("script");script.charset="utf-8",script.timeout=120,o.nc&&script.setAttribute("nonce",o.nc),script.src=function(e){return o.p+"js/"+{2:"8f32e7b5e9164fd7d9af",3:"87d073533b02b80c9f5a",6:"a8538eba3f241a324560",7:"d9ae1847003efbc40617",8:"81e776c79b39e6174c44",9:"8f32e40e824ab935439d",10:"08dc424523de06716042",11:"d58fed0446e1448e8acc",12:"65fbbb1766aac308e2d5",13:"70b7bb2a8acc87ac395f",14:"f6f0c76ff6360f4dff03",15:"ed27abbf85118ce0e31b",16:"0b3cdf54824fe834d9a9",17:"ca5a68e597339d9fe4ce",18:"b317cfa684d7d117b776",19:"786d4c826164981c3345",20:"72d0593e53b8a5dc1e2b",21:"095c79bda125cb04e097",22:"219c77c9f002a9ce870b",23:"d07a3bda0c106bf5e048",24:"e07cf56d4536a8ea6683",25:"5f283182c4cfa82d45fb",26:"4d9298a62789643a332e",27:"7e66f93f0999fe6c1337",28:"ce166bfe7d2bb2baf841",29:"14cb3aa5104f37726269",30:"f07f18c8fd0d20152f05",31:"70d817cd00d197aa7288",32:"c1b8dd303f98eed9f546",33:"65f2e52c78e92f9b19e0",34:"fc3e1f080456fb1efd45",35:"f6d764b538994fe3b8b7",36:"9d9dec90be1f0f41b2d2",37:"673c4ed3b97a04b343be",38:"3b661750e41eb989e6b8",39:"87ee27d0dbb3329810d7",40:"317868f85a2f179fda34",41:"7f30910e5d88b8f89d8a",42:"a82ec7151a8524a7410d",43:"5f8f3adf196ff450b27d",44:"0ef99a568f448c513d20",45:"d8bb474fd0ab5b06b0dd",46:"6aac60f585a306304a63",47:"b88e11700f3f21434e5c",48:"5cbbc9b2bbce87ff971a",49:"baee98106e7990307f27",50:"c45726f40449696b44e1",51:"fe78798ce71de8c07853",52:"34f43fefbe1d937d09c2",53:"2ca968bfd7bafb97f3d0",54:"085ff989b504d0d92d78",55:"56779b093f84cf5b218f",56:"15f09df001c4174615ba",57:"7c55caf9c0b887f6f923",58:"4d2b887abddeac30cd76",59:"8f75656ffe38b958df70",60:"f7a078db5c96656ebd36",61:"90d8c259403cc2b28bed",62:"924bdf422a65bffeadbe",63:"ff7fc48fdeb7a3abf378",64:"ec312af66d0bf5a5805d",65:"9a290f3a651e16ccacf0",66:"d102d828969a4f67bd92",67:"eb87ae44195ffebaa08a",68:"38e7d89f4d102c348ab7",69:"86ff68fd72f2c7e2b4c7",70:"4475e4015f9b5ef7efa9",71:"8660aaf641d4ed6acfd9",72:"51b2fea076d43f1ffabc",73:"536829e5c8d97f4ac7c6",74:"e5160c28f6fb2997091b",75:"7294835b13291a6e4aec",76:"7081069603a1429170da",77:"9fccc9e4ae291b0d6e44",78:"ab18b1df75a56aaf65f9",79:"1adf8710e2b91fe47be2",80:"2eadf6c16f489156b5d7",81:"78d7524e4634a619f1ec",82:"a6fddc27f11596c149f1",83:"ddea68ea12171940b47d",84:"7bf91108c3f87e83badf",85:"4c8c42c0a69f8cae5a98",86:"2c7fc8019255365a4a71",87:"811af0140715cd166af1",88:"ecd372711c508a2f7d89",89:"f9d64c1e62249634040b",90:"feee1c4791adf21cd022",91:"adff98946848424af6be",92:"b126c4d13efda3a500eb",93:"c959fabb3e350003bd5e",94:"d1ecca7f648bd2acc4c9",95:"1950fbb761bda94af687",96:"5e04b39a60ff021dedc7",97:"4b842183a23f54b7ffc5",98:"57cc43b2b4830ed4c7a8",99:"91589afc8ac42871ff30",100:"bdd7734f062fbd20c13c",101:"43f8eb763f73f4ab9018",102:"62e9e94f51fcadb8c5fe",103:"ca7b7a4ca6e695d6034f",104:"56d1035feffff39d160f",105:"cbe82648aedc4f9a120c",106:"1d09f9fd1cffe7d4a317",107:"363599daff079b21cb90",108:"ff31f4f10ce2c0d5f0a3",109:"7d570de6e66a34236198",110:"179f8bf7f4b4d044ec1f",111:"221b6d3b4153b0b64b3d",112:"a5db32c5ac1f20389636",113:"d60af0f1d93626be040e",114:"564adab584e3a1dea6b1",115:"544b49a4b95f35a33c32",116:"ef74990218d38720625c",117:"5c4e4f54aa7e6b7c452c",118:"454bce2fe31492b7adf2",119:"1315ac68ca7fd80b9e35",120:"67177488d4625997eff6",121:"1f920b728680adf1bc5d",122:"60ea121fe6d12e50e71b",123:"af5a647409dafc200aa2",124:"c0208ae5582dd60676f2",125:"f26ae8b1ac0f1f34e047",126:"9efce8a5c7f638f28225",127:"7be2520855c4af391f2b"}[e]+".js"}(e);var h=new Error;l=function(f){script.onerror=script.onload=null,clearTimeout(m);var c=r[e];if(0!==c){if(c){var d=f&&("load"===f.type?"missing":f.type),t=f&&f.target&&f.target.src;h.message="Loading chunk "+e+" failed.\n("+d+": "+t+")",h.name="ChunkLoadError",h.type=d,h.request=t,c[1](h)}r[e]=void 0}};var m=setTimeout((function(){l({type:"timeout",target:script})}),12e4);script.onerror=script.onload=l,document.head.appendChild(script)}return Promise.all(f)},o.m=e,o.c=d,o.d=function(e,f,c){o.o(e,f)||Object.defineProperty(e,f,{enumerable:!0,get:c})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,f){if(1&f&&(e=o(e)),8&f)return e;if(4&f&&"object"==typeof e&&e&&e.__esModule)return e;var c=Object.create(null);if(o.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&f&&"string"!=typeof e)for(var d in e)o.d(c,d,function(f){return e[f]}.bind(null,d));return c},o.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(f,"a",f),f},o.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},o.p="/handbook/_nuxt/",o.oe=function(e){throw console.error(e),e};var l=window.webpackJsonp=window.webpackJsonp||[],h=l.push.bind(l);l.push=f,l=l.slice();for(var i=0;i<l.length;i++)f(l[i]);var m=h;c()}([]);
\ No newline at end of file
+!function(e){function f(data){for(var f,d,t=data[0],o=data[1],l=data[2],i=0,h=[];i<t.length;i++)d=t[i],Object.prototype.hasOwnProperty.call(r,d)&&r[d]&&h.push(r[d][0]),r[d]=0;for(f in o)Object.prototype.hasOwnProperty.call(o,f)&&(e[f]=o[f]);for(m&&m(data);h.length;)h.shift()();return n.push.apply(n,l||[]),c()}function c(){for(var e,i=0;i<n.length;i++){for(var f=n[i],c=!0,d=1;d<f.length;d++){var t=f[d];0!==r[t]&&(c=!1)}c&&(n.splice(i--,1),e=o(o.s=f[0]))}return e}var d={},t={4:0},r={4:0},n=[];function o(f){if(d[f])return d[f].exports;var c=d[f]={i:f,l:!1,exports:{}};return e[f].call(c.exports,c,c.exports,o),c.l=!0,c.exports}o.e=function(e){var f=[],c=function(){try{return document.createElement("link").relList.supports("preload")}catch(e){return!1}}();t[e]?f.push(t[e]):0!==t[e]&&{2:1,6:1}[e]&&f.push(t[e]=new Promise((function(f,d){for(var r="css/"+{2:"89761e6",3:"31d6cfe",6:"1c37eb7",7:"31d6cfe",8:"31d6cfe",9:"31d6cfe",10:"31d6cfe",11:"31d6cfe",12:"31d6cfe",13:"31d6cfe",14:"31d6cfe",15:"31d6cfe",16:"31d6cfe",17:"31d6cfe",18:"31d6cfe",19:"31d6cfe",20:"31d6cfe",21:"31d6cfe",22:"31d6cfe",23:"31d6cfe",24:"31d6cfe",25:"31d6cfe",26:"31d6cfe",27:"31d6cfe",28:"31d6cfe",29:"31d6cfe",30:"31d6cfe",31:"31d6cfe",32:"31d6cfe",33:"31d6cfe",34:"31d6cfe",35:"31d6cfe",36:"31d6cfe",37:"31d6cfe",38:"31d6cfe",39:"31d6cfe",40:"31d6cfe",41:"31d6cfe",42:"31d6cfe",43:"31d6cfe",44:"31d6cfe",45:"31d6cfe",46:"31d6cfe",47:"31d6cfe",48:"31d6cfe",49:"31d6cfe",50:"31d6cfe",51:"31d6cfe",52:"31d6cfe",53:"31d6cfe",54:"31d6cfe",55:"31d6cfe",56:"31d6cfe",57:"31d6cfe",58:"31d6cfe",59:"31d6cfe",60:"31d6cfe",61:"31d6cfe",62:"31d6cfe",63:"31d6cfe",64:"31d6cfe",65:"31d6cfe",66:"31d6cfe",67:"31d6cfe",68:"31d6cfe",69:"31d6cfe",70:"31d6cfe",71:"31d6cfe",72:"31d6cfe",73:"31d6cfe",74:"31d6cfe",75:"31d6cfe",76:"31d6cfe",77:"31d6cfe",78:"31d6cfe",79:"31d6cfe",80:"31d6cfe",81:"31d6cfe",82:"31d6cfe",83:"31d6cfe",84:"31d6cfe",85:"31d6cfe",86:"31d6cfe",87:"31d6cfe",88:"31d6cfe",89:"31d6cfe",90:"31d6cfe",91:"31d6cfe",92:"31d6cfe",93:"31d6cfe",94:"31d6cfe",95:"31d6cfe",96:"31d6cfe",97:"31d6cfe",98:"31d6cfe",99:"31d6cfe",100:"31d6cfe",101:"31d6cfe",102:"31d6cfe",103:"31d6cfe",104:"31d6cfe",105:"31d6cfe",106:"31d6cfe",107:"31d6cfe",108:"31d6cfe",109:"31d6cfe",110:"31d6cfe",111:"31d6cfe",112:"31d6cfe",113:"31d6cfe",114:"31d6cfe",115:"31d6cfe",116:"31d6cfe",117:"31d6cfe",118:"31d6cfe",119:"31d6cfe",120:"31d6cfe",121:"31d6cfe",122:"31d6cfe",123:"31d6cfe",124:"31d6cfe",125:"31d6cfe",126:"31d6cfe",127:"31d6cfe"}[e]+".css",n=o.p+r,l=document.getElementsByTagName("link"),i=0;i<l.length;i++){var h=(y=l[i]).getAttribute("data-href")||y.getAttribute("href");if(!("stylesheet"!==y.rel&&"preload"!==y.rel||h!==r&&h!==n))return f()}var m=document.getElementsByTagName("style");for(i=0;i<m.length;i++){var y;if((h=(y=m[i]).getAttribute("data-href"))===r||h===n)return f()}var v=document.createElement("link");v.rel=c?"preload":"stylesheet",c?v.as="style":v.type="text/css",v.onload=f,v.onerror=function(f){var c=f&&f.target&&f.target.src||n,r=new Error("Loading CSS chunk "+e+" failed.\n("+c+")");r.code="CSS_CHUNK_LOAD_FAILED",r.request=c,delete t[e],v.parentNode.removeChild(v),d(r)},v.href=n,document.getElementsByTagName("head")[0].appendChild(v)})).then((function(){if(t[e]=0,c){var f=document.createElement("link");f.href=o.p+"css/"+{2:"89761e6",3:"31d6cfe",6:"1c37eb7",7:"31d6cfe",8:"31d6cfe",9:"31d6cfe",10:"31d6cfe",11:"31d6cfe",12:"31d6cfe",13:"31d6cfe",14:"31d6cfe",15:"31d6cfe",16:"31d6cfe",17:"31d6cfe",18:"31d6cfe",19:"31d6cfe",20:"31d6cfe",21:"31d6cfe",22:"31d6cfe",23:"31d6cfe",24:"31d6cfe",25:"31d6cfe",26:"31d6cfe",27:"31d6cfe",28:"31d6cfe",29:"31d6cfe",30:"31d6cfe",31:"31d6cfe",32:"31d6cfe",33:"31d6cfe",34:"31d6cfe",35:"31d6cfe",36:"31d6cfe",37:"31d6cfe",38:"31d6cfe",39:"31d6cfe",40:"31d6cfe",41:"31d6cfe",42:"31d6cfe",43:"31d6cfe",44:"31d6cfe",45:"31d6cfe",46:"31d6cfe",47:"31d6cfe",48:"31d6cfe",49:"31d6cfe",50:"31d6cfe",51:"31d6cfe",52:"31d6cfe",53:"31d6cfe",54:"31d6cfe",55:"31d6cfe",56:"31d6cfe",57:"31d6cfe",58:"31d6cfe",59:"31d6cfe",60:"31d6cfe",61:"31d6cfe",62:"31d6cfe",63:"31d6cfe",64:"31d6cfe",65:"31d6cfe",66:"31d6cfe",67:"31d6cfe",68:"31d6cfe",69:"31d6cfe",70:"31d6cfe",71:"31d6cfe",72:"31d6cfe",73:"31d6cfe",74:"31d6cfe",75:"31d6cfe",76:"31d6cfe",77:"31d6cfe",78:"31d6cfe",79:"31d6cfe",80:"31d6cfe",81:"31d6cfe",82:"31d6cfe",83:"31d6cfe",84:"31d6cfe",85:"31d6cfe",86:"31d6cfe",87:"31d6cfe",88:"31d6cfe",89:"31d6cfe",90:"31d6cfe",91:"31d6cfe",92:"31d6cfe",93:"31d6cfe",94:"31d6cfe",95:"31d6cfe",96:"31d6cfe",97:"31d6cfe",98:"31d6cfe",99:"31d6cfe",100:"31d6cfe",101:"31d6cfe",102:"31d6cfe",103:"31d6cfe",104:"31d6cfe",105:"31d6cfe",106:"31d6cfe",107:"31d6cfe",108:"31d6cfe",109:"31d6cfe",110:"31d6cfe",111:"31d6cfe",112:"31d6cfe",113:"31d6cfe",114:"31d6cfe",115:"31d6cfe",116:"31d6cfe",117:"31d6cfe",118:"31d6cfe",119:"31d6cfe",120:"31d6cfe",121:"31d6cfe",122:"31d6cfe",123:"31d6cfe",124:"31d6cfe",125:"31d6cfe",126:"31d6cfe",127:"31d6cfe"}[e]+".css",f.rel="stylesheet",f.type="text/css",document.body.appendChild(f)}})));var d=r[e];if(0!==d)if(d)f.push(d[2]);else{var n=new Promise((function(f,c){d=r[e]=[f,c]}));f.push(d[2]=n);var l,script=document.createElement("script");script.charset="utf-8",script.timeout=120,o.nc&&script.setAttribute("nonce",o.nc),script.src=function(e){return o.p+"js/"+{2:"1dee7a24a3cb648e6c4e",3:"87d073533b02b80c9f5a",6:"a8538eba3f241a324560",7:"d9ae1847003efbc40617",8:"81e776c79b39e6174c44",9:"8f32e40e824ab935439d",10:"08dc424523de06716042",11:"4726cacd35f432090085",12:"65fbbb1766aac308e2d5",13:"70b7bb2a8acc87ac395f",14:"f6f0c76ff6360f4dff03",15:"ed27abbf85118ce0e31b",16:"0b3cdf54824fe834d9a9",17:"ca5a68e597339d9fe4ce",18:"b317cfa684d7d117b776",19:"786d4c826164981c3345",20:"72d0593e53b8a5dc1e2b",21:"095c79bda125cb04e097",22:"219c77c9f002a9ce870b",23:"d07a3bda0c106bf5e048",24:"e07cf56d4536a8ea6683",25:"5f283182c4cfa82d45fb",26:"4d9298a62789643a332e",27:"7e66f93f0999fe6c1337",28:"ce166bfe7d2bb2baf841",29:"14cb3aa5104f37726269",30:"f07f18c8fd0d20152f05",31:"70d817cd00d197aa7288",32:"c1b8dd303f98eed9f546",33:"65f2e52c78e92f9b19e0",34:"fc3e1f080456fb1efd45",35:"f6d764b538994fe3b8b7",36:"9d9dec90be1f0f41b2d2",37:"673c4ed3b97a04b343be",38:"3b661750e41eb989e6b8",39:"87ee27d0dbb3329810d7",40:"317868f85a2f179fda34",41:"7f30910e5d88b8f89d8a",42:"a82ec7151a8524a7410d",43:"5f8f3adf196ff450b27d",44:"0ef99a568f448c513d20",45:"d8bb474fd0ab5b06b0dd",46:"6aac60f585a306304a63",47:"b88e11700f3f21434e5c",48:"5cbbc9b2bbce87ff971a",49:"baee98106e7990307f27",50:"c45726f40449696b44e1",51:"fe78798ce71de8c07853",52:"34f43fefbe1d937d09c2",53:"2ca968bfd7bafb97f3d0",54:"085ff989b504d0d92d78",55:"56779b093f84cf5b218f",56:"15f09df001c4174615ba",57:"7c55caf9c0b887f6f923",58:"4d2b887abddeac30cd76",59:"8f75656ffe38b958df70",60:"f7a078db5c96656ebd36",61:"90d8c259403cc2b28bed",62:"924bdf422a65bffeadbe",63:"ff7fc48fdeb7a3abf378",64:"ec312af66d0bf5a5805d",65:"9a290f3a651e16ccacf0",66:"d102d828969a4f67bd92",67:"eb87ae44195ffebaa08a",68:"38e7d89f4d102c348ab7",69:"7e6805b6d420a9d924e2",70:"4475e4015f9b5ef7efa9",71:"8660aaf641d4ed6acfd9",72:"51b2fea076d43f1ffabc",73:"536829e5c8d97f4ac7c6",74:"e5160c28f6fb2997091b",75:"7294835b13291a6e4aec",76:"7081069603a1429170da",77:"9fccc9e4ae291b0d6e44",78:"ab18b1df75a56aaf65f9",79:"1adf8710e2b91fe47be2",80:"2eadf6c16f489156b5d7",81:"78d7524e4634a619f1ec",82:"a6fddc27f11596c149f1",83:"ddea68ea12171940b47d",84:"7bf91108c3f87e83badf",85:"4c8c42c0a69f8cae5a98",86:"2c7fc8019255365a4a71",87:"811af0140715cd166af1",88:"ecd372711c508a2f7d89",89:"f9d64c1e62249634040b",90:"feee1c4791adf21cd022",91:"adff98946848424af6be",92:"b126c4d13efda3a500eb",93:"c959fabb3e350003bd5e",94:"d1ecca7f648bd2acc4c9",95:"1950fbb761bda94af687",96:"5e04b39a60ff021dedc7",97:"4b842183a23f54b7ffc5",98:"57cc43b2b4830ed4c7a8",99:"91589afc8ac42871ff30",100:"bdd7734f062fbd20c13c",101:"43f8eb763f73f4ab9018",102:"62e9e94f51fcadb8c5fe",103:"ca7b7a4ca6e695d6034f",104:"56d1035feffff39d160f",105:"cbe82648aedc4f9a120c",106:"1d09f9fd1cffe7d4a317",107:"363599daff079b21cb90",108:"ff31f4f10ce2c0d5f0a3",109:"7d570de6e66a34236198",110:"179f8bf7f4b4d044ec1f",111:"221b6d3b4153b0b64b3d",112:"a5db32c5ac1f20389636",113:"d60af0f1d93626be040e",114:"564adab584e3a1dea6b1",115:"544b49a4b95f35a33c32",116:"ef74990218d38720625c",117:"5c4e4f54aa7e6b7c452c",118:"db0e35482386339f1402",119:"1315ac68ca7fd80b9e35",120:"67177488d4625997eff6",121:"1f920b728680adf1bc5d",122:"60ea121fe6d12e50e71b",123:"af5a647409dafc200aa2",124:"c0208ae5582dd60676f2",125:"f26ae8b1ac0f1f34e047",126:"9efce8a5c7f638f28225",127:"7be2520855c4af391f2b"}[e]+".js"}(e);var h=new Error;l=function(f){script.onerror=script.onload=null,clearTimeout(m);var c=r[e];if(0!==c){if(c){var d=f&&("load"===f.type?"missing":f.type),t=f&&f.target&&f.target.src;h.message="Loading chunk "+e+" failed.\n("+d+": "+t+")",h.name="ChunkLoadError",h.type=d,h.request=t,c[1](h)}r[e]=void 0}};var m=setTimeout((function(){l({type:"timeout",target:script})}),12e4);script.onerror=script.onload=l,document.head.appendChild(script)}return Promise.all(f)},o.m=e,o.c=d,o.d=function(e,f,c){o.o(e,f)||Object.defineProperty(e,f,{enumerable:!0,get:c})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,f){if(1&f&&(e=o(e)),8&f)return e;if(4&f&&"object"==typeof e&&e&&e.__esModule)return e;var c=Object.create(null);if(o.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&f&&"string"!=typeof e)for(var d in e)o.d(c,d,function(f){return e[f]}.bind(null,d));return c},o.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(f,"a",f),f},o.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},o.p="/handbook/_nuxt/",o.oe=function(e){throw console.error(e),e};var l=window.webpackJsonp=window.webpackJsonp||[],h=l.push.bind(l);l.push=f,l=l.slice();for(var i=0;i<l.length;i++)f(l[i]);var m=h;c()}([]);
\ No newline at end of file
diff --git a/handbook/_nuxt/css/4989614.css b/handbook/_nuxt/css/6d160d4.css
similarity index 75%
rename from handbook/_nuxt/css/4989614.css
rename to handbook/_nuxt/css/6d160d4.css
index 3fc7f86..6134102 100644
--- a/handbook/_nuxt/css/4989614.css
+++ b/handbook/_nuxt/css/6d160d4.css
@@ -1,3 +1,3 @@
/*! tailwindcss v2.1.3 | MIT License | https://tailwindcss.com*/
-/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.bg-red-100{--tw-bg-opacity:1;background-color:rgba(254,226,226,var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgba(254,202,202,var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgba(209,250,229,var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgba(167,243,208,var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgba(219,234,254,var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgba(191,219,254,var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgba(255,237,213,var(--tw-bg-opacity))}.bg-orange-200{--tw-bg-opacity:1;background-color:rgba(254,215,170,var(--tw-bg-opacity))}.bg-blue-gray-400{--tw-bg-opacity:1;background-color:rgba(148,163,184,var(--tw-bg-opacity))}.border-blue-400{--tw-border-opacity:1;border-color:rgba(96,165,250,var(--tw-border-opacity))}.border-blue-gray-200{--tw-border-opacity:1;border-color:rgba(226,232,240,var(--tw-border-opacity))}.border-blue-gray-400{--tw-border-opacity:1;border-color:rgba(148,163,184,var(--tw-border-opacity))}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border-0{border-width:0}.border{border-width:1px}.border-l-4{border-left-width:4px}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.h-6{height:1.5rem}.h-8{height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.mr-4{margin-right:1rem}.mr-7{margin-right:1.75rem}.mt-10{margin-top:2.5rem}.p-4{padding:1rem}.static{position:static}.resize{resize:both}*{--tw-shadow:0 0 transparent}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.shadow-none,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 transparent}*{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent}.text-blue-gray-400{--tw-text-opacity:1;color:rgba(148,163,184,var(--tw-text-opacity))}.align-middle{vertical-align:middle}.w-6{width:1.5rem}.w-8{width:2rem}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}@-webkit-keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}@-webkit-keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}
\ No newline at end of file
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.bg-red-100{--tw-bg-opacity:1;background-color:rgba(254,226,226,var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgba(254,202,202,var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgba(209,250,229,var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgba(167,243,208,var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgba(219,234,254,var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgba(191,219,254,var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgba(255,237,213,var(--tw-bg-opacity))}.bg-orange-200{--tw-bg-opacity:1;background-color:rgba(254,215,170,var(--tw-bg-opacity))}.bg-blue-gray-400{--tw-bg-opacity:1;background-color:rgba(148,163,184,var(--tw-bg-opacity))}.border-blue-400{--tw-border-opacity:1;border-color:rgba(96,165,250,var(--tw-border-opacity))}.border-blue-gray-200{--tw-border-opacity:1;border-color:rgba(226,232,240,var(--tw-border-opacity))}.border-blue-gray-400{--tw-border-opacity:1;border-color:rgba(148,163,184,var(--tw-border-opacity))}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border-0{border-width:0}.border{border-width:1px}.border-l-4{border-left-width:4px}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.h-6{height:1.5rem}.h-8{height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.mr-4{margin-right:1rem}.mr-7{margin-right:1.75rem}.mt-10{margin-top:2.5rem}.p-4{padding:1rem}.static{position:static}.resize{resize:both}*{--tw-shadow:0 0 transparent}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.shadow-none,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 transparent}*{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent}.text-blue-gray-400{--tw-text-opacity:1;color:rgba(148,163,184,var(--tw-text-opacity))}.align-middle{vertical-align:middle}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}@-webkit-keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}@-webkit-keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}
\ No newline at end of file
diff --git a/handbook/_nuxt/css/8cca5bf.css b/handbook/_nuxt/css/8cca5bf.css
new file mode 100644
index 0000000..fd338d3
--- /dev/null
+++ b/handbook/_nuxt/css/8cca5bf.css
@@ -0,0 +1 @@
+.__nuxt-error-page{padding:1rem;background:#f7f8fb;color:#47494e;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:sans-serif;font-weight:100!important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0;right:0;bottom:0}.__nuxt-error-page .error{max-width:450px}.__nuxt-error-page .title{font-size:1.5rem;margin-top:15px;color:#47494e;margin-bottom:8px}.__nuxt-error-page .description{color:#7f828b;line-height:21px;margin-bottom:10px}.__nuxt-error-page a{color:#7f828b!important;text-decoration:none}.__nuxt-error-page .logo{position:fixed;left:12px;bottom:12px}.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}.page-content .nav-item{margin:0}.page-content .nav-item .nav-link{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.page-content .nav-item a.nav-link{cursor:pointer}.page-content .nav-item .nav-link.nuxt-link-active{font-weight:700;color:#337ab7}.algolia-autocomplete .ds-dropdown-menu{border-style:none;--tw-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-]{border-style:none}.algolia-autocomplete .ds-dropdown-menu:before{border-style:none;--tw-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.bd-sidebar{position:sticky;z-index:1000;top:0;left:0;padding:0;overflow:visible;border-right:1px solid #eee;border-bottom:none;max-width:350px;height:calc(100vh - 50px)}.bd-sidebar .open-sidebar{display:none}.bd-sidebar .bd-docs-nav{overflow-x:hidden;overflow-y:auto;height:calc(100% - 83px);padding-bottom:10px;padding-top:10px;margin-top:5px;margin-bottom:5px}.bd-sidebar .sidebar-search{padding:15px 20px;border-bottom:1px solid #eee}.bd-sidebar .sidebar-search .algolia-autocomplete{width:100%}.bd-sidebar .sidebar-search input{border-radius:.75rem;border-width:0;outline:2px solid transparent;outline-offset:2px;padding:1rem;--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);width:100%}.bd-sidebar .sidebar-search .search-icon{position:absolute;right:30px;top:28px}@media (max-width:768px){.bd-sidebar.closed{left:-280px;--tw-shadow:0 0 transparent}.bd-sidebar,.bd-sidebar.closed{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.bd-sidebar{position:fixed;left:0;width:280px;top:50px;bottom:0;background-color:#fff;--tw-shadow:0 25px 50px -12px rgba(0,0,0,0.25);border-right:none;overflow:visible;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bd-sidebar .bd-docs-nav{width:280px}.bd-sidebar .open-sidebar{display:block;position:absolute;left:280px;bottom:60px;width:40px;height:40px;padding:5px;color:#000;z-index:1200;background:#eee;border-top-right-radius:1rem;border-bottom-right-radius:1rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.bd-sidebar .open-sidebar svg{width:100%;height:100%}}.bd-sidenav{display:none}.page-content{padding-bottom:0}.page-content .nav{display:block}.page-content ul.nav{padding-left:0}.page-content .nav>li>a:focus,.page-content .nav>li>a:hover{background-color:#f6f8fc}.page-content .nav .b-icon.bi{font-size:90%;opacity:.6;position:relative;top:-2px}.page-content .glyphicon{padding:5px;color:#cfd9e2;cursor:pointer;transform:scale(.8);top:2px;left:-4px;margin:-5px 0}.page-content .level0>li>.nav-link{margin-top:5px;padding:6px 0 6px 20px;font-weight:700;--tw-text-opacity:1;color:rgba(30,41,59,var(--tw-text-opacity))}.page-content .level1{margin-top:4px;font-size:14px}.page-content .level1 .nav-link{padding:6px 0 6px 35px}.page-content .level2 .nav-link{padding:5px 0 5px 50px}.page-content .level3{margin-top:1px}.page-content .level3 .nav-link{padding:5px 0 5px 60px}svg.icon-external-link{display:initial;vertical-align:initial}body{font-family:Open Sans,PingFang SC,Helvetica,Arial,sans-serif}.page-main{overflow-x:hidden}.handbook-content{padding-left:0;padding-right:0}.bd-content{padding-left:50px}@media (max-width:768px){.bd-content{padding-left:30px;padding-right:30px}}.post-content{margin:0 auto;max-width:960px}.post-inner{margin:20px 0 80px;--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.post-inner h1,.post-inner h2,.post-inner h3,.post-inner h4,.post-inner h5,.post-inner h6{font-weight:500}.post-inner h1:hover .permalink,.post-inner h2:hover .permalink,.post-inner h3:hover .permalink,.post-inner h4:hover .permalink,.post-inner h5:hover .permalink,.post-inner h6:hover .permalink{display:inline-block}.post-inner h1{margin:40px 0 30px;font-size:36px;font-weight:700;--tw-text-opacity:1;color:rgba(51,65,85,var(--tw-text-opacity))}.post-inner h2{margin:60px 0 20px;padding-bottom:20px;font-size:28px;--tw-text-opacity:1;color:rgba(71,85,105,var(--tw-text-opacity));border-bottom:1px solid #eee}.post-inner h1+h2{margin-top:40px}.post-inner h3{margin:40px 0 20px;font-size:22px}.post-inner h3,.post-inner h4{--tw-text-opacity:1;color:rgba(71,85,105,var(--tw-text-opacity))}.post-inner h4{margin:25px 0 20px;font-size:18px}.post-inner h5{font-size:16px}.post-inner h5,.post-inner h6{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.post-inner h6{font-size:14px}.post-inner .permalink{display:none}.post-inner blockquote{margin:15px 0;padding:20px 15px;--tw-bg-opacity:1;background-color:rgba(219,234,254,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(96,165,250,var(--tw-border-opacity));border-radius:.5rem;border-left-width:4px}.post-inner blockquote code{--tw-bg-opacity:1;background-color:rgba(191,219,254,var(--tw-bg-opacity));border-width:0;--tw-shadow:0 0 transparent;box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);color:currentColor}.post-inner blockquote :first-child{margin-top:0}.post-inner blockquote :last-child{margin-bottom:0}.post-inner pre{margin:20px 0;border-radius:5px;border:none;padding:10px}.post-inner pre code{background:none}.post-inner iframe{border:none;margin:10px 0}.post-inner ol,.post-inner ul{padding-left:20px}.post-inner li,.post-inner p{line-height:1.7em;font-size:16px}.post-inner p{margin:15px 0}.post-inner img{border-radius:.5rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.post-inner a{color:#337ab7}.post-inner .table-of-contents{position:fixed;left:77%;width:21%;top:65px;background-color:transparent;padding:10px;height:auto}@media (max-width:768px){.post-inner .table-of-contents{position:relative;width:100%;left:0;top:0;padding:0;margin:0 0 10px}}.post-inner .table-of-contents .toc-container-header{font-size:16px;font-weight:700}.post-inner .table-of-contents ul{padding-left:0;margin-bottom:0}.post-inner .table-of-contents ul li{list-style:none;font-size:14px}.post-inner .table-of-contents ul li.toc2{font-size:15px}.post-inner .table-of-contents ul li.toc3{font-size:14px;padding-left:15px}.post-inner .table-of-contents ul li.toc3+.toc2{margin-top:15px}.post-inner .table-of-contents a{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity));transition:.5s}.post-inner .table-of-contents a:hover{color:#555}
\ No newline at end of file
diff --git a/handbook/_nuxt/css/f96d2a2.css b/handbook/_nuxt/css/f96d2a2.css
deleted file mode 100644
index a610d87..0000000
--- a/handbook/_nuxt/css/f96d2a2.css
+++ /dev/null
@@ -1 +0,0 @@
-.__nuxt-error-page{padding:1rem;background:#f7f8fb;color:#47494e;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:sans-serif;font-weight:100!important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0;right:0;bottom:0}.__nuxt-error-page .error{max-width:450px}.__nuxt-error-page .title{font-size:1.5rem;margin-top:15px;color:#47494e;margin-bottom:8px}.__nuxt-error-page .description{color:#7f828b;line-height:21px;margin-bottom:10px}.__nuxt-error-page a{color:#7f828b!important;text-decoration:none}.__nuxt-error-page .logo{position:fixed;left:12px;bottom:12px}.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}.page-content .nav-item{margin:0}.page-content .nav-item .nav-link{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.page-content .nav-item a.nav-link{cursor:pointer}.page-content .nav-item .nav-link.nuxt-link-active{font-weight:700;color:#337ab7}.algolia-autocomplete .ds-dropdown-menu{border-style:none;--tw-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-]{border-style:none}.algolia-autocomplete .ds-dropdown-menu:before{border-style:none;--tw-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.bd-sidebar{position:sticky;z-index:1000;top:0;left:0;padding:0;overflow:visible;border-right:1px solid #eee;border-bottom:none;max-width:350px;height:calc(100vh - 50px)}.bd-sidebar .open-sidebar{display:none}.bd-sidebar .bd-docs-nav{overflow-x:hidden;overflow-y:auto;height:calc(100vh - 50px)}.bd-sidebar .sidebar-search{padding:15px 20px;border-bottom:1px solid #eee}.bd-sidebar .sidebar-search .algolia-autocomplete{width:100%}.bd-sidebar .sidebar-search input{border-radius:.75rem;border-width:0;padding:1rem;--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);width:100%}.bd-sidebar .sidebar-search .search-icon{position:absolute;right:30px;top:28px}@media (max-width:768px){.bd-sidebar.closed{left:-280px;--tw-shadow:0 0 transparent}.bd-sidebar,.bd-sidebar.closed{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.bd-sidebar{position:fixed;left:0;width:280px;top:50px;bottom:0;background-color:#fff;--tw-shadow:0 25px 50px -12px rgba(0,0,0,0.25);border-right:none;overflow:visible;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bd-sidebar .bd-docs-nav{width:280px}.bd-sidebar .open-sidebar{display:block;position:absolute;left:280px;bottom:60px;width:40px;height:40px;padding:5px;color:#000;z-index:1200;background:#eee;border-top-right-radius:1rem;border-bottom-right-radius:1rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.bd-sidebar .open-sidebar svg{width:100%;height:100%}}.bd-sidenav{display:none}.page-content{padding-bottom:0}.page-content .bd-docs-nav{margin-top:10px;margin-bottom:20px}.page-content .nav{display:block}.page-content ul.nav{padding-left:0}.page-content .nav>li>a:focus,.page-content .nav>li>a:hover{background-color:#f6f8fc}.page-content .nav .b-icon.bi{font-size:90%;opacity:.6;position:relative;top:-2px}.page-content .glyphicon{padding:5px;color:#cfd9e2;cursor:pointer;transform:scale(.8);top:2px;left:-4px;margin:-5px 0}.page-content .level0>li>.nav-link{margin-top:5px;padding:6px 0 6px 20px;font-weight:700;--tw-text-opacity:1;color:rgba(30,41,59,var(--tw-text-opacity))}.page-content .level1{margin-top:4px;font-size:14px}.page-content .level1 .nav-link{padding:6px 0 6px 35px}.page-content .level2 .nav-link{padding:5px 0 5px 50px}.page-content .level3{margin-top:1px}.page-content .level3 .nav-link{padding:5px 0 5px 60px}svg.icon-external-link{display:initial;vertical-align:initial}body{font-family:Open Sans,PingFang SC,Helvetica,Arial,sans-serif}.page-main{overflow-x:hidden}.handbook-content{padding-left:0;padding-right:0}.bd-content{padding-left:50px}@media (max-width:768px){.bd-content{padding-left:30px;padding-right:30px}}.post-content{margin:0 auto;max-width:960px}.post-inner{margin:20px 0 80px;--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.post-inner h1,.post-inner h2,.post-inner h3,.post-inner h4,.post-inner h5,.post-inner h6{font-weight:500}.post-inner h1:hover .permalink,.post-inner h2:hover .permalink,.post-inner h3:hover .permalink,.post-inner h4:hover .permalink,.post-inner h5:hover .permalink,.post-inner h6:hover .permalink{display:inline-block}.post-inner h1{margin:40px 0 30px;font-size:36px;font-weight:700;--tw-text-opacity:1;color:rgba(51,65,85,var(--tw-text-opacity))}.post-inner h2{margin:60px 0 20px;padding-bottom:20px;font-size:28px;--tw-text-opacity:1;color:rgba(71,85,105,var(--tw-text-opacity));border-bottom:1px solid #eee}.post-inner h1+h2{margin-top:40px}.post-inner h3{margin:40px 0 20px;font-size:22px}.post-inner h3,.post-inner h4{--tw-text-opacity:1;color:rgba(71,85,105,var(--tw-text-opacity))}.post-inner h4{margin:25px 0 20px;font-size:18px}.post-inner h5{font-size:16px}.post-inner h5,.post-inner h6{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.post-inner h6{font-size:14px}.post-inner .permalink{display:none}.post-inner blockquote{margin:15px 0;padding:20px 15px;--tw-bg-opacity:1;background-color:rgba(219,234,254,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(96,165,250,var(--tw-border-opacity));border-radius:.5rem;border-left-width:4px}.post-inner blockquote code{--tw-bg-opacity:1;background-color:rgba(191,219,254,var(--tw-bg-opacity));border-width:0;--tw-shadow:0 0 transparent;box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);color:currentColor}.post-inner blockquote :first-child{margin-top:0}.post-inner blockquote :last-child{margin-bottom:0}.post-inner pre{margin:20px 0;border-radius:5px;border:none;padding:10px}.post-inner pre code{background:none}.post-inner iframe{border:none;margin:10px 0}.post-inner ol,.post-inner ul{padding-left:20px}.post-inner li,.post-inner p{line-height:1.7em;font-size:16px}.post-inner p{margin:15px 0}.post-inner img{border-radius:.5rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.post-inner a{color:#337ab7}.post-inner .table-of-contents{position:fixed;left:77%;width:21%;top:65px;background-color:transparent;padding:10px;height:auto}@media (max-width:768px){.post-inner .table-of-contents{position:relative;width:100%;left:0;top:0;padding:0;margin:0 0 10px}}.post-inner .table-of-contents .toc-container-header{font-size:16px;font-weight:700}.post-inner .table-of-contents ul{padding-left:0;margin-bottom:0}.post-inner .table-of-contents ul li{list-style:none;font-size:14px}.post-inner .table-of-contents ul li.toc2{font-size:15px}.post-inner .table-of-contents ul li.toc3{font-size:14px;padding-left:15px}.post-inner .table-of-contents ul li.toc3+.toc2{margin-top:15px}.post-inner .table-of-contents a{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity));transition:.5s}.post-inner .table-of-contents a:hover{color:#555}
\ No newline at end of file
diff --git a/handbook/_nuxt/js/1384b359981424ebc3f4.js b/handbook/_nuxt/js/1384b359981424ebc3f4.js
deleted file mode 100644
index 3563c6f..0000000
--- a/handbook/_nuxt/js/1384b359981424ebc3f4.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1:function(t,e,r){"use strict";r.d(e,"k",(function(){return y})),r.d(e,"m",(function(){return _})),r.d(e,"l",(function(){return C})),r.d(e,"e",(function(){return k})),r.d(e,"b",(function(){return O})),r.d(e,"s",(function(){return $})),r.d(e,"g",(function(){return j})),r.d(e,"h",(function(){return P})),r.d(e,"d",(function(){return E})),r.d(e,"r",(function(){return S})),r.d(e,"j",(function(){return R})),r.d(e,"t",(function(){return A})),r.d(e,"o",(function(){return D})),r.d(e,"q",(function(){return T})),r.d(e,"f",(function(){return I})),r.d(e,"c",(function(){return z})),r.d(e,"i",(function(){return M})),r.d(e,"p",(function(){return B})),r.d(e,"a",(function(){return H})),r.d(e,"u",(function(){return Q})),r.d(e,"n",(function(){return Y}));r(17),r(34),r(42),r(43);var n=r(15),o=r(2),c=r(11),l=r(3),h=(r(21),r(25),r(122),r(16),r(20),r(22),r(35),r(27),r(28),r(23),r(36),r(70),r(123),r(103),r(95),r(96),r(166),r(41),r(37),r(0)),f=r.n(h),d=r(18);function v(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function m(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?v(Object(source),!0).forEach((function(e){Object(c.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):v(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function w(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return x(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return x(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function x(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function y(t){f.a.config.errorHandler&&f.a.config.errorHandler(t)}function _(t){return t.then((function(t){return t.default||t}))}function C(t){return t.$options&&"function"==typeof t.$options.fetch&&!t.$options.fetch.length}function k(t){var e,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=t.$children||[],o=w(n);try{for(o.s();!(e=o.n()).done;){var c=e.value;c.$fetch?r.push(c):c.$children&&k(c,r)}}catch(t){o.e(t)}finally{o.f()}return r}function O(t,e){if(e||!t.options.__hasNuxtData){var r=t.options._originDataFn||t.options.data||function(){return{}};t.options._originDataFn=r,t.options.data=function(){var data=r.call(this,this);return this.$ssrContext&&(e=this.$ssrContext.asyncData[t.cid]),m(m({},data),e)},t.options.__hasNuxtData=!0,t._Ctor&&t._Ctor.options&&(t._Ctor.options.data=t.options.data)}}function $(t){return t.options&&t._Ctor===t||(t.options?(t._Ctor=t,t.extendOptions=t.options):(t=f.a.extend(t))._Ctor=t,!t.options.name&&t.options.__file&&(t.options.name=t.options.__file)),t}function j(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"components";return Array.prototype.concat.apply([],t.matched.map((function(t,n){return Object.keys(t[r]).map((function(o){return e&&e.push(n),t[r][o]}))})))}function P(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return j(t,e,"instances")}function E(t,e){return Array.prototype.concat.apply([],t.matched.map((function(t,r){return Object.keys(t.components).reduce((function(n,o){return t.components[o]?n.push(e(t.components[o],t.instances[o],t,o,r)):delete t.components[o],n}),[])})))}function S(t,e){return Promise.all(E(t,function(){var t=Object(o.a)(regeneratorRuntime.mark((function t(r,n,o,c){var l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("function"!=typeof r||r.options){t.next=11;break}return t.prev=1,t.next=4,r();case 4:r=t.sent,t.next=11;break;case 7:throw t.prev=7,t.t0=t.catch(1),t.t0&&"ChunkLoadError"===t.t0.name&&"undefined"!=typeof window&&window.sessionStorage&&(l=Date.now(),(!(h=parseInt(window.sessionStorage.getItem("nuxt-reload")))||h+6e4<l)&&(window.sessionStorage.setItem("nuxt-reload",l),window.location.reload(!0))),t.t0;case 11:return o.components[c]=r=$(r),t.abrupt("return","function"==typeof e?e(r,n,o,c):r);case 13:case"end":return t.stop()}}),t,null,[[1,7]])})));return function(e,r,n,o){return t.apply(this,arguments)}}()))}function R(t){return L.apply(this,arguments)}function L(){return(L=Object(o.a)(regeneratorRuntime.mark((function t(e){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(e){t.next=2;break}return t.abrupt("return");case 2:return t.next=4,S(e);case 4:return t.abrupt("return",m(m({},e),{},{meta:j(e).map((function(t,r){return m(m({},t.options.meta),(e.matched[r]||{}).meta)}))}));case 5:case"end":return t.stop()}}),t)})))).apply(this,arguments)}function A(t,e){return N.apply(this,arguments)}function N(){return(N=Object(o.a)(regeneratorRuntime.mark((function t(e,r){var o,c,h,f;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e.context||(e.context={isStatic:!0,isDev:!1,isHMR:!1,app:e,store:e.store,payload:r.payload,error:r.error,base:e.router.options.base,env:{NUXT_ENV_DEPLOY:"asf"}},r.req&&(e.context.req=r.req),r.res&&(e.context.res=r.res),r.ssrContext&&(e.context.ssrContext=r.ssrContext),e.context.redirect=function(t,path,r){if(t){e.context._redirected=!0;var o=Object(n.a)(path);if("number"==typeof t||"undefined"!==o&&"object"!==o||(r=path||{},path=t,o=Object(n.a)(path),t=302),"object"===o&&(path=e.router.resolve(path).route.fullPath),!/(^[.]{1,2}\/)|(^\/(?!\/))/.test(path))throw path=Object(d.d)(path,r),window.location.replace(path),new Error("ERR_REDIRECT");e.context.next({path:path,query:r,status:t})}},e.context.nuxtState=window.__NUXT__),t.next=3,Promise.all([R(r.route),R(r.from)]);case 3:o=t.sent,c=Object(l.a)(o,2),h=c[0],f=c[1],r.route&&(e.context.route=h),r.from&&(e.context.from=f),e.context.next=r.next,e.context._redirected=!1,e.context._errored=!1,e.context.isHMR=!1,e.context.params=e.context.route.params||{},e.context.query=e.context.route.query||{};case 15:case"end":return t.stop()}}),t)})))).apply(this,arguments)}function D(t,e){return!t.length||e._redirected||e._errored?Promise.resolve():T(t[0],e).then((function(){return D(t.slice(1),e)}))}function T(t,e){var r;return(r=2===t.length?new Promise((function(r){t(e,(function(t,data){t&&e.error(t),r(data=data||{})}))})):t(e))&&r instanceof Promise&&"function"==typeof r.then?r:Promise.resolve(r)}function I(base,t){if("hash"===t)return window.location.hash.replace(/^#\//,"");base=decodeURI(base).slice(0,-1);var path=decodeURI(window.location.pathname);base&&path.startsWith(base)&&(path=path.slice(base.length));var e=(path||"/")+window.location.search+window.location.hash;return Object(d.c)(e)}function z(t,e){return function(t,e){for(var r=new Array(t.length),i=0;i<t.length;i++)"object"===Object(n.a)(t[i])&&(r[i]=new RegExp("^(?:"+t[i].pattern+")$",V(e)));return function(e,n){for(var path="",data=e||{},o=(n||{}).pretty?U:encodeURIComponent,c=0;c<t.length;c++){var l=t[c];if("string"!=typeof l){var h=data[l.name||"pathMatch"],f=void 0;if(null==h){if(l.optional){l.partial&&(path+=l.prefix);continue}throw new TypeError('Expected "'+l.name+'" to be defined')}if(Array.isArray(h)){if(!l.repeat)throw new TypeError('Expected "'+l.name+'" to not repeat, but received `'+JSON.stringify(h)+"`");if(0===h.length){if(l.optional)continue;throw new TypeError('Expected "'+l.name+'" to not be empty')}for(var d=0;d<h.length;d++){if(f=o(h[d]),!r[c].test(f))throw new TypeError('Expected all "'+l.name+'" to match "'+l.pattern+'", but received `'+JSON.stringify(f)+"`");path+=(0===d?l.prefix:l.delimiter)+f}}else{if(f=l.asterisk?G(h):o(h),!r[c].test(f))throw new TypeError('Expected "'+l.name+'" to match "'+l.pattern+'", but received "'+f+'"');path+=l.prefix+f}}else path+=l}return path}}(function(t,e){var r,n=[],o=0,c=0,path="",l=e&&e.delimiter||"/";for(;null!=(r=F.exec(t));){var h=r[0],f=r[1],d=r.index;if(path+=t.slice(c,d),c=d+h.length,f)path+=f[1];else{var v=t[c],m=r[2],w=r[3],x=r[4],y=r[5],_=r[6],C=r[7];path&&(n.push(path),path="");var k=null!=m&&null!=v&&v!==m,O="+"===_||"*"===_,$="?"===_||"*"===_,j=r[2]||l,pattern=x||y;n.push({name:w||o++,prefix:m||"",delimiter:j,optional:$,repeat:O,partial:k,asterisk:Boolean(C),pattern:pattern?K(pattern):C?".*":"[^"+X(j)+"]+?"})}}c<t.length&&(path+=t.substr(c));path&&n.push(path);return n}(t,e),e)}function M(t,e){var r={},n=m(m({},t),e);for(var o in n)String(t[o])!==String(e[o])&&(r[o]=!0);return r}function B(t){var e;if(t.message||"string"==typeof t)e=t.message||t;else try{e=JSON.stringify(t,null,2)}catch(r){e="[".concat(t.constructor.name,"]")}return m(m({},t),{},{message:e,statusCode:t.statusCode||t.status||t.response&&t.response.status||500})}window.onNuxtReadyCbs=[],window.onNuxtReady=function(t){window.onNuxtReadyCbs.push(t)};var F=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function U(t,e){var r=e?/[?#]/g:/[/?#]/g;return encodeURI(t).replace(r,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function G(t){return U(t,!0)}function X(t){return t.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1")}function K(t){return t.replace(/([=!:$/()])/g,"\\$1")}function V(t){return t&&t.sensitive?"":"i"}function H(t,e,r){t.$options[e]||(t.$options[e]=[]),t.$options[e].includes(r)||t.$options[e].push(r)}var Q=d.b,Y=(d.e,d.a)},102:function(t,e,r){"use strict";var n={gh:{routerBase:"/echarts-handbook",rootPath:"https://apache.github.io/echarts-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"},asf:{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"},local:{routerBase:"/echarts-handbook/dist",rootPath:"http://localhost/echarts-handbook/dist/",exampleViewPath:"http://localhost/echarts-website/examples/${lang}/view.html?c=",exampleEditorPath:"http://localhost/echarts-website/examples/${lang}/editor.html?c=",mainSitePath:"http://localhost/echarts-website/",optionPath:"http://localhost/echarts-website/option.html#",gitRepo:"apache/echarts-handbook"},localsite:{routerBase:"/echarts-website/handbook",rootPath:"http://localhost/echarts-website/handbook",exampleViewPath:"http://localhost/echarts-website/examples/${lang}/view.html?c=",exampleEditorPath:"http://localhost/echarts-website/examples/${lang}/editor.html?c=",mainSitePath:"http://localhost/echarts-website/",optionPath:"http://localhost/echarts-website/option.html#",gitRepo:"apache/echarts-handbook"}};var o=function(){var t="asf";if(!n.asf)throw"Deploy config ".concat(t," not exits");return n.asf}();e.a=o},124:function(t,e,r){t.exports={}},125:function(t,e,r){t.exports={}},126:function(t,e,r){t.exports={}},127:function(t,e,r){t.exports={}},128:function(t,e,r){t.exports={}},129:function(t,e,r){t.exports={}},134:function(t,e){const r=[[{title:"快速上手",dir:"get-started"},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:!0},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help"},{title:"版本特性",dir:"release-note",children:[{title:"ECharts 5 特性介绍",dir:"v5-feature"},{title:"ECharts 5 升级指南",dir:"v5-upgrade-guide"},{title:5.2,dir:"5-2-0"}]}]},{title:"概念篇",dir:"concepts",children:[{title:"图表容器及大小",dir:"chart-size"},{title:"配置项",dir:"options",draft:!0},{title:"系列",dir:"series",draft:!0},{title:"样式",dir:"style"},{title:"数据集",dir:"dataset"},{title:"数据转换",dir:"data-transform"},{title:"坐标系",dir:"coordinate",draft:!0},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:"visual-map"},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:"how-to",children:[{title:"常用图表类型",dir:"chart-types",children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:"basic-bar"},{title:"堆叠柱状图",dir:"stacked-bar"},{title:"动态排序柱状图",dir:"bar-race"},{title:"极坐标系柱状图",dir:"polar-bar",draft:!0},{title:"阶梯瀑布图",dir:"waterfall"},{title:"视觉映射的柱状图",dir:"visual-map",draft:!0}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:"basic-line"},{title:"堆叠折线图",dir:"stacked-line"},{title:"区域面积图",dir:"area-line"},{title:"平滑曲线图",dir:"smooth-line"},{title:"阶梯线图",dir:"step-line"}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:"basic-pie"},{title:"圆环图",dir:"doughnut"},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:"scatter",children:[{title:"基础散点图",dir:"basic-scatter"}]}]},{title:"移动端优化",dir:"mobile",draft:!0},{title:"跨平台方案",dir:"cross-platform",children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:"dynamic-data"},{title:"数据下钻",dir:"drilldown",draft:!0}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:"rich-text"}]},{title:"交互",dir:"interaction",children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:"connect",draft:!0}]}]},{title:"最佳实践",dir:"best-practices",children:[{title:"移动端优化",dir:"mobile",draft:!0},{title:"Canvas vs. SVG",dir:"canvas-vs-svg"},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:"edit-guide"}]}]];t.exports=r.length<=1?r[0]:r},135:function(t,e){const r=[[{title:"Get Started",dir:"get-started"},{title:"Basics",dir:"basics",children:[{title:"Download ECharts",dir:"download"},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:"resource",draft:!0},{title:"Inspiration",dir:"inspiration"},{title:"Get Help",dir:"help"},{title:"What's New",dir:"release-note",children:[{title:"ECharts 5 Features",dir:"v5-feature"},{title:"ECharts 5 Upgrade Guide",dir:"v5-upgrade-guide"},{title:5.2,dir:"5-2-0"}]}]},{title:"Concepts",dir:"concepts",children:[{title:"Chart Container",dir:"chart-size"},{title:"Chart Option",dir:"options",draft:!0},{title:"Series",dir:"series",draft:!0},{title:"Style",dir:"style"},{title:"Dataset",dir:"dataset"},{title:"Data Transform",dir:"data-transform"},{title:"Coordinate",dir:"coordinate",draft:!0},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:"visual-map"},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"How To Guides",dir:"how-to",children:[{title:"Common Charts",dir:"chart-types",children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:"basic-bar"},{title:"Stacked Bar",dir:"stacked-bar"},{title:"Bar Racing",dir:"bar-race"},{title:"Bar Polar",dir:"polar-bar",draft:!0},{title:"Waterfall",dir:"waterfall"}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:"basic-line"},{title:"Stacked Line",dir:"stacked-line"},{title:"Area Chart",dir:"area-line"},{title:"Smoothed Line",dir:"smooth-line"},{title:"Step Line",dir:"step-line"}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:"basic-pie"},{title:"Ring Style",dir:"doughnut"},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:"scatter",children:[{title:"Basic Scatter",dir:"basic-scatter"}]}]},{title:"Mobile",dir:"mobile",draft:!0},{title:"Cross Platform",dir:"cross-platform",children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:"dynamic-data"},{title:"Drilldown",dir:"drilldown",draft:!0}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:"rich-text"}]},{title:"Interaction",dir:"interaction",children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:"connect",draft:!0}]}]},{title:"Best Practices",dir:"best-practices",children:[{title:"Mobile Optimization",dir:"mobile",draft:!0},{title:"Canvas vs. SVG",dir:"canvas-vs-svg"},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:"edit-guide"}]}]];t.exports=r.length<=1?r[0]:r},136:function(t,e,r){"use strict";var n=r(2),o=(r(21),r(16),r(0)),c=r.n(o),l=r(1),h=window.__NUXT__;function f(){if(!this._hydrated)return this.$fetch()}function d(){if((t=this).$vnode&&t.$vnode.elm&&t.$vnode.elm.dataset&&t.$vnode.elm.dataset.fetchKey){var t;this._hydrated=!0,this._fetchKey=this.$vnode.elm.dataset.fetchKey;var data=h.fetch[this._fetchKey];if(data&&data._error)this.$fetchState.error=data._error;else for(var e in data)c.a.set(this.$data,e,data[e])}}function v(){var t=this;return this._fetchPromise||(this._fetchPromise=m.call(this).then((function(){delete t._fetchPromise}))),this._fetchPromise}function m(){return w.apply(this,arguments)}function w(){return(w=Object(n.a)(regeneratorRuntime.mark((function t(){var e,r,n,o=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return this.$nuxt.nbFetching++,this.$fetchState.pending=!0,this.$fetchState.error=null,this._hydrated=!1,e=null,r=Date.now(),t.prev=6,t.next=9,this.$options.fetch.call(this);case 9:t.next=15;break;case 11:t.prev=11,t.t0=t.catch(6),e=Object(l.p)(t.t0);case 15:if(!((n=this._fetchDelay-(Date.now()-r))>0)){t.next=19;break}return t.next=19,new Promise((function(t){return setTimeout(t,n)}));case 19:this.$fetchState.error=e,this.$fetchState.pending=!1,this.$fetchState.timestamp=Date.now(),this.$nextTick((function(){return o.$nuxt.nbFetching--}));case 23:case"end":return t.stop()}}),t,this,[[6,11]])})))).apply(this,arguments)}e.a={beforeCreate:function(){Object(l.l)(this)&&(this._fetchDelay="number"==typeof this.$options.fetchDelay?this.$options.fetchDelay:200,c.a.util.defineReactive(this,"$fetchState",{pending:!1,error:null,timestamp:Date.now()}),this.$fetch=v.bind(this),Object(l.a)(this,"created",d),Object(l.a)(this,"beforeMount",f))}}},141:function(t,e,r){t.exports=r(142)},142:function(t,e,r){"use strict";r.r(e),function(t){r(23),r(17),r(34);var e=r(15),n=r(2),o=(r(114),r(150),r(155),r(157),r(21),r(20),r(25),r(35),r(41),r(37),r(22),r(27),r(16),r(28),r(0)),c=r.n(o),l=r(131),h=r(56),f=r(1),d=r(26),v=r(136),m=r(73);function w(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return x(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return x(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function x(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}c.a.__nuxt__fetch__mixin__||(c.a.mixin(v.a),c.a.__nuxt__fetch__mixin__=!0),c.a.component(m.a.name,m.a),c.a.component("NLink",m.a),t.fetch||(t.fetch=l.a);var y,_,C=[],k=window.__NUXT__||{},O=k.config||{};O._app&&(r.p=Object(f.u)(O._app.cdnURL,O._app.assetsPath)),Object.assign(c.a.config,{silent:!0,performance:!1});var $=c.a.config.errorHandler||console.error;function j(t,e,r){for(var n=function(component){var t=function(component,t){if(!component||!component.options||!component.options[t])return{};var option=component.options[t];if("function"==typeof option){for(var e=arguments.length,r=new Array(e>2?e-2:0),n=2;n<e;n++)r[n-2]=arguments[n];return option.apply(void 0,r)}return option}(component,"transition",e,r)||{};return"string"==typeof t?{name:t}:t},o=r?Object(f.g)(r):[],c=Math.max(t.length,o.length),l=[],h=function(i){var e=Object.assign({},n(t[i])),r=Object.assign({},n(o[i]));Object.keys(e).filter((function(t){return void 0!==e[t]&&!t.toLowerCase().includes("leave")})).forEach((function(t){r[t]=e[t]})),l.push(r)},i=0;i<c;i++)h(i);return l}function P(t,e,r){return E.apply(this,arguments)}function E(){return(E=Object(n.a)(regeneratorRuntime.mark((function t(e,r,n){var o,c,l,h,d=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(this._routeChanged=Boolean(y.nuxt.err)||r.name!==e.name,this._paramChanged=!this._routeChanged&&r.path!==e.path,this._queryChanged=!this._paramChanged&&r.fullPath!==e.fullPath,this._diffQuery=this._queryChanged?Object(f.i)(e.query,r.query):[],(this._routeChanged||this._paramChanged)&&this.$loading.start&&!this.$loading.manual&&this.$loading.start(),t.prev=5,!this._queryChanged){t.next=12;break}return t.next=9,Object(f.r)(e,(function(t,e){return{Component:t,instance:e}}));case 9:o=t.sent,o.some((function(t){var n=t.Component,o=t.instance,c=n.options.watchQuery;return!0===c||(Array.isArray(c)?c.some((function(t){return d._diffQuery[t]})):"function"==typeof c&&c.apply(o,[e.query,r.query]))}))&&this.$loading.start&&!this.$loading.manual&&this.$loading.start();case 12:n(),t.next=26;break;case 15:if(t.prev=15,t.t0=t.catch(5),c=t.t0||{},l=c.statusCode||c.status||c.response&&c.response.status||500,h=c.message||"",!/^Loading( CSS)? chunk (\d)+ failed\./.test(h)){t.next=23;break}return window.location.reload(!0),t.abrupt("return");case 23:this.error({statusCode:l,message:h}),this.$nuxt.$emit("routeChanged",e,r,c),n();case 26:case"end":return t.stop()}}),t,this,[[5,15]])})))).apply(this,arguments)}function S(t,e){return k.serverRendered&&e&&Object(f.b)(t,e),t._Ctor=t,t}function R(t){return Object(f.d)(t,function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e,r,n,o,c){var l;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("function"!=typeof e||e.options){t.next=4;break}return t.next=3,e();case 3:e=t.sent;case 4:return l=S(Object(f.s)(e),k.data?k.data[c]:null),n.components[o]=l,t.abrupt("return",l);case 7:case"end":return t.stop()}}),t)})));return function(e,r,n,o,c){return t.apply(this,arguments)}}())}function L(t,e,r){var n=this,o=["nuxti18n"],c=!1;if(void 0!==r&&(o=[],(r=Object(f.s)(r)).options.middleware&&(o=o.concat(r.options.middleware)),t.forEach((function(t){t.options.middleware&&(o=o.concat(t.options.middleware))}))),o=o.map((function(t){return"function"==typeof t?t:("function"!=typeof h.a[t]&&(c=!0,n.error({statusCode:500,message:"Unknown middleware "+t})),h.a[t])})),!c)return Object(f.o)(o,e)}function A(t,e,r){return N.apply(this,arguments)}function N(){return(N=Object(n.a)(regeneratorRuntime.mark((function t(e,r,o){var c,l,h,v,m,x,_,k,O,$,P,E,S,R,A,N=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!1!==this._routeChanged||!1!==this._paramChanged||!1!==this._queryChanged){t.next=2;break}return t.abrupt("return",o());case 2:return!1,e===r?(C=[],!0):(c=[],C=Object(f.g)(r,c).map((function(t,i){return Object(f.c)(r.matched[c[i]].path)(r.params)}))),l=!1,h=function(path){r.path===path.path&&N.$loading.finish&&N.$loading.finish(),r.path!==path.path&&N.$loading.pause&&N.$loading.pause(),l||(l=!0,o(path))},t.next=8,Object(f.t)(y,{route:e,from:r,next:h.bind(this)});case 8:if(this._dateLastError=y.nuxt.dateErr,this._hadError=Boolean(y.nuxt.err),v=[],(m=Object(f.g)(e,v)).length){t.next=27;break}return t.next=15,L.call(this,m,y.context);case 15:if(!l){t.next=17;break}return t.abrupt("return");case 17:return x=(d.a.options||d.a).layout,t.next=20,this.loadLayout("function"==typeof x?x.call(d.a,y.context):x);case 20:return _=t.sent,t.next=23,L.call(this,m,y.context,_);case 23:if(!l){t.next=25;break}return t.abrupt("return");case 25:return y.context.error({statusCode:404,message:"This page could not be found"}),t.abrupt("return",o());case 27:return m.forEach((function(t){t._Ctor&&t._Ctor.options&&(t.options.asyncData=t._Ctor.options.asyncData,t.options.fetch=t._Ctor.options.fetch)})),this.setTransitions(j(m,e,r)),t.prev=29,t.next=32,L.call(this,m,y.context);case 32:if(!l){t.next=34;break}return t.abrupt("return");case 34:if(!y.context._errored){t.next=36;break}return t.abrupt("return",o());case 36:return"function"==typeof(k=m[0].options.layout)&&(k=k(y.context)),t.next=40,this.loadLayout(k);case 40:return k=t.sent,t.next=43,L.call(this,m,y.context,k);case 43:if(!l){t.next=45;break}return t.abrupt("return");case 45:if(!y.context._errored){t.next=47;break}return t.abrupt("return",o());case 47:O=!0,t.prev=48,$=w(m),t.prev=50,$.s();case 52:if((P=$.n()).done){t.next=63;break}if("function"==typeof(E=P.value).options.validate){t.next=56;break}return t.abrupt("continue",61);case 56:return t.next=58,E.options.validate(y.context);case 58:if(O=t.sent){t.next=61;break}return t.abrupt("break",63);case 61:t.next=52;break;case 63:t.next=68;break;case 65:t.prev=65,t.t0=t.catch(50),$.e(t.t0);case 68:return t.prev=68,$.f(),t.finish(68);case 71:t.next=77;break;case 73:return t.prev=73,t.t1=t.catch(48),this.error({statusCode:t.t1.statusCode||"500",message:t.t1.message}),t.abrupt("return",o());case 77:if(O){t.next=80;break}return this.error({statusCode:404,message:"This page could not be found"}),t.abrupt("return",o());case 80:return t.next=82,Promise.all(m.map(function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n,i){var o,c,l,h,d,m,w,x,p;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(n._path=Object(f.c)(e.matched[v[i]].path)(e.params),n._dataRefresh=!1,o=n._path!==C[i],N._routeChanged&&o?n._dataRefresh=!0:N._paramChanged&&o?(c=n.options.watchParam,n._dataRefresh=!1!==c):N._queryChanged&&(!0===(l=n.options.watchQuery)?n._dataRefresh=!0:Array.isArray(l)?n._dataRefresh=l.some((function(t){return N._diffQuery[t]})):"function"==typeof l&&(S||(S=Object(f.h)(e)),n._dataRefresh=l.apply(S[i],[e.query,r.query]))),N._hadError||!N._isMounted||n._dataRefresh){t.next=6;break}return t.abrupt("return");case 6:return h=[],d=n.options.asyncData&&"function"==typeof n.options.asyncData,m=Boolean(n.options.fetch)&&n.options.fetch.length,w=d&&m?30:45,d&&((x=Object(f.q)(n.options.asyncData,y.context)).then((function(t){Object(f.b)(n,t),N.$loading.increase&&N.$loading.increase(w)})),h.push(x)),N.$loading.manual=!1===n.options.loading,m&&((p=n.options.fetch(y.context))&&(p instanceof Promise||"function"==typeof p.then)||(p=Promise.resolve(p)),p.then((function(t){N.$loading.increase&&N.$loading.increase(w)})),h.push(p)),t.abrupt("return",Promise.all(h));case 14:case"end":return t.stop()}}),t)})));return function(e,r){return t.apply(this,arguments)}}()));case 82:l||(this.$loading.finish&&!this.$loading.manual&&this.$loading.finish(),o()),t.next=99;break;case 85:if(t.prev=85,t.t2=t.catch(29),"ERR_REDIRECT"!==(R=t.t2||{}).message){t.next=90;break}return t.abrupt("return",this.$nuxt.$emit("routeChanged",e,r,R));case 90:return C=[],Object(f.k)(R),"function"==typeof(A=(d.a.options||d.a).layout)&&(A=A(y.context)),t.next=96,this.loadLayout(A);case 96:this.error(R),this.$nuxt.$emit("routeChanged",e,r,R),o();case 99:case"end":return t.stop()}}),t,this,[[29,85],[48,73],[50,65,68,71]])})))).apply(this,arguments)}function D(t,r){Object(f.d)(t,(function(t,r,n,o){return"object"!==Object(e.a)(t)||t.options||((t=c.a.extend(t))._Ctor=t,n.components[o]=t),t}))}function T(t){var e=Boolean(this.$options.nuxt.err);this._hadError&&this._dateLastError===this.$options.nuxt.dateErr&&(e=!1);var r=e?(d.a.options||d.a).layout:t.matched[0].components.default.options.layout;"function"==typeof r&&(r=r(y.context)),this.setLayout(r)}function I(t){t._hadError&&t._dateLastError===t.$options.nuxt.dateErr&&t.error()}function z(t,e){var r=this;if(!1!==this._routeChanged||!1!==this._paramChanged||!1!==this._queryChanged){var n=Object(f.h)(t),o=Object(f.g)(t),l=!1;c.a.nextTick((function(){n.forEach((function(t,i){if(t&&!t._isDestroyed&&t.constructor._dataRefresh&&o[i]===t.constructor&&!0!==t.$vnode.data.keepAlive&&"function"==typeof t.constructor.options.data){var e=t.constructor.options.data.call(t);for(var r in e)c.a.set(t.$data,r,e[r]);l=!0}})),l&&window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")})),I(r)}))}}function M(t){window.onNuxtReadyCbs.forEach((function(e){"function"==typeof e&&e(t)})),"function"==typeof window._onNuxtLoaded&&window._onNuxtLoaded(t),_.afterEach((function(e,r){c.a.nextTick((function(){return t.$nuxt.$emit("routeChanged",e,r)}))}))}function B(){return(B=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return y=e.app,_=e.router,e.store,r=new c.a(y),n=k.layout||"default",t.next=7,r.loadLayout(n);case 7:return r.setLayout(n),o=function(){r.$mount("#__nuxt"),_.afterEach(D),_.afterEach(T.bind(r)),_.afterEach(z.bind(r)),c.a.nextTick((function(){M(r)}))},t.next=11,Promise.all(R(y.context.route));case 11:if(l=t.sent,r.setTransitions=r.$options.nuxt.setTransitions.bind(r),l.length&&(r.setTransitions(j(l,_.currentRoute)),C=_.currentRoute.matched.map((function(t){return Object(f.c)(t.path)(_.currentRoute.params)}))),r.$loading={},k.error&&r.error(k.error),_.beforeEach(P.bind(r)),_.beforeEach(A.bind(r)),!k.serverRendered||!Object(f.n)(k.routePath,r.context.route.path)){t.next=20;break}return t.abrupt("return",o());case 20:return h=function(){D(_.currentRoute,_.currentRoute),T.call(r,_.currentRoute),I(r),o()},t.next=23,new Promise((function(t){return setTimeout(t,0)}));case 23:A.call(r,_.currentRoute,_.currentRoute,(function(path){if(path){var t=_.afterEach((function(e,r){t(),h()}));_.push(path,void 0,(function(t){t&&$(t)}))}else h()}));case 24:case"end":return t.stop()}}),t)})))).apply(this,arguments)}Object(d.b)(null,k.config).then((function(t){return B.apply(this,arguments)})).catch($)}.call(this,r(44))},172:function(t,e,r){"use strict";r(124)},173:function(t,e,r){"use strict";r(125)},177:function(t,e,r){"use strict";r(126)},178:function(t,e,r){"use strict";r(127)},179:function(t,e,r){"use strict";r(128)},180:function(t,e,r){"use strict";r(129)},181:function(t,e,r){"use strict";r.r(e),r.d(e,"state",(function(){return f})),r.d(e,"mutations",(function(){return d})),r.d(e,"actions",(function(){return m}));var n=r(134),o=r.n(n),c=r(135),l=r.n(c),h=r(102),f=function(){return{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:o.a,en:l.a},config:h.a}},d={toggle:function(t,e){t[e]=!t[e]},setDocVersion:function(t,e){t.docVersion=e},setGhVersion:function(t,e){t.ghVersion=e},setHomepage:function(t,e){t.homepage=e},setFilled:function(t){t.filled=!0},setAdBlocked:function(t,e){t.adBlocked=e},setFocusMode:function(t,e){t.focusMode=e}},v=null,m={focusMode:function(t){var e=t.commit;v||(v=setTimeout((function(){return e("setFocusMode",!0)}),1300))},clearFocusMode:function(t){var e=t.commit;v&&(clearTimeout(v),v=null),e("setFocusMode",!1)}}},26:function(t,e,r){"use strict";r.d(e,"b",(function(){return he})),r.d(e,"a",(function(){return D}));r(35),r(17),r(25),r(42),r(43);var n=r(2),o=r(11),c=(r(21),r(20),r(22),r(16),r(36),r(0)),l=r.n(c),h=r(59),f=r(58),d=r(98),v=r.n(d),m=r(45),w=r.n(m),x=r(99),y=r(18),_=r(1);function C(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function k(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?C(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):C(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}var O=function(){return Object(_.m)(r.e(3).then(r.bind(null,424)))},$=function(){return Object(_.m)(Promise.all([r.e(6),r.e(2)]).then(r.bind(null,423)))},j=function(){};l.a.use(x.a);var P={mode:"history",base:"/handbook/",linkActiveClass:"nuxt-link-active",linkExactActiveClass:"nuxt-link-exact-active",scrollBehavior:function(t){if(t.hash){var e=t.hash.substr(1),r=document.getElementById(decodeURIComponent(e))||document.getElementById(e);r&&r.scrollIntoView&&r.scrollIntoView({behavior:"smooth"})}},routes:[{path:"/en",component:O,name:"index___en"},{path:"/zh",component:O,name:"index___zh"},{path:"/zh/*",component:$,name:"all___zh"},{path:"/en/*",component:$,name:"all___en"},{path:"/",component:O,name:"index"},{path:"/*",component:$,name:"all"}],fallback:!1};function E(t,e){var base=e._app&&e._app.basePath||P.base,r=new x.a(k(k({},P),{},{base:base})),n=r.push;r.push=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:j,r=arguments.length>2?arguments[2]:void 0;return n.call(this,t,e,r)};var o=r.resolve.bind(r);return r.resolve=function(t,e,r){return"string"==typeof t&&(t=Object(y.c)(t)),o(t,e,r)},r}var S={name:"NuxtChild",functional:!0,props:{nuxtChildKey:{type:String,default:""},keepAlive:Boolean,keepAliveProps:{type:Object,default:void 0}},render:function(t,e){var r=e.parent,data=e.data,n=e.props,o=r.$createElement;data.nuxtChild=!0;for(var c=r,l=r.$nuxt.nuxt.transitions,h=r.$nuxt.nuxt.defaultTransition,f=0;r;)r.$vnode&&r.$vnode.data.nuxtChild&&f++,r=r.$parent;data.nuxtChildDepth=f;var d=l[f]||h,v={};R.forEach((function(t){void 0!==d[t]&&(v[t]=d[t])}));var m={};L.forEach((function(t){"function"==typeof d[t]&&(m[t]=d[t].bind(c))}));var w=m.beforeEnter;if(m.beforeEnter=function(t){if(window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")})),w)return w.call(c,t)},!1===d.css){var x=m.leave;(!x||x.length<2)&&(m.leave=function(t,e){x&&x.call(c,t),c.$nextTick(e)})}var y=o("routerView",data);return n.keepAlive&&(y=o("keep-alive",{props:n.keepAliveProps},[y])),o("transition",{props:v,on:m},[y])}},R=["name","mode","appear","css","type","duration","enterClass","leaveClass","appearClass","enterActiveClass","enterActiveClass","leaveActiveClass","appearActiveClass","enterToClass","leaveToClass","appearToClass"],L=["beforeEnter","enter","afterEnter","enterCancelled","beforeLeave","leave","afterLeave","leaveCancelled","beforeAppear","appear","afterAppear","appearCancelled"],A={name:"NuxtError",props:{error:{type:Object,default:null}},computed:{statusCode:function(){return this.error&&this.error.statusCode||500},message:function(){return this.error.message||"Error"}},head:function(){return{title:this.message,meta:[{name:"viewport",content:"width=device-width,initial-scale=1.0,minimum-scale=1.0"}]}}},N=(r(172),r(7)),D=Object(N.a)(A,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"__nuxt-error-page"},[r("div",{staticClass:"error"},[r("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"90",height:"90",fill:"#DBE1EC",viewBox:"0 0 48 48"}},[r("path",{attrs:{d:"M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"}})]),t._v(" "),r("div",{staticClass:"title"},[t._v(t._s(t.message))]),t._v(" "),404===t.statusCode?r("p",{staticClass:"description"},[void 0===t.$route?r("a",{staticClass:"error-link",attrs:{href:"/"}}):r("NuxtLink",{staticClass:"error-link",attrs:{to:"/"}},[t._v("Back to the home page")])],1):t._e(),t._v(" "),t._m(0)])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"logo"},[r("a",{attrs:{href:"https://nuxtjs.org",target:"_blank",rel:"noopener"}},[t._v("Nuxt")])])}],!1,null,null,null).exports,T=r(3),I=(r(95),r(96),{name:"Nuxt",components:{NuxtChild:S,NuxtError:D},props:{nuxtChildKey:{type:String,default:void 0},keepAlive:Boolean,keepAliveProps:{type:Object,default:void 0},name:{type:String,default:"default"}},errorCaptured:function(t){this.displayingNuxtError&&(this.errorFromNuxtError=t,this.$forceUpdate())},computed:{routerViewKey:function(){if(void 0!==this.nuxtChildKey||this.$route.matched.length>1)return this.nuxtChildKey||Object(_.c)(this.$route.matched[0].path)(this.$route.params);var t=Object(T.a)(this.$route.matched,1)[0];if(!t)return this.$route.path;var e=t.components.default;if(e&&e.options){var r=e.options;if(r.key)return"function"==typeof r.key?r.key(this.$route):r.key}return/\/$/.test(t.path)?this.$route.path:this.$route.path.replace(/\/$/,"")}},beforeCreate:function(){l.a.util.defineReactive(this,"nuxt",this.$root.$options.nuxt)},render:function(t){var e=this;return this.nuxt.err?this.errorFromNuxtError?(this.$nextTick((function(){return e.errorFromNuxtError=!1})),t("div",{},[t("h2","An error occurred while showing the error page"),t("p","Unfortunately an error occurred and while showing the error page another error occurred"),t("p","Error details: ".concat(this.errorFromNuxtError.toString())),t("nuxt-link",{props:{to:"/"}},"Go back to home")])):(this.displayingNuxtError=!0,this.$nextTick((function(){return e.displayingNuxtError=!1})),t(D,{props:{error:this.nuxt.err}})):t("NuxtChild",{key:this.routerViewKey,props:this.$props})}}),z=(r(23),r(34),r(27),r(28),{name:"NuxtLoading",data:function(){return{percent:0,show:!1,canSucceed:!0,reversed:!1,skipTimerCount:0,rtl:!1,throttle:200,duration:5e3,continuous:!1}},computed:{left:function(){return!(!this.continuous&&!this.rtl)&&(this.rtl?this.reversed?"0px":"auto":this.reversed?"auto":"0px")}},beforeDestroy:function(){this.clear()},methods:{clear:function(){clearInterval(this._timer),clearTimeout(this._throttle),this._timer=null},start:function(){var t=this;return this.clear(),this.percent=0,this.reversed=!1,this.skipTimerCount=0,this.canSucceed=!0,this.throttle?this._throttle=setTimeout((function(){return t.startTimer()}),this.throttle):this.startTimer(),this},set:function(t){return this.show=!0,this.canSucceed=!0,this.percent=Math.min(100,Math.max(0,Math.floor(t))),this},get:function(){return this.percent},increase:function(t){return this.percent=Math.min(100,Math.floor(this.percent+t)),this},decrease:function(t){return this.percent=Math.max(0,Math.floor(this.percent-t)),this},pause:function(){return clearInterval(this._timer),this},resume:function(){return this.startTimer(),this},finish:function(){return this.percent=this.reversed?0:100,this.hide(),this},hide:function(){var t=this;return this.clear(),setTimeout((function(){t.show=!1,t.$nextTick((function(){t.percent=0,t.reversed=!1}))}),500),this},fail:function(t){return this.canSucceed=!1,this},startTimer:function(){var t=this;this.show||(this.show=!0),void 0===this._cut&&(this._cut=1e4/Math.floor(this.duration)),this._timer=setInterval((function(){t.skipTimerCount>0?t.skipTimerCount--:(t.reversed?t.decrease(t._cut):t.increase(t._cut),t.continuous&&(t.percent>=100||t.percent<=0)&&(t.skipTimerCount=1,t.reversed=!t.reversed))}),100)}},render:function(t){var e=t(!1);return this.show&&(e=t("div",{staticClass:"nuxt-progress",class:{"nuxt-progress-notransition":this.skipTimerCount>0,"nuxt-progress-failed":!this.canSucceed},style:{width:this.percent+"%",left:this.left}})),e}}),M=(r(173),Object(N.a)(z,undefined,undefined,!1,null,null,null).exports),B=(r(174),r(133)),F=r.n(B),U=(r(140),r(70),l.a.extend({name:"SidebarNavItem",props:{item:{type:Object},parentPath:{type:String},level:{type:Number}},computed:{link:function(){return"/"+this.$i18n.locale+"/"+this.path}},data:function(){var path=this.parentPath?this.parentPath+"/"+this.item.dir:this.item.dir,t=(this.$route.params.post+"").startsWith(path);return{get path(){return path},collapsed:this.level>=2&&!t}},methods:{toggleCollapsed:function(){this.collapsed=!this.collapsed}}})),G=(r(177),Object(N.a)(U,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return t.item.draft?t._e():r("li",{staticClass:"nav-item"},[t.item.children?t.level>1?r("a",{staticClass:"nav-link",on:{click:t.toggleCollapsed}},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))]),t._v(" "),r("span",{class:["glyphicon",t.collapsed?"glyphicon-menu-down":"glyphicon-menu-up"]})]):r("div",{staticClass:"nav-link"},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))])]):r("nuxt-link",{staticClass:"nav-link",attrs:{to:t.link}},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))])]),t._v(" "),r("ul",{directives:[{name:"show",rawName:"v-show",value:!t.item.draft&&t.item.children&&!t.collapsed,expression:"!item.draft && item.children && !collapsed"}],class:["nav","bd-sidenav","level"+t.level]},t._l(t.item.children,(function(e){return r("SidebarNavItem",{key:e.dir,attrs:{parentPath:t.path,item:e,level:t.level+1}})})),1)],1)}),[],!1,null,null,null).exports),X=l.a.extend({components:{SidebarNavItem:G},data:function(){return{sidebarOpen:!1}},watch:{$route:function(t,e){this.sidebarOpen=!1}},mounted:function(){var t=this.$el.querySelector(".actived");t&&F()(t,{time:0,align:{top:0,topOffset:300},isScrollable:function(t){return!!t.className&&t.className.indexOf("bd-sidebar")>=0}}),docsearch({apiKey:"6ade5f1ff34e94690f9ea38cddcc2f55",indexName:"apache_echarts",inputSelector:"#handbook-search-intput",debug:!1})}}),K=(r(178),Object(N.a)(X,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{class:"bd-sidebar col-sm-3 col-md-2 "+(t.sidebarOpen?"":"closed")},[r("div",{staticClass:"sidebar-search"},[r("input",{attrs:{id:"handbook-search-intput",type:"search",placeholder:"Search Handbook"}}),t._v(" "),r("div",{staticClass:"search-icon"},[r("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[r("path",{attrs:{"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"}})])])]),t._v(" "),r("div",{staticClass:"bd-docs-nav"},[r("ul",{staticClass:"nav bd-sidenav nav-root level0"},t._l(t.$store.state.posts[this.$i18n.locale],(function(t){return r("SidebarNavItem",{key:t.dir,attrs:{item:t,parentPath:"",level:1}})})),1)]),t._v(" "),r("div",{staticClass:"open-sidebar",on:{click:function(e){t.sidebarOpen=!t.sidebarOpen}}},[t.sidebarOpen?r("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[r("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}})]):r("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[r("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"}})])])])}),[],!1,null,null,null).exports),V=Object(N.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("nav",{staticClass:"navbar navbar-default navbar-fixed-top",attrs:{role:"navigation"}},[r("div",{staticClass:"container-fluid"},[t._m(0),r("div",{staticClass:"collapse navbar-collapse",attrs:{id:"navbar-collapse"}},[r("ul",{staticClass:"nav navbar-nav navbar-left"},[t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),r("li",{attrs:{id:"nav-contribute"}},[t._m(6),r("ul",{staticClass:"dropdown-menu"},[t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts",target:"_blank"}},[t._v("源码(GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts/issues",target:"_blank"}},[t._v("Issues(GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])])])]),r("li",{attrs:{id:"nav-others"}},[t._m(13),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://www.apache.org/",target:"_blank"}},[t._v("Apache Software Foundation"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),t._m(14),r("li",[r("a",{attrs:{href:"https://www.apache.org/licenses/",target:"_blank"}},[t._v("版权"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/events/current-event",target:"_blank"}},[t._v("活动"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/sponsorship.html",target:"_blank"}},[t._v("捐赠"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/thanks.html",target:"_blank"}},[t._v("鸣谢"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])])])])]),t._m(15)])])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"navbar-header"},[r("button",{staticClass:"navbar-toggle collapsed",attrs:{type:"button","data-toggle":"collapse","data-target":"#navbar-collapse","aria-expanded":"false"}},[r("span",{staticClass:"sr-only"},[t._v("Toggle navigation")]),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"})]),r("a",{staticClass:"navbar-brand",attrs:{href:"https://echarts.apache.org/zh/index.html"}},[r("img",{staticClass:"navbar-logo",attrs:{src:"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1",alt:"echarts logo"}})])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-index"}},[r("a",{attrs:{href:"https://echarts.apache.org/zh/index.html"}},[t._v("首页")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-doc"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("文档"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/feature.html"}},[t._v("特性")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/tutorial.html"}},[t._v("教程")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/api.html"}},[t._v("API")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/option.html"}},[t._v("配置项手册")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/changelog.html"}},[t._v("版本记录")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/faq.html"}},[t._v("常见问题")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南"}},[t._v("v5 升级指南"),r("span",{staticClass:"new"},[t._v("new")])])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-download"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("下载"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download.html"}},[t._v("下载")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download-theme.html"}},[t._v("主题下载")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download-extension.html"}},[t._v("扩展下载")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-examples"}},[r("a",{attrs:{href:"https://echarts.apache.org/examples/zh/index.html"}},[t._v("示例")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-resources"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("资源"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/spreadsheet.html"}},[t._v("表格工具")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/theme-builder.html"}},[t._v("主题构建工具")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/cheat-sheet.html"}},[t._v("术语速查手册")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/resources.html"}},[t._v("更多资源")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("社区"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/events.html"}},[t._v("活动")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/committers.html"}},[t._v("贡献者列表")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/maillist.html"}},[t._v("邮件列表")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/contributing.html"}},[t._v("如何贡献")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/dependencies.html"}},[t._v("依赖项")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/coding-standard.html"}},[t._v("代码规范")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("ASF"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/security.html"}},[t._v("安全")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ul",{staticClass:"nav navbar-nav navbar-right"},[r("li",{attrs:{id:"nav-homeen"}},[r("a",{attrs:{href:"javascript:;",onclick:"changeLang('en')"}},[t._v("EN")])])])}],!1,null,null,null).exports,H=Object(N.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("nav",{staticClass:"navbar navbar-default navbar-fixed-top",attrs:{role:"navigation"}},[r("div",{staticClass:"container-fluid"},[t._m(0),r("div",{staticClass:"collapse navbar-collapse",attrs:{id:"navbar-collapse"}},[r("ul",{staticClass:"nav navbar-nav navbar-left"},[t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),r("li",{attrs:{id:"nav-contribute"}},[t._m(6),r("ul",{staticClass:"dropdown-menu"},[t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts",target:"_blank"}},[t._v("Source Code (GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts/issues",target:"_blank"}},[t._v("Issues (GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])])])]),r("li",{attrs:{id:"nav-others"}},[t._m(13),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://www.apache.org/",target:"_blank"}},[t._v("Apache Software Foundation"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),t._m(14),r("li",[r("a",{attrs:{href:"https://www.apache.org/licenses/",target:"_blank"}},[t._v("License"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/events/current-event",target:"_blank"}},[t._v("Events"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/sponsorship.html",target:"_blank"}},[t._v("Sponsorship"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/thanks.html",target:"_blank"}},[t._v("Thanks"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])])])])]),t._m(15)])])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"navbar-header"},[r("button",{staticClass:"navbar-toggle collapsed",attrs:{type:"button","data-toggle":"collapse","data-target":"#navbar-collapse","aria-expanded":"false"}},[r("span",{staticClass:"sr-only"},[t._v("Toggle navigation")]),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"})]),r("a",{staticClass:"navbar-brand",attrs:{href:"https://echarts.apache.org/en/index.html"}},[r("img",{staticClass:"navbar-logo",attrs:{src:"https://echarts.apache.org/en/images/logo.png",alt:"echarts logo"}})])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-index"}},[r("a",{attrs:{href:"https://echarts.apache.org/en/index.html"}},[t._v("Home")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-doc"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Docs"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/feature.html"}},[t._v("Features")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/tutorial.html"}},[t._v("Tutorials")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/api.html"}},[t._v("API")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/option.html"}},[t._v("Chart Configuration")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/changelog.html"}},[t._v("Changelog")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/faq.html"}},[t._v("FAQ")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide"}},[t._v("V5 Upgrade Guide"),r("span",{staticClass:"new"},[t._v("new")])])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-download"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Download"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download.html"}},[t._v("Download")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download-theme.html"}},[t._v("Download Themes")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download-extension.html"}},[t._v("Download Extensions")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-examples"}},[r("a",{attrs:{href:"https://echarts.apache.org/examples/en/index.html"}},[t._v("Examples")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-resources"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Resources"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/spreadsheet.html"}},[t._v("Spread Sheet Tool")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/theme-builder.html"}},[t._v("Theme Builder")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/cheat-sheet.html"}},[t._v("Cheat Sheet")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/resources.html"}},[t._v("More Resources")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Community"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/events.html"}},[t._v("Events")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/committers.html"}},[t._v("Committers")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/maillist.html"}},[t._v("Mailing List")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/contributing.html"}},[t._v("How to Contribute")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/dependencies.html"}},[t._v("Dependencies")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/coding-standard.html"}},[t._v("Code Standard")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("ASF"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/security.html"}},[t._v("Security")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ul",{staticClass:"nav navbar-nav navbar-right"},[r("li",{attrs:{id:"nav-homeen"}},[r("a",{attrs:{href:"javascript:;",onclick:"changeLang('zh')"}},[t._v("中文")])])])}],!1,null,null,null).exports,Q=l.a.extend({components:{},mounted:function(){var t=this.$i18n.locale;window.changeLang=function(){window.location.href=window.location.href.replace("/".concat(t,"/"),"zh"===t?"/en/":"/zh/")}},computed:{navComponent:function(){return"zh"===this.$i18n.locale?V:H}}}),Y=(r(179),{components:{Sidebar:K,Navbar:Object(N.a)(Q,(function(){var t=this,e=t.$createElement;return(t._self._c||e)(t.navComponent,{tag:"div"})}),[],!1,null,null,null).exports},mounted:function(){var t=location.hash;location.hash="",location.hash=t},computed:{},methods:{}}),J=(r(180),Object(N.a)(Y,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",[r("navbar"),t._v(" "),r("div",{staticClass:"page-main"},[r("div",{staticClass:"page-content handbook-content single-page container-fluid row flex-xl-nowrap"},[r("sidebar"),t._v(" "),r("div",{staticClass:"bd-content col-sm-7 pl-sm-2 col-12"},[r("div",{staticClass:"post-content content"},[r("nuxt")],1)])],1),t._v(" "),r("link",{attrs:{rel:"stylesheet",href:"//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"}})])],1)}),[],!1,null,null,null).exports);function W(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return Z(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Z(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function Z(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}var tt={_default:Object(_.s)(J)},et={render:function(t,e){var r=t("NuxtLoading",{ref:"loading"}),n=t(this.layout||"nuxt"),o=t("div",{domProps:{id:"__layout"},key:this.layoutName},[n]),c=t("transition",{props:{name:"layout",mode:"out-in"},on:{beforeEnter:function(t){window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")}))}}},[o]);return t("div",{domProps:{id:"__nuxt"}},[r,c])},data:function(){return{isOnline:!0,layout:null,layoutName:"",nbFetching:0}},beforeCreate:function(){l.a.util.defineReactive(this,"nuxt",this.$options.nuxt)},created:function(){this.$root.$options.$nuxt=this,window.$nuxt=this,this.refreshOnlineStatus(),window.addEventListener("online",this.refreshOnlineStatus),window.addEventListener("offline",this.refreshOnlineStatus),this.error=this.nuxt.error,this.context=this.$options.context},mounted:function(){var t=this;return Object(n.a)(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:t.$loading=t.$refs.loading;case 1:case"end":return e.stop()}}),e)})))()},watch:{"nuxt.err":"errorChanged"},computed:{isOffline:function(){return!this.isOnline},isFetching:function(){return this.nbFetching>0},isPreview:function(){return Boolean(this.$options.previewData)}},methods:{refreshOnlineStatus:function(){void 0===window.navigator.onLine?this.isOnline=!0:this.isOnline=window.navigator.onLine},refresh:function(){var t=this;return Object(n.a)(regeneratorRuntime.mark((function e(){var r,n;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if((r=Object(_.h)(t.$route)).length){e.next=3;break}return e.abrupt("return");case 3:return t.$loading.start(),n=r.map((function(e){var p=[];if(e.$options.fetch&&e.$options.fetch.length&&p.push(Object(_.q)(e.$options.fetch,t.context)),e.$fetch)p.push(e.$fetch());else{var r,n=W(Object(_.e)(e.$vnode.componentInstance));try{for(n.s();!(r=n.n()).done;){var component=r.value;p.push(component.$fetch())}}catch(t){n.e(t)}finally{n.f()}}return e.$options.asyncData&&p.push(Object(_.q)(e.$options.asyncData,t.context).then((function(t){for(var r in t)l.a.set(e.$data,r,t[r])}))),Promise.all(p)})),e.prev=5,e.next=8,Promise.all(n);case 8:e.next=15;break;case 10:e.prev=10,e.t0=e.catch(5),t.$loading.fail(e.t0),Object(_.k)(e.t0),t.error(e.t0);case 15:t.$loading.finish();case 16:case"end":return e.stop()}}),e,null,[[5,10]])})))()},errorChanged:function(){if(this.nuxt.err){this.$loading&&(this.$loading.fail&&this.$loading.fail(this.nuxt.err),this.$loading.finish&&this.$loading.finish());var t=(D.options||D).layout;"function"==typeof t&&(t=t(this.context)),this.setLayout(t)}},setLayout:function(t){return t&&tt["_"+t]||(t="default"),this.layoutName=t,this.layout=tt["_"+t],this.layout},loadLayout:function(t){return t&&tt["_"+t]||(t="default"),Promise.resolve(tt["_"+t])}},components:{NuxtLoading:M}};l.a.use(h.a);var nt={};(nt=function(t,e){if((t=t.default||t).commit)throw new Error("[nuxt] ".concat(e," should export a method that returns a Vuex instance."));return"function"!=typeof t&&(t=Object.assign({},t)),function(t,e){if(t.state&&"function"!=typeof t.state){console.warn("'state' should be a method that returns an object in ".concat(e));var r=Object.assign({},t.state);t=Object.assign({},t,{state:function(){return r}})}return t}(t,e)}(r(181),"store/index.js")).modules=nt.modules||{};var at=nt instanceof Function?nt:function(){return new h.a.Store(Object.assign({strict:!1},nt))};var ot=r(138),it=(r(41),r(37),r(71),r(56)),st=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,c,l,h,f;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=e.app,!e.isHMR){t.next=3;break}return t.abrupt("return");case 3:return t.next=5,r.i18n.__onNavigate(e.route);case 5:n=t.sent,o=Object(T.a)(n,3),c=o[0],l=o[1],h=o[2],c&&l&&(f=h?e.route.query:void 0,e.redirect(c,l,f));case 11:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}();it.a.nuxti18n=st;var ct={COMPONENT_OPTIONS_KEY:"nuxtI18n",STRATEGIES:{PREFIX:"prefix",PREFIX_EXCEPT_DEFAULT:"prefix_except_default",PREFIX_AND_DEFAULT:"prefix_and_default",NO_PREFIX:"no_prefix"}},lt=!0,ut=void 0,ht={vueI18n:{fallbackLocale:"en",messages:{en:{inThisPage:"In This Page"},zh:{inThisPage:"本页目录"}}},vueI18nLoader:!1,locales:["en","zh"],defaultLocale:"en",defaultDirection:"ltr",routesNameSeparator:"___",defaultLocaleRouteNameSuffix:"default",strategy:"prefix",lazy:!1,langDir:null,rootRedirect:null,detectBrowserLanguage:{alwaysRedirect:!1,cookieCrossOrigin:!1,cookieDomain:null,cookieKey:"i18n_redirected",cookieSecure:!1,fallbackLocale:"",onlyOnNoPrefix:!1,onlyOnRoot:!0,useCookie:!0},differentDomains:!1,seo:!1,baseUrl:"",vuex:{moduleName:"i18n",syncLocale:!1,syncMessages:!1,syncRouteParams:!0},parsePages:!0,pages:{},skipSettingLocaleOnNavigate:!1,beforeLanguageSwitch:function(){return null},onBeforeLanguageSwitch:function(){},onLanguageSwitched:function(){return null},normalizedLocales:[{code:"en"},{code:"zh"}],localeCodes:["en","zh"]},ft=r(15),pt=(r(97),r(103),r(60),r(122),r(182),r(100)),vt=r.n(pt);function mt(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function gt(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?mt(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):mt(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function bt(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return wt(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return wt(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function wt(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function xt(text){return"[nuxt-i18n] ".concat(text)}function yt(t,e){var r,n=[],o=[],c=bt(t);try{for(c.s();!(r=c.n()).done;){var l=r.value,code=l.code,h=l.iso||code;o.push({code:code,iso:h})}}catch(t){c.e(t)}finally{c.f()}var f,d=bt(e.entries());try{var v=function(){var t=Object(T.a)(f.value,2),r=t[0],c=t[1],l=o.find((function(t){return t.iso.toLowerCase()===c.toLowerCase()}));if(l)return n.push({code:l.code,score:1-r/e.length}),"break"};for(d.s();!(f=d.n()).done;){if("break"===v())break}}catch(t){d.e(t)}finally{d.f()}var m,w=bt(e.entries());try{var x=function(){var t=Object(T.a)(m.value,2),r=t[0],c=t[1].split("-")[0].toLowerCase(),l=o.find((function(t){return t.iso.split("-")[0].toLowerCase()===c}));if(l)return n.push({code:l.code,score:.999-r/e.length}),"break"};for(w.s();!(m=w.n()).done;){if("break"===x())break}}catch(t){w.e(t)}finally{w.f()}return n.length>1&&n.sort((function(t,e){return t.score===e.score?e.code.length-t.code.length:e.score-t.score})),n.length?n[0].code:void 0}function _t(t,e,r,n){var o=n.differentDomains,c=n.normalizedLocales;if("function"==typeof t)return t(e);if(o&&r){var l=Ct(r,e.req,{normalizedLocales:c});if(l)return l}return t}function Ct(t,e,r){var n,o=r.normalizedLocales.find((function(e){return e.code===t}));if(o&&o.domain)return n=window.location.protocol.split(":")[0],"".concat(n,"://").concat(o.domain);console.warn(xt("Could not find domain name for locale ".concat(t)))}function kt(t,e){var r;if(r=window.location.host){var n=t.find((function(t){return t.domain===r}));if(n)return n.code}return""}function Ot(t){return new RegExp("^/(".concat(t.join("|"),")(?:/|$)"),"i")}function $t(t,e){var r=e.routesNameSeparator,n=e.defaultLocaleRouteNameSuffix,o="(".concat(t.join("|"),")"),c="(?:".concat(r).concat(n,")?"),l=new RegExp("".concat(r).concat(o).concat(c,"$"),"i"),h=Ot(t);return function(t){if(t.name){var e=t.name.match(l);if(e&&e.length>1)return e[1]}else if(t.path){var r=t.path.match(h);if(r&&r.length>1)return r[1]}return""}}function jt(t,e){var r,n=e.useCookie,o=e.cookieKey,c=e.localeCodes;if(n&&((r=vt.a.get(o))&&c.includes(r)))return r}function Pt(t,e,r){var n=r.useCookie,o=r.cookieDomain,c=r.cookieKey,l=r.cookieSecure,h=r.cookieCrossOrigin;if(n){var f=new Date,d={expires:new Date(f.setDate(f.getDate()+365)),path:"/",sameSite:h?"none":"lax",secure:h||l};o&&(d.domain=o),vt.a.set(c,t,d)}}function Et(t,e,r){var n={namespaced:!0,state:function(){return gt(gt(gt({},e.syncLocale?{locale:""}:{}),e.syncMessages?{messages:{}}:{}),e.syncRouteParams?{routeParams:{}}:{})},actions:gt(gt(gt({},e.syncLocale?{setLocale:function(t,e){(0,t.commit)("setLocale",e)}}:{}),e.syncMessages?{setMessages:function(t,e){(0,t.commit)("setMessages",e)}}:{}),e.syncRouteParams?{setRouteParams:function(t,e){(0,t.commit)("setRouteParams",e)}}:{}),mutations:gt(gt(gt({},e.syncLocale?{setLocale:function(t,e){t.locale=e}}:{}),e.syncMessages?{setMessages:function(t,e){t.messages=e}}:{}),e.syncRouteParams?{setRouteParams:function(t,e){t.routeParams=e}}:{}),getters:gt({},e.syncRouteParams?{localeRouteParams:function(t){var e=t.routeParams;return function(t){return e&&e[t]||{}}}}:{})};t.registerModule(e.moduleName,n,{preserveState:!!t.state[e.moduleName]})}function St(t){return Rt.apply(this,arguments)}function Rt(){return(Rt=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,c=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=c.length>1&&void 0!==c[1]?c[1]:null,n=c.length>2&&void 0!==c[2]?c[2]:null,!(o=c.length>3?c[3]:void 0)||!e){t.next=10;break}if(null===r||!o.syncLocale){t.next=7;break}return t.next=7,e.dispatch(o.moduleName+"/setLocale",r);case 7:if(null===n||!o.syncMessages){t.next=10;break}return t.next=10,e.dispatch(o.moduleName+"/setMessages",n);case 10:case"end":return t.stop()}}),t)})))).apply(this,arguments)}var Lt=["params"];function At(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function Nt(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?At(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):At(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function Dt(t,e){var r=zt.call(this,t,e);return r?r.route.fullPath:""}function Tt(t,e){var r=zt.call(this,t,e);return r?r.route:void 0}function It(t,e){var r=zt.call(this,t,e);return r?r.location:void 0}function zt(t,e){if(t){var r=this.i18n;if(e=e||r.locale){"string"==typeof t&&(t="/"===t[0]?{path:t}:{name:t});var n=Object.assign({},t);if(n.path&&!n.name){var o=this.router.resolve(n).route,c=this.getRouteBaseName(o);if(c)n={name:Ft(c,e),params:o.params,query:o.query,hash:o.hash};else!(e===ht.defaultLocale&&[ct.STRATEGIES.PREFIX_EXCEPT_DEFAULT,ct.STRATEGIES.PREFIX_AND_DEFAULT].includes(ht.strategy)||ht.strategy===ct.STRATEGIES.NO_PREFIX||r.differentDomains)&&(n.path="/".concat(e).concat(n.path)),n.path=n.path.replace(/\/+$/,"")+(ut?"/":"")||"/"}else{n.name||n.path||(n.name=this.getRouteBaseName()),n.name=Ft(n.name,e);var l=n.params;l&&void 0===l[0]&&l.pathMatch&&(l[0]=l.pathMatch)}var h=this.router.resolve(n);return h.route.name?h:this.router.resolve(t)}}}function Mt(t){var e=this.getRouteBaseName();if(!e)return"";var r=this.i18n,n=this.route,o=this.store,c=n.params,l=Object(ot.a)(n,Lt),h={};ht.vuex&&ht.vuex.syncRouteParams&&o&&(h=o.getters["".concat(ht.vuex.moduleName,"/localeRouteParams")](t));var f=Object.assign({},l,{name:e,params:Nt(Nt(Nt({},c),h),{},{0:c.pathMatch})}),path=this.localePath(f,t);if(r.differentDomains){var d={differentDomains:r.differentDomains,normalizedLocales:ht.normalizedLocales},v=Ct(t,this.req,d);v&&(path=v+path)}return path}function Bt(t){var e=void 0!==t?t:this.route;if(e&&e.name)return e.name.split(ht.routesNameSeparator)[0]}function Ft(t,e){var r=t+(ht.strategy===ct.STRATEGIES.NO_PREFIX?"":ht.routesNameSeparator+e);return e===ht.defaultLocale&&ht.strategy===ct.STRATEGIES.PREFIX_AND_DEFAULT&&(r+=ht.routesNameSeparator+ht.defaultLocaleRouteNameSuffix),r}var Ut=function(t){return function(){var e={getRouteBaseName:this.getRouteBaseName,i18n:this.$i18n,localePath:this.localePath,localeRoute:this.localeRoute,localeLocation:this.localeLocation,req:null,route:this.$route,router:this.$router,store:this.$store};return t.call.apply(t,[e].concat(Array.prototype.slice.call(arguments)))}},qt=function(t,e){return function(){var r=t.app,n=(t.req,t.route),o=t.store,c={getRouteBaseName:r.getRouteBaseName,i18n:r.i18n,localePath:r.localePath,localeLocation:r.localeLocation,localeRoute:r.localeRoute,req:null,route:n,router:r.router,store:o};return e.call.apply(e,[c].concat(Array.prototype.slice.call(arguments)))}},Gt={install:function(t){t.mixin({methods:{localePath:Ut(Dt),localeRoute:Ut(Tt),localeLocation:Ut(It),switchLocalePath:Ut(Mt),getRouteBaseName:Ut(Bt)}})}},Xt=function(t){l.a.use(Gt);var e=t.app,r=t.store;e.localePath=t.localePath=qt(t,Dt),e.localeRoute=t.localeRoute=qt(t,Tt),e.localeLocation=t.localeLocation=qt(t,It),e.switchLocalePath=t.switchLocalePath=qt(t,Mt),e.getRouteBaseName=t.getRouteBaseName=qt(t,Bt),r&&(r.localePath=e.localePath,r.localeRoute=e.localeRoute,r.localeLocation=e.localeLocation,r.switchLocalePath=e.switchLocalePath,r.getRouteBaseName=e.getRouteBaseName)},Kt=r(101),Vt=r(137);r(183);function Ht(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function Qt(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?Ht(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):Ht(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function Yt(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return Jt(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Jt(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function Jt(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function Wt(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.addDirAttribute,r=void 0===e||e,n=t.addSeoAttributes,o=void 0!==n&&n;if(!this.$i18n)return{};var c={htmlAttrs:{},link:[],meta:[]},l=this.$i18n.localeProperties,h=l.iso,d=l.dir||ht.defaultDirection;if(r&&(c.htmlAttrs.dir=d),o&&(f.a.hasMetaInfo?f.a.hasMetaInfo(this):this._hasMetaInfo)&&this.$i18n.locale&&this.$i18n.locales&&!1!==this.$options[ct.COMPONENT_OPTIONS_KEY]&&(!this.$options[ct.COMPONENT_OPTIONS_KEY]||!1!==this.$options[ct.COMPONENT_OPTIONS_KEY].seo)){h&&(c.htmlAttrs.lang=h);var v=this.$i18n.locales;m.bind(this)(v,this.$i18n.__baseUrl,c.link),w.bind(this)(this.$i18n.__baseUrl,c.link),x.bind(this)(l,h,c.meta),y.bind(this)(v,h,c.meta)}function m(t,e,link){if(ht.strategy!==ct.STRATEGIES.NO_PREFIX){var r,n=new Map,o=Yt(t);try{for(o.s();!(r=o.n()).done;){var c=r.value,l=c.iso;if(l){var h=l.split("-"),f=Object(T.a)(h,2),d=f[0],v=f[1];d&&v&&(c.isCatchallLocale||!n.has(d))&&n.set(d,c),n.set(l,c)}else console.warn(xt("Locale ISO code is required to generate alternate link"))}}catch(t){o.e(t)}finally{o.f()}var m,w=Yt(n.entries());try{for(w.s();!(m=w.n()).done;){var x=Object(T.a)(m.value,2),y=x[0],_=x[1],k=this.switchLocalePath(_.code);k&&link.push({hid:"i18n-alt-".concat(y),rel:"alternate",href:C(k,e),hreflang:y})}}catch(t){w.e(t)}finally{w.f()}if(ht.defaultLocale){var O=this.switchLocalePath(ht.defaultLocale);O&&link.push({hid:"i18n-xd",rel:"alternate",href:C(O,e),hreflang:"x-default"})}}}function w(t,link){var e=this.localeRoute(Qt(Qt({},this.$route),{},{name:this.getRouteBaseName()})),r=e?e.path:null;r&&link.push({hid:"i18n-can",rel:"canonical",href:C(r,t)})}function x(t,e,meta){t&&e&&meta.push({hid:"i18n-og",property:"og:locale",content:_(e)})}function y(t,e,meta){var r=t.filter((function(t){var r=t.iso;return r&&r!==e}));if(r.length){var n=r.map((function(t){return{hid:"i18n-og-alt-".concat(t.iso),property:"og:locale:alternate",content:_(t.iso)}}));meta.push.apply(meta,Object(Vt.a)(n))}}function _(t){return(t||"").replace(/-/g,"_")}function C(t,e){return t.match(/^https?:\/\//)?t:e+t}return c}function Zt(){return Wt.call(this,{addDirAttribute:!1,addSeoAttributes:!0})}function te(t,e){return ee.apply(this,arguments)}function ee(){return(ee=Object(n.a)(regeneratorRuntime.mark((function t(e,r){var n,o,c;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=e.app,(o=n.i18n).loadedLanguages||(o.loadedLanguages=[]),o.loadedLanguages.includes(r)||((c=ht.normalizedLocales.find((function(t){return t.code===r})))?c.file||console.warn(xt("Could not find lang file for locale ".concat(r))):console.warn(xt('Attempted to load messages for non-existant locale code "'.concat(r,'"'))));case 4:case"end":return t.stop()}}),t)})))).apply(this,arguments)}var re=r(46);function ne(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return ae(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return ae(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function ae(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}l.a.use(Kt.a);var oe=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,o,c,h,f,d,v,m,w,x,_,C,k,O,$,j,P,E,S,R,L,A,N,D,I,z,M,B,F,U,G,X,K,V,H,Q,Y,J;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:r=e.app,o=e.route,c=e.store,h=e.req,e.res,f=e.redirect,ht.vuex&&c&&Et(c,ht.vuex,ht.localeCodes),d=ht.lazy,d&&(!0===d||!0!==d.skipNuxtState),t.next=9;break;case 7:v=t.sent.default,e.beforeNuxtRender((function(t){var e=t.nuxtState,n={},o=r.i18n,c=o.fallbackLocale,l=o.locale;if(l&&l!==c){var h=r.i18n._getMessages()[l];if(h)try{v(h),n[l]=h}catch(t){}}e.__i18n={langs:n}}));case 9:if(m=ht.detectBrowserLanguage,w=m.alwaysRedirect,x=m.fallbackLocale,_=m.onlyOnNoPrefix,C=m.onlyOnRoot,k=m.useCookie,O=m.cookieKey,$=m.cookieDomain,j=m.cookieSecure,P=m.cookieCrossOrigin,E=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n){var o,l,h,d,v,m,w,x,y,_=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(o=_.length>1&&void 0!==_[1]?_[1]:{},l=o.initialSetup,h=void 0!==l&&l,n){t.next=3;break}return t.abrupt("return");case 3:if(h||!r.i18n.differentDomains){t.next=5;break}return t.abrupt("return");case 5:if(d=r.i18n.locale,n!==d){t.next=8;break}return t.abrupt("return");case 8:if(!(v=r.i18n.onBeforeLanguageSwitch(d,n,h,e))||!r.i18n.localeCodes.includes(v)){t.next=13;break}if(v!==d){t.next=12;break}return t.abrupt("return");case 12:n=v;case 13:if(h||r.i18n.beforeLanguageSwitch(d,n),k&&r.i18n.setLocaleCookie(n),!ht.langDir){t.next=29;break}if(m=r.i18n.fallbackLocale,!ht.lazy){t.next=27;break}if(!m){t.next=23;break}return w=[],Array.isArray(m)?w=m.map((function(t){return te(e,t)})):"object"===Object(ft.a)(m)?(m[n]&&(w=w.concat(m[n].map((function(t){return te(e,t)})))),m.default&&(w=w.concat(m.default.map((function(t){return te(e,t)}))))):n!==m&&w.push(te(e,m)),t.next=23,Promise.all(w);case 23:return t.next=25,te(e,n);case 25:t.next=29;break;case 27:return t.next=29,Promise.all(ht.localeCodes.map((function(t){return te(e,t)})));case 29:if(r.i18n.locale=n,r.i18n.localeProperties=Object(re.a)(ht.locales.find((function(t){return t.code===n}))||{code:n}),!ht.vuex){t.next=34;break}return t.next=34,St(c,n,r.i18n.getLocaleMessage(n),ht.vuex);case 34:x=e.route,y=R(x,n),h?r.i18n.__redirect=y:(r.i18n.onLanguageSwitched(d,n),y&&f(y));case 37:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),S=$t(ht.localeCodes,{routesNameSeparator:ht.routesNameSeparator,defaultLocaleRouteNameSuffix:ht.defaultLocaleRouteNameSuffix}),R=function(t,e){if(!e||r.i18n.differentDomains||ht.strategy===ct.STRATEGIES.NO_PREFIX)return"";if(S(t)===e&&(!C&&!_||e!==ht.defaultLocale||ht.strategy!==ct.STRATEGIES.PREFIX_AND_DEFAULT))return"";var n=r.switchLocalePath(e);return n||(n=r.localePath(t.fullPath,e)),!n||n===t.fullPath||n.startsWith("//")?"":n},L=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n){var o,path,c,l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("/"!==n.path||!ht.rootRedirect){t.next=5;break}return o=302,path=ht.rootRedirect,"string"!=typeof ht.rootRedirect&&(o=ht.rootRedirect.statusCode,path=ht.rootRedirect.path),t.abrupt("return",[o,"/".concat(path),!0]);case 5:if(!(c=r.i18n.__redirect)){t.next=9;break}return r.i18n.__redirect=null,t.abrupt("return",[302,c]);case 9:if(l={differentDomains:ht.differentDomains,normalizedLocales:ht.normalizedLocales},r.i18n.__baseUrl=_t(ht.baseUrl,e,r.i18n.locale,l),h=ht.detectBrowserLanguage&&I(n)||S(n)||r.i18n.locale||r.i18n.defaultLocale||"",!ht.skipSettingLocaleOnNavigate){t.next=17;break}r.i18n.__pendingLocale=h,r.i18n.__pendingLocalePromise=new Promise((function(t){r.i18n.__resolvePendingLocalePromise=t})),t.next=19;break;case 17:return t.next=19,r.i18n.setLocale(h);case 19:return t.abrupt("return",[null,null]);case 20:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),A=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r.i18n.__pendingLocale){t.next=2;break}return t.abrupt("return");case 2:return t.next=4,r.i18n.setLocale(r.i18n.__pendingLocale);case 4:r.i18n.__resolvePendingLocalePromise(""),r.i18n.__pendingLocale=null;case 6:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}(),N=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!r.i18n.__pendingLocale){t.next=3;break}return t.next=3,r.i18n.__pendingLocalePromise;case 3:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}(),D=function(){return"undefined"!=typeof navigator&&navigator.languages?yt(ht.normalizedLocales,navigator.languages):h&&void 0!==h.headers["accept-language"]?yt(ht.normalizedLocales,h.headers["accept-language"].split(",").map((function(t){return t.split(";")[0]}))):void 0},I=function(t){if(ht.strategy!==ct.STRATEGIES.NO_PREFIX)if(C){if("/"!==t.path)return""}else if(_&&!w&&t.path.match(Ot(ht.localeCodes)))return"";var e;k&&(e=r.i18n.getLocaleCookie())||(e=D());var n=e||x;return!n||k&&!w&&r.i18n.getLocaleCookie()||n===r.i18n.locale?"":n},z=function(t){t.locales=Object(re.a)(ht.locales),t.localeCodes=Object(re.a)(ht.localeCodes),t.localeProperties=Object(re.a)(ht.normalizedLocales.find((function(e){return e.code===t.locale}))||{code:t.locale}),t.defaultLocale=ht.defaultLocale,t.differentDomains=ht.differentDomains,t.beforeLanguageSwitch=ht.beforeLanguageSwitch,t.onBeforeLanguageSwitch=ht.onBeforeLanguageSwitch,t.onLanguageSwitched=ht.onLanguageSwitched,t.setLocaleCookie=function(t){return Pt(t,0,{useCookie:k,cookieDomain:$,cookieKey:O,cookieSecure:j,cookieCrossOrigin:P})},t.getLocaleCookie=function(){return jt(0,{useCookie:k,cookieKey:O,localeCodes:ht.localeCodes})},t.setLocale=function(t){return E(t)},t.getBrowserLocale=function(){return D()},t.finalizePendingLocaleChange=A,t.waitForPendingLocaleChange=N,t.__baseUrl=r.i18n.__baseUrl,t.__pendingLocale=r.i18n.__pendingLocale,t.__pendingLocalePromise=r.i18n.__pendingLocalePromise,t.__resolvePendingLocalePromise=r.i18n.__resolvePendingLocalePromise},"function"!=typeof ht.vueI18n){t.next=25;break}return t.next=22,ht.vueI18n(e);case 22:t.t0=t.sent,t.next=26;break;case 25:t.t0=Object(re.a)(ht.vueI18n);case 26:if((M=t.t0).componentInstanceCreatedListener=z,r.i18n=e.i18n=new Kt.a(M),r.i18n.locale="",r.i18n.fallbackLocale=M.fallbackLocale||"",z(r.i18n),B={differentDomains:ht.differentDomains,normalizedLocales:ht.normalizedLocales},r.i18n.__baseUrl=_t(ht.baseUrl,e,"",B),r.i18n.__onNavigate=L,l.a.prototype.$nuxtI18nSeo=Zt,l.a.prototype.$nuxtI18nHead=Wt,!c){t.next=58;break}if(c.$i18n=r.i18n,!c.state.localeDomains){t.next=58;break}F=ne(r.i18n.locales),t.prev=41,F.s();case 43:if((U=F.n()).done){t.next=50;break}if("string"!=typeof(G=U.value)){t.next=47;break}return t.abrupt("continue",48);case 47:G.domain=c.state.localeDomains[G.code];case 48:t.next=43;break;case 50:t.next=55;break;case 52:t.prev=52,t.t1=t.catch(41),F.e(t.t1);case 55:return t.prev=55,F.f(),t.finish(55);case 58:return(X=ht.detectBrowserLanguage?I(o):"")||((K=ht.vuex)&&K.syncLocale&&c&&""!==c.state[K.moduleName].locale?X=c.state[K.moduleName].locale:r.i18n.differentDomains?(V=kt(ht.normalizedLocales),X=V):ht.strategy!==ct.STRATEGIES.NO_PREFIX?(H=S(o),X=H):k&&(X=r.i18n.getLocaleCookie())),X||(X=r.i18n.defaultLocale||""),t.next=63,E(X,{initialSetup:!0});case 63:if(!lt){t.next=71;break}return t.next=66,L(e.route);case 66:Q=t.sent,Y=Object(T.a)(Q,2),Y[0],(J=Y[1])&&location.assign(Object(y.b)(e.base,J));case 71:case"end":return t.stop()}}),t,null,[[41,52,55,58]])})));return function(e){return t.apply(this,arguments)}}();function ie(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function se(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ie(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):ie(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}l.a.component(v.a.name,v.a),l.a.component(w.a.name,se(se({},w.a),{},{render:function(t,e){return w.a._warned||(w.a._warned=!0,console.warn("<no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead")),w.a.render(t,e)}})),l.a.component(S.name,S),l.a.component("NChild",S),l.a.component(I.name,I),Object.defineProperty(l.a.prototype,"$nuxt",{get:function(){var t=this.$root.$options.$nuxt;return t||"undefined"==typeof window?t:window.$nuxt},configurable:!0}),l.a.use(f.a,{keyName:"head",attribute:"data-n-head",ssrAttribute:"data-n-head-ssr",tagIDKeyName:"hid"});var ce={name:"page",mode:"out-in",appear:!1,appearClass:"appear",appearActiveClass:"appear-active",appearToClass:"appear-to"},le=h.a.Store.prototype.registerModule;function ue(path,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=Array.isArray(path)?!!path.reduce((function(t,path){return t&&t[path]}),this.state):path in this.state;return le.call(this,path,t,se({preserveState:r},e))}function he(t){return fe.apply(this,arguments)}function fe(){return(fe=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,o,c,h,f,d,path,v,m=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return v=function(t,e){if(!t)throw new Error("inject(key, value) has no key provided");if(void 0===e)throw new Error("inject('".concat(t,"', value) has no value provided"));h[t="$"+t]=e,h.context[t]||(h.context[t]=e),c[t]=h[t];var r="__nuxt_"+t+"_installed__";l.a[r]||(l.a[r]=!0,l.a.use((function(){Object.prototype.hasOwnProperty.call(l.a.prototype,t)||Object.defineProperty(l.a.prototype,t,{get:function(){return this.$root.$options[t]}})})))},r=m.length>1&&void 0!==m[1]?m[1]:{},t.next=4,E(0,r);case 4:return o=t.sent,(c=at(e)).$router=o,c.registerModule=ue,h=se({head:{title:"Handbook - Apache ECharts",meta:[{charset:"utf-8"},{name:"viewport",content:"width=device-width, initial-scale=1"},{hid:"description",name:"description",content:"Apache ECharts Handbook"}],link:[{rel:"icon",type:"image/x-icon",href:"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"}],style:[],script:[]},store:c,router:o,nuxt:{defaultTransition:ce,transitions:[ce],setTransitions:function(t){return Array.isArray(t)||(t=[t]),t=t.map((function(t){return t=t?"string"==typeof t?Object.assign({},ce,{name:t}):Object.assign({},ce,t):ce})),this.$options.nuxt.transitions=t,t},err:null,dateErr:null,error:function(t){t=t||null,h.context._errored=Boolean(t),t=t?Object(_.p)(t):null;var r=h.nuxt;return this&&(r=this.nuxt||this.$options.nuxt),r.dateErr=Date.now(),r.err=t,e&&(e.nuxt.error=t),t}}},et),c.app=h,f=e?e.next:function(t){return h.router.push(t)},e?d=o.resolve(e.url).route:(path=Object(_.f)(o.options.base,o.options.mode),d=o.resolve(path).route),t.next=14,Object(_.t)(h,{store:c,route:d,next:f,error:h.nuxt.error.bind(h),payload:e?e.payload:void 0,req:e?e.req:void 0,res:e?e.res:void 0,beforeRenderFns:e?e.beforeRenderFns:void 0,ssrContext:e});case 14:return v("config",r),window.__NUXT__&&window.__NUXT__.state&&c.replaceState(window.__NUXT__.state),h.context.enablePreview=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};h.previewData=Object.assign({},t),v("preview",t)},t.next=20,Xt(h.context);case 20:if("function"!=typeof oe){t.next=23;break}return t.next=23,oe(h.context,v);case 23:return h.context.enablePreview=function(){console.warn("You cannot call enablePreview() outside a plugin.")},t.next=26,new Promise((function(t,e){o.replace(h.context.route.fullPath,t,(function(r){if(!r._isRouter)return e(r);if(2!==r.type)return t();var c=o.afterEach(function(){var e=Object(n.a)(regeneratorRuntime.mark((function e(r,n){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=3,Object(_.j)(r);case 3:h.context.route=e.sent,h.context.params=r.params||{},h.context.query=r.query||{},c(),t();case 8:case"end":return e.stop()}}),e)})));return function(t,r){return e.apply(this,arguments)}}())}))}));case 26:return t.abrupt("return",{store:c,app:h,router:o});case 27:case"end":return t.stop()}}),t)})))).apply(this,arguments)}},56:function(t,e,r){"use strict";e.a={}},73:function(t,e,r){"use strict";r(41),r(37),r(22),r(25),r(16),r(23),r(20),r(17),r(34),r(27),r(28);var n=r(0),o=r.n(n);function c(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return l(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return l(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,h=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){h=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(h)throw o}}}}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}var h=window.requestIdleCallback||function(t){var e=Date.now();return setTimeout((function(){t({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-e))}})}),1)},f=window.cancelIdleCallback||function(t){clearTimeout(t)},d=window.IntersectionObserver&&new window.IntersectionObserver((function(t){t.forEach((function(t){var e=t.intersectionRatio,link=t.target;e<=0||!link.__prefetch||link.__prefetch()}))}));e.a={name:"NuxtLink",extends:o.a.component("RouterLink"),props:{prefetch:{type:Boolean,default:!0},noPrefetch:{type:Boolean,default:!1}},mounted:function(){this.prefetch&&!this.noPrefetch&&(this.handleId=h(this.observe,{timeout:2e3}))},beforeDestroy:function(){f(this.handleId),this.__observed&&(d.unobserve(this.$el),delete this.$el.__prefetch)},methods:{observe:function(){d&&this.shouldPrefetch()&&(this.$el.__prefetch=this.prefetchLink.bind(this),d.observe(this.$el),this.__observed=!0)},shouldPrefetch:function(){return this.getPrefetchComponents().length>0},canPrefetch:function(){var t=navigator.connection;return!(this.$nuxt.isOffline||t&&((t.effectiveType||"").includes("2g")||t.saveData))},getPrefetchComponents:function(){return this.$router.resolve(this.to,this.$route,this.append).resolved.matched.map((function(t){return t.components.default})).filter((function(t){return"function"==typeof t&&!t.options&&!t.__prefetched}))},prefetchLink:function(){if(this.canPrefetch()){d.unobserve(this.$el);var t,e=c(this.getPrefetchComponents());try{for(e.s();!(t=e.n()).done;){var r=t.value,n=r();n instanceof Promise&&n.catch((function(){})),r.__prefetched=!0}}catch(t){e.e(t)}finally{e.f()}}}}}}},[[141,4,1,5]]]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js b/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js
new file mode 100644
index 0000000..3bf4695
--- /dev/null
+++ b/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{192:function(t,e,n){t.exports={}},199:function(t,e,n){t.exports={}},200:function(t,e,n){t.exports={}},201:function(t,e,n){t.exports={}},210:function(t,e,n){t.exports={}},213:function(t,e,n){"use strict";n(192)},230:function(t,e,n){"use strict";n(199)},231:function(t,e,n){"use strict";n(200)},239:function(t,e,n){"use strict";n(201)},299:function(t,e,n){"use strict";n(210)},301:function(t,e,n){var map={"./en/basics/download.md":[302,8],"./en/basics/help.md":[303,9],"./en/basics/import.md":[304,10],"./en/basics/inspiration.md":[305,11],"./en/basics/release-note/5-2-0.md":[306,12],"./en/basics/release-note/v5-feature.md":[307,13],"./en/basics/release-note/v5-upgrade-guide.md":[308,14],"./en/best-practices/aria.md":[309,15],"./en/best-practices/canvas-vs-svg.md":[310,16],"./en/best-practices/design/color-enhance.md":[311,17],"./en/best-practices/mobile.md":[312,18],"./en/best-practices/specification/bar/basic-bar.md":[313,19],"./en/best-practices/specification/bar/bi-directional-bar.md":[314,20],"./en/best-practices/specification/bar/grouped-bar.md":[315,21],"./en/best-practices/specification/bar/stacked-bar.md":[316,22],"./en/best-practices/specification/funnel.md":[317,23],"./en/best-practices/specification/gauge.md":[318,24],"./en/best-practices/specification/line/area.md":[319,25],"./en/best-practices/specification/line/basic-line.md":[320,26],"./en/best-practices/specification/line/stacked-area.md":[321,27],"./en/best-practices/specification/pie/basic-pie.md":[322,28],"./en/best-practices/specification/radar.md":[323,29],"./en/best-practices/specification/scatter/bubble.md":[324,30],"./en/best-practices/specification/scatter/scatter.md":[325,31],"./en/concepts/axis.md":[326,32],"./en/concepts/chart-size.md":[327,33],"./en/concepts/coordinate.md":[328,34],"./en/concepts/data-transform.md":[329,35],"./en/concepts/dataset.md":[330,36],"./en/concepts/event.md":[331,37],"./en/concepts/legend.md":[332,38],"./en/concepts/options.md":[333,39],"./en/concepts/series.md":[334,40],"./en/concepts/style.md":[335,41],"./en/concepts/tooltip.md":[336,42],"./en/concepts/visual-map.md":[337,43],"./en/get-started.md":[338,44],"./en/how-to/chart-types/bar/bar-race.md":[339,45],"./en/how-to/chart-types/bar/basic-bar.md":[340,46],"./en/how-to/chart-types/bar/polar-bar.md":[341,47],"./en/how-to/chart-types/bar/stacked-bar.md":[342,48],"./en/how-to/chart-types/bar/waterfall.md":[343,49],"./en/how-to/chart-types/line/area-line.md":[344,50],"./en/how-to/chart-types/line/basic-line.md":[345,51],"./en/how-to/chart-types/line/smooth-line.md":[346,52],"./en/how-to/chart-types/line/stacked-line.md":[347,53],"./en/how-to/chart-types/line/step-line.md":[348,54],"./en/how-to/chart-types/pie/basic-pie.md":[349,55],"./en/how-to/chart-types/pie/doughnut.md":[350,56],"./en/how-to/chart-types/pie/rose.md":[351,57],"./en/how-to/chart-types/scatter/basic-scatter.md":[352,58],"./en/how-to/cross-platform/server.md":[353,59],"./en/how-to/data/drilldown.md":[354,60],"./en/how-to/data/dynamic-data.md":[355,61],"./en/how-to/interaction/drag.md":[356,62],"./en/how-to/label/rich-text.md":[357,63],"./en/meta/edit-guide.md":[358,64],"./zh/basics/download.md":[359,65],"./zh/basics/help.md":[360,66],"./zh/basics/import.md":[361,67],"./zh/basics/inspiration.md":[362,68],"./zh/basics/release-note/5-2-0.md":[363,69],"./zh/basics/release-note/v5-feature.md":[364,70],"./zh/basics/release-note/v5-upgrade-guide.md":[365,71],"./zh/basics/resource.md":[366,72],"./zh/best-practices/aria.md":[367,73],"./zh/best-practices/canvas-vs-svg.md":[368,74],"./zh/best-practices/design/color-enhance.md":[369,75],"./zh/best-practices/mobile.md":[370,76],"./zh/best-practices/specification/bar/basic-bar.md":[371,77],"./zh/best-practices/specification/bar/bi-directional-bar.md":[372,78],"./zh/best-practices/specification/bar/grouped-bar.md":[373,79],"./zh/best-practices/specification/bar/stacked-bar.md":[374,80],"./zh/best-practices/specification/funnel.md":[375,81],"./zh/best-practices/specification/gauge.md":[376,82],"./zh/best-practices/specification/line/area.md":[377,83],"./zh/best-practices/specification/line/basic-line.md":[378,84],"./zh/best-practices/specification/line/stacked-area.md":[379,85],"./zh/best-practices/specification/pie/basic-pie.md":[380,86],"./zh/best-practices/specification/radar.md":[381,87],"./zh/best-practices/specification/scatter/bubble.md":[382,88],"./zh/best-practices/specification/scatter/scatter.md":[383,89],"./zh/concepts/axis.md":[384,90],"./zh/concepts/chart-size.md":[385,91],"./zh/concepts/coordinate.md":[386,92],"./zh/concepts/data-transform.md":[387,93],"./zh/concepts/dataset.md":[388,94],"./zh/concepts/event.md":[389,95],"./zh/concepts/legend.md":[390,96],"./zh/concepts/options.md":[391,97],"./zh/concepts/series.md":[392,98],"./zh/concepts/style.md":[393,99],"./zh/concepts/tooltip.md":[394,100],"./zh/concepts/visual-map.md":[395,101],"./zh/get-started.md":[396,102],"./zh/how-to/chart-types/bar/bar-race.md":[397,103],"./zh/how-to/chart-types/bar/basic-bar.md":[398,104],"./zh/how-to/chart-types/bar/polar-bar.md":[399,105],"./zh/how-to/chart-types/bar/stacked-bar.md":[400,106],"./zh/how-to/chart-types/bar/waterfall.md":[401,107],"./zh/how-to/chart-types/line/area-line.md":[402,108],"./zh/how-to/chart-types/line/basic-line.md":[403,109],"./zh/how-to/chart-types/line/smooth-line.md":[404,110],"./zh/how-to/chart-types/line/stacked-line.md":[405,111],"./zh/how-to/chart-types/line/step-line.md":[406,112],"./zh/how-to/chart-types/pie/basic-pie.md":[407,113],"./zh/how-to/chart-types/pie/doughnut.md":[408,114],"./zh/how-to/chart-types/pie/rose.md":[409,115],"./zh/how-to/chart-types/scatter/basic-scatter.md":[410,116],"./zh/how-to/connect.md":[411,117],"./zh/how-to/cross-platform/baidu-app.md":[412,118],"./zh/how-to/cross-platform/server.md":[413,119],"./zh/how-to/cross-platform/wechat-app.md":[414,120],"./zh/how-to/data/drilldown.md":[415,121],"./zh/how-to/data/dynamic-data.md":[416,122],"./zh/how-to/interaction/drag.md":[417,123],"./zh/how-to/label/rich-text.md":[418,124],"./zh/how-to/mobile.md":[419,125],"./zh/meta/edit-guide.md":[420,126],"./zh/meta/writing.md":[421,127]};function c(t){if(!n.o(map,t))return Promise.resolve().then((function(){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}));var e=map[t],c=e[0];return n.e(e[1]).then((function(){return n(c)}))}c.keys=function(){return Object.keys(map)},c.id=301,t.exports=c},423:function(t,e,n){"use strict";n.r(e);var c=n(2),o=(n(21),n(36),n(103),n(0)),r=n.n(o),l=n(187),d=(n(211),n(212)),h=(n(140),n(102)),m=Object(l.c)({props:{width:{type:[String,Number],default:"100%"},height:{type:[String,Number],default:"350"},src:String},setup:function(t,e){var n=Object(l.a)((function(){return h.a.exampleViewPath.replace("${lang}",e.root.$i18n.locale)+t.src})),c=Object(l.f)("");return{finalSrc:c,visibilityChanged:function(t){t&&(c.value=n.value)}}}}),v=n(7),f=Object(v.a)(m,(function(){var t=this,e=t.$createElement;return(t._self._c||e)("iframe",{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:t.visibilityChanged,expression:"visibilityChanged"}],attrs:{width:t.width||200,height:t.height||200,src:t.finalSrc}})}),[],!1,null,null,null).exports,z=(n(37),r.a.extend({props:{type:{type:String,default:"info",validator:function(t){return["info","success","warning","danger"].includes(t)}}}})),w=(n(213),Object(v.a)(z,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("blockquote",{class:"md-alert md-alert-"+t.type},[n("p",[t._t("default")],2)])}),[],!1,null,"a47f983e",null).exports),y=(n(16),n(214)),O=(n(215),n(216)),k=(n(193),n(194),n(195),n(27),n(28),n(22),n(60),{});var C=n(217),_=n(218),H=n.n(_),x=n(188),j=n(15);function S(){var t={},e={},n=1;function c(t,c){var o,time,l=(o=t,time=c,h.getZr().animation.animate({val:0},{loop:!1}).when(time,{val:1}).during((function(){h.getZr().wakeUp()})).done((function(){r.a.nextTick(o)})).start());return e[n]=l,n++}function o(t,c){var o,time,l=(o=t,time=c,h.getZr().animation.animate({val:0},{loop:!0}).when(time,{val:1}).during((function(t,e){h.getZr().wakeUp(),1===e&&r.a.nextTick(o)})).start());return e[n]=l,n++}function l(t){var n=e[t];n&&(h.getZr().animation.removeAnimator(n),delete e[t])}function d(t){l(t)}var h,m=[];return{resize:function(){h&&h.resize()},dispose:function(){h&&(h.dispose(),h=null)},getDataURL:function(){return h.getDataURL({pixelRatio:2,excludeComponents:["toolbox"]})},getOption:function(){return h.getOption()},getInstance:function(){return h},pause:function(){h&&h.getZr().animation.pause()},resume:function(){h&&h.getZr().animation.resume()},run:function(n,code,r){var v,f,z;r=r||{},h||(h=echarts.init(n,r.darkMode?"dark":"",{renderer:r.renderer,useDirtyRect:r.useDirtyRect}),f=(v=h).on,z=v.setOption,v.on=function(t){var e=f.apply(v,arguments);return m.push(t),e},v.setOption=function(){return z.apply(this,arguments)}),function(){for(var t in e)e.hasOwnProperty(t)&&l(t)}(),function(t){m.forEach((function(e){t&&t.off(e)})),m.length=0}(h),t.config=null;var option=new Function("myChart","app","setTimeout","setInterval","clearTimeout","clearInterval","var option;\n"+code+"\nreturn option;")(h,t,c,o,l,d);if(option&&"object"===Object(j.a)(option)){var w=+new Date;h.setOption(option,!0),+new Date-w}}}}var P=n(229),E=n.n(P),$=Object(l.c)({components:{},props:{source:{type:String}},setup:function(t){var e=Object(l.f)(null),n=Object(l.f)(!1);return Object(l.d)((function(){new E.a(e.value,{text:function(e){return t.source}}).on("success",(function(t){t.clearSelection(),n.value=!0,window.setTimeout((function(){n.value=!1}),2e3)}))})),{clipboardChecked:n,copyButton:e}}}),W=(n(230),Object(v.a)($,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"copyButton",staticClass:"clipboard"},[t.clipboardChecked?n("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"}})]):n("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("path",{attrs:{"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"}})])])])}),[],!1,null,"479657ca",null).exports);function R(){return"undefined"==typeof echarts?(t=["https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"],Promise.all(t.map((function(t){return"string"==typeof t?{url:t,type:t.match(/\.css$/)?"css":"js"}:t})).map((function(t){if(k[t.url])return k[t.url];var e=new Promise((function(e,n){if("js"===t.type){var script=document.createElement("script");script.src=t.url,script.async=!1,script.onload=function(){e(null)},script.onerror=function(){n()},document.body.appendChild(script)}else if("css"===t.type){var link=document.createElement("link");link.rel="stylesheet",link.href=t.url,link.onload=function(){e(null)},link.onerror=function(){n()},document.body.appendChild(link)}}));return k[t.url]=e,e})))).then((function(){})):Promise.resolve();var t}var M=Object(l.c)({components:{PrismEditor:y.a,CodeBlockCopyClipboard:W},props:{lang:{type:String,default:"js"},code:{type:String},layout:{type:String,default:"tb",validator:function(t){return["lr","tb","rl","bt"].includes(t)}}},setup:function(t,e){var n,c=Object(l.f)(x.a(t.code)),o=Object(l.f)(null);function r(){n&&n.resize()}var d=H()((function(){R().then((function(){n||(Object(C.a)(Object(l.g)(o),r),n=S());try{Object(l.g)(o)&&n.run(Object(l.g)(o),Object(l.g)(c))}catch(t){console.error(t)}}))}),500,{trailing:!0});return Object(l.h)(c,(function(){d()})),Object(l.e)((function(){Object(C.b)(Object(l.g)(o),r)})),{innerCode:c,previewContainer:o,highlighter:function(code){return Object(O.highlight)(code,O.languages[t.lang]||O.languages.js)},visibilityChanged:function(t){t?n?n.resume():d():n&&n.pause()}}}}),N=(n(231),Object(v.a)(M,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.innerCode?n("div",{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:t.visibilityChanged,expression:"visibilityChanged"}],class:"md-live layout-"+t.layout},[n("div",{staticClass:"md-live-editor"},[n("div",{staticClass:"md-live-editor-container"},[n("prism-editor",{attrs:{highlight:t.highlighter},model:{value:t.innerCode,callback:function(e){t.innerCode=e},expression:"innerCode"}})],1),t._v(" "),n("div",{staticClass:"md-live-tag"},[t._v("live")]),t._v(" "),n("code-block-copy-clipboard",{attrs:{source:t.innerCode}})],1),t._v(" "),n("div",{ref:"previewContainer",staticClass:"md-live-preview"})]):t._e()}),[],!1,null,null,null).exports),D=n(232),T=n.n(D),L=(n(233),n(234),n(235),n(236),n(237),n(238),/^(diff)-([\w-]+)/i);var B=Object(l.c)({components:{CodeBlockCopyClipboard:W},props:{lang:{type:String,default:"js"},code:{type:String},lineHighlights:String,fileName:String},setup:function(t,e){var n=Object(l.f)(x.a(t.code)),c=Object(l.a)((function(){return function(t,e){var n="",c=(t=t||"").match(L);c&&(t=c[2],n=T.a.languages.diff),t="vue"===t?"html":t,n||(n=T.a.languages[t]);var o=c?"diff-".concat(t):t,code=n?T.a.highlight(e,n,o):e;return t&&n||(t="text",code=code.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")),{lang:t,code:code}}(t.lang,n.value)}));return{rawCode:n,highlightResult:c}}}),U=(n(239),Object(v.a)(B,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"md-code-block"},[n("div",{staticClass:"nuxt-content-highlight"},[n("pre",{class:"language-"+t.highlightResult.lang+" line-numbers"},[n("code",{domProps:{innerHTML:t._s(t.highlightResult.code)}})])]),t._v(" "),t.fileName?n("span",{staticClass:"filename"},[t._v(t._s(t.fileName))]):t._e(),t._v(" "),n("code-block-copy-clipboard",{attrs:{source:t.rawCode}})],1)}),[],!1,null,null,null).exports),Z=(n(240),Object(l.c)({props:{link:String},setup:function(t){return{fullLink:Object(l.a)((function(){return h.a.optionPath+t.link}))}}})),I=Object(v.a)(Z,(function(){var t=this,e=t.$createElement;return(t._self._c||e)("a",{attrs:{href:t.fullLink,target:"_blank"}},[t._v(t._s(t.link))])}),[],!1,null,null,null).exports;r.a.use(l.b),r.a.component("md-example",f),r.a.component("md-alert",w),r.a.component("md-live",N),r.a.component("md-code-block",U),r.a.component("md-option",I),r.a.directive("observe-visibility",d.a);var A=n(242),V=n.n(A),F=n(298),G={"contents/zh/meta/edit-guide.md":["Ovilia","pissang"],"contents/zh/how-to/label/rich-text.md":["pissang"],"contents/zh/how-to/interaction/drag.md":["pissang"],"contents/zh/how-to/data/dynamic-data.md":["Ovilia","pissang"],"contents/zh/how-to/data/drilldown.md":["Hansz00","Ovilia","pissang"],"contents/zh/how-to/cross-platform/wechat-app.md":["Ovilia","pissang"],"contents/zh/how-to/cross-platform/server.md":["Ovilia","pissang"],"contents/zh/how-to/cross-platform/baidu-app.md":["Ovilia","pissang"],"contents/zh/how-to/connect.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/scatter/basic-scatter.md":["Ovilia","Wdingding","pissang"],"contents/zh/how-to/chart-types/pie/rose.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/pie/doughnut.md":["Hansz00","Ovilia","pissang"],"contents/zh/how-to/chart-types/pie/basic-pie.md":["Hansz00","Ovilia","pissang"],"contents/zh/how-to/chart-types/line/step-line.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/line/stacked-line.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/line/smooth-line.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/line/basic-line.md":["Hansz00","Ovilia","pissang"],"contents/zh/how-to/chart-types/line/area-line.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/bar/waterfall.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/bar/stacked-bar.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/bar/polar-bar.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/bar/basic-bar.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/bar/bar-race.md":["Ovilia","pissang"],"contents/zh/get-started.md":["Ovilia","pissang"],"contents/zh/concepts/visual-map.md":["Ovilia","pissang"],"contents/zh/concepts/tooltip.md":["Ovilia"],"contents/zh/concepts/style.md":["pissang"],"contents/zh/concepts/series.md":["Ovilia"],"contents/zh/concepts/options.md":["Ovilia"],"contents/zh/concepts/legend.md":["Ovilia","pissang","yufeng04"],"contents/zh/concepts/event.md":["100pah","Ovilia","huanghan01","pissang","plainheart"],"contents/zh/concepts/dataset.md":["100pah","Ovilia","huanghan01","pissang"],"contents/zh/concepts/data-transform.md":["100pah","pissang"],"contents/zh/concepts/coordinate.md":["Ovilia"],"contents/zh/concepts/chart-size.md":["Ovilia","pissang"],"contents/zh/concepts/axis.md":["Ovilia","huanghan01","pissang","plainheart","yufeng04"],"contents/zh/best-practices/specification/scatter/scatter.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/scatter/bubble.md":["Wdingding","pissang"],"contents/zh/best-practices/specification/radar.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/pie/basic-pie.md":["100pah","Wdingding","pissang"],"contents/zh/best-practices/specification/line/stacked-area.md":["Wdingding","pissang"],"contents/zh/best-practices/specification/line/basic-line.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/line/area.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/gauge.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/funnel.md":["Wdingding","pissang"],"contents/zh/best-practices/specification/bar/stacked-bar.md":["Wdingding","pissang"],"contents/zh/best-practices/specification/bar/grouped-bar.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/bar/bi-directional-bar.md":["Ovilia","Wdingding","pissang"],"contents/zh/best-practices/specification/bar/basic-bar.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/mobile.md":["Hansz00","Ovilia","pissang"],"contents/zh/best-practices/design/color-enhance.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/canvas-vs-svg.md":["100pah","Ovilia","pissang"],"contents/zh/best-practices/aria.md":["Ovilia","pissang"],"contents/zh/basics/resource.md":["Ovilia","pissang"],"contents/zh/basics/release-note/v5-upgrade-guide.md":["pissang"],"contents/zh/basics/release-note/v5-feature.md":["pissang"],"contents/zh/basics/release-note/5-2-0.md":["Ovilia","pissang"],"contents/zh/basics/inspiration.md":["Ovilia","pissang"],"contents/zh/basics/import.md":["pissang"],"contents/zh/basics/help.md":["100pah","Ovilia","pissang","plainheart"],"contents/zh/basics/download.md":["100pah","Ovilia","pissang"],"contents/en/posts.yml":["Ovilia","pissang"],"contents/en/meta/edit-guide.md":["Ovilia","pissang"],"contents/en/how-to/label/rich-text.md":["pissang"],"contents/en/how-to/interaction/drag.md":["pissang"],"contents/en/how-to/data/dynamic-data.md":["Hansz00","Ovilia","pissang"],"contents/en/how-to/data/drilldown.md":["Hansz00","Ovilia","pissang"],"contents/en/how-to/cross-platform/server.md":["pissang"],"contents/en/how-to/chart-types/scatter/basic-scatter.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/pie/rose.md":["Hansz00","Ovilia","pissang"],"contents/en/how-to/chart-types/pie/doughnut.md":["pissang"],"contents/en/how-to/chart-types/pie/basic-pie.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/line/step-line.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/line/stacked-line.md":["Hansz00","Ovilia","pissang"],"contents/en/how-to/chart-types/line/smooth-line.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/line/basic-line.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/line/area-line.md":["Hank","Hansz00","pissang"],"contents/en/how-to/chart-types/bar/waterfall.md":["Hansz00","Ovilia","pissang"],"contents/en/how-to/chart-types/bar/stacked-bar.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/bar/polar-bar.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/bar/basic-bar.md":["Hank","Hansz00","pissang"],"contents/en/how-to/chart-types/bar/bar-race.md":["Hansz00","Ovilia","pissang"],"contents/en/get-started.md":["Ovilia","pissang","plainheart"],"contents/en/concepts/visual-map.md":["pissang"],"contents/en/concepts/tooltip.md":["Ovilia","huanghan01"],"contents/en/concepts/style.md":["pissang"],"contents/en/concepts/series.md":["Ovilia","huanghan01"],"contents/en/concepts/options.md":["Ovilia","huanghan01"],"contents/en/concepts/legend.md":["huanghan01","pissang"],"contents/en/concepts/event.md":["100pah","Ovilia","huanghan01","pissang"],"contents/en/concepts/dataset.md":["100pah","Ovilia","huanghan01","pissang"],"contents/en/concepts/data-transform.md":["100pah","pissang"],"contents/en/concepts/coordinate.md":["Ovilia","huanghan01"],"contents/en/concepts/chart-size.md":["huanghan01","pissang"],"contents/en/concepts/axis.md":["huanghan01","pissang"],"contents/en/best-practices/specification/scatter/scatter.md":["Hansz00","pissang"],"contents/en/best-practices/specification/scatter/bubble.md":["Hansz00","pissang"],"contents/en/best-practices/specification/radar.md":["Hansz00","pissang"],"contents/en/best-practices/specification/pie/basic-pie.md":["Hansz00","pissang"],"contents/en/best-practices/specification/line/stacked-area.md":["Hansz00","pissang"],"contents/en/best-practices/specification/line/basic-line.md":["Hansz00","pissang"],"contents/en/best-practices/specification/line/area.md":["Hansz00","pissang"],"contents/en/best-practices/specification/gauge.md":["Hansz00","pissang"],"contents/en/best-practices/specification/funnel.md":["Hansz00","pissang"],"contents/en/best-practices/specification/bar/stacked-bar.md":["Hansz00","pissang"],"contents/en/best-practices/specification/bar/grouped-bar.md":["Hansz00","pissang"],"contents/en/best-practices/specification/bar/bi-directional-bar.md":["Hansz00","pissang"],"contents/en/best-practices/specification/bar/basic-bar.md":["Hansz00","pissang"],"contents/en/best-practices/mobile.md":["Hansz00","Ovilia","pissang"],"contents/en/best-practices/design/color-enhance.md":["Hansz00","pissang"],"contents/en/best-practices/canvas-vs-svg.md":["100pah","Hansz00","Ovilia","pissang"],"contents/en/best-practices/aria.md":["Hansz00","Ovilia","pissang"],"contents/en/basics/release-note/v5-upgrade-guide.md":["pissang"],"contents/en/basics/release-note/v5-feature.md":["pissang"],"contents/en/basics/release-note/5-2-0.md":["Ovilia","pissang"],"contents/en/basics/inspiration.md":["pissang","plainheart"],"contents/en/basics/import.md":["pissang"],"contents/en/basics/help.md":["pissang"],"contents/en/basics/download.md":["Ovilia","pissang"],"contents/.prettierrc":["pissang"],"contents/zh/posts.yml":["Ovilia","pissang"]};n(139);var J=Object(l.c)({props:{path:String},setup:function(t){return{contributors:Object(l.a)((function(){return G["contents/".concat(t.path||"",".md")]})),sourcePath:Object(l.a)((function(){return(e=t.path).endsWith(".md")||(e+=".md"),n&&(e+="#".concat(decodeURIComponent(n))),"https://github.com/".concat(h.a.gitRepo,"/tree/master/contents/").concat(e);var e,n}))}}}),K=(n(299),Object(v.a)(J,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"post-contributors"},[n("h3",[n("span",{staticClass:"inline-block align-middle"},[t._v("本文贡献者")]),t._v(" "),n("a",{staticClass:"inline-block align-middle text-sm",attrs:{target:"_blank",href:t.sourcePath,title:"编辑本文"}},[n("svg",{staticClass:"h-8 w-8 inline-block align-middle",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("path",{attrs:{"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"}})]),t._v(" "),n("span",{staticClass:"inline-block align-middle"},[t._v("在 GitHub 上编辑本页")])])]),t._v(" "),t.contributors&&t.contributors.length?n("div",{staticClass:"post-contributors-list"},t._l(t.contributors,(function(e){return n("a",{key:e,staticClass:"post-contributor",attrs:{href:"https://github.com/"+e,target:"_blank"}},[n("img",{attrs:{alt:e,src:"https://avatars.githubusercontent.com/"+e+"?size=60"}}),t._v(" "),n("span",[t._v(t._s(e))])])})),0):t._e()])}),[],!1,null,null,null).exports),Q={functional:!0,props:{content:String},render:function(t,e){return t({template:"<article>"+e.props.content+"</article>"})}},X=n(300),Y=n.n(X);function tt(t){return t.replace(/^```(\w+?)\s+live\s*({.*?})?\s*?\n([\s\S]+?)^```/gm,(function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"{}",code=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"";e=e.trim(),n=n.trim()||"{}";var c=x.b(code.trim(),!0);return'<md-live lang="'.concat(e,'" code="\'').concat(c,'\'" v-bind="').concat(n,'" />')}))}function et(t){return t.replace(/^```(\w+?)\s*({.*?})?\s*?\n([\s\S]+?)^```/gm,(function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",code=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"";e=e.trim();var c=x.b(code.trim(),!0);return'<md-code-block lang="'.concat(e,'" code="\'').concat(c,"'\" line-highlights=\"'").concat(n,"'\" />")}))}function nt(t,e){return["optionPath","mainSitePath","exampleViewPath","exampleEditorPath"].forEach((function(p){var n=h.a[p].replace("${lang}",e);t=t.replace(new RegExp("\\$\\{"+p+"\\}","g"),n)})),t=t.replace(/\$\{lang\}/g,e)}var st={components:{Contributors:K,PostContent:Q},data:function(){return{toc:[]}},mounted:function(){var t,e=this;this.toc=[];for(var s,n=(null===(t=this.$el.querySelector(".post-inner"))||void 0===t?void 0:t.querySelectorAll(" h2,h3"))||[],i=0;i<n.length;i++){var title=n[i].innerText;this.toc.push({title:title,depth:+n[i].nodeName.replace(/\D/g,""),id:(s=title,encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g,"-")))})}setTimeout((function(){e._lazyload=new Y.a({elements_selector:"img[data-src], iframe[data-src]",threshold:300})}))},destroyed:function(){this._lazyload&&this._lazyload.destroy()},head:function(){return{meta:[{hid:"docsearch:language",name:"docsearch:language",content:this.$i18n.locale}]}},asyncData:function(t){return Object(c.a)(regeneratorRuntime.mark((function e(){var c,o,r,l,content,d;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return c=t.params,o=t.i18n,r="".concat(o.locale,"/").concat(c.pathMatch),e.next=4,n(301)("./".concat(r,".md"));case 4:return l=e.sent,content=nt(et(tt(l.default)),o.locale),d=V()({html:!0,linkify:!0}).use(F.a,{permalink:!1,permalinkAfter:!0,permalinkSymbol:"#",permalinkClass:"permalink"}).use((function(t){var e=t.renderer.rules.image;t.renderer.rules.image=function(t,n,c,o,r){var l=t[n],d=l.attrGet("src");return l.attrPush(["data-src",d]),l.attrSet("src",""),e(t,n,c,o,r)}})),e.abrupt("return",{html:d.render(content),postPath:r});case 8:case"end":return e.stop()}}),e)})))()}},at=Object(v.a)(st,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"post-inner"},[t.toc.length?n("div",{staticClass:"table-of-contents"},[n("h4",{staticClass:"toc-container-header"},[t._v(t._s(t.$t("inThisPage")))]),t._v(" "),n("ul",t._l(t.toc,(function(link){return n("li",{key:link.id,class:{toc2:2===link.depth,toc3:3===link.depth}},[n("NuxtLink",{attrs:{to:"#"+link.id}},[t._v(t._s(link.title))])],1)})),0)]):t._e(),t._v(" "),n("div",{staticClass:"nuxt-content"},[n("post-content",{attrs:{content:t.html}})],1)]),t._v(" "),n("contributors",{attrs:{path:t.postPath}})],1)}),[],!1,null,null,null);e.default=at.exports}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/454bce2fe31492b7adf2.js b/handbook/_nuxt/js/454bce2fe31492b7adf2.js
deleted file mode 100644
index e851fee..0000000
--- a/handbook/_nuxt/js/454bce2fe31492b7adf2.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[118],{412:function(t,r,o){"use strict";o.r(r),r.default="# 在百度智能小程序中使用 ECharts\n\n[ECharts 图表-beta](http://smartprogram.baidu.com/docs/develop/framework/echarts/) 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。\n\n[aidu-smart-app-echarts-demo](https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo) 项目是使用该动态库的一个示例工程,可以作为参考,一般情况下不需要引入自己的项目。\n\n如有使用上的问题,可以在 [baidu-smart-app-echarts-demo/issues](https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues) 中咨询。\n\n## 使用方式\n\n参见百度智能小程序文档 [ECharts 图表-beta](http://smartprogram.baidu.com/docs/develop/framework/echarts/)。\n\n## 注意事项\n\n百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与[在微信小程序中使用 ECharts](./zh/application/cross-platform/wechat-app) 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 `provider` 指定动态库名称,具体参见[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「在项目中引用动态库」章节。\n\n请务必查看[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「兼容性说明」以了解各功能的实现方式。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/4726cacd35f432090085.js b/handbook/_nuxt/js/4726cacd35f432090085.js
new file mode 100644
index 0000000..8fb8d76
--- /dev/null
+++ b/handbook/_nuxt/js/4726cacd35f432090085.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{305:function(e,o,n){"use strict";n.r(o),o.default='# Get Inspired\n\nThe following list provides some ideas when you have a question "I don\'t know how to design a chart" or "I don\'t know how to use Apache ECharts to achieve a certain effect".\n\n- [Apache ECharts Official Examples](${mainSitePath}/examples)\n- "How To Guides - Common Charts" in this handbook\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/7e6805b6d420a9d924e2.js b/handbook/_nuxt/js/7e6805b6d420a9d924e2.js
new file mode 100644
index 0000000..0390f15
--- /dev/null
+++ b/handbook/_nuxt/js/7e6805b6d420a9d924e2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{363:function(n,t,e){"use strict";e.r(t),t.default="# Apache ECharts 5.2.0 介绍\n\n## 全局过渡动画\n\n在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变,不仅仅可以改善视觉效果,更为表达数据的关联和演变提供了可能。因此,在 5.2.0 中,我们进一步将过渡动画从表现系列内部数据的变化,泛化到全局能力。接下来,我们会看到这种**全局过渡动画 Universal Transition**是如何为图表增加表现力和叙事能力的。\n\n在之前的版本中,过渡动画有一定的局限性:只能用于相同类型的图形的位置、尺寸、形状,而且只能作用在相同类型的系列上。比如,下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化:\n\n```js live {layout: 'lr'}\nfunction makeRandomData() {\n return [\n {\n value: Math.random(),\n name: 'A'\n },\n {\n value: Math.random(),\n name: 'B'\n },\n {\n value: Math.random(),\n name: 'C'\n }\n ];\n}\noption = {\n series: [\n {\n type: 'pie',\n radius: [0, '50%'],\n data: makeRandomData()\n }\n ]\n};\n\nsetInterval(() => {\n myChart.setOption({\n series: {\n data: makeRandomData()\n }\n });\n}, 2000);\n```\n\n而从 5.2.0 开始,我们引入了更强大的全局过渡动画能力,让过渡动画不再局限于相同类型的系列之间。现在,我们可以使用这种跨系列的形变,为任意类型的系列和任意类型的图形做形变动画。\n\n这会有多酷呢?我们一起来感受一下!\n\n### 跨系列的形变动画\n\n在设置`universalTransition: true`开启全局过渡动画后,从饼图切换成柱状图,或者从柱状图切换成散点图,甚至旭日图和矩形树图这类复杂的图表之间,都可以通过形变的方式自然的进行动画过渡。\n\n如下,饼图和柱状图之间的切换:\n\n```js live {layout: 'bt'}\nconst dataset = {\n dimensions: ['name', 'score'],\n source: [\n ['Hannah Krause', 314],\n ['Zhao Qian', 351],\n ['Jasmin Krause ', 287],\n ['Li Lei', 219],\n ['Karle Neumann', 253],\n ['Mia Neumann', 165],\n ['Böhm Fuchs', 318],\n ['Han Meimei', 366]\n ]\n};\nconst pieOption = {\n dataset: [dataset],\n series: [\n {\n type: 'pie',\n // 通过 id 关联需要过渡动画的系列\n id: 'Score',\n radius: [0, '50%'],\n universalTransition: true,\n animationDurationUpdate: 1000\n }\n ]\n};\nconst barOption = {\n dataset: [dataset],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n // 通过 id 关联需要过渡动画的系列\n id: 'Score',\n // 每个数据都是用不同的颜色\n colorBy: 'data',\n encode: { x: 'name', y: 'score' },\n universalTransition: true,\n animationDurationUpdate: 1000\n }\n ]\n};\n\noption = barOption;\n\nsetInterval(() => {\n option = option === pieOption ? barOption : pieOption;\n // 使用 notMerge 的形式可以移除坐标轴\n myChart.setOption(option, true);\n}, 2000);\n```\n\n更多的常见基础图表之间的过渡:\n\n![](images/5-2-0/universal-transition.gif)\n\n这样的动画过渡不再仅仅局限于基础的折、柱、饼中,在柱状图和地图之间:\n\n![](images/5-2-0/universal-transition-2.gif)\n\n或者旭日图和矩形树图之间,甚至非常灵活的自定义系列之间都可以进行动画的过渡。\n\n![](images/5-2-0/universal-transition-3.gif)\n\n> 注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应。\n\n### 数据的分裂和合并动画\n\n除了常见的数据值的更新,有时候我们还会碰到数据的聚合、下钻等交互后的更新,这个时候我们就不能直接应用一对一的动画过渡,而需要使用更多像分裂、合并这样的动画效果,来通过正确的图形动画表达出数据的变换。\n\n为了能够表达数据之间可能存在的多对多联系,在 5.2.0 中我们新引入了一个数据组`groupId`的概念,我们可以通过 [series.dataGroupId](${optionPath}series-bar.dataGroupId) 设置整个系列所属的组,或者更细粒度的通过 [series.data.groupId](${optionPath}series-bar.dataGroupId) 设置每个数据所属的组。如果你使用了`dataset`管理数据则更方便了,可以使用`encode.itemGroupId`来指定一个维度编码成`groupId`。\n\n比如我们要实现一个柱状图下钻的动画,可以将下钻后的整个系列的数据都设置同一个`groupId`,然后跟下钻前的数据对应起来:\n\n```js live {layout: 'lr'}\noption = {\n xAxis: {\n data: ['Animals', 'Fruits', 'Cars']\n },\n yAxis: {},\n dataGroupId: '',\n animationDurationUpdate: 500,\n series: {\n type: 'bar',\n id: 'sales',\n data: [\n {\n value: 5,\n groupId: 'animals'\n },\n {\n value: 2,\n groupId: 'fruits'\n },\n {\n value: 4,\n groupId: 'cars'\n }\n ],\n universalTransition: {\n enabled: true,\n divideShape: 'clone'\n }\n }\n};\n\nconst drilldownData = [\n {\n dataGroupId: 'animals',\n data: [\n ['Cats', 4],\n ['Dogs', 2],\n ['Cows', 1],\n ['Sheep', 2],\n ['Pigs', 1]\n ]\n },\n {\n dataGroupId: 'fruits',\n data: [\n ['Apples', 4],\n ['Oranges', 2]\n ]\n },\n {\n dataGroupId: 'cars',\n data: [\n ['Toyota', 4],\n ['Opel', 2],\n ['Volkswagen', 2]\n ]\n }\n];\n\nmyChart.on('click', event => {\n if (event.data) {\n const subData = drilldownData.find(data => {\n return data.dataGroupId === event.data.groupId;\n });\n if (!subData) {\n return;\n }\n myChart.setOption({\n xAxis: {\n data: subData.data.map(item => {\n return item[0];\n })\n },\n series: {\n type: 'bar',\n id: 'sales',\n dataGroupId: subData.dataGroupId,\n data: subData.data.map(item => {\n return item[1];\n }),\n universalTransition: {\n enabled: true,\n divideShape: 'clone'\n }\n },\n graphic: [\n {\n type: 'text',\n left: 50,\n top: 20,\n style: {\n text: 'Back',\n fontSize: 18\n },\n onclick: function() {\n myChart.setOption(option, true);\n }\n }\n ]\n });\n }\n});\n```\n\n通过`groupId`,我们还可以实现更丰富的聚合,下钻动画。\n\n数据的聚合:\n\n![](images/5-2-0/group-transition.gif)\n\n单系列下钻成两个系列:\n\n![](images/5-2-0/group-transition-2.gif)\n\n全局过渡动画使得数据的关系和演变的表达能力走上新的台阶,为你的可视化创作灵感插上翅膀。\n\n看到这里,我们知道你已经跃跃欲试了。但是别急,5.2.0 还有更多值得一看的新功能。\n\n## 调色盘的取色策略\n\n在上面全局过渡动画的示例中,大家可能有注意到我们使用了一个之前版本没有的`colorBy`配置项,这个配置项也是我们这个版本新增加的一个特性,用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略:\n\n- `'series'` 按照系列分配调色盘中的颜色,同一系列中的所有数据都是用相同的颜色。\n- `'data'` 按照数据项分配调色盘中的颜色,每个数据项都使用不同的颜色。\n\n在之前我们是按照系列的类型固定了这个策略,比如柱状图就是固定`'series'`的策略,而饼图则是固定`'data'`的策略。\n\n而现在新增这个配置项后,我们可以在柱状图中给每个数据项都分配不同的颜色:\n\n```js live {layout: 'lr'}\noption = {\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n colorBy: 'data'\n }\n ]\n};\n```\n\n或者在饼图中统一使用一个颜色:\n\n```js live {layout: 'lr'}\noption = {\n series: {\n type: 'pie',\n colorBy: 'series',\n radius: [0, '50%'],\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 1\n },\n data: [\n {\n value: 335,\n name: 'Direct Visit'\n },\n {\n value: 234,\n name: 'Union Ad'\n },\n {\n value: 1548,\n name: 'Search Engine'\n }\n ]\n }\n};\n```\n\n这一配置项可以让我们避免了去找调色盘颜色然后去一一设置的麻烦,可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强,提供更多的调色盘取色的策略。\n\n## 极坐标柱状图的标签\n\n这个版本中我们实现了极坐标上的柱状图的标签,并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图:\n\n```js live {layout: 'lr'}\noption = {\n angleAxis: {\n show: false,\n max: 10\n },\n radiusAxis: {\n show: false,\n type: 'category',\n data: ['AAA', 'BBB', 'CCC', 'DDD']\n },\n polar: {},\n series: [\n {\n type: 'bar',\n data: [3, 4, 5, 6],\n colorBy: 'data',\n roundCap: true,\n label: {\n show: true,\n // 试试改成 'insideStart'\n position: 'start',\n formatter: '{b}'\n },\n coordinateSystem: 'polar'\n }\n ]\n};\n```\n\n更多标签位置的配置:\n\n![](images/5-2-0/polar-bar-label.jpg)\n\n这一灵活的标签位置配置项大大丰富了极坐标柱状图的表达能力,让文字清晰地匹配对应的数据。\n\n## 空数据的饼图样式\n\n在之前的版本中,如果饼图没有数据,画面中可能就是完全空白的。因为没有任何的视觉元素,所以用户会疑惑是不是出现了 bug 导致图中没有内容。\n\n为了解决这个问题,这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过`emptyCircleStyle`配置这个占位圆的样式。\n\n```js live {layout: 'lr'}\noption = {\n series: [\n {\n type: 'pie',\n data: [],\n // showEmptyCircle: false,\n emptyCircleStyle: {\n // 将样式改为空心圆\n color: 'transparent',\n borderColor: '#ddd',\n borderWidth: 1\n }\n }\n ]\n};\n```\n\n如果不想要显示这个灰色的圆,也可以设置`showEmptyCircle: false`关闭。\n\n## 高维数据的性能增强\n\n我们从 4.0 开始引入了 [dataset](${optionPath}dataset) 用来管理图表的数据,通常情况下`dataset`提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维(>100)数据的场景下,我们还是会碰到一些性能急剧下降的问题,比如下面这种通过一千个系列去可视化千维数据的场景([#11907](https://github.com/apache/echarts/issues/11907)),甚至可能会卡住。\n\n```js\nconst indices = Array.from(Array(1000), (_, i) => {\n return `index${i}`;\n});\nconst option = {\n xAxis: { type: 'category' },\n yAxis: {},\n dataset: {\n // dimension: ['date', ...indices],\n source: Array.from(Array(10), (_, i) => {\n return {\n date: i,\n ...indices.reduce((item, next) => {\n item[next] = Math.random() * 100;\n return item;\n }, {})\n };\n })\n },\n series: indices.map(index => {\n return { type: 'line', name: index };\n })\n};\n```\n\n产生这个性能问题是因为我们在底层每个系列都会按照其需要处理一遍这个 dataset,然后保存一份处理过后的数据以及维度等元信息。这意味着刚才那个例子中需要处理并保存`1000 x 1000`个维度的信息,这带来了巨大的内存和垃圾回收的压力,从而导致了高维度的性能的急剧下降。\n\n在新版本中我们对这个问题做了优化,所有系列都尽可能共享 dataset 的数据(能否共享取决于系列怎么使用这份数据)存储而非每个系列都处理并存储一次,并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸,大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。\n\n这次优化带来收益的还不只是这种高维的场景,在使用维度不高但是数据量很大的 dataset 的时候,因为数据的共享所以多个系列只处理了一遍数据,因此也可以带来显著的性能提升。\n\n## 自定义系列的类型优化\n\n自定义系列提供了非常灵活的创建系列图形的方式,相对于其它系列,自定义系列的学习曲线可能有些陡峭,而且容易出错。因此在这个版本中,我们进一步的优化了自定义系列中的核心方法`renderItem`的类型,对于`renderItem`的参数和返回值类型做了更精确的推断,从而可以根据返回的图形类型推断出可以设置该图形的哪些属性:\n\n```ts\nseries = {\n type: 'custom',\n renderItem(params) {\n return {\n type: 'group',\n // group 类型使用 children 存储其它类型的子元素\n children: [\n {\n type: 'circle',\n // circle 拥有下面这些可以配置的 shape 属性\n shape: { r: 10, cx: 0, cy: 0 },\n // 可以配置的样式\n style: { fill: 'red' }\n },\n {\n type: 'rect',\n // rect 拥有下面这些可以配置的 shape 属性\n shape: { x: 0, y: 0, width: 100, height: 100 }\n },\n {\n type: 'path',\n // 自定义路径图形\n shape: { d: '...' }\n }\n ]\n };\n }\n};\n```\n\n## 小结\n\n以上我们介绍了 5.2.0 中的新特性以及优化,如果你对其中的一些特性感兴趣,不妨更新到最新版本的 Apache ECharts 亲自体验一下。\n\n如果你对 Apache ECharts 接下来的计划感兴趣,也可以在 [GitHub Milestone](https://github.com/apache/echarts/milestones) 关注我们的开发计划。也非常欢迎加入我们的贡献者行列(在 [Wiki](https://github.com/apache/echarts/wiki) 中了解更多)。\n\n### 版本更新记录\n\n#### 非兼容改动\n\n- [Fix][pie] 负值会被作为非法值过滤。[#15095](https://github.com/apache/echarts/issues/15095) ([ssthouse](https://github.com/ssthouse))\n\n#### 所有改动\n\n- **[Feature] 新增全局过渡动画。[#15208](https://github.com/apache/echarts/issues/15208) ([pissang](https://github.com/pissang))**\n- [Feature][color] 新增`series.colorBy`配置不同粒度的取色。[#13788](https://github.com/apache/echarts/issues/13788) ([Ovilia](https://github.com/Ovilia))\n- [Feature][label] 极坐标系柱状图支持标签显示。[#774](https://github.com/ecomfe/zrender/issues/774) ([Ovilia](https://github.com/Ovilia))\n- [Feature][effectscatter] 新增`rippleEffect.number`配置涟漪数目。[#15335](https://github.com/apache/echarts/issues/15335) ([plainheart](https://github.com/plainheart))\n- [Feature][gauge] 新增`pointer.showAbove`配置指针和标签的显示层级。[#15337](https://github.com/apache/echarts/issues/15337) ([AmosChenYQ](https://github.com/AmosChenYQ)) [#15326](https://github.com/apache/echarts/issues/15326) ([susiwen8](https://github.com/susiwen8))\n- [Feature][emphasis] `emphasis.color`支持设置为`'inherit'`关闭高亮。[#15172](https://github.com/apache/echarts/issues/15172) ([Foreverwzh](https://github.com/Foreverwzh))\n- [Feature][pie] 无数据的时候默认显示灰色的占位圆。[#15095](https://github.com/apache/echarts/issues/15095) ([ssthouse](https://github.com/ssthouse))\n- [Fix][dataset] 优化高维数据`dataset`的性能。[#15355](https://github.com/apache/echarts/issues/15355) ([pissang](https://github.com/pissang))\n- [Fix][axis] 优化时间轴刻度标签的格式化显示。[#15465](https://github.com/apache/echarts/issues/15465) ([leavest](https://github.com/leavest)) [#15434](https://github.com/apache/echarts/issues/15434) ([zhiyuc123](https://github.com/zhiyuc123))\n- [Fix][custom] 优化旧代码对于`font`的兼容性。[#15454](https://github.com/apache/echarts/issues/15454) ([AmosChenYQ](https://github.com/AmosChenYQ))\n- [Fix][memory] 优化实例销毁后依旧持有实例时的内存占用。[#15417](https://github.com/apache/echarts/issues/15417) ([pissang](https://github.com/pissang))\n- [Fix][line] 优化有无穷大数据时的渐变色显示。 [#15416](https://github.com/apache/echarts/issues/15416) ([plainheart](https://github.com/plainheart))\n- [Fix][date] 优化`date`数据的解析。[#15410](https://github.com/apache/echarts/issues/15410) ([quillblue](https://github.com/quillblue))\n- [Fix][line] 修复渲染出错。[#788](https://github.com/ecomfe/zrender/issues/788) ([pissang](https://github.com/pissang))\n- [Fix][candlestick] 修复样式可能在`setOption`后丢失的问题。[#15368](https://github.com/apache/echarts/issues/15368) ([pissang](https://github.com/pissang))\n- [Fix][sankey] 修复垂直布局时的渐变色边。[#15363](https://github.com/apache/echarts/issues/15363) ([susiwen8](https://github.com/susiwen8))\n- [Fix][tooltip] 修复在设置`tooltip.position`后`formatter`返回 DOM 对象会被解析成字符串的问题。[#15313](https://github.com/apache/echarts/issues/15313) ([plainheart](https://github.com/plainheart))\n- [Fix][tooltip] `formatter`返回`null`时清空内容。[#15313](https://github.com/apache/echarts/issues/15313) ([plainheart](https://github.com/plainheart))\n- [Fix][bar] 标签位置设置为`'middle'`时应该显示在图形中间。[#15309](https://github.com/apache/echarts/issues/15309) ([Ovilia](https://github.com/Ovilia))\n- [Fix][marker] 修复可能会在极坐标柱状图报`'clampData' is undefined`的错误。[#15297](https://github.com/apache/echarts/issues/15297) ([AmosChenYQ](https://github.com/AmosChenYQ))\n- [Fix][treemap] 修复关闭动画后更新可能旧节点不会被移除的问题。[#15283](https://github.com/apache/echarts/issues/15283) ([villebro](https://github.com/villebro))\n- [Fix][tree] 修复更新数据时边可能会不被移除的问题。[#15251](https://github.com/apache/echarts/issues/15251) ([ssthouse](https://github.com/ssthouse))\n- [Fix][pie/sunburst] 修复`borderRadius`被设置为`null`或者`undefined`时无法重置的问题。[#15243](https://github.com/apache/echarts/issues/15243) ([plainheart](https://github.com/plainheart))\n- [Fix][canvas] 修复`fillStyle`被设置为`'none'`或者`null`时 FireFox 浏览器下会报警告的问题。 [#784](https://github.com/ecomfe/zrender/issues/784) ([plainheart](https://github.com/plainheart))\n- [Fix][highlight] 修复`chart.dispatchAction`高亮多个系列可能会不正确的问题。[#15207](https://github.com/apache/echarts/issues/15207) ([ssthouse](https://github.com/ssthouse))\n- [Fix][sankey] 修复使用`series.nodes`作为数据时拖拽功能失效的问题。[#15199](https://github.com/apache/echarts/issues/15199) ([DuLinRain](https://github.com/DuLinRain))\n- [Fix][svg] 优化导出的 SVG 文件在 Powerpoint 中的兼容性。[#767](https://github.com/ecomfe/zrender/pull/767) ([plainheart](https://github.com/plainheart))\n- [Fix][legend] 修复`text.lineHeight`不生效。[#773](https://github.com/ecomfe/zrender/issues/773) ([ssthouse](https://github.com/ssthouse))\n- [Fix][pie] 将默认的`itemStyle.borderJoin`设置为`round`。[#15145](https://github.com/apache/echarts/issues/15145) ([plainheart](https://github.com/plainheart))\n- [Fix][radar] 将默认的`lineStyle.join`设置为`round`。[#15381](https://github.com/apache/echarts/issues/15381) ([Ovilia](https://github.com/Ovilia))\n- [Fix][treemap] 修复设置`label.show`为`false`会报错。[#15141](https://github.com/apache/echarts/issues/15141) ([susiwen8](https://github.com/susiwen8))\n- [Fix][pictorialbar] 修复零数据标签的显示问题。[#15132](https://github.com/apache/echarts/issues/15132) ([ssthouse](https://github.com/ssthouse))\n- [Fix][lines] 修复调用`chart.clear()`可能会无法清除线条的问题。[#15088](https://github.com/apache/echarts/issues/15088) ([plainheart](https://github.com/plainheart))\n- [Fix][endlabel] 修复端点标签只设置`emphasis.show`为`true`时可能无法显示的问题。[#15072](https://github.com/apache/echarts/issues/15072) ([Ovilia](https://github.com/Ovilia))\n- [Fix][svg] 修复矩形路径没有合并的问题。[#767](https://github.com/ecomfe/zrender/issues/767) ([plainheart](https://github.com/plainheart))\n- [Fix][treemap] 在回调函数参数中添加`treeAncestors`属性。[#14976](https://github.com/apache/echarts/issues/14976) ([pissang](https://github.com/pissang))\n- [Fix][tree] 修复调用`setOption`两次更新数据时可能报错的问题。[#14930](https://github.com/apache/echarts/issues/14930) ([Map1en](https://github.com/Map1en))\n- [Fix][radar] 修复图形边框被缩放的问题。[#15396](https://github.com/apache/echarts/issues/15396) ([pissang](https://github.com/pissang))\n- [Fix][marker] 修复`symbolOffset`和`symbolKeepAspect`配置项不生效的问题。[#14737](https://github.com/apache/echarts/issues/14737) ([plainheart](https://github.com/plainheart))\n- [Fix][gauge] 支持进度条和指针的点击事件。[#14688](https://github.com/apache/echarts/issues/14688) ([yufeng04](https://github.com/yufeng04))\n- [Fix][tooltip] 优化箭头的边框宽度,跟配置同步。[#14393](https://github.com/apache/echarts/issues/14393) ([g7i](https://github.com/g7i))\n- [Fix][geo] 修复地理坐标组件从`show: false`配置为`show: true`后依旧不显示的问题。[#15361](https://github.com/apache/echarts/issues/15361) ([pissang](https://github.com/pissang))\n- [Fix][type] 优化自定义系列`renderItem`的类型推断。\n- [Fix][type] 优化`echarts.init`的配置项类型。[#15487](https://github.com/apache/echarts/issues/15487) ([John60676](https://github.com/John60676))\n- [Fix][type] 修复类型中`polarIndex`配置项丢失的问题。[#15281](https://github.com/apache/echarts/issues/15281) ([Map1en](https://github.com/Map1en))\n- [Fix][type] 优化 SVG 数据源的类型。[#15263](https://github.com/apache/echarts/issues/15263) ([leosxie](https://github.com/leosxie))\n- [Fix][type] 优化饼图和地图系列中的数据类型。[#15144](https://github.com/apache/echarts/issues/15144) ([plainheart](https://github.com/plainheart))\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/80f1253966298a392915.js b/handbook/_nuxt/js/80f1253966298a392915.js
new file mode 100644
index 0000000..b1b3824
--- /dev/null
+++ b/handbook/_nuxt/js/80f1253966298a392915.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1:function(t,e,r){"use strict";r.d(e,"k",(function(){return y})),r.d(e,"m",(function(){return _})),r.d(e,"l",(function(){return C})),r.d(e,"e",(function(){return k})),r.d(e,"b",(function(){return O})),r.d(e,"s",(function(){return $})),r.d(e,"g",(function(){return j})),r.d(e,"h",(function(){return P})),r.d(e,"d",(function(){return E})),r.d(e,"r",(function(){return S})),r.d(e,"j",(function(){return R})),r.d(e,"t",(function(){return A})),r.d(e,"o",(function(){return D})),r.d(e,"q",(function(){return T})),r.d(e,"f",(function(){return I})),r.d(e,"c",(function(){return z})),r.d(e,"i",(function(){return M})),r.d(e,"p",(function(){return B})),r.d(e,"a",(function(){return V})),r.d(e,"u",(function(){return Q})),r.d(e,"n",(function(){return Y}));r(17),r(34),r(42),r(43);var n=r(15),o=r(2),c=r(11),l=r(3),h=(r(21),r(25),r(122),r(16),r(20),r(22),r(35),r(27),r(28),r(23),r(36),r(70),r(123),r(103),r(95),r(96),r(166),r(41),r(37),r(0)),f=r.n(h),d=r(18);function v(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function m(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?v(Object(source),!0).forEach((function(e){Object(c.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):v(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function w(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return x(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return x(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function x(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function y(t){f.a.config.errorHandler&&f.a.config.errorHandler(t)}function _(t){return t.then((function(t){return t.default||t}))}function C(t){return t.$options&&"function"==typeof t.$options.fetch&&!t.$options.fetch.length}function k(t){var e,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=t.$children||[],o=w(n);try{for(o.s();!(e=o.n()).done;){var c=e.value;c.$fetch?r.push(c):c.$children&&k(c,r)}}catch(t){o.e(t)}finally{o.f()}return r}function O(t,e){if(e||!t.options.__hasNuxtData){var r=t.options._originDataFn||t.options.data||function(){return{}};t.options._originDataFn=r,t.options.data=function(){var data=r.call(this,this);return this.$ssrContext&&(e=this.$ssrContext.asyncData[t.cid]),m(m({},data),e)},t.options.__hasNuxtData=!0,t._Ctor&&t._Ctor.options&&(t._Ctor.options.data=t.options.data)}}function $(t){return t.options&&t._Ctor===t||(t.options?(t._Ctor=t,t.extendOptions=t.options):(t=f.a.extend(t))._Ctor=t,!t.options.name&&t.options.__file&&(t.options.name=t.options.__file)),t}function j(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"components";return Array.prototype.concat.apply([],t.matched.map((function(t,n){return Object.keys(t[r]).map((function(o){return e&&e.push(n),t[r][o]}))})))}function P(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return j(t,e,"instances")}function E(t,e){return Array.prototype.concat.apply([],t.matched.map((function(t,r){return Object.keys(t.components).reduce((function(n,o){return t.components[o]?n.push(e(t.components[o],t.instances[o],t,o,r)):delete t.components[o],n}),[])})))}function S(t,e){return Promise.all(E(t,function(){var t=Object(o.a)(regeneratorRuntime.mark((function t(r,n,o,c){var l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("function"!=typeof r||r.options){t.next=11;break}return t.prev=1,t.next=4,r();case 4:r=t.sent,t.next=11;break;case 7:throw t.prev=7,t.t0=t.catch(1),t.t0&&"ChunkLoadError"===t.t0.name&&"undefined"!=typeof window&&window.sessionStorage&&(l=Date.now(),(!(h=parseInt(window.sessionStorage.getItem("nuxt-reload")))||h+6e4<l)&&(window.sessionStorage.setItem("nuxt-reload",l),window.location.reload(!0))),t.t0;case 11:return o.components[c]=r=$(r),t.abrupt("return","function"==typeof e?e(r,n,o,c):r);case 13:case"end":return t.stop()}}),t,null,[[1,7]])})));return function(e,r,n,o){return t.apply(this,arguments)}}()))}function R(t){return L.apply(this,arguments)}function L(){return(L=Object(o.a)(regeneratorRuntime.mark((function t(e){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(e){t.next=2;break}return t.abrupt("return");case 2:return t.next=4,S(e);case 4:return t.abrupt("return",m(m({},e),{},{meta:j(e).map((function(t,r){return m(m({},t.options.meta),(e.matched[r]||{}).meta)}))}));case 5:case"end":return t.stop()}}),t)})))).apply(this,arguments)}function A(t,e){return N.apply(this,arguments)}function N(){return(N=Object(o.a)(regeneratorRuntime.mark((function t(e,r){var o,c,h,f;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e.context||(e.context={isStatic:!0,isDev:!1,isHMR:!1,app:e,store:e.store,payload:r.payload,error:r.error,base:e.router.options.base,env:{NUXT_ENV_DEPLOY:"asf"}},r.req&&(e.context.req=r.req),r.res&&(e.context.res=r.res),r.ssrContext&&(e.context.ssrContext=r.ssrContext),e.context.redirect=function(t,path,r){if(t){e.context._redirected=!0;var o=Object(n.a)(path);if("number"==typeof t||"undefined"!==o&&"object"!==o||(r=path||{},path=t,o=Object(n.a)(path),t=302),"object"===o&&(path=e.router.resolve(path).route.fullPath),!/(^[.]{1,2}\/)|(^\/(?!\/))/.test(path))throw path=Object(d.d)(path,r),window.location.replace(path),new Error("ERR_REDIRECT");e.context.next({path:path,query:r,status:t})}},e.context.nuxtState=window.__NUXT__),t.next=3,Promise.all([R(r.route),R(r.from)]);case 3:o=t.sent,c=Object(l.a)(o,2),h=c[0],f=c[1],r.route&&(e.context.route=h),r.from&&(e.context.from=f),e.context.next=r.next,e.context._redirected=!1,e.context._errored=!1,e.context.isHMR=!1,e.context.params=e.context.route.params||{},e.context.query=e.context.route.query||{};case 15:case"end":return t.stop()}}),t)})))).apply(this,arguments)}function D(t,e){return!t.length||e._redirected||e._errored?Promise.resolve():T(t[0],e).then((function(){return D(t.slice(1),e)}))}function T(t,e){var r;return(r=2===t.length?new Promise((function(r){t(e,(function(t,data){t&&e.error(t),r(data=data||{})}))})):t(e))&&r instanceof Promise&&"function"==typeof r.then?r:Promise.resolve(r)}function I(base,t){if("hash"===t)return window.location.hash.replace(/^#\//,"");base=decodeURI(base).slice(0,-1);var path=decodeURI(window.location.pathname);base&&path.startsWith(base)&&(path=path.slice(base.length));var e=(path||"/")+window.location.search+window.location.hash;return Object(d.c)(e)}function z(t,e){return function(t,e){for(var r=new Array(t.length),i=0;i<t.length;i++)"object"===Object(n.a)(t[i])&&(r[i]=new RegExp("^(?:"+t[i].pattern+")$",K(e)));return function(e,n){for(var path="",data=e||{},o=(n||{}).pretty?U:encodeURIComponent,c=0;c<t.length;c++){var l=t[c];if("string"!=typeof l){var h=data[l.name||"pathMatch"],f=void 0;if(null==h){if(l.optional){l.partial&&(path+=l.prefix);continue}throw new TypeError('Expected "'+l.name+'" to be defined')}if(Array.isArray(h)){if(!l.repeat)throw new TypeError('Expected "'+l.name+'" to not repeat, but received `'+JSON.stringify(h)+"`");if(0===h.length){if(l.optional)continue;throw new TypeError('Expected "'+l.name+'" to not be empty')}for(var d=0;d<h.length;d++){if(f=o(h[d]),!r[c].test(f))throw new TypeError('Expected all "'+l.name+'" to match "'+l.pattern+'", but received `'+JSON.stringify(f)+"`");path+=(0===d?l.prefix:l.delimiter)+f}}else{if(f=l.asterisk?G(h):o(h),!r[c].test(f))throw new TypeError('Expected "'+l.name+'" to match "'+l.pattern+'", but received "'+f+'"');path+=l.prefix+f}}else path+=l}return path}}(function(t,e){var r,n=[],o=0,c=0,path="",l=e&&e.delimiter||"/";for(;null!=(r=F.exec(t));){var h=r[0],f=r[1],d=r.index;if(path+=t.slice(c,d),c=d+h.length,f)path+=f[1];else{var v=t[c],m=r[2],w=r[3],x=r[4],y=r[5],_=r[6],C=r[7];path&&(n.push(path),path="");var k=null!=m&&null!=v&&v!==m,O="+"===_||"*"===_,$="?"===_||"*"===_,j=r[2]||l,pattern=x||y;n.push({name:w||o++,prefix:m||"",delimiter:j,optional:$,repeat:O,partial:k,asterisk:Boolean(C),pattern:pattern?X(pattern):C?".*":"[^"+H(j)+"]+?"})}}c<t.length&&(path+=t.substr(c));path&&n.push(path);return n}(t,e),e)}function M(t,e){var r={},n=m(m({},t),e);for(var o in n)String(t[o])!==String(e[o])&&(r[o]=!0);return r}function B(t){var e;if(t.message||"string"==typeof t)e=t.message||t;else try{e=JSON.stringify(t,null,2)}catch(r){e="[".concat(t.constructor.name,"]")}return m(m({},t),{},{message:e,statusCode:t.statusCode||t.status||t.response&&t.response.status||500})}window.onNuxtReadyCbs=[],window.onNuxtReady=function(t){window.onNuxtReadyCbs.push(t)};var F=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function U(t,e){var r=e?/[?#]/g:/[/?#]/g;return encodeURI(t).replace(r,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function G(t){return U(t,!0)}function H(t){return t.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1")}function X(t){return t.replace(/([=!:$/()])/g,"\\$1")}function K(t){return t&&t.sensitive?"":"i"}function V(t,e,r){t.$options[e]||(t.$options[e]=[]),t.$options[e].includes(r)||t.$options[e].push(r)}var Q=d.b,Y=(d.e,d.a)},102:function(t,e,r){"use strict";var n={gh:{routerBase:"/echarts-handbook",rootPath:"https://apache.github.io/echarts-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"},asf:{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"},local:{routerBase:"/echarts-handbook/dist",rootPath:"http://localhost/echarts-handbook/dist/",exampleViewPath:"http://localhost/echarts-website/examples/${lang}/view.html?c=",exampleEditorPath:"http://localhost/echarts-website/examples/${lang}/editor.html?c=",mainSitePath:"http://localhost/echarts-website/",optionPath:"http://localhost/echarts-website/option.html#",gitRepo:"apache/echarts-handbook"},localsite:{routerBase:"/echarts-website/handbook",rootPath:"http://localhost/echarts-website/handbook",exampleViewPath:"http://localhost/echarts-website/examples/${lang}/view.html?c=",exampleEditorPath:"http://localhost/echarts-website/examples/${lang}/editor.html?c=",mainSitePath:"http://localhost/echarts-website/",optionPath:"http://localhost/echarts-website/option.html#",gitRepo:"apache/echarts-handbook"}};var o=function(){var t="asf";if(!n.asf)throw"Deploy config ".concat(t," not exits");return n.asf}();e.a=o},124:function(t,e,r){t.exports={}},125:function(t,e,r){t.exports={}},126:function(t,e,r){t.exports={}},127:function(t,e,r){t.exports={}},128:function(t,e,r){t.exports={}},129:function(t,e,r){t.exports={}},134:function(t,e){const r=[[{title:"快速上手",dir:"get-started"},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:!0},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help"},{title:"版本特性",dir:"release-note",children:[{title:"ECharts 5 特性介绍",dir:"v5-feature"},{title:"ECharts 5 升级指南",dir:"v5-upgrade-guide"},{title:5.2,dir:"5-2-0"}]}]},{title:"概念篇",dir:"concepts",children:[{title:"图表容器及大小",dir:"chart-size"},{title:"配置项",dir:"options",draft:!0},{title:"系列",dir:"series",draft:!0},{title:"样式",dir:"style"},{title:"数据集",dir:"dataset"},{title:"数据转换",dir:"data-transform"},{title:"坐标系",dir:"coordinate",draft:!0},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:"visual-map"},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:"how-to",children:[{title:"常用图表类型",dir:"chart-types",children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:"basic-bar"},{title:"堆叠柱状图",dir:"stacked-bar"},{title:"动态排序柱状图",dir:"bar-race"},{title:"极坐标系柱状图",dir:"polar-bar",draft:!0},{title:"阶梯瀑布图",dir:"waterfall"},{title:"视觉映射的柱状图",dir:"visual-map",draft:!0}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:"basic-line"},{title:"堆叠折线图",dir:"stacked-line"},{title:"区域面积图",dir:"area-line"},{title:"平滑曲线图",dir:"smooth-line"},{title:"阶梯线图",dir:"step-line"}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:"basic-pie"},{title:"圆环图",dir:"doughnut"},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:"scatter",children:[{title:"基础散点图",dir:"basic-scatter"}]}]},{title:"移动端优化",dir:"mobile",draft:!0},{title:"跨平台方案",dir:"cross-platform",children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:"dynamic-data"},{title:"数据下钻",dir:"drilldown",draft:!0}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:"rich-text"}]},{title:"交互",dir:"interaction",children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:"connect",draft:!0}]}]},{title:"最佳实践",dir:"best-practices",children:[{title:"移动端优化",dir:"mobile",draft:!0},{title:"Canvas vs. SVG",dir:"canvas-vs-svg"},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:"edit-guide"}]}]];t.exports=r.length<=1?r[0]:r},135:function(t,e){const r=[[{title:"Get Started",dir:"get-started"},{title:"Basics",dir:"basics",children:[{title:"Download ECharts",dir:"download"},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:"resource",draft:!0},{title:"Inspiration",dir:"inspiration"},{title:"Get Help",dir:"help"},{title:"What's New",dir:"release-note",children:[{title:"ECharts 5 Features",dir:"v5-feature"},{title:"ECharts 5 Upgrade Guide",dir:"v5-upgrade-guide"},{title:5.2,dir:"5-2-0"}]}]},{title:"Concepts",dir:"concepts",children:[{title:"Chart Container",dir:"chart-size"},{title:"Chart Option",dir:"options",draft:!0},{title:"Series",dir:"series",draft:!0},{title:"Style",dir:"style"},{title:"Dataset",dir:"dataset"},{title:"Data Transform",dir:"data-transform"},{title:"Coordinate",dir:"coordinate",draft:!0},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:"visual-map"},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"How To Guides",dir:"how-to",children:[{title:"Common Charts",dir:"chart-types",children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:"basic-bar"},{title:"Stacked Bar",dir:"stacked-bar"},{title:"Bar Racing",dir:"bar-race"},{title:"Bar Polar",dir:"polar-bar",draft:!0},{title:"Waterfall",dir:"waterfall"}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:"basic-line"},{title:"Stacked Line",dir:"stacked-line"},{title:"Area Chart",dir:"area-line"},{title:"Smoothed Line",dir:"smooth-line"},{title:"Step Line",dir:"step-line"}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:"basic-pie"},{title:"Ring Style",dir:"doughnut"},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:"scatter",children:[{title:"Basic Scatter",dir:"basic-scatter"}]}]},{title:"Mobile",dir:"mobile",draft:!0},{title:"Cross Platform",dir:"cross-platform",children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:"dynamic-data"},{title:"Drilldown",dir:"drilldown",draft:!0}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:"rich-text"}]},{title:"Interaction",dir:"interaction",children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:"connect",draft:!0}]}]},{title:"Best Practices",dir:"best-practices",children:[{title:"Mobile Optimization",dir:"mobile",draft:!0},{title:"Canvas vs. SVG",dir:"canvas-vs-svg"},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:"edit-guide"}]}]];t.exports=r.length<=1?r[0]:r},136:function(t,e,r){"use strict";var n=r(2),o=(r(21),r(16),r(0)),c=r.n(o),l=r(1),h=window.__NUXT__;function f(){if(!this._hydrated)return this.$fetch()}function d(){if((t=this).$vnode&&t.$vnode.elm&&t.$vnode.elm.dataset&&t.$vnode.elm.dataset.fetchKey){var t;this._hydrated=!0,this._fetchKey=this.$vnode.elm.dataset.fetchKey;var data=h.fetch[this._fetchKey];if(data&&data._error)this.$fetchState.error=data._error;else for(var e in data)c.a.set(this.$data,e,data[e])}}function v(){var t=this;return this._fetchPromise||(this._fetchPromise=m.call(this).then((function(){delete t._fetchPromise}))),this._fetchPromise}function m(){return w.apply(this,arguments)}function w(){return(w=Object(n.a)(regeneratorRuntime.mark((function t(){var e,r,n,o=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return this.$nuxt.nbFetching++,this.$fetchState.pending=!0,this.$fetchState.error=null,this._hydrated=!1,e=null,r=Date.now(),t.prev=6,t.next=9,this.$options.fetch.call(this);case 9:t.next=15;break;case 11:t.prev=11,t.t0=t.catch(6),e=Object(l.p)(t.t0);case 15:if(!((n=this._fetchDelay-(Date.now()-r))>0)){t.next=19;break}return t.next=19,new Promise((function(t){return setTimeout(t,n)}));case 19:this.$fetchState.error=e,this.$fetchState.pending=!1,this.$fetchState.timestamp=Date.now(),this.$nextTick((function(){return o.$nuxt.nbFetching--}));case 23:case"end":return t.stop()}}),t,this,[[6,11]])})))).apply(this,arguments)}e.a={beforeCreate:function(){Object(l.l)(this)&&(this._fetchDelay="number"==typeof this.$options.fetchDelay?this.$options.fetchDelay:200,c.a.util.defineReactive(this,"$fetchState",{pending:!1,error:null,timestamp:Date.now()}),this.$fetch=v.bind(this),Object(l.a)(this,"created",d),Object(l.a)(this,"beforeMount",f))}}},141:function(t,e,r){t.exports=r(142)},142:function(t,e,r){"use strict";r.r(e),function(t){r(23),r(17),r(34);var e=r(15),n=r(2),o=(r(114),r(150),r(155),r(157),r(21),r(20),r(25),r(35),r(41),r(37),r(22),r(27),r(16),r(28),r(0)),c=r.n(o),l=r(131),h=r(56),f=r(1),d=r(26),v=r(136),m=r(73);function w(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return x(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return x(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function x(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}c.a.__nuxt__fetch__mixin__||(c.a.mixin(v.a),c.a.__nuxt__fetch__mixin__=!0),c.a.component(m.a.name,m.a),c.a.component("NLink",m.a),t.fetch||(t.fetch=l.a);var y,_,C=[],k=window.__NUXT__||{},O=k.config||{};O._app&&(r.p=Object(f.u)(O._app.cdnURL,O._app.assetsPath)),Object.assign(c.a.config,{silent:!0,performance:!1});var $=c.a.config.errorHandler||console.error;function j(t,e,r){for(var n=function(component){var t=function(component,t){if(!component||!component.options||!component.options[t])return{};var option=component.options[t];if("function"==typeof option){for(var e=arguments.length,r=new Array(e>2?e-2:0),n=2;n<e;n++)r[n-2]=arguments[n];return option.apply(void 0,r)}return option}(component,"transition",e,r)||{};return"string"==typeof t?{name:t}:t},o=r?Object(f.g)(r):[],c=Math.max(t.length,o.length),l=[],h=function(i){var e=Object.assign({},n(t[i])),r=Object.assign({},n(o[i]));Object.keys(e).filter((function(t){return void 0!==e[t]&&!t.toLowerCase().includes("leave")})).forEach((function(t){r[t]=e[t]})),l.push(r)},i=0;i<c;i++)h(i);return l}function P(t,e,r){return E.apply(this,arguments)}function E(){return(E=Object(n.a)(regeneratorRuntime.mark((function t(e,r,n){var o,c,l,h,d=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(this._routeChanged=Boolean(y.nuxt.err)||r.name!==e.name,this._paramChanged=!this._routeChanged&&r.path!==e.path,this._queryChanged=!this._paramChanged&&r.fullPath!==e.fullPath,this._diffQuery=this._queryChanged?Object(f.i)(e.query,r.query):[],(this._routeChanged||this._paramChanged)&&this.$loading.start&&!this.$loading.manual&&this.$loading.start(),t.prev=5,!this._queryChanged){t.next=12;break}return t.next=9,Object(f.r)(e,(function(t,e){return{Component:t,instance:e}}));case 9:o=t.sent,o.some((function(t){var n=t.Component,o=t.instance,c=n.options.watchQuery;return!0===c||(Array.isArray(c)?c.some((function(t){return d._diffQuery[t]})):"function"==typeof c&&c.apply(o,[e.query,r.query]))}))&&this.$loading.start&&!this.$loading.manual&&this.$loading.start();case 12:n(),t.next=26;break;case 15:if(t.prev=15,t.t0=t.catch(5),c=t.t0||{},l=c.statusCode||c.status||c.response&&c.response.status||500,h=c.message||"",!/^Loading( CSS)? chunk (\d)+ failed\./.test(h)){t.next=23;break}return window.location.reload(!0),t.abrupt("return");case 23:this.error({statusCode:l,message:h}),this.$nuxt.$emit("routeChanged",e,r,c),n();case 26:case"end":return t.stop()}}),t,this,[[5,15]])})))).apply(this,arguments)}function S(t,e){return k.serverRendered&&e&&Object(f.b)(t,e),t._Ctor=t,t}function R(t){return Object(f.d)(t,function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e,r,n,o,c){var l;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("function"!=typeof e||e.options){t.next=4;break}return t.next=3,e();case 3:e=t.sent;case 4:return l=S(Object(f.s)(e),k.data?k.data[c]:null),n.components[o]=l,t.abrupt("return",l);case 7:case"end":return t.stop()}}),t)})));return function(e,r,n,o,c){return t.apply(this,arguments)}}())}function L(t,e,r){var n=this,o=["nuxti18n"],c=!1;if(void 0!==r&&(o=[],(r=Object(f.s)(r)).options.middleware&&(o=o.concat(r.options.middleware)),t.forEach((function(t){t.options.middleware&&(o=o.concat(t.options.middleware))}))),o=o.map((function(t){return"function"==typeof t?t:("function"!=typeof h.a[t]&&(c=!0,n.error({statusCode:500,message:"Unknown middleware "+t})),h.a[t])})),!c)return Object(f.o)(o,e)}function A(t,e,r){return N.apply(this,arguments)}function N(){return(N=Object(n.a)(regeneratorRuntime.mark((function t(e,r,o){var c,l,h,v,m,x,_,k,O,$,P,E,S,R,A,N=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!1!==this._routeChanged||!1!==this._paramChanged||!1!==this._queryChanged){t.next=2;break}return t.abrupt("return",o());case 2:return!1,e===r?(C=[],!0):(c=[],C=Object(f.g)(r,c).map((function(t,i){return Object(f.c)(r.matched[c[i]].path)(r.params)}))),l=!1,h=function(path){r.path===path.path&&N.$loading.finish&&N.$loading.finish(),r.path!==path.path&&N.$loading.pause&&N.$loading.pause(),l||(l=!0,o(path))},t.next=8,Object(f.t)(y,{route:e,from:r,next:h.bind(this)});case 8:if(this._dateLastError=y.nuxt.dateErr,this._hadError=Boolean(y.nuxt.err),v=[],(m=Object(f.g)(e,v)).length){t.next=27;break}return t.next=15,L.call(this,m,y.context);case 15:if(!l){t.next=17;break}return t.abrupt("return");case 17:return x=(d.a.options||d.a).layout,t.next=20,this.loadLayout("function"==typeof x?x.call(d.a,y.context):x);case 20:return _=t.sent,t.next=23,L.call(this,m,y.context,_);case 23:if(!l){t.next=25;break}return t.abrupt("return");case 25:return y.context.error({statusCode:404,message:"This page could not be found"}),t.abrupt("return",o());case 27:return m.forEach((function(t){t._Ctor&&t._Ctor.options&&(t.options.asyncData=t._Ctor.options.asyncData,t.options.fetch=t._Ctor.options.fetch)})),this.setTransitions(j(m,e,r)),t.prev=29,t.next=32,L.call(this,m,y.context);case 32:if(!l){t.next=34;break}return t.abrupt("return");case 34:if(!y.context._errored){t.next=36;break}return t.abrupt("return",o());case 36:return"function"==typeof(k=m[0].options.layout)&&(k=k(y.context)),t.next=40,this.loadLayout(k);case 40:return k=t.sent,t.next=43,L.call(this,m,y.context,k);case 43:if(!l){t.next=45;break}return t.abrupt("return");case 45:if(!y.context._errored){t.next=47;break}return t.abrupt("return",o());case 47:O=!0,t.prev=48,$=w(m),t.prev=50,$.s();case 52:if((P=$.n()).done){t.next=63;break}if("function"==typeof(E=P.value).options.validate){t.next=56;break}return t.abrupt("continue",61);case 56:return t.next=58,E.options.validate(y.context);case 58:if(O=t.sent){t.next=61;break}return t.abrupt("break",63);case 61:t.next=52;break;case 63:t.next=68;break;case 65:t.prev=65,t.t0=t.catch(50),$.e(t.t0);case 68:return t.prev=68,$.f(),t.finish(68);case 71:t.next=77;break;case 73:return t.prev=73,t.t1=t.catch(48),this.error({statusCode:t.t1.statusCode||"500",message:t.t1.message}),t.abrupt("return",o());case 77:if(O){t.next=80;break}return this.error({statusCode:404,message:"This page could not be found"}),t.abrupt("return",o());case 80:return t.next=82,Promise.all(m.map(function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n,i){var o,c,l,h,d,m,w,x,p;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(n._path=Object(f.c)(e.matched[v[i]].path)(e.params),n._dataRefresh=!1,o=n._path!==C[i],N._routeChanged&&o?n._dataRefresh=!0:N._paramChanged&&o?(c=n.options.watchParam,n._dataRefresh=!1!==c):N._queryChanged&&(!0===(l=n.options.watchQuery)?n._dataRefresh=!0:Array.isArray(l)?n._dataRefresh=l.some((function(t){return N._diffQuery[t]})):"function"==typeof l&&(S||(S=Object(f.h)(e)),n._dataRefresh=l.apply(S[i],[e.query,r.query]))),N._hadError||!N._isMounted||n._dataRefresh){t.next=6;break}return t.abrupt("return");case 6:return h=[],d=n.options.asyncData&&"function"==typeof n.options.asyncData,m=Boolean(n.options.fetch)&&n.options.fetch.length,w=d&&m?30:45,d&&((x=Object(f.q)(n.options.asyncData,y.context)).then((function(t){Object(f.b)(n,t),N.$loading.increase&&N.$loading.increase(w)})),h.push(x)),N.$loading.manual=!1===n.options.loading,m&&((p=n.options.fetch(y.context))&&(p instanceof Promise||"function"==typeof p.then)||(p=Promise.resolve(p)),p.then((function(t){N.$loading.increase&&N.$loading.increase(w)})),h.push(p)),t.abrupt("return",Promise.all(h));case 14:case"end":return t.stop()}}),t)})));return function(e,r){return t.apply(this,arguments)}}()));case 82:l||(this.$loading.finish&&!this.$loading.manual&&this.$loading.finish(),o()),t.next=99;break;case 85:if(t.prev=85,t.t2=t.catch(29),"ERR_REDIRECT"!==(R=t.t2||{}).message){t.next=90;break}return t.abrupt("return",this.$nuxt.$emit("routeChanged",e,r,R));case 90:return C=[],Object(f.k)(R),"function"==typeof(A=(d.a.options||d.a).layout)&&(A=A(y.context)),t.next=96,this.loadLayout(A);case 96:this.error(R),this.$nuxt.$emit("routeChanged",e,r,R),o();case 99:case"end":return t.stop()}}),t,this,[[29,85],[48,73],[50,65,68,71]])})))).apply(this,arguments)}function D(t,r){Object(f.d)(t,(function(t,r,n,o){return"object"!==Object(e.a)(t)||t.options||((t=c.a.extend(t))._Ctor=t,n.components[o]=t),t}))}function T(t){var e=Boolean(this.$options.nuxt.err);this._hadError&&this._dateLastError===this.$options.nuxt.dateErr&&(e=!1);var r=e?(d.a.options||d.a).layout:t.matched[0].components.default.options.layout;"function"==typeof r&&(r=r(y.context)),this.setLayout(r)}function I(t){t._hadError&&t._dateLastError===t.$options.nuxt.dateErr&&t.error()}function z(t,e){var r=this;if(!1!==this._routeChanged||!1!==this._paramChanged||!1!==this._queryChanged){var n=Object(f.h)(t),o=Object(f.g)(t),l=!1;c.a.nextTick((function(){n.forEach((function(t,i){if(t&&!t._isDestroyed&&t.constructor._dataRefresh&&o[i]===t.constructor&&!0!==t.$vnode.data.keepAlive&&"function"==typeof t.constructor.options.data){var e=t.constructor.options.data.call(t);for(var r in e)c.a.set(t.$data,r,e[r]);l=!0}})),l&&window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")})),I(r)}))}}function M(t){window.onNuxtReadyCbs.forEach((function(e){"function"==typeof e&&e(t)})),"function"==typeof window._onNuxtLoaded&&window._onNuxtLoaded(t),_.afterEach((function(e,r){c.a.nextTick((function(){return t.$nuxt.$emit("routeChanged",e,r)}))}))}function B(){return(B=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return y=e.app,_=e.router,e.store,r=new c.a(y),n=k.layout||"default",t.next=7,r.loadLayout(n);case 7:return r.setLayout(n),o=function(){r.$mount("#__nuxt"),_.afterEach(D),_.afterEach(T.bind(r)),_.afterEach(z.bind(r)),c.a.nextTick((function(){M(r)}))},t.next=11,Promise.all(R(y.context.route));case 11:if(l=t.sent,r.setTransitions=r.$options.nuxt.setTransitions.bind(r),l.length&&(r.setTransitions(j(l,_.currentRoute)),C=_.currentRoute.matched.map((function(t){return Object(f.c)(t.path)(_.currentRoute.params)}))),r.$loading={},k.error&&r.error(k.error),_.beforeEach(P.bind(r)),_.beforeEach(A.bind(r)),!k.serverRendered||!Object(f.n)(k.routePath,r.context.route.path)){t.next=20;break}return t.abrupt("return",o());case 20:return h=function(){D(_.currentRoute,_.currentRoute),T.call(r,_.currentRoute),I(r),o()},t.next=23,new Promise((function(t){return setTimeout(t,0)}));case 23:A.call(r,_.currentRoute,_.currentRoute,(function(path){if(path){var t=_.afterEach((function(e,r){t(),h()}));_.push(path,void 0,(function(t){t&&$(t)}))}else h()}));case 24:case"end":return t.stop()}}),t)})))).apply(this,arguments)}Object(d.b)(null,k.config).then((function(t){return B.apply(this,arguments)})).catch($)}.call(this,r(44))},172:function(t,e,r){"use strict";r(124)},173:function(t,e,r){"use strict";r(125)},177:function(t,e,r){"use strict";r(126)},178:function(t,e,r){"use strict";r(127)},179:function(t,e,r){"use strict";r(128)},180:function(t,e,r){"use strict";r(129)},181:function(t,e,r){"use strict";r.r(e),r.d(e,"state",(function(){return f})),r.d(e,"mutations",(function(){return d})),r.d(e,"actions",(function(){return m}));var n=r(134),o=r.n(n),c=r(135),l=r.n(c),h=r(102),f=function(){return{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:o.a,en:l.a},config:h.a}},d={toggle:function(t,e){t[e]=!t[e]},setDocVersion:function(t,e){t.docVersion=e},setGhVersion:function(t,e){t.ghVersion=e},setHomepage:function(t,e){t.homepage=e},setFilled:function(t){t.filled=!0},setAdBlocked:function(t,e){t.adBlocked=e},setFocusMode:function(t,e){t.focusMode=e}},v=null,m={focusMode:function(t){var e=t.commit;v||(v=setTimeout((function(){return e("setFocusMode",!0)}),1300))},clearFocusMode:function(t){var e=t.commit;v&&(clearTimeout(v),v=null),e("setFocusMode",!1)}}},26:function(t,e,r){"use strict";r.d(e,"b",(function(){return he})),r.d(e,"a",(function(){return D}));r(35),r(17),r(25),r(42),r(43);var n=r(2),o=r(11),c=(r(21),r(20),r(22),r(16),r(36),r(0)),l=r.n(c),h=r(59),f=r(58),d=r(98),v=r.n(d),m=r(45),w=r.n(m),x=r(99),y=r(18),_=r(1);function C(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function k(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?C(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):C(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}var O=function(){return Object(_.m)(r.e(3).then(r.bind(null,424)))},$=function(){return Object(_.m)(Promise.all([r.e(6),r.e(2)]).then(r.bind(null,423)))},j=function(){};l.a.use(x.a);var P={mode:"history",base:"/handbook/",linkActiveClass:"nuxt-link-active",linkExactActiveClass:"nuxt-link-exact-active",scrollBehavior:function(t){if(t.hash){var e=t.hash.substr(1),r=document.getElementById(decodeURIComponent(e))||document.getElementById(e);r&&r.scrollIntoView&&r.scrollIntoView({behavior:"smooth"})}},routes:[{path:"/en",component:O,name:"index___en"},{path:"/zh",component:O,name:"index___zh"},{path:"/zh/*",component:$,name:"all___zh"},{path:"/en/*",component:$,name:"all___en"},{path:"/",component:O,name:"index"},{path:"/*",component:$,name:"all"}],fallback:!1};function E(t,e){var base=e._app&&e._app.basePath||P.base,r=new x.a(k(k({},P),{},{base:base})),n=r.push;r.push=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:j,r=arguments.length>2?arguments[2]:void 0;return n.call(this,t,e,r)};var o=r.resolve.bind(r);return r.resolve=function(t,e,r){return"string"==typeof t&&(t=Object(y.c)(t)),o(t,e,r)},r}var S={name:"NuxtChild",functional:!0,props:{nuxtChildKey:{type:String,default:""},keepAlive:Boolean,keepAliveProps:{type:Object,default:void 0}},render:function(t,e){var r=e.parent,data=e.data,n=e.props,o=r.$createElement;data.nuxtChild=!0;for(var c=r,l=r.$nuxt.nuxt.transitions,h=r.$nuxt.nuxt.defaultTransition,f=0;r;)r.$vnode&&r.$vnode.data.nuxtChild&&f++,r=r.$parent;data.nuxtChildDepth=f;var d=l[f]||h,v={};R.forEach((function(t){void 0!==d[t]&&(v[t]=d[t])}));var m={};L.forEach((function(t){"function"==typeof d[t]&&(m[t]=d[t].bind(c))}));var w=m.beforeEnter;if(m.beforeEnter=function(t){if(window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")})),w)return w.call(c,t)},!1===d.css){var x=m.leave;(!x||x.length<2)&&(m.leave=function(t,e){x&&x.call(c,t),c.$nextTick(e)})}var y=o("routerView",data);return n.keepAlive&&(y=o("keep-alive",{props:n.keepAliveProps},[y])),o("transition",{props:v,on:m},[y])}},R=["name","mode","appear","css","type","duration","enterClass","leaveClass","appearClass","enterActiveClass","enterActiveClass","leaveActiveClass","appearActiveClass","enterToClass","leaveToClass","appearToClass"],L=["beforeEnter","enter","afterEnter","enterCancelled","beforeLeave","leave","afterLeave","leaveCancelled","beforeAppear","appear","afterAppear","appearCancelled"],A={name:"NuxtError",props:{error:{type:Object,default:null}},computed:{statusCode:function(){return this.error&&this.error.statusCode||500},message:function(){return this.error.message||"Error"}},head:function(){return{title:this.message,meta:[{name:"viewport",content:"width=device-width,initial-scale=1.0,minimum-scale=1.0"}]}}},N=(r(172),r(7)),D=Object(N.a)(A,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"__nuxt-error-page"},[r("div",{staticClass:"error"},[r("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"90",height:"90",fill:"#DBE1EC",viewBox:"0 0 48 48"}},[r("path",{attrs:{d:"M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"}})]),t._v(" "),r("div",{staticClass:"title"},[t._v(t._s(t.message))]),t._v(" "),404===t.statusCode?r("p",{staticClass:"description"},[void 0===t.$route?r("a",{staticClass:"error-link",attrs:{href:"/"}}):r("NuxtLink",{staticClass:"error-link",attrs:{to:"/"}},[t._v("Back to the home page")])],1):t._e(),t._v(" "),t._m(0)])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"logo"},[r("a",{attrs:{href:"https://nuxtjs.org",target:"_blank",rel:"noopener"}},[t._v("Nuxt")])])}],!1,null,null,null).exports,T=r(3),I=(r(95),r(96),{name:"Nuxt",components:{NuxtChild:S,NuxtError:D},props:{nuxtChildKey:{type:String,default:void 0},keepAlive:Boolean,keepAliveProps:{type:Object,default:void 0},name:{type:String,default:"default"}},errorCaptured:function(t){this.displayingNuxtError&&(this.errorFromNuxtError=t,this.$forceUpdate())},computed:{routerViewKey:function(){if(void 0!==this.nuxtChildKey||this.$route.matched.length>1)return this.nuxtChildKey||Object(_.c)(this.$route.matched[0].path)(this.$route.params);var t=Object(T.a)(this.$route.matched,1)[0];if(!t)return this.$route.path;var e=t.components.default;if(e&&e.options){var r=e.options;if(r.key)return"function"==typeof r.key?r.key(this.$route):r.key}return/\/$/.test(t.path)?this.$route.path:this.$route.path.replace(/\/$/,"")}},beforeCreate:function(){l.a.util.defineReactive(this,"nuxt",this.$root.$options.nuxt)},render:function(t){var e=this;return this.nuxt.err?this.errorFromNuxtError?(this.$nextTick((function(){return e.errorFromNuxtError=!1})),t("div",{},[t("h2","An error occurred while showing the error page"),t("p","Unfortunately an error occurred and while showing the error page another error occurred"),t("p","Error details: ".concat(this.errorFromNuxtError.toString())),t("nuxt-link",{props:{to:"/"}},"Go back to home")])):(this.displayingNuxtError=!0,this.$nextTick((function(){return e.displayingNuxtError=!1})),t(D,{props:{error:this.nuxt.err}})):t("NuxtChild",{key:this.routerViewKey,props:this.$props})}}),z=(r(23),r(34),r(27),r(28),{name:"NuxtLoading",data:function(){return{percent:0,show:!1,canSucceed:!0,reversed:!1,skipTimerCount:0,rtl:!1,throttle:200,duration:5e3,continuous:!1}},computed:{left:function(){return!(!this.continuous&&!this.rtl)&&(this.rtl?this.reversed?"0px":"auto":this.reversed?"auto":"0px")}},beforeDestroy:function(){this.clear()},methods:{clear:function(){clearInterval(this._timer),clearTimeout(this._throttle),this._timer=null},start:function(){var t=this;return this.clear(),this.percent=0,this.reversed=!1,this.skipTimerCount=0,this.canSucceed=!0,this.throttle?this._throttle=setTimeout((function(){return t.startTimer()}),this.throttle):this.startTimer(),this},set:function(t){return this.show=!0,this.canSucceed=!0,this.percent=Math.min(100,Math.max(0,Math.floor(t))),this},get:function(){return this.percent},increase:function(t){return this.percent=Math.min(100,Math.floor(this.percent+t)),this},decrease:function(t){return this.percent=Math.max(0,Math.floor(this.percent-t)),this},pause:function(){return clearInterval(this._timer),this},resume:function(){return this.startTimer(),this},finish:function(){return this.percent=this.reversed?0:100,this.hide(),this},hide:function(){var t=this;return this.clear(),setTimeout((function(){t.show=!1,t.$nextTick((function(){t.percent=0,t.reversed=!1}))}),500),this},fail:function(t){return this.canSucceed=!1,this},startTimer:function(){var t=this;this.show||(this.show=!0),void 0===this._cut&&(this._cut=1e4/Math.floor(this.duration)),this._timer=setInterval((function(){t.skipTimerCount>0?t.skipTimerCount--:(t.reversed?t.decrease(t._cut):t.increase(t._cut),t.continuous&&(t.percent>=100||t.percent<=0)&&(t.skipTimerCount=1,t.reversed=!t.reversed))}),100)}},render:function(t){var e=t(!1);return this.show&&(e=t("div",{staticClass:"nuxt-progress",class:{"nuxt-progress-notransition":this.skipTimerCount>0,"nuxt-progress-failed":!this.canSucceed},style:{width:this.percent+"%",left:this.left}})),e}}),M=(r(173),Object(N.a)(z,undefined,undefined,!1,null,null,null).exports),B=(r(174),r(133)),F=r.n(B),U=(r(140),r(70),l.a.extend({name:"SidebarNavItem",props:{item:{type:Object},parentPath:{type:String},level:{type:Number}},computed:{link:function(){return"/"+this.$i18n.locale+"/"+this.path}},data:function(){var path=this.parentPath?this.parentPath+"/"+this.item.dir:this.item.dir,t=(this.$route.params.post+"").startsWith(path);return{get path(){return path},collapsed:this.level>=2&&!t}},methods:{toggleCollapsed:function(){this.collapsed=!this.collapsed}}})),G=(r(177),Object(N.a)(U,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return t.item.draft?t._e():r("li",{staticClass:"nav-item"},[t.item.children?t.level>1?r("a",{staticClass:"nav-link",on:{click:t.toggleCollapsed}},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))]),t._v(" "),r("span",{class:["glyphicon",t.collapsed?"glyphicon-menu-down":"glyphicon-menu-up"]})]):r("div",{staticClass:"nav-link"},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))])]):r("nuxt-link",{staticClass:"nav-link",attrs:{to:t.link}},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))])]),t._v(" "),r("ul",{directives:[{name:"show",rawName:"v-show",value:!t.item.draft&&t.item.children&&!t.collapsed,expression:"!item.draft && item.children && !collapsed"}],class:["nav","bd-sidenav","level"+t.level]},t._l(t.item.children,(function(e){return r("SidebarNavItem",{key:e.dir,attrs:{parentPath:t.path,item:e,level:t.level+1}})})),1)],1)}),[],!1,null,null,null).exports),H=l.a.extend({components:{SidebarNavItem:G},data:function(){return{sidebarOpen:!1}},watch:{$route:function(t,e){this.sidebarOpen=!1}},mounted:function(){var t=this.$el.querySelector(".actived");t&&F()(t,{time:0,align:{top:0,topOffset:300},isScrollable:function(t){return!!t.className&&t.className.indexOf("bd-sidebar")>=0}}),docsearch({apiKey:"6ade5f1ff34e94690f9ea38cddcc2f55",indexName:"apache_echarts",inputSelector:"#handbook-search-intput",algoliaOptions:{facetFilters:["lang:".concat(this.$i18n.locale)]},debug:!1})}}),X=(r(178),Object(N.a)(H,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{class:"bd-sidebar col-sm-3 col-md-2 "+(t.sidebarOpen?"":"closed")},[r("div",{staticClass:"sidebar-search"},[r("input",{attrs:{id:"handbook-search-intput",type:"search",placeholder:t.$t("searchHandbook")}}),t._v(" "),r("div",{staticClass:"search-icon"},[r("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[r("path",{attrs:{"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"}})])])]),t._v(" "),r("div",{staticClass:"bd-docs-nav"},[r("ul",{staticClass:"nav bd-sidenav nav-root level0"},t._l(t.$store.state.posts[this.$i18n.locale],(function(t){return r("SidebarNavItem",{key:t.dir,attrs:{item:t,parentPath:"",level:1}})})),1)]),t._v(" "),r("div",{staticClass:"open-sidebar",on:{click:function(e){t.sidebarOpen=!t.sidebarOpen}}},[t.sidebarOpen?r("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[r("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}})]):r("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[r("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"}})])])])}),[],!1,null,null,null).exports),K=Object(N.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("nav",{staticClass:"navbar navbar-default navbar-fixed-top",attrs:{role:"navigation"}},[r("div",{staticClass:"container-fluid"},[t._m(0),r("div",{staticClass:"collapse navbar-collapse",attrs:{id:"navbar-collapse"}},[r("ul",{staticClass:"nav navbar-nav navbar-left"},[t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),r("li",{attrs:{id:"nav-contribute"}},[t._m(6),r("ul",{staticClass:"dropdown-menu"},[t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts",target:"_blank"}},[t._v("源码(GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts/issues",target:"_blank"}},[t._v("Issues(GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])])])]),r("li",{attrs:{id:"nav-others"}},[t._m(13),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://www.apache.org/",target:"_blank"}},[t._v("Apache Software Foundation"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),t._m(14),r("li",[r("a",{attrs:{href:"https://www.apache.org/licenses/",target:"_blank"}},[t._v("版权"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/events/current-event",target:"_blank"}},[t._v("活动"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/sponsorship.html",target:"_blank"}},[t._v("捐赠"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/thanks.html",target:"_blank"}},[t._v("鸣谢"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])])])])]),t._m(15)])])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"navbar-header"},[r("button",{staticClass:"navbar-toggle collapsed",attrs:{type:"button","data-toggle":"collapse","data-target":"#navbar-collapse","aria-expanded":"false"}},[r("span",{staticClass:"sr-only"},[t._v("Toggle navigation")]),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"})]),r("a",{staticClass:"navbar-brand",attrs:{href:"https://echarts.apache.org/zh/index.html"}},[r("img",{staticClass:"navbar-logo",attrs:{src:"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1",alt:"echarts logo"}})])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-index"}},[r("a",{attrs:{href:"https://echarts.apache.org/zh/index.html"}},[t._v("首页")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-doc"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("文档"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/feature.html"}},[t._v("特性")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/handbook/zh/get-started/"}},[t._v("使用手册"),r("span",{staticClass:"new"},[t._v("new")])])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/api.html"}},[t._v("API")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/option.html"}},[t._v("配置项手册")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/changelog.html"}},[t._v("版本记录")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/faq.html"}},[t._v("常见问题")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide"}},[t._v("v5 升级指南"),r("span",{staticClass:"new"},[t._v("new")])])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-download"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("下载"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download.html"}},[t._v("下载")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download-theme.html"}},[t._v("主题下载")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download-extension.html"}},[t._v("扩展下载")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-examples"}},[r("a",{attrs:{href:"https://echarts.apache.org/examples/zh/index.html"}},[t._v("示例")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-resources"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("资源"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/spreadsheet.html"}},[t._v("表格工具")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/theme-builder.html"}},[t._v("主题构建工具")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/cheat-sheet.html"}},[t._v("术语速查手册")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/resources.html"}},[t._v("更多资源")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("社区"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/events.html"}},[t._v("活动")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/committers.html"}},[t._v("贡献者列表")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/maillist.html"}},[t._v("邮件列表")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/contributing.html"}},[t._v("如何贡献")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/dependencies.html"}},[t._v("依赖项")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/coding-standard.html"}},[t._v("代码规范")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("ASF"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/security.html"}},[t._v("安全")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ul",{staticClass:"nav navbar-nav navbar-right"},[r("li",{attrs:{id:"nav-homeen"}},[r("a",{attrs:{href:"javascript:;",onclick:"changeLang('en')"}},[t._v("EN")])])])}],!1,null,null,null).exports,V=Object(N.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("nav",{staticClass:"navbar navbar-default navbar-fixed-top",attrs:{role:"navigation"}},[r("div",{staticClass:"container-fluid"},[t._m(0),r("div",{staticClass:"collapse navbar-collapse",attrs:{id:"navbar-collapse"}},[r("ul",{staticClass:"nav navbar-nav navbar-left"},[t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),r("li",{attrs:{id:"nav-contribute"}},[t._m(6),r("ul",{staticClass:"dropdown-menu"},[t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts",target:"_blank"}},[t._v("Source Code (GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts/issues",target:"_blank"}},[t._v("Issues (GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])])])]),r("li",{attrs:{id:"nav-others"}},[t._m(13),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://www.apache.org/",target:"_blank"}},[t._v("Apache Software Foundation"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),t._m(14),r("li",[r("a",{attrs:{href:"https://www.apache.org/licenses/",target:"_blank"}},[t._v("License"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/events/current-event",target:"_blank"}},[t._v("Events"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/sponsorship.html",target:"_blank"}},[t._v("Sponsorship"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/thanks.html",target:"_blank"}},[t._v("Thanks"),r("svg",{staticClass:"icon-external-link",attrs:{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"}},[r("path",{attrs:{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"}}),r("polygon",{attrs:{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"}})])])])])])]),t._m(15)])])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"navbar-header"},[r("button",{staticClass:"navbar-toggle collapsed",attrs:{type:"button","data-toggle":"collapse","data-target":"#navbar-collapse","aria-expanded":"false"}},[r("span",{staticClass:"sr-only"},[t._v("Toggle navigation")]),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"})]),r("a",{staticClass:"navbar-brand",attrs:{href:"https://echarts.apache.org/en/index.html"}},[r("img",{staticClass:"navbar-logo",attrs:{src:"https://echarts.apache.org/en/images/logo.png",alt:"echarts logo"}})])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-index"}},[r("a",{attrs:{href:"https://echarts.apache.org/en/index.html"}},[t._v("Home")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-doc"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Docs"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/feature.html"}},[t._v("Features")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/handbook/en/get-started/"}},[t._v("Handbook"),r("span",{staticClass:"new"},[t._v("new")])])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/api.html"}},[t._v("API")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/option.html"}},[t._v("Chart Configuration")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/changelog.html"}},[t._v("Changelog")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/faq.html"}},[t._v("FAQ")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide"}},[t._v("V5 Upgrade Guide"),r("span",{staticClass:"new"},[t._v("new")])])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-download"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Download"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download.html"}},[t._v("Download")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download-theme.html"}},[t._v("Download Themes")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download-extension.html"}},[t._v("Download Extensions")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-examples"}},[r("a",{attrs:{href:"https://echarts.apache.org/examples/en/index.html"}},[t._v("Examples")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-resources"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Resources"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/spreadsheet.html"}},[t._v("Spread Sheet Tool")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/theme-builder.html"}},[t._v("Theme Builder")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/cheat-sheet.html"}},[t._v("Cheat Sheet")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/resources.html"}},[t._v("More Resources")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Community"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/events.html"}},[t._v("Events")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/committers.html"}},[t._v("Committers")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/maillist.html"}},[t._v("Mailing List")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/contributing.html"}},[t._v("How to Contribute")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/dependencies.html"}},[t._v("Dependencies")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/coding-standard.html"}},[t._v("Code Standard")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("ASF"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/security.html"}},[t._v("Security")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ul",{staticClass:"nav navbar-nav navbar-right"},[r("li",{attrs:{id:"nav-homeen"}},[r("a",{attrs:{href:"javascript:;",onclick:"changeLang('zh')"}},[t._v("中文")])])])}],!1,null,null,null).exports,Q=l.a.extend({components:{},mounted:function(){var t=this.$i18n.locale;window.changeLang=function(){window.location.href=window.location.href.replace("/".concat(t,"/"),"zh"===t?"/en/":"/zh/")}},computed:{navComponent:function(){return"zh"===this.$i18n.locale?K:V}}}),Y=(r(179),{components:{Sidebar:X,Navbar:Object(N.a)(Q,(function(){var t=this,e=t.$createElement;return(t._self._c||e)(t.navComponent,{tag:"div"})}),[],!1,null,null,null).exports},mounted:function(){var t=location.hash;location.hash="",location.hash=t},computed:{},methods:{}}),J=(r(180),Object(N.a)(Y,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",[r("navbar"),t._v(" "),r("div",{staticClass:"page-main"},[r("div",{staticClass:"page-content handbook-content single-page container-fluid row flex-xl-nowrap"},[r("sidebar"),t._v(" "),r("div",{staticClass:"bd-content col-sm-7 pl-sm-2 col-12"},[r("div",{staticClass:"post-content content"},[r("nuxt")],1)])],1),t._v(" "),r("link",{attrs:{rel:"stylesheet",href:"//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"}})])],1)}),[],!1,null,null,null).exports);function W(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return Z(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Z(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function Z(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}var tt={_default:Object(_.s)(J)},et={render:function(t,e){var r=t("NuxtLoading",{ref:"loading"}),n=t(this.layout||"nuxt"),o=t("div",{domProps:{id:"__layout"},key:this.layoutName},[n]),c=t("transition",{props:{name:"layout",mode:"out-in"},on:{beforeEnter:function(t){window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")}))}}},[o]);return t("div",{domProps:{id:"__nuxt"}},[r,c])},data:function(){return{isOnline:!0,layout:null,layoutName:"",nbFetching:0}},beforeCreate:function(){l.a.util.defineReactive(this,"nuxt",this.$options.nuxt)},created:function(){this.$root.$options.$nuxt=this,window.$nuxt=this,this.refreshOnlineStatus(),window.addEventListener("online",this.refreshOnlineStatus),window.addEventListener("offline",this.refreshOnlineStatus),this.error=this.nuxt.error,this.context=this.$options.context},mounted:function(){var t=this;return Object(n.a)(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:t.$loading=t.$refs.loading;case 1:case"end":return e.stop()}}),e)})))()},watch:{"nuxt.err":"errorChanged"},computed:{isOffline:function(){return!this.isOnline},isFetching:function(){return this.nbFetching>0},isPreview:function(){return Boolean(this.$options.previewData)}},methods:{refreshOnlineStatus:function(){void 0===window.navigator.onLine?this.isOnline=!0:this.isOnline=window.navigator.onLine},refresh:function(){var t=this;return Object(n.a)(regeneratorRuntime.mark((function e(){var r,n;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if((r=Object(_.h)(t.$route)).length){e.next=3;break}return e.abrupt("return");case 3:return t.$loading.start(),n=r.map((function(e){var p=[];if(e.$options.fetch&&e.$options.fetch.length&&p.push(Object(_.q)(e.$options.fetch,t.context)),e.$fetch)p.push(e.$fetch());else{var r,n=W(Object(_.e)(e.$vnode.componentInstance));try{for(n.s();!(r=n.n()).done;){var component=r.value;p.push(component.$fetch())}}catch(t){n.e(t)}finally{n.f()}}return e.$options.asyncData&&p.push(Object(_.q)(e.$options.asyncData,t.context).then((function(t){for(var r in t)l.a.set(e.$data,r,t[r])}))),Promise.all(p)})),e.prev=5,e.next=8,Promise.all(n);case 8:e.next=15;break;case 10:e.prev=10,e.t0=e.catch(5),t.$loading.fail(e.t0),Object(_.k)(e.t0),t.error(e.t0);case 15:t.$loading.finish();case 16:case"end":return e.stop()}}),e,null,[[5,10]])})))()},errorChanged:function(){if(this.nuxt.err){this.$loading&&(this.$loading.fail&&this.$loading.fail(this.nuxt.err),this.$loading.finish&&this.$loading.finish());var t=(D.options||D).layout;"function"==typeof t&&(t=t(this.context)),this.setLayout(t)}},setLayout:function(t){return t&&tt["_"+t]||(t="default"),this.layoutName=t,this.layout=tt["_"+t],this.layout},loadLayout:function(t){return t&&tt["_"+t]||(t="default"),Promise.resolve(tt["_"+t])}},components:{NuxtLoading:M}};l.a.use(h.a);var nt={};(nt=function(t,e){if((t=t.default||t).commit)throw new Error("[nuxt] ".concat(e," should export a method that returns a Vuex instance."));return"function"!=typeof t&&(t=Object.assign({},t)),function(t,e){if(t.state&&"function"!=typeof t.state){console.warn("'state' should be a method that returns an object in ".concat(e));var r=Object.assign({},t.state);t=Object.assign({},t,{state:function(){return r}})}return t}(t,e)}(r(181),"store/index.js")).modules=nt.modules||{};var at=nt instanceof Function?nt:function(){return new h.a.Store(Object.assign({strict:!1},nt))};var ot=r(138),it=(r(41),r(37),r(71),r(56)),st=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,c,l,h,f;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=e.app,!e.isHMR){t.next=3;break}return t.abrupt("return");case 3:return t.next=5,r.i18n.__onNavigate(e.route);case 5:n=t.sent,o=Object(T.a)(n,3),c=o[0],l=o[1],h=o[2],c&&l&&(f=h?e.route.query:void 0,e.redirect(c,l,f));case 11:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}();it.a.nuxti18n=st;var ct={COMPONENT_OPTIONS_KEY:"nuxtI18n",STRATEGIES:{PREFIX:"prefix",PREFIX_EXCEPT_DEFAULT:"prefix_except_default",PREFIX_AND_DEFAULT:"prefix_and_default",NO_PREFIX:"no_prefix"}},lt=!0,ut=void 0,ht={vueI18n:{fallbackLocale:"en",messages:{en:{inThisPage:"In This Page",searchHandbook:"Search Handbook"},zh:{inThisPage:"本页目录",searchHandbook:"搜索手册"}}},vueI18nLoader:!1,locales:["en","zh"],defaultLocale:"en",defaultDirection:"ltr",routesNameSeparator:"___",defaultLocaleRouteNameSuffix:"default",strategy:"prefix",lazy:!1,langDir:null,rootRedirect:null,detectBrowserLanguage:{alwaysRedirect:!1,cookieCrossOrigin:!1,cookieDomain:null,cookieKey:"i18n_redirected",cookieSecure:!1,fallbackLocale:"",onlyOnNoPrefix:!1,onlyOnRoot:!0,useCookie:!0},differentDomains:!1,seo:!1,baseUrl:"",vuex:{moduleName:"i18n",syncLocale:!1,syncMessages:!1,syncRouteParams:!0},parsePages:!0,pages:{},skipSettingLocaleOnNavigate:!1,beforeLanguageSwitch:function(){return null},onBeforeLanguageSwitch:function(){},onLanguageSwitched:function(){return null},normalizedLocales:[{code:"en"},{code:"zh"}],localeCodes:["en","zh"]},ft=r(15),pt=(r(97),r(103),r(60),r(122),r(182),r(100)),vt=r.n(pt);function mt(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function gt(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?mt(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):mt(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function bt(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return wt(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return wt(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function wt(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function xt(text){return"[nuxt-i18n] ".concat(text)}function yt(t,e){var r,n=[],o=[],c=bt(t);try{for(c.s();!(r=c.n()).done;){var l=r.value,code=l.code,h=l.iso||code;o.push({code:code,iso:h})}}catch(t){c.e(t)}finally{c.f()}var f,d=bt(e.entries());try{var v=function(){var t=Object(T.a)(f.value,2),r=t[0],c=t[1],l=o.find((function(t){return t.iso.toLowerCase()===c.toLowerCase()}));if(l)return n.push({code:l.code,score:1-r/e.length}),"break"};for(d.s();!(f=d.n()).done;){if("break"===v())break}}catch(t){d.e(t)}finally{d.f()}var m,w=bt(e.entries());try{var x=function(){var t=Object(T.a)(m.value,2),r=t[0],c=t[1].split("-")[0].toLowerCase(),l=o.find((function(t){return t.iso.split("-")[0].toLowerCase()===c}));if(l)return n.push({code:l.code,score:.999-r/e.length}),"break"};for(w.s();!(m=w.n()).done;){if("break"===x())break}}catch(t){w.e(t)}finally{w.f()}return n.length>1&&n.sort((function(t,e){return t.score===e.score?e.code.length-t.code.length:e.score-t.score})),n.length?n[0].code:void 0}function _t(t,e,r,n){var o=n.differentDomains,c=n.normalizedLocales;if("function"==typeof t)return t(e);if(o&&r){var l=Ct(r,e.req,{normalizedLocales:c});if(l)return l}return t}function Ct(t,e,r){var n,o=r.normalizedLocales.find((function(e){return e.code===t}));if(o&&o.domain)return n=window.location.protocol.split(":")[0],"".concat(n,"://").concat(o.domain);console.warn(xt("Could not find domain name for locale ".concat(t)))}function kt(t,e){var r;if(r=window.location.host){var n=t.find((function(t){return t.domain===r}));if(n)return n.code}return""}function Ot(t){return new RegExp("^/(".concat(t.join("|"),")(?:/|$)"),"i")}function $t(t,e){var r=e.routesNameSeparator,n=e.defaultLocaleRouteNameSuffix,o="(".concat(t.join("|"),")"),c="(?:".concat(r).concat(n,")?"),l=new RegExp("".concat(r).concat(o).concat(c,"$"),"i"),h=Ot(t);return function(t){if(t.name){var e=t.name.match(l);if(e&&e.length>1)return e[1]}else if(t.path){var r=t.path.match(h);if(r&&r.length>1)return r[1]}return""}}function jt(t,e){var r,n=e.useCookie,o=e.cookieKey,c=e.localeCodes;if(n&&((r=vt.a.get(o))&&c.includes(r)))return r}function Pt(t,e,r){var n=r.useCookie,o=r.cookieDomain,c=r.cookieKey,l=r.cookieSecure,h=r.cookieCrossOrigin;if(n){var f=new Date,d={expires:new Date(f.setDate(f.getDate()+365)),path:"/",sameSite:h?"none":"lax",secure:h||l};o&&(d.domain=o),vt.a.set(c,t,d)}}function Et(t,e,r){var n={namespaced:!0,state:function(){return gt(gt(gt({},e.syncLocale?{locale:""}:{}),e.syncMessages?{messages:{}}:{}),e.syncRouteParams?{routeParams:{}}:{})},actions:gt(gt(gt({},e.syncLocale?{setLocale:function(t,e){(0,t.commit)("setLocale",e)}}:{}),e.syncMessages?{setMessages:function(t,e){(0,t.commit)("setMessages",e)}}:{}),e.syncRouteParams?{setRouteParams:function(t,e){(0,t.commit)("setRouteParams",e)}}:{}),mutations:gt(gt(gt({},e.syncLocale?{setLocale:function(t,e){t.locale=e}}:{}),e.syncMessages?{setMessages:function(t,e){t.messages=e}}:{}),e.syncRouteParams?{setRouteParams:function(t,e){t.routeParams=e}}:{}),getters:gt({},e.syncRouteParams?{localeRouteParams:function(t){var e=t.routeParams;return function(t){return e&&e[t]||{}}}}:{})};t.registerModule(e.moduleName,n,{preserveState:!!t.state[e.moduleName]})}function St(t){return Rt.apply(this,arguments)}function Rt(){return(Rt=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,c=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=c.length>1&&void 0!==c[1]?c[1]:null,n=c.length>2&&void 0!==c[2]?c[2]:null,!(o=c.length>3?c[3]:void 0)||!e){t.next=10;break}if(null===r||!o.syncLocale){t.next=7;break}return t.next=7,e.dispatch(o.moduleName+"/setLocale",r);case 7:if(null===n||!o.syncMessages){t.next=10;break}return t.next=10,e.dispatch(o.moduleName+"/setMessages",n);case 10:case"end":return t.stop()}}),t)})))).apply(this,arguments)}var Lt=["params"];function At(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function Nt(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?At(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):At(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function Dt(t,e){var r=zt.call(this,t,e);return r?r.route.fullPath:""}function Tt(t,e){var r=zt.call(this,t,e);return r?r.route:void 0}function It(t,e){var r=zt.call(this,t,e);return r?r.location:void 0}function zt(t,e){if(t){var r=this.i18n;if(e=e||r.locale){"string"==typeof t&&(t="/"===t[0]?{path:t}:{name:t});var n=Object.assign({},t);if(n.path&&!n.name){var o=this.router.resolve(n).route,c=this.getRouteBaseName(o);if(c)n={name:Ft(c,e),params:o.params,query:o.query,hash:o.hash};else!(e===ht.defaultLocale&&[ct.STRATEGIES.PREFIX_EXCEPT_DEFAULT,ct.STRATEGIES.PREFIX_AND_DEFAULT].includes(ht.strategy)||ht.strategy===ct.STRATEGIES.NO_PREFIX||r.differentDomains)&&(n.path="/".concat(e).concat(n.path)),n.path=n.path.replace(/\/+$/,"")+(ut?"/":"")||"/"}else{n.name||n.path||(n.name=this.getRouteBaseName()),n.name=Ft(n.name,e);var l=n.params;l&&void 0===l[0]&&l.pathMatch&&(l[0]=l.pathMatch)}var h=this.router.resolve(n);return h.route.name?h:this.router.resolve(t)}}}function Mt(t){var e=this.getRouteBaseName();if(!e)return"";var r=this.i18n,n=this.route,o=this.store,c=n.params,l=Object(ot.a)(n,Lt),h={};ht.vuex&&ht.vuex.syncRouteParams&&o&&(h=o.getters["".concat(ht.vuex.moduleName,"/localeRouteParams")](t));var f=Object.assign({},l,{name:e,params:Nt(Nt(Nt({},c),h),{},{0:c.pathMatch})}),path=this.localePath(f,t);if(r.differentDomains){var d={differentDomains:r.differentDomains,normalizedLocales:ht.normalizedLocales},v=Ct(t,this.req,d);v&&(path=v+path)}return path}function Bt(t){var e=void 0!==t?t:this.route;if(e&&e.name)return e.name.split(ht.routesNameSeparator)[0]}function Ft(t,e){var r=t+(ht.strategy===ct.STRATEGIES.NO_PREFIX?"":ht.routesNameSeparator+e);return e===ht.defaultLocale&&ht.strategy===ct.STRATEGIES.PREFIX_AND_DEFAULT&&(r+=ht.routesNameSeparator+ht.defaultLocaleRouteNameSuffix),r}var Ut=function(t){return function(){var e={getRouteBaseName:this.getRouteBaseName,i18n:this.$i18n,localePath:this.localePath,localeRoute:this.localeRoute,localeLocation:this.localeLocation,req:null,route:this.$route,router:this.$router,store:this.$store};return t.call.apply(t,[e].concat(Array.prototype.slice.call(arguments)))}},qt=function(t,e){return function(){var r=t.app,n=(t.req,t.route),o=t.store,c={getRouteBaseName:r.getRouteBaseName,i18n:r.i18n,localePath:r.localePath,localeLocation:r.localeLocation,localeRoute:r.localeRoute,req:null,route:n,router:r.router,store:o};return e.call.apply(e,[c].concat(Array.prototype.slice.call(arguments)))}},Gt={install:function(t){t.mixin({methods:{localePath:Ut(Dt),localeRoute:Ut(Tt),localeLocation:Ut(It),switchLocalePath:Ut(Mt),getRouteBaseName:Ut(Bt)}})}},Ht=function(t){l.a.use(Gt);var e=t.app,r=t.store;e.localePath=t.localePath=qt(t,Dt),e.localeRoute=t.localeRoute=qt(t,Tt),e.localeLocation=t.localeLocation=qt(t,It),e.switchLocalePath=t.switchLocalePath=qt(t,Mt),e.getRouteBaseName=t.getRouteBaseName=qt(t,Bt),r&&(r.localePath=e.localePath,r.localeRoute=e.localeRoute,r.localeLocation=e.localeLocation,r.switchLocalePath=e.switchLocalePath,r.getRouteBaseName=e.getRouteBaseName)},Xt=r(101),Kt=r(137);r(183);function Vt(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function Qt(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?Vt(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):Vt(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function Yt(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return Jt(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Jt(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function Jt(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function Wt(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.addDirAttribute,r=void 0===e||e,n=t.addSeoAttributes,o=void 0!==n&&n;if(!this.$i18n)return{};var c={htmlAttrs:{},link:[],meta:[]},l=this.$i18n.localeProperties,h=l.iso,d=l.dir||ht.defaultDirection;if(r&&(c.htmlAttrs.dir=d),o&&(f.a.hasMetaInfo?f.a.hasMetaInfo(this):this._hasMetaInfo)&&this.$i18n.locale&&this.$i18n.locales&&!1!==this.$options[ct.COMPONENT_OPTIONS_KEY]&&(!this.$options[ct.COMPONENT_OPTIONS_KEY]||!1!==this.$options[ct.COMPONENT_OPTIONS_KEY].seo)){h&&(c.htmlAttrs.lang=h);var v=this.$i18n.locales;m.bind(this)(v,this.$i18n.__baseUrl,c.link),w.bind(this)(this.$i18n.__baseUrl,c.link),x.bind(this)(l,h,c.meta),y.bind(this)(v,h,c.meta)}function m(t,e,link){if(ht.strategy!==ct.STRATEGIES.NO_PREFIX){var r,n=new Map,o=Yt(t);try{for(o.s();!(r=o.n()).done;){var c=r.value,l=c.iso;if(l){var h=l.split("-"),f=Object(T.a)(h,2),d=f[0],v=f[1];d&&v&&(c.isCatchallLocale||!n.has(d))&&n.set(d,c),n.set(l,c)}else console.warn(xt("Locale ISO code is required to generate alternate link"))}}catch(t){o.e(t)}finally{o.f()}var m,w=Yt(n.entries());try{for(w.s();!(m=w.n()).done;){var x=Object(T.a)(m.value,2),y=x[0],_=x[1],k=this.switchLocalePath(_.code);k&&link.push({hid:"i18n-alt-".concat(y),rel:"alternate",href:C(k,e),hreflang:y})}}catch(t){w.e(t)}finally{w.f()}if(ht.defaultLocale){var O=this.switchLocalePath(ht.defaultLocale);O&&link.push({hid:"i18n-xd",rel:"alternate",href:C(O,e),hreflang:"x-default"})}}}function w(t,link){var e=this.localeRoute(Qt(Qt({},this.$route),{},{name:this.getRouteBaseName()})),r=e?e.path:null;r&&link.push({hid:"i18n-can",rel:"canonical",href:C(r,t)})}function x(t,e,meta){t&&e&&meta.push({hid:"i18n-og",property:"og:locale",content:_(e)})}function y(t,e,meta){var r=t.filter((function(t){var r=t.iso;return r&&r!==e}));if(r.length){var n=r.map((function(t){return{hid:"i18n-og-alt-".concat(t.iso),property:"og:locale:alternate",content:_(t.iso)}}));meta.push.apply(meta,Object(Kt.a)(n))}}function _(t){return(t||"").replace(/-/g,"_")}function C(t,e){return t.match(/^https?:\/\//)?t:e+t}return c}function Zt(){return Wt.call(this,{addDirAttribute:!1,addSeoAttributes:!0})}function te(t,e){return ee.apply(this,arguments)}function ee(){return(ee=Object(n.a)(regeneratorRuntime.mark((function t(e,r){var n,o,c;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=e.app,(o=n.i18n).loadedLanguages||(o.loadedLanguages=[]),o.loadedLanguages.includes(r)||((c=ht.normalizedLocales.find((function(t){return t.code===r})))?c.file||console.warn(xt("Could not find lang file for locale ".concat(r))):console.warn(xt('Attempted to load messages for non-existant locale code "'.concat(r,'"'))));case 4:case"end":return t.stop()}}),t)})))).apply(this,arguments)}var re=r(46);function ne(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return ae(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return ae(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function ae(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}l.a.use(Xt.a);var oe=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,o,c,h,f,d,v,m,w,x,_,C,k,O,$,j,P,E,S,R,L,A,N,D,I,z,M,B,F,U,G,H,X,K,V,Q,Y,J;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:r=e.app,o=e.route,c=e.store,h=e.req,e.res,f=e.redirect,ht.vuex&&c&&Et(c,ht.vuex,ht.localeCodes),d=ht.lazy,d&&(!0===d||!0!==d.skipNuxtState),t.next=9;break;case 7:v=t.sent.default,e.beforeNuxtRender((function(t){var e=t.nuxtState,n={},o=r.i18n,c=o.fallbackLocale,l=o.locale;if(l&&l!==c){var h=r.i18n._getMessages()[l];if(h)try{v(h),n[l]=h}catch(t){}}e.__i18n={langs:n}}));case 9:if(m=ht.detectBrowserLanguage,w=m.alwaysRedirect,x=m.fallbackLocale,_=m.onlyOnNoPrefix,C=m.onlyOnRoot,k=m.useCookie,O=m.cookieKey,$=m.cookieDomain,j=m.cookieSecure,P=m.cookieCrossOrigin,E=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n){var o,l,h,d,v,m,w,x,y,_=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(o=_.length>1&&void 0!==_[1]?_[1]:{},l=o.initialSetup,h=void 0!==l&&l,n){t.next=3;break}return t.abrupt("return");case 3:if(h||!r.i18n.differentDomains){t.next=5;break}return t.abrupt("return");case 5:if(d=r.i18n.locale,n!==d){t.next=8;break}return t.abrupt("return");case 8:if(!(v=r.i18n.onBeforeLanguageSwitch(d,n,h,e))||!r.i18n.localeCodes.includes(v)){t.next=13;break}if(v!==d){t.next=12;break}return t.abrupt("return");case 12:n=v;case 13:if(h||r.i18n.beforeLanguageSwitch(d,n),k&&r.i18n.setLocaleCookie(n),!ht.langDir){t.next=29;break}if(m=r.i18n.fallbackLocale,!ht.lazy){t.next=27;break}if(!m){t.next=23;break}return w=[],Array.isArray(m)?w=m.map((function(t){return te(e,t)})):"object"===Object(ft.a)(m)?(m[n]&&(w=w.concat(m[n].map((function(t){return te(e,t)})))),m.default&&(w=w.concat(m.default.map((function(t){return te(e,t)}))))):n!==m&&w.push(te(e,m)),t.next=23,Promise.all(w);case 23:return t.next=25,te(e,n);case 25:t.next=29;break;case 27:return t.next=29,Promise.all(ht.localeCodes.map((function(t){return te(e,t)})));case 29:if(r.i18n.locale=n,r.i18n.localeProperties=Object(re.a)(ht.locales.find((function(t){return t.code===n}))||{code:n}),!ht.vuex){t.next=34;break}return t.next=34,St(c,n,r.i18n.getLocaleMessage(n),ht.vuex);case 34:x=e.route,y=R(x,n),h?r.i18n.__redirect=y:(r.i18n.onLanguageSwitched(d,n),y&&f(y));case 37:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),S=$t(ht.localeCodes,{routesNameSeparator:ht.routesNameSeparator,defaultLocaleRouteNameSuffix:ht.defaultLocaleRouteNameSuffix}),R=function(t,e){if(!e||r.i18n.differentDomains||ht.strategy===ct.STRATEGIES.NO_PREFIX)return"";if(S(t)===e&&(!C&&!_||e!==ht.defaultLocale||ht.strategy!==ct.STRATEGIES.PREFIX_AND_DEFAULT))return"";var n=r.switchLocalePath(e);return n||(n=r.localePath(t.fullPath,e)),!n||n===t.fullPath||n.startsWith("//")?"":n},L=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n){var o,path,c,l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("/"!==n.path||!ht.rootRedirect){t.next=5;break}return o=302,path=ht.rootRedirect,"string"!=typeof ht.rootRedirect&&(o=ht.rootRedirect.statusCode,path=ht.rootRedirect.path),t.abrupt("return",[o,"/".concat(path),!0]);case 5:if(!(c=r.i18n.__redirect)){t.next=9;break}return r.i18n.__redirect=null,t.abrupt("return",[302,c]);case 9:if(l={differentDomains:ht.differentDomains,normalizedLocales:ht.normalizedLocales},r.i18n.__baseUrl=_t(ht.baseUrl,e,r.i18n.locale,l),h=ht.detectBrowserLanguage&&I(n)||S(n)||r.i18n.locale||r.i18n.defaultLocale||"",!ht.skipSettingLocaleOnNavigate){t.next=17;break}r.i18n.__pendingLocale=h,r.i18n.__pendingLocalePromise=new Promise((function(t){r.i18n.__resolvePendingLocalePromise=t})),t.next=19;break;case 17:return t.next=19,r.i18n.setLocale(h);case 19:return t.abrupt("return",[null,null]);case 20:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),A=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r.i18n.__pendingLocale){t.next=2;break}return t.abrupt("return");case 2:return t.next=4,r.i18n.setLocale(r.i18n.__pendingLocale);case 4:r.i18n.__resolvePendingLocalePromise(""),r.i18n.__pendingLocale=null;case 6:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}(),N=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!r.i18n.__pendingLocale){t.next=3;break}return t.next=3,r.i18n.__pendingLocalePromise;case 3:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}(),D=function(){return"undefined"!=typeof navigator&&navigator.languages?yt(ht.normalizedLocales,navigator.languages):h&&void 0!==h.headers["accept-language"]?yt(ht.normalizedLocales,h.headers["accept-language"].split(",").map((function(t){return t.split(";")[0]}))):void 0},I=function(t){if(ht.strategy!==ct.STRATEGIES.NO_PREFIX)if(C){if("/"!==t.path)return""}else if(_&&!w&&t.path.match(Ot(ht.localeCodes)))return"";var e;k&&(e=r.i18n.getLocaleCookie())||(e=D());var n=e||x;return!n||k&&!w&&r.i18n.getLocaleCookie()||n===r.i18n.locale?"":n},z=function(t){t.locales=Object(re.a)(ht.locales),t.localeCodes=Object(re.a)(ht.localeCodes),t.localeProperties=Object(re.a)(ht.normalizedLocales.find((function(e){return e.code===t.locale}))||{code:t.locale}),t.defaultLocale=ht.defaultLocale,t.differentDomains=ht.differentDomains,t.beforeLanguageSwitch=ht.beforeLanguageSwitch,t.onBeforeLanguageSwitch=ht.onBeforeLanguageSwitch,t.onLanguageSwitched=ht.onLanguageSwitched,t.setLocaleCookie=function(t){return Pt(t,0,{useCookie:k,cookieDomain:$,cookieKey:O,cookieSecure:j,cookieCrossOrigin:P})},t.getLocaleCookie=function(){return jt(0,{useCookie:k,cookieKey:O,localeCodes:ht.localeCodes})},t.setLocale=function(t){return E(t)},t.getBrowserLocale=function(){return D()},t.finalizePendingLocaleChange=A,t.waitForPendingLocaleChange=N,t.__baseUrl=r.i18n.__baseUrl,t.__pendingLocale=r.i18n.__pendingLocale,t.__pendingLocalePromise=r.i18n.__pendingLocalePromise,t.__resolvePendingLocalePromise=r.i18n.__resolvePendingLocalePromise},"function"!=typeof ht.vueI18n){t.next=25;break}return t.next=22,ht.vueI18n(e);case 22:t.t0=t.sent,t.next=26;break;case 25:t.t0=Object(re.a)(ht.vueI18n);case 26:if((M=t.t0).componentInstanceCreatedListener=z,r.i18n=e.i18n=new Xt.a(M),r.i18n.locale="",r.i18n.fallbackLocale=M.fallbackLocale||"",z(r.i18n),B={differentDomains:ht.differentDomains,normalizedLocales:ht.normalizedLocales},r.i18n.__baseUrl=_t(ht.baseUrl,e,"",B),r.i18n.__onNavigate=L,l.a.prototype.$nuxtI18nSeo=Zt,l.a.prototype.$nuxtI18nHead=Wt,!c){t.next=58;break}if(c.$i18n=r.i18n,!c.state.localeDomains){t.next=58;break}F=ne(r.i18n.locales),t.prev=41,F.s();case 43:if((U=F.n()).done){t.next=50;break}if("string"!=typeof(G=U.value)){t.next=47;break}return t.abrupt("continue",48);case 47:G.domain=c.state.localeDomains[G.code];case 48:t.next=43;break;case 50:t.next=55;break;case 52:t.prev=52,t.t1=t.catch(41),F.e(t.t1);case 55:return t.prev=55,F.f(),t.finish(55);case 58:return(H=ht.detectBrowserLanguage?I(o):"")||((X=ht.vuex)&&X.syncLocale&&c&&""!==c.state[X.moduleName].locale?H=c.state[X.moduleName].locale:r.i18n.differentDomains?(K=kt(ht.normalizedLocales),H=K):ht.strategy!==ct.STRATEGIES.NO_PREFIX?(V=S(o),H=V):k&&(H=r.i18n.getLocaleCookie())),H||(H=r.i18n.defaultLocale||""),t.next=63,E(H,{initialSetup:!0});case 63:if(!lt){t.next=71;break}return t.next=66,L(e.route);case 66:Q=t.sent,Y=Object(T.a)(Q,2),Y[0],(J=Y[1])&&location.assign(Object(y.b)(e.base,J));case 71:case"end":return t.stop()}}),t,null,[[41,52,55,58]])})));return function(e){return t.apply(this,arguments)}}();function ie(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function se(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ie(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):ie(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}l.a.component(v.a.name,v.a),l.a.component(w.a.name,se(se({},w.a),{},{render:function(t,e){return w.a._warned||(w.a._warned=!0,console.warn("<no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead")),w.a.render(t,e)}})),l.a.component(S.name,S),l.a.component("NChild",S),l.a.component(I.name,I),Object.defineProperty(l.a.prototype,"$nuxt",{get:function(){var t=this.$root.$options.$nuxt;return t||"undefined"==typeof window?t:window.$nuxt},configurable:!0}),l.a.use(f.a,{keyName:"head",attribute:"data-n-head",ssrAttribute:"data-n-head-ssr",tagIDKeyName:"hid"});var ce={name:"page",mode:"out-in",appear:!1,appearClass:"appear",appearActiveClass:"appear-active",appearToClass:"appear-to"},le=h.a.Store.prototype.registerModule;function ue(path,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=Array.isArray(path)?!!path.reduce((function(t,path){return t&&t[path]}),this.state):path in this.state;return le.call(this,path,t,se({preserveState:r},e))}function he(t){return fe.apply(this,arguments)}function fe(){return(fe=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,o,c,h,f,d,path,v,m=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return v=function(t,e){if(!t)throw new Error("inject(key, value) has no key provided");if(void 0===e)throw new Error("inject('".concat(t,"', value) has no value provided"));h[t="$"+t]=e,h.context[t]||(h.context[t]=e),c[t]=h[t];var r="__nuxt_"+t+"_installed__";l.a[r]||(l.a[r]=!0,l.a.use((function(){Object.prototype.hasOwnProperty.call(l.a.prototype,t)||Object.defineProperty(l.a.prototype,t,{get:function(){return this.$root.$options[t]}})})))},r=m.length>1&&void 0!==m[1]?m[1]:{},t.next=4,E(0,r);case 4:return o=t.sent,(c=at(e)).$router=o,c.registerModule=ue,h=se({head:{title:"Handbook - Apache ECharts",meta:[{charset:"utf-8"},{name:"viewport",content:"width=device-width, initial-scale=1"},{hid:"description",name:"description",content:"Apache ECharts Handbook"}],link:[{rel:"icon",type:"image/x-icon",href:"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"}],style:[],script:[]},store:c,router:o,nuxt:{defaultTransition:ce,transitions:[ce],setTransitions:function(t){return Array.isArray(t)||(t=[t]),t=t.map((function(t){return t=t?"string"==typeof t?Object.assign({},ce,{name:t}):Object.assign({},ce,t):ce})),this.$options.nuxt.transitions=t,t},err:null,dateErr:null,error:function(t){t=t||null,h.context._errored=Boolean(t),t=t?Object(_.p)(t):null;var r=h.nuxt;return this&&(r=this.nuxt||this.$options.nuxt),r.dateErr=Date.now(),r.err=t,e&&(e.nuxt.error=t),t}}},et),c.app=h,f=e?e.next:function(t){return h.router.push(t)},e?d=o.resolve(e.url).route:(path=Object(_.f)(o.options.base,o.options.mode),d=o.resolve(path).route),t.next=14,Object(_.t)(h,{store:c,route:d,next:f,error:h.nuxt.error.bind(h),payload:e?e.payload:void 0,req:e?e.req:void 0,res:e?e.res:void 0,beforeRenderFns:e?e.beforeRenderFns:void 0,ssrContext:e});case 14:return v("config",r),window.__NUXT__&&window.__NUXT__.state&&c.replaceState(window.__NUXT__.state),h.context.enablePreview=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};h.previewData=Object.assign({},t),v("preview",t)},t.next=20,Ht(h.context);case 20:if("function"!=typeof oe){t.next=23;break}return t.next=23,oe(h.context,v);case 23:return h.context.enablePreview=function(){console.warn("You cannot call enablePreview() outside a plugin.")},t.next=26,new Promise((function(t,e){o.replace(h.context.route.fullPath,t,(function(r){if(!r._isRouter)return e(r);if(2!==r.type)return t();var c=o.afterEach(function(){var e=Object(n.a)(regeneratorRuntime.mark((function e(r,n){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=3,Object(_.j)(r);case 3:h.context.route=e.sent,h.context.params=r.params||{},h.context.query=r.query||{},c(),t();case 8:case"end":return e.stop()}}),e)})));return function(t,r){return e.apply(this,arguments)}}())}))}));case 26:return t.abrupt("return",{store:c,app:h,router:o});case 27:case"end":return t.stop()}}),t)})))).apply(this,arguments)}},56:function(t,e,r){"use strict";e.a={}},73:function(t,e,r){"use strict";r(41),r(37),r(22),r(25),r(16),r(23),r(20),r(17),r(34),r(27),r(28);var n=r(0),o=r.n(n);function c(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return l(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return l(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,h=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){h=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(h)throw o}}}}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}var h=window.requestIdleCallback||function(t){var e=Date.now();return setTimeout((function(){t({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-e))}})}),1)},f=window.cancelIdleCallback||function(t){clearTimeout(t)},d=window.IntersectionObserver&&new window.IntersectionObserver((function(t){t.forEach((function(t){var e=t.intersectionRatio,link=t.target;e<=0||!link.__prefetch||link.__prefetch()}))}));e.a={name:"NuxtLink",extends:o.a.component("RouterLink"),props:{prefetch:{type:Boolean,default:!0},noPrefetch:{type:Boolean,default:!1}},mounted:function(){this.prefetch&&!this.noPrefetch&&(this.handleId=h(this.observe,{timeout:2e3}))},beforeDestroy:function(){f(this.handleId),this.__observed&&(d.unobserve(this.$el),delete this.$el.__prefetch)},methods:{observe:function(){d&&this.shouldPrefetch()&&(this.$el.__prefetch=this.prefetchLink.bind(this),d.observe(this.$el),this.__observed=!0)},shouldPrefetch:function(){return this.getPrefetchComponents().length>0},canPrefetch:function(){var t=navigator.connection;return!(this.$nuxt.isOffline||t&&((t.effectiveType||"").includes("2g")||t.saveData))},getPrefetchComponents:function(){return this.$router.resolve(this.to,this.$route,this.append).resolved.matched.map((function(t){return t.components.default})).filter((function(t){return"function"==typeof t&&!t.options&&!t.__prefetched}))},prefetchLink:function(){if(this.canPrefetch()){d.unobserve(this.$el);var t,e=c(this.getPrefetchComponents());try{for(e.s();!(t=e.n()).done;){var r=t.value,n=r();n instanceof Promise&&n.catch((function(){})),r.__prefetched=!0}}catch(t){e.e(t)}finally{e.f()}}}}}}},[[141,4,1,5]]]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/86ff68fd72f2c7e2b4c7.js b/handbook/_nuxt/js/86ff68fd72f2c7e2b4c7.js
deleted file mode 100644
index 648b1ac..0000000
--- a/handbook/_nuxt/js/86ff68fd72f2c7e2b4c7.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{363:function(n,t,e){"use strict";e.r(t),t.default="# Apache ECharts 5.2.0 介绍\n\n## 全局过渡动画\n\n在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变,不仅仅可以改善视觉效果,更为表达数据的关联和演变提供了可能。因此,在 5.2.0 中,我们进一步将过渡动画从表现系列内部数据的变化,泛化到全局能力。接下来,我们会看到这种**全局过渡动画 Universal Transition**是如何为图表增加表现力和叙事能力的。\n\n在之前的版本中,过渡动画有一定的局限性:只能用于相同类型的图形的位置、尺寸、形状,而且只能作用在相同类型的系列上。比如,下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化:\n\n```js live {layout: 'lr'}\nfunction makeRandomData() {\n return [\n {\n value: Math.random(),\n name: 'A'\n },\n {\n value: Math.random(),\n name: 'B'\n },\n {\n value: Math.random(),\n name: 'C'\n }\n ];\n}\noption = {\n series: [\n {\n type: 'pie',\n radius: [0, '50%'],\n data: makeRandomData()\n }\n ]\n};\n\nsetInterval(() => {\n myChart.setOption({\n series: {\n data: makeRandomData()\n }\n });\n}, 2000);\n```\n\n而从 5.2.0 开始,我们引入了更强大的全局过渡动画能力,让过渡动画不再局限于相同类型的系列之间。现在,我们可以使用这种跨系列的形变,为任意类型的系列和任意类型的图形做形变动画。\n\n这会有多酷呢?我们一起来感受一下!\n\n### 跨系列的形变动画\n\n在设置`universalTransition: true`开启全局过渡动画后,从饼图切换成柱状图,或者从柱状图切换成散点图,甚至旭日图和矩形树图这类复杂的图表之间,都可以通过形变的方式自然的进行动画过渡。\n\n如下,饼图和柱状图之间的切换:\n\n```js live {layout: 'bt'}\nconst dataset = {\n dimensions: ['name', 'score'],\n source: [\n ['Hannah Krause', 314],\n ['Zhao Qian', 351],\n ['Jasmin Krause ', 287],\n ['Li Lei', 219],\n ['Karle Neumann', 253],\n ['Mia Neumann', 165],\n ['Böhm Fuchs', 318],\n ['Han Meimei', 366]\n ]\n};\nconst pieOption = {\n dataset: [dataset],\n series: [\n {\n type: 'pie',\n // 通过 id 关联需要过渡动画的系列\n id: 'Score',\n radius: [0, '50%'],\n universalTransition: true,\n animationDurationUpdate: 1000\n }\n ]\n};\nconst barOption = {\n dataset: [dataset],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n // 通过 id 关联需要过渡动画的系列\n id: 'Score',\n // 每个数据都是用不同的颜色\n colorBy: 'data',\n encode: { x: 'name', y: 'score' },\n universalTransition: true,\n animationDurationUpdate: 1000\n }\n ]\n};\n\noption = barOption;\n\nsetInterval(() => {\n option = option === pieOption ? barOption : pieOption;\n // 使用 notMerge 的形式可以移除坐标轴\n myChart.setOption(option, true);\n}, 2000);\n```\n\n更多的常见基础图表之间的过渡:\n\n![](images/5-2-0/universal-transition.gif)\n\n这样的动画过渡不再仅仅局限于基础的折、柱、饼中,在柱状图和地图之间:\n\n![](images/5-2-0/universal-transition-2.gif)\n\n或者旭日图和矩形树图之间,甚至非常灵活的自定义系列之间都可以进行动画的过渡。\n\n![](images/5-2-0/universal-transition-3.gif)\n\n> 注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应。\n\n### 数据的分裂和合并动画\n\n除了常见的数据值的更新,有时候我们还会碰到数据的聚合、下钻等交互后的更新,这个时候我们就不能直接应用一对一的动画过渡,而需要使用更多像分裂、合并这样的动画效果,来通过正确的图形动画表达出数据的变换。\n\n为了能够表达数据之间可能存在的多对多联系,在 5.2.0 中我们新引入了一个数据组`groupId`的概念,我们可以通过 [series.dataGroupId](${optionPath}series-bar.dataGroupId) 设置整个系列所属的组,或者更细粒度的通过 [series.data.groupId](${optionPath}series-bar.dataGroupId) 设置每个数据所属的组。如果你使用了`dataset`管理数据则更方便了,可以使用`encode.itemGroupId`来指定一个维度编码成`groupId`。\n\n比如我们要实现一个柱状图下钻的动画,可以将下钻后的整个系列的数据都设置同一个`groupId`,然后跟下钻前的数据对应起来:\n\n```js live {layout: 'lr'}\noption = {\n xAxis: {\n data: ['Animals', 'Fruits', 'Cars']\n },\n yAxis: {},\n dataGroupId: '',\n animationDurationUpdate: 500,\n series: {\n type: 'bar',\n id: 'sales',\n data: [\n {\n value: 5,\n groupId: 'animals'\n },\n {\n value: 2,\n groupId: 'fruits'\n },\n {\n value: 4,\n groupId: 'cars'\n }\n ],\n universalTransition: {\n enabled: true,\n divideShape: 'clone'\n }\n }\n};\n\nconst drilldownData = [\n {\n dataGroupId: 'animals',\n data: [\n ['Cats', 4],\n ['Dogs', 2],\n ['Cows', 1],\n ['Sheep', 2],\n ['Pigs', 1]\n ]\n },\n {\n dataGroupId: 'fruits',\n data: [\n ['Apples', 4],\n ['Oranges', 2]\n ]\n },\n {\n dataGroupId: 'cars',\n data: [\n ['Toyota', 4],\n ['Opel', 2],\n ['Volkswagen', 2]\n ]\n }\n];\n\nmyChart.on('click', event => {\n if (event.data) {\n const subData = drilldownData.find(data => {\n return data.dataGroupId === event.data.groupId;\n });\n if (!subData) {\n return;\n }\n myChart.setOption({\n xAxis: {\n data: subData.data.map(item => {\n return item[0];\n })\n },\n series: {\n type: 'bar',\n id: 'sales',\n dataGroupId: subData.dataGroupId,\n data: subData.data.map(item => {\n return item[1];\n }),\n universalTransition: {\n enabled: true,\n divideShape: 'clone'\n }\n },\n graphic: [\n {\n type: 'text',\n left: 50,\n top: 20,\n style: {\n text: 'Back',\n fontSize: 18\n },\n onclick: function() {\n myChart.setOption(option, true);\n }\n }\n ]\n });\n }\n});\n```\n\n通过`groupId`,我们还可以实现更丰富的聚合,下钻动画。\n\n数据的聚合:\n\n![](images/5-2-0/group-transition.gif)\n\n单系列下钻成两个系列:\n\n![](images/5-2-0/group-transition-2.gif)\n\n全局过渡动画使得数据的关系和演变的表达能力走上新的台阶,为你的可视化创作灵感插上翅膀。\n\n看到这里,我们知道你已经跃跃欲试了。但是别急,5.2.0 还有更多值得一看的新功能。\n\n## 调色盘的取色策略\n\n在上面全局过渡动画的示例中,大家可能有注意到我们使用了一个之前版本没有的`colorBy`配置项,这个配置项也是我们这个版本新增加的一个特性,用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略:\n\n- `'series'` 按照系列分配调色盘中的颜色,同一系列中的所有数据都是用相同的颜色。\n- `'data'` 按照数据项分配调色盘中的颜色,每个数据项都使用不同的颜色。\n\n在之前我们是按照系列的类型固定了这个策略,比如柱状图就是固定`'series'`的策略,而饼图则是固定`'data'`的策略。\n\n而现在新增这个配置项后,我们可以在柱状图中给每个数据项都分配不同的颜色:\n\n```js live {layout: 'lr'}\noption = {\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n colorBy: 'data'\n }\n ]\n};\n```\n\n或者在饼图中统一使用一个颜色:\n\n```js live {layout: 'lr'}\noption = {\n series: {\n type: 'pie',\n colorBy: 'series',\n radius: [0, '50%'],\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 1\n },\n data: [\n {\n value: 335,\n name: 'Direct Visit'\n },\n {\n value: 234,\n name: 'Union Ad'\n },\n {\n value: 1548,\n name: 'Search Engine'\n }\n ]\n }\n};\n```\n\n这一配置项可以让我们避免了去找调色盘颜色然去一一设置的麻烦,可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强,提供更多的调色盘取色的策略。\n\n## 极坐标柱状图的标签\n\n这个版本中我们实现了极坐标上的柱状图的标签,并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图:\n\n```js live {layout: 'lr'}\noption = {\n angleAxis: {\n show: false,\n max: 10\n },\n radiusAxis: {\n show: false,\n type: 'category',\n data: ['AAA', 'BBB', 'CCC', 'DDD']\n },\n polar: {},\n series: [\n {\n type: 'bar',\n data: [3, 4, 5, 6],\n colorBy: 'data',\n roundCap: true,\n label: {\n show: true,\n // 试试改成 'insideStart'\n position: 'start',\n formatter: '{b}'\n },\n coordinateSystem: 'polar'\n }\n ]\n};\n```\n\n更多标签位置的配置:\n\n![](images/5-2-0/polar-bar-label.jpg)\n\n这一灵活的标签位置配置项大大丰富了极坐标柱状图的表达能力,让文字清晰地匹配对应的数据。\n\n## 空数据的饼图样式\n\n在之前的版本中,如果饼图没有数据,画面中可能就是完全空白的。因为没有任何的视觉元素,所以用户会疑惑是不是出现了 bug 导致图中没有内容。\n\n为了解决这个问题,这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过`emptyCircleStyle`配置这个占位圆的样式。\n\n```js live {layout: 'lr'}\noption = {\n series: [\n {\n type: 'pie',\n data: [],\n // showEmptyCircle: false,\n emptyCircleStyle: {\n // 将样式改为空心圆\n color: 'transparent',\n borderColor: '#ddd',\n borderWidth: 1\n }\n }\n ]\n};\n```\n\n如果不想要显示这个灰色的圆,也可以设置`showEmptyCircle: false`关闭。\n\n## 高维数据的性能增强\n\n我们从 4.0 开始引入了 [dataset](${optionPath}dataset) 用来管理图表的数据,通常情况下`dataset`提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维(>100)数据的场景下,我们还是会碰到一些性能急剧下降的问题,比如下面这种通过一千个系列去可视化千维数据的场景([#11907](https://github.com/apache/echarts/issues/11907)),甚至可能会卡住。\n\n```js\nconst indices = Array.from(Array(1000), (_, i) => {\n return `index${i}`;\n});\nconst option = {\n xAxis: { type: 'category' },\n yAxis: {},\n dataset: {\n // dimension: ['date', ...indices],\n source: Array.from(Array(10), (_, i) => {\n return {\n date: i,\n ...indices.reduce((item, next) => {\n item[next] = Math.random() * 100;\n return item;\n }, {})\n };\n })\n },\n series: indices.map(index => {\n return { type: 'line', name: index };\n })\n};\n```\n\n产生这个性能问题是因为我们在底层每个系列都会按照其需要处理一遍这个 dataset,然后保存一份处理过后的数据以及维度等元信息。这意味着刚才那个例子中需要处理并保存`1000 x 1000`个维度的信息,这带来了巨大的内存和垃圾回收的压力,从而导致了高维度的性能的急剧下降。\n\n在新版本中我们对这个问题做了优化,所有系列都尽可能共享 dataset 的数据(能否共享取决于系列怎么使用这份数据)存储而非每个系列都处理并存储一次,并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸,大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。\n\n这次优化带来收益的还不只是这种高维的场景,在使用维度不高但是数据量很大的 dataset 的时候,因为数据的共享所以多个系列只处理了一遍数据,因此也可以带来显著的性能提升。\n\n## 自定义系列的类型优化\n\n自定义系列提供了非常灵活的创建系列图形的方式,相对于其它系列,自定义系列的学习曲线可能有些陡峭,而且容易出错。因此在这个版本中,我们进一步的优化了自定义系列中的核心方法`renderItem`的类型,对于`renderItem`的参数和返回值类型做了更精确的推断,从而可以根据返回的图形类型推断出可以设置该图形的哪些属性:\n\n```ts\nseries = {\n type: 'custom',\n renderItem(params) {\n return {\n type: 'group',\n // group 类型使用 children 存储其它类型的子元素\n children: [\n {\n type: 'circle',\n // circle 拥有下面这些可以配置的 shape 属性\n shape: { r: 10, cx: 0, cy: 0 },\n // 可以配置的样式\n style: { fill: 'red' }\n },\n {\n type: 'rect',\n // rect 拥有下面这些可以配置的 shape 属性\n shape: { x: 0, y: 0, width: 100, height: 100 }\n },\n {\n type: 'path',\n // 自定义路径图形\n shape: { d: '...' }\n }\n ]\n };\n }\n};\n```\n\n## 小结\n\n以上我们介绍了 5.2.0 中的新特性以及优化,如果你对其中的一些特性感兴趣,不妨更新到最新版本的 Apache ECharts 亲自体验一下。\n\n如果你对 Apache ECharts 接下来的计划感兴趣,也可以在 [GitHub Milestone](https://github.com/apache/echarts/milestones) 关注我们的开发计划。也非常欢迎加入我们的贡献者行列(在 [Wiki](https://github.com/apache/echarts/wiki) 中了解更多)。\n\n### 版本更新记录\n\n#### 非兼容改动\n\n- [Fix][pie] 负值会被作为非法值过滤。[#15095](https://github.com/apache/echarts/issues/15095) ([ssthouse](https://github.com/ssthouse))\n\n#### 所有改动\n\n- **[Feature] 新增全局过渡动画。[#15208](https://github.com/apache/echarts/issues/15208) ([pissang](https://github.com/pissang))**\n- [Feature][color] 新增`series.colorBy`配置不同粒度的取色。[#13788](https://github.com/apache/echarts/issues/13788) ([Ovilia](https://github.com/Ovilia))\n- [Feature][label] 极坐标系柱状图支持标签显示。[#774](https://github.com/ecomfe/zrender/issues/774) ([Ovilia](https://github.com/Ovilia))\n- [Feature][effectscatter] 新增`rippleEffect.number`配置涟漪数目。[#15335](https://github.com/apache/echarts/issues/15335) ([plainheart](https://github.com/plainheart))\n- [Feature][gauge] 新增`pointer.showAbove`配置指针和标签的显示层级。[#15337](https://github.com/apache/echarts/issues/15337) ([AmosChenYQ](https://github.com/AmosChenYQ)) [#15326](https://github.com/apache/echarts/issues/15326) ([susiwen8](https://github.com/susiwen8))\n- [Feature][emphasis] `emphasis.color`支持设置为`'inherit'`关闭高亮。[#15172](https://github.com/apache/echarts/issues/15172) ([Foreverwzh](https://github.com/Foreverwzh))\n- [Feature][pie] 无数据的时候默认显示灰色的占位圆。[#15095](https://github.com/apache/echarts/issues/15095) ([ssthouse](https://github.com/ssthouse))\n- [Fix][dataset] 优化高维数据`dataset`的性能。[#15355](https://github.com/apache/echarts/issues/15355) ([pissang](https://github.com/pissang))\n- [Fix][axis] 优化时间轴刻度标签的格式化显示。[#15465](https://github.com/apache/echarts/issues/15465) ([leavest](https://github.com/leavest)) [#15434](https://github.com/apache/echarts/issues/15434) ([zhiyuc123](https://github.com/zhiyuc123))\n- [Fix][custom] 优化旧代码对于`font`的兼容性。[#15454](https://github.com/apache/echarts/issues/15454) ([AmosChenYQ](https://github.com/AmosChenYQ))\n- [Fix][memory] 优化实例销毁后依旧持有实例时的内存占用。[#15417](https://github.com/apache/echarts/issues/15417) ([pissang](https://github.com/pissang))\n- [Fix][line] 优化有无穷大数据时的渐变色显示。 [#15416](https://github.com/apache/echarts/issues/15416) ([plainheart](https://github.com/plainheart))\n- [Fix][date] 优化`date`数据的解析。[#15410](https://github.com/apache/echarts/issues/15410) ([quillblue](https://github.com/quillblue))\n- [Fix][line] 修复渲染出错。[#788](https://github.com/ecomfe/zrender/issues/788) ([pissang](https://github.com/pissang))\n- [Fix][candlestick] 修复样式可能在`setOption`后丢失的问题。[#15368](https://github.com/apache/echarts/issues/15368) ([pissang](https://github.com/pissang))\n- [Fix][sankey] 修复垂直布局时的渐变色边。[#15363](https://github.com/apache/echarts/issues/15363) ([susiwen8](https://github.com/susiwen8))\n- [Fix][tooltip] 修复在设置`tooltip.position`后`formatter`返回 DOM 对象会被解析成字符串的问题。[#15313](https://github.com/apache/echarts/issues/15313) ([plainheart](https://github.com/plainheart))\n- [Fix][tooltip] `formatter`返回`null`时清空内容。[#15313](https://github.com/apache/echarts/issues/15313) ([plainheart](https://github.com/plainheart))\n- [Fix][bar] 标签位置设置为`'middle'`时应该显示在图形中间。[#15309](https://github.com/apache/echarts/issues/15309) ([Ovilia](https://github.com/Ovilia))\n- [Fix][marker] 修复可能会在极坐标柱状图报`'clampData' is undefined`的错误。[#15297](https://github.com/apache/echarts/issues/15297) ([AmosChenYQ](https://github.com/AmosChenYQ))\n- [Fix][treemap] 修复关闭动画后更新可能旧节点不会被移除的问题。[#15283](https://github.com/apache/echarts/issues/15283) ([villebro](https://github.com/villebro))\n- [Fix][tree] 修复更新数据时边可能会不被移除的问题。[#15251](https://github.com/apache/echarts/issues/15251) ([ssthouse](https://github.com/ssthouse))\n- [Fix][pie/sunburst] 修复`borderRadius`被设置为`null`或者`undefined`时无法重置的问题。[#15243](https://github.com/apache/echarts/issues/15243) ([plainheart](https://github.com/plainheart))\n- [Fix][canvas] 修复`fillStyle`被设置为`'none'`或者`null`时 FireFox 浏览器下会报警告的问题。 [#784](https://github.com/ecomfe/zrender/issues/784) ([plainheart](https://github.com/plainheart))\n- [Fix][highlight] 修复`chart.dispatchAction`高亮多个系列可能会不正确的问题。[#15207](https://github.com/apache/echarts/issues/15207) ([ssthouse](https://github.com/ssthouse))\n- [Fix][sankey] 修复使用`series.nodes`作为数据时拖拽功能失效的问题。[#15199](https://github.com/apache/echarts/issues/15199) ([DuLinRain](https://github.com/DuLinRain))\n- [Fix][svg] 优化导出的 SVG 文件在 Powerpoint 中的兼容性。[#767](https://github.com/ecomfe/zrender/pull/767) ([plainheart](https://github.com/plainheart))\n- [Fix][legend] 修复`text.lineHeight`不生效。[#773](https://github.com/ecomfe/zrender/issues/773) ([ssthouse](https://github.com/ssthouse))\n- [Fix][pie] 将默认的`itemStyle.borderJoin`设置为`round`。[#15145](https://github.com/apache/echarts/issues/15145) ([plainheart](https://github.com/plainheart))\n- [Fix][radar] 将默认的`lineStyle.join`设置为`round`。[#15381](https://github.com/apache/echarts/issues/15381) ([Ovilia](https://github.com/Ovilia))\n- [Fix][treemap] 修复设置`label.show`为`false`会报错。[#15141](https://github.com/apache/echarts/issues/15141) ([susiwen8](https://github.com/susiwen8))\n- [Fix][pictorialbar] 修复零数据标签的显示问题。[#15132](https://github.com/apache/echarts/issues/15132) ([ssthouse](https://github.com/ssthouse))\n- [Fix][lines] 修复调用`chart.clear()`可能会无法清除线条的问题。[#15088](https://github.com/apache/echarts/issues/15088) ([plainheart](https://github.com/plainheart))\n- [Fix][endlabel] 修复端点标签只设置`emphasis.show`为`true`时可能无法显示的问题。[#15072](https://github.com/apache/echarts/issues/15072) ([Ovilia](https://github.com/Ovilia))\n- [Fix][svg] 修复矩形路径没有合并的问题。[#767](https://github.com/ecomfe/zrender/issues/767) ([plainheart](https://github.com/plainheart))\n- [Fix][treemap] 在回调函数参数中添加`treeAncestors`属性。[#14976](https://github.com/apache/echarts/issues/14976) ([pissang](https://github.com/pissang))\n- [Fix][tree] 修复调用`setOption`两次更新数据时可能报错的问题。[#14930](https://github.com/apache/echarts/issues/14930) ([Map1en](https://github.com/Map1en))\n- [Fix][radar] 修复图形边框被缩放的问题。[#15396](https://github.com/apache/echarts/issues/15396) ([pissang](https://github.com/pissang))\n- [Fix][marker] 修复`symbolOffset`和`symbolKeepAspect`配置项不生效的问题。[#14737](https://github.com/apache/echarts/issues/14737) ([plainheart](https://github.com/plainheart))\n- [Fix][gauge] 支持进度条和指针的点击事件。[#14688](https://github.com/apache/echarts/issues/14688) ([yufeng04](https://github.com/yufeng04))\n- [Fix][tooltip] 优化箭头的边框宽度,跟配置同步。[#14393](https://github.com/apache/echarts/issues/14393) ([g7i](https://github.com/g7i))\n- [Fix][geo] 修复地理坐标组件从`show: false`配置为`show: true`后依旧不显示的问题。[#15361](https://github.com/apache/echarts/issues/15361) ([pissang](https://github.com/pissang))\n- [Fix][type] 优化自定义系列`renderItem`的类型推断。\n- [Fix][type] 优化`echarts.init`的配置项类型。[#15487](https://github.com/apache/echarts/issues/15487) ([John60676](https://github.com/John60676))\n- [Fix][type] 修复类型中`polarIndex`配置项丢失的问题。[#15281](https://github.com/apache/echarts/issues/15281) ([Map1en](https://github.com/Map1en))\n- [Fix][type] 优化 SVG 数据源的类型。[#15263](https://github.com/apache/echarts/issues/15263) ([leosxie](https://github.com/leosxie))\n- [Fix][type] 优化饼图和地图系列中的数据类型。[#15144](https://github.com/apache/echarts/issues/15144) ([plainheart](https://github.com/plainheart))\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js b/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js
deleted file mode 100644
index 86c4e11..0000000
--- a/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{192:function(t,e,n){t.exports={}},199:function(t,e,n){t.exports={}},200:function(t,e,n){t.exports={}},201:function(t,e,n){t.exports={}},210:function(t,e,n){t.exports={}},213:function(t,e,n){"use strict";n(192)},230:function(t,e,n){"use strict";n(199)},231:function(t,e,n){"use strict";n(200)},239:function(t,e,n){"use strict";n(201)},299:function(t,e,n){"use strict";n(210)},301:function(t,e,n){var map={"./en/basics/download.md":[302,8],"./en/basics/help.md":[303,9],"./en/basics/import.md":[304,10],"./en/basics/inspiration.md":[305,11],"./en/basics/release-note/5-2-0.md":[306,12],"./en/basics/release-note/v5-feature.md":[307,13],"./en/basics/release-note/v5-upgrade-guide.md":[308,14],"./en/best-practices/aria.md":[309,15],"./en/best-practices/canvas-vs-svg.md":[310,16],"./en/best-practices/design/color-enhance.md":[311,17],"./en/best-practices/mobile.md":[312,18],"./en/best-practices/specification/bar/basic-bar.md":[313,19],"./en/best-practices/specification/bar/bi-directional-bar.md":[314,20],"./en/best-practices/specification/bar/grouped-bar.md":[315,21],"./en/best-practices/specification/bar/stacked-bar.md":[316,22],"./en/best-practices/specification/funnel.md":[317,23],"./en/best-practices/specification/gauge.md":[318,24],"./en/best-practices/specification/line/area.md":[319,25],"./en/best-practices/specification/line/basic-line.md":[320,26],"./en/best-practices/specification/line/stacked-area.md":[321,27],"./en/best-practices/specification/pie/basic-pie.md":[322,28],"./en/best-practices/specification/radar.md":[323,29],"./en/best-practices/specification/scatter/bubble.md":[324,30],"./en/best-practices/specification/scatter/scatter.md":[325,31],"./en/concepts/axis.md":[326,32],"./en/concepts/chart-size.md":[327,33],"./en/concepts/coordinate.md":[328,34],"./en/concepts/data-transform.md":[329,35],"./en/concepts/dataset.md":[330,36],"./en/concepts/event.md":[331,37],"./en/concepts/legend.md":[332,38],"./en/concepts/options.md":[333,39],"./en/concepts/series.md":[334,40],"./en/concepts/style.md":[335,41],"./en/concepts/tooltip.md":[336,42],"./en/concepts/visual-map.md":[337,43],"./en/get-started.md":[338,44],"./en/how-to/chart-types/bar/bar-race.md":[339,45],"./en/how-to/chart-types/bar/basic-bar.md":[340,46],"./en/how-to/chart-types/bar/polar-bar.md":[341,47],"./en/how-to/chart-types/bar/stacked-bar.md":[342,48],"./en/how-to/chart-types/bar/waterfall.md":[343,49],"./en/how-to/chart-types/line/area-line.md":[344,50],"./en/how-to/chart-types/line/basic-line.md":[345,51],"./en/how-to/chart-types/line/smooth-line.md":[346,52],"./en/how-to/chart-types/line/stacked-line.md":[347,53],"./en/how-to/chart-types/line/step-line.md":[348,54],"./en/how-to/chart-types/pie/basic-pie.md":[349,55],"./en/how-to/chart-types/pie/doughnut.md":[350,56],"./en/how-to/chart-types/pie/rose.md":[351,57],"./en/how-to/chart-types/scatter/basic-scatter.md":[352,58],"./en/how-to/cross-platform/server.md":[353,59],"./en/how-to/data/drilldown.md":[354,60],"./en/how-to/data/dynamic-data.md":[355,61],"./en/how-to/interaction/drag.md":[356,62],"./en/how-to/label/rich-text.md":[357,63],"./en/meta/edit-guide.md":[358,64],"./zh/basics/download.md":[359,65],"./zh/basics/help.md":[360,66],"./zh/basics/import.md":[361,67],"./zh/basics/inspiration.md":[362,68],"./zh/basics/release-note/5-2-0.md":[363,69],"./zh/basics/release-note/v5-feature.md":[364,70],"./zh/basics/release-note/v5-upgrade-guide.md":[365,71],"./zh/basics/resource.md":[366,72],"./zh/best-practices/aria.md":[367,73],"./zh/best-practices/canvas-vs-svg.md":[368,74],"./zh/best-practices/design/color-enhance.md":[369,75],"./zh/best-practices/mobile.md":[370,76],"./zh/best-practices/specification/bar/basic-bar.md":[371,77],"./zh/best-practices/specification/bar/bi-directional-bar.md":[372,78],"./zh/best-practices/specification/bar/grouped-bar.md":[373,79],"./zh/best-practices/specification/bar/stacked-bar.md":[374,80],"./zh/best-practices/specification/funnel.md":[375,81],"./zh/best-practices/specification/gauge.md":[376,82],"./zh/best-practices/specification/line/area.md":[377,83],"./zh/best-practices/specification/line/basic-line.md":[378,84],"./zh/best-practices/specification/line/stacked-area.md":[379,85],"./zh/best-practices/specification/pie/basic-pie.md":[380,86],"./zh/best-practices/specification/radar.md":[381,87],"./zh/best-practices/specification/scatter/bubble.md":[382,88],"./zh/best-practices/specification/scatter/scatter.md":[383,89],"./zh/concepts/axis.md":[384,90],"./zh/concepts/chart-size.md":[385,91],"./zh/concepts/coordinate.md":[386,92],"./zh/concepts/data-transform.md":[387,93],"./zh/concepts/dataset.md":[388,94],"./zh/concepts/event.md":[389,95],"./zh/concepts/legend.md":[390,96],"./zh/concepts/options.md":[391,97],"./zh/concepts/series.md":[392,98],"./zh/concepts/style.md":[393,99],"./zh/concepts/tooltip.md":[394,100],"./zh/concepts/visual-map.md":[395,101],"./zh/get-started.md":[396,102],"./zh/how-to/chart-types/bar/bar-race.md":[397,103],"./zh/how-to/chart-types/bar/basic-bar.md":[398,104],"./zh/how-to/chart-types/bar/polar-bar.md":[399,105],"./zh/how-to/chart-types/bar/stacked-bar.md":[400,106],"./zh/how-to/chart-types/bar/waterfall.md":[401,107],"./zh/how-to/chart-types/line/area-line.md":[402,108],"./zh/how-to/chart-types/line/basic-line.md":[403,109],"./zh/how-to/chart-types/line/smooth-line.md":[404,110],"./zh/how-to/chart-types/line/stacked-line.md":[405,111],"./zh/how-to/chart-types/line/step-line.md":[406,112],"./zh/how-to/chart-types/pie/basic-pie.md":[407,113],"./zh/how-to/chart-types/pie/doughnut.md":[408,114],"./zh/how-to/chart-types/pie/rose.md":[409,115],"./zh/how-to/chart-types/scatter/basic-scatter.md":[410,116],"./zh/how-to/connect.md":[411,117],"./zh/how-to/cross-platform/baidu-app.md":[412,118],"./zh/how-to/cross-platform/server.md":[413,119],"./zh/how-to/cross-platform/wechat-app.md":[414,120],"./zh/how-to/data/drilldown.md":[415,121],"./zh/how-to/data/dynamic-data.md":[416,122],"./zh/how-to/interaction/drag.md":[417,123],"./zh/how-to/label/rich-text.md":[418,124],"./zh/how-to/mobile.md":[419,125],"./zh/meta/edit-guide.md":[420,126],"./zh/meta/writing.md":[421,127]};function c(t){if(!n.o(map,t))return Promise.resolve().then((function(){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}));var e=map[t],c=e[0];return n.e(e[1]).then((function(){return n(c)}))}c.keys=function(){return Object.keys(map)},c.id=301,t.exports=c},423:function(t,e,n){"use strict";n.r(e);var c=n(2),o=(n(21),n(36),n(103),n(0)),r=n.n(o),l=n(187),d=(n(211),n(212)),h=(n(140),n(102)),m=Object(l.c)({props:{width:{type:[String,Number],default:"100%"},height:{type:[String,Number],default:"350"},src:String},setup:function(t,e){var n=Object(l.a)((function(){return h.a.exampleViewPath.replace("${lang}",e.root.$i18n.locale)+t.src})),c=Object(l.f)("");return{finalSrc:c,visibilityChanged:function(t){t&&(c.value=n.value)}}}}),v=n(7),f=Object(v.a)(m,(function(){var t=this,e=t.$createElement;return(t._self._c||e)("iframe",{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:t.visibilityChanged,expression:"visibilityChanged"}],attrs:{width:t.width||200,height:t.height||200,src:t.finalSrc}})}),[],!1,null,null,null).exports,z=(n(37),r.a.extend({props:{type:{type:String,default:"info",validator:function(t){return["info","success","warning","danger"].includes(t)}}}})),w=(n(213),Object(v.a)(z,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("blockquote",{class:"md-alert md-alert-"+t.type},[n("p",[t._t("default")],2)])}),[],!1,null,"a47f983e",null).exports),y=(n(16),n(214)),O=(n(215),n(216)),k=(n(193),n(194),n(195),n(27),n(28),n(22),n(60),{});var C=n(217),_=n(218),H=n.n(_),x=n(188),j=n(15);function S(){var t={},e={},n=1;function c(t,c){var o,time,l=(o=t,time=c,h.getZr().animation.animate({val:0},{loop:!1}).when(time,{val:1}).during((function(){h.getZr().wakeUp()})).done((function(){r.a.nextTick(o)})).start());return e[n]=l,n++}function o(t,c){var o,time,l=(o=t,time=c,h.getZr().animation.animate({val:0},{loop:!0}).when(time,{val:1}).during((function(t,e){h.getZr().wakeUp(),1===e&&r.a.nextTick(o)})).start());return e[n]=l,n++}function l(t){var n=e[t];n&&(h.getZr().animation.removeAnimator(n),delete e[t])}function d(t){l(t)}var h,m=[];return{resize:function(){h&&h.resize()},dispose:function(){h&&(h.dispose(),h=null)},getDataURL:function(){return h.getDataURL({pixelRatio:2,excludeComponents:["toolbox"]})},getOption:function(){return h.getOption()},getInstance:function(){return h},pause:function(){h&&h.getZr().animation.pause()},resume:function(){h&&h.getZr().animation.resume()},run:function(n,code,r){var v,f,z;r=r||{},h||(h=echarts.init(n,r.darkMode?"dark":"",{renderer:r.renderer,useDirtyRect:r.useDirtyRect}),f=(v=h).on,z=v.setOption,v.on=function(t){var e=f.apply(v,arguments);return m.push(t),e},v.setOption=function(){return z.apply(this,arguments)}),function(){for(var t in e)e.hasOwnProperty(t)&&l(t)}(),function(t){m.forEach((function(e){t&&t.off(e)})),m.length=0}(h),t.config=null;var option=new Function("myChart","app","setTimeout","setInterval","clearTimeout","clearInterval","var option;\n"+code+"\nreturn option;")(h,t,c,o,l,d);if(option&&"object"===Object(j.a)(option)){var w=+new Date;h.setOption(option,!0),+new Date-w}}}}var P=n(229),E=n.n(P),$=Object(l.c)({components:{},props:{source:{type:String}},setup:function(t){var e=Object(l.f)(null),n=Object(l.f)(!1);return Object(l.d)((function(){new E.a(e.value,{text:function(e){return t.source}}).on("success",(function(t){t.clearSelection(),n.value=!0,window.setTimeout((function(){n.value=!1}),2e3)}))})),{clipboardChecked:n,copyButton:e}}}),W=(n(230),Object(v.a)($,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"copyButton",staticClass:"clipboard"},[t.clipboardChecked?n("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"}})]):n("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("path",{attrs:{"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"}})])])])}),[],!1,null,"479657ca",null).exports);function R(){return"undefined"==typeof echarts?(t=["https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"],Promise.all(t.map((function(t){return"string"==typeof t?{url:t,type:t.match(/\.css$/)?"css":"js"}:t})).map((function(t){if(k[t.url])return k[t.url];var e=new Promise((function(e,n){if("js"===t.type){var script=document.createElement("script");script.src=t.url,script.async=!1,script.onload=function(){e(null)},script.onerror=function(){n()},document.body.appendChild(script)}else if("css"===t.type){var link=document.createElement("link");link.rel="stylesheet",link.href=t.url,link.onload=function(){e(null)},link.onerror=function(){n()},document.body.appendChild(link)}}));return k[t.url]=e,e})))).then((function(){})):Promise.resolve();var t}var M=Object(l.c)({components:{PrismEditor:y.a,CodeBlockCopyClipboard:W},props:{lang:{type:String,default:"js"},code:{type:String},layout:{type:String,default:"tb",validator:function(t){return["lr","tb","rl","bt"].includes(t)}}},setup:function(t,e){var n,c=Object(l.f)(x.a(t.code)),o=Object(l.f)(null);function r(){n&&n.resize()}var d=H()((function(){R().then((function(){n||(Object(C.a)(Object(l.g)(o),r),n=S());try{Object(l.g)(o)&&n.run(Object(l.g)(o),Object(l.g)(c))}catch(t){console.error(t)}}))}),500,{trailing:!0});return Object(l.h)(c,(function(){d()})),Object(l.e)((function(){Object(C.b)(Object(l.g)(o),r)})),{innerCode:c,previewContainer:o,highlighter:function(code){return Object(O.highlight)(code,O.languages[t.lang]||O.languages.js)},visibilityChanged:function(t){t?n?n.resume():d():n&&n.pause()}}}}),N=(n(231),Object(v.a)(M,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.innerCode?n("div",{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:t.visibilityChanged,expression:"visibilityChanged"}],class:"md-live layout-"+t.layout},[n("div",{staticClass:"md-live-editor"},[n("div",{staticClass:"md-live-editor-container"},[n("prism-editor",{attrs:{highlight:t.highlighter},model:{value:t.innerCode,callback:function(e){t.innerCode=e},expression:"innerCode"}})],1),t._v(" "),n("div",{staticClass:"md-live-tag"},[t._v("live")]),t._v(" "),n("code-block-copy-clipboard",{attrs:{source:t.innerCode}})],1),t._v(" "),n("div",{ref:"previewContainer",staticClass:"md-live-preview"})]):t._e()}),[],!1,null,null,null).exports),D=n(232),T=n.n(D),L=(n(233),n(234),n(235),n(236),n(237),n(238),/^(diff)-([\w-]+)/i);var B=Object(l.c)({components:{CodeBlockCopyClipboard:W},props:{lang:{type:String,default:"js"},code:{type:String},lineHighlights:String,fileName:String},setup:function(t,e){var n=Object(l.f)(x.a(t.code)),c=Object(l.a)((function(){return function(t,e){var n="",c=(t=t||"").match(L);c&&(t=c[2],n=T.a.languages.diff),t="vue"===t?"html":t,n||(n=T.a.languages[t]);var o=c?"diff-".concat(t):t,code=n?T.a.highlight(e,n,o):e;return t&&n||(t="text",code=code.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")),{lang:t,code:code}}(t.lang,n.value)}));return{rawCode:n,highlightResult:c}}}),U=(n(239),Object(v.a)(B,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"md-code-block"},[n("div",{staticClass:"nuxt-content-highlight"},[n("pre",{class:"language-"+t.highlightResult.lang+" line-numbers"},[n("code",{domProps:{innerHTML:t._s(t.highlightResult.code)}})])]),t._v(" "),t.fileName?n("span",{staticClass:"filename"},[t._v(t._s(t.fileName))]):t._e(),t._v(" "),n("code-block-copy-clipboard",{attrs:{source:t.rawCode}})],1)}),[],!1,null,null,null).exports),Z=(n(240),Object(l.c)({props:{link:String},setup:function(t){return{fullLink:Object(l.a)((function(){return h.a.optionPath+t.link}))}}})),I=Object(v.a)(Z,(function(){var t=this,e=t.$createElement;return(t._self._c||e)("a",{attrs:{href:t.fullLink,target:"_blank"}},[t._v(t._s(t.link))])}),[],!1,null,null,null).exports;r.a.use(l.b),r.a.component("md-example",f),r.a.component("md-alert",w),r.a.component("md-live",N),r.a.component("md-code-block",U),r.a.component("md-option",I),r.a.directive("observe-visibility",d.a);var A=n(242),V=n.n(A),F=n(298),G={"contents/zh/how-to/data/dynamic-data.md":["Ovilia","pissang"],"contents/zh/how-to/data/drilldown.md":["Hansz00","Ovilia","pissang"],"contents/zh/how-to/cross-platform/wechat-app.md":["Ovilia","pissang"],"contents/zh/how-to/cross-platform/server.md":["Ovilia","pissang"],"contents/zh/how-to/cross-platform/baidu-app.md":["Ovilia","pissang"],"contents/zh/how-to/connect.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/scatter/basic-scatter.md":["Ovilia","Wdingding","pissang"],"contents/zh/how-to/chart-types/pie/rose.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/pie/doughnut.md":["Hansz00","Ovilia","pissang"],"contents/zh/how-to/chart-types/pie/basic-pie.md":["Hansz00","Ovilia","pissang"],"contents/zh/how-to/chart-types/line/step-line.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/line/stacked-line.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/line/smooth-line.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/line/basic-line.md":["Hansz00","Ovilia","pissang"],"contents/zh/how-to/chart-types/line/area-line.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/bar/waterfall.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/bar/stacked-bar.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/bar/polar-bar.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/bar/basic-bar.md":["Ovilia","pissang"],"contents/zh/how-to/chart-types/bar/bar-race.md":["Ovilia","pissang"],"contents/zh/get-started.md":["Ovilia","pissang"],"contents/zh/concepts/visual-map.md":["Ovilia","pissang"],"contents/zh/concepts/tooltip.md":["Ovilia"],"contents/zh/concepts/style.md":["pissang"],"contents/zh/concepts/series.md":["Ovilia"],"contents/zh/concepts/options.md":["Ovilia"],"contents/zh/concepts/legend.md":["Ovilia","pissang","yufeng04"],"contents/zh/concepts/event.md":["100pah","Ovilia","huanghan01","pissang","plainheart"],"contents/zh/concepts/dataset.md":["100pah","Ovilia","huanghan01","pissang"],"contents/zh/concepts/data-transform.md":["100pah","pissang"],"contents/zh/concepts/coordinate.md":["Ovilia"],"contents/zh/concepts/chart-size.md":["Ovilia","pissang"],"contents/zh/concepts/axis.md":["Ovilia","huanghan01","pissang","plainheart","yufeng04"],"contents/zh/best-practices/specification/scatter/scatter.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/scatter/bubble.md":["Wdingding","pissang"],"contents/zh/best-practices/specification/radar.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/pie/basic-pie.md":["100pah","Wdingding","pissang"],"contents/zh/best-practices/specification/line/stacked-area.md":["Wdingding","pissang"],"contents/zh/best-practices/specification/line/basic-line.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/line/area.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/gauge.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/funnel.md":["Wdingding","pissang"],"contents/zh/best-practices/specification/bar/stacked-bar.md":["Wdingding","pissang"],"contents/zh/best-practices/specification/bar/grouped-bar.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/specification/bar/bi-directional-bar.md":["Ovilia","Wdingding","pissang"],"contents/zh/best-practices/specification/bar/basic-bar.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/mobile.md":["Hansz00","Ovilia","pissang"],"contents/zh/best-practices/design/color-enhance.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practices/canvas-vs-svg.md":["100pah","Ovilia","pissang"],"contents/zh/best-practices/aria.md":["Ovilia","pissang"],"contents/zh/basics/resource.md":["Ovilia","pissang"],"contents/zh/basics/release-note/v5-upgrade-guide.md":["pissang"],"contents/zh/basics/release-note/v5-feature.md":["pissang"],"contents/zh/basics/release-note/5-2-0.md":["Ovilia","pissang"],"contents/zh/basics/inspiration.md":["Ovilia","pissang"],"contents/zh/basics/import.md":["pissang"],"contents/zh/basics/help.md":["100pah","Ovilia","pissang","plainheart"],"contents/zh/basics/download.md":["100pah","Ovilia","pissang"],"contents/en/posts.yml":["Ovilia","pissang"],"contents/en/meta/edit-guide.md":["Ovilia","pissang"],"contents/en/how-to/label/rich-text.md":["pissang"],"contents/en/how-to/interaction/drag.md":["pissang"],"contents/en/how-to/data/dynamic-data.md":["Hansz00","Ovilia","pissang"],"contents/en/how-to/data/drilldown.md":["Hansz00","Ovilia","pissang"],"contents/en/how-to/cross-platform/server.md":["pissang"],"contents/en/how-to/chart-types/scatter/basic-scatter.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/pie/rose.md":["Hansz00","Ovilia","pissang"],"contents/en/how-to/chart-types/pie/doughnut.md":["pissang"],"contents/en/how-to/chart-types/pie/basic-pie.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/line/step-line.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/line/stacked-line.md":["Hansz00","Ovilia","pissang"],"contents/en/how-to/chart-types/line/smooth-line.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/line/basic-line.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/line/area-line.md":["Hank","Hansz00","pissang"],"contents/en/how-to/chart-types/bar/waterfall.md":["Hansz00","Ovilia","pissang"],"contents/en/how-to/chart-types/bar/stacked-bar.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/bar/polar-bar.md":["Hansz00","pissang"],"contents/en/how-to/chart-types/bar/basic-bar.md":["Hank","Hansz00","pissang"],"contents/en/how-to/chart-types/bar/bar-race.md":["Hansz00","Ovilia","pissang"],"contents/en/get-started.md":["Ovilia","pissang","plainheart"],"contents/en/concepts/visual-map.md":["pissang"],"contents/en/concepts/tooltip.md":["Ovilia","huanghan01"],"contents/en/concepts/style.md":["pissang"],"contents/en/concepts/series.md":["Ovilia","huanghan01"],"contents/en/concepts/options.md":["Ovilia","huanghan01"],"contents/en/concepts/legend.md":["huanghan01","pissang"],"contents/en/concepts/event.md":["100pah","Ovilia","huanghan01","pissang"],"contents/en/concepts/dataset.md":["100pah","Ovilia","huanghan01","pissang"],"contents/en/concepts/data-transform.md":["100pah","pissang"],"contents/en/concepts/coordinate.md":["Ovilia","huanghan01"],"contents/en/concepts/chart-size.md":["huanghan01","pissang"],"contents/en/concepts/axis.md":["huanghan01","pissang"],"contents/en/best-practices/specification/scatter/scatter.md":["Hansz00","pissang"],"contents/en/best-practices/specification/scatter/bubble.md":["Hansz00","pissang"],"contents/en/best-practices/specification/radar.md":["Hansz00","pissang"],"contents/en/best-practices/specification/pie/basic-pie.md":["Hansz00","pissang"],"contents/en/best-practices/specification/line/stacked-area.md":["Hansz00","pissang"],"contents/en/best-practices/specification/line/basic-line.md":["Hansz00","pissang"],"contents/en/best-practices/specification/line/area.md":["Hansz00","pissang"],"contents/en/best-practices/specification/gauge.md":["Hansz00","pissang"],"contents/en/best-practices/specification/funnel.md":["Hansz00","pissang"],"contents/en/best-practices/specification/bar/stacked-bar.md":["Hansz00","pissang"],"contents/en/best-practices/specification/bar/grouped-bar.md":["Hansz00","pissang"],"contents/en/best-practices/specification/bar/bi-directional-bar.md":["Hansz00","pissang"],"contents/en/best-practices/specification/bar/basic-bar.md":["Hansz00","pissang"],"contents/en/best-practices/mobile.md":["Hansz00","Ovilia","pissang"],"contents/en/best-practices/design/color-enhance.md":["Hansz00","pissang"],"contents/en/best-practices/canvas-vs-svg.md":["100pah","Hansz00","Ovilia","pissang"],"contents/en/best-practices/aria.md":["Hansz00","Ovilia","pissang"],"contents/en/basics/release-note/v5-upgrade-guide.md":["pissang"],"contents/en/basics/release-note/v5-feature.md":["pissang"],"contents/en/basics/release-note/5-2-0.md":["Ovilia","pissang"],"contents/en/basics/inspiration.md":["pissang"],"contents/en/basics/import.md":["pissang"],"contents/en/basics/help.md":["pissang"],"contents/en/basics/download.md":["Ovilia","pissang"],"contents/.prettierrc":["pissang"],"contents/zh/how-to/label/rich-text.md":["pissang"],"contents/zh/how-to/interaction/drag.md":["pissang"],"contents/zh/how-to/mobile.md":["Ovilia","pissang"],"contents/zh/meta/edit-guide.md":["Ovilia","pissang"],"contents/zh/meta/writing.md":["Ovilia","pissang"],"contents/zh/posts.yml":["Ovilia","pissang"]};n(139);var J=Object(l.c)({props:{path:String},setup:function(t){return{contributors:Object(l.a)((function(){return G["contents/".concat(t.path||"",".md")]})),sourcePath:Object(l.a)((function(){return(e=t.path).endsWith(".md")||(e+=".md"),n&&(e+="#".concat(decodeURIComponent(n))),"https://github.com/".concat(h.a.gitRepo,"/tree/master/contents/").concat(e);var e,n}))}}}),K=(n(299),Object(v.a)(J,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"post-contributors"},[n("h3",[n("span",{staticClass:"inline-block align-middle"},[t._v("本文贡献者")]),t._v(" "),n("a",{staticClass:"inline-block align-middle text-sm",attrs:{target:"_blank",href:t.sourcePath,title:"编辑本文"}},[n("svg",{staticClass:"h-8 w-8 inline-block align-middle",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("path",{attrs:{"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"}})]),t._v(" "),n("span",{staticClass:"inline-block align-middle"},[t._v("在 GitHub 上编辑本页")])])]),t._v(" "),t.contributors&&t.contributors.length?n("div",{staticClass:"post-contributors-list"},t._l(t.contributors,(function(e){return n("a",{key:e,staticClass:"post-contributor",attrs:{href:"https://github.com/"+e,target:"_blank"}},[n("img",{attrs:{alt:e,src:"https://avatars.githubusercontent.com/"+e+"?size=60"}}),t._v(" "),n("span",[t._v(t._s(e))])])})),0):t._e()])}),[],!1,null,null,null).exports),Q={functional:!0,props:{content:String},render:function(t,e){return t({template:"<article>"+e.props.content+"</article>"})}},X=n(300),Y=n.n(X);function tt(t){return t.replace(/^```(\w+?)\s+live\s*({.*?})?\s*?\n([\s\S]+?)^```/gm,(function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"{}",code=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"";e=e.trim(),n=n.trim()||"{}";var c=x.b(code.trim(),!0);return'<md-live lang="'.concat(e,'" code="\'').concat(c,'\'" v-bind="').concat(n,'" />')}))}function et(t){return t.replace(/^```(\w+?)\s*({.*?})?\s*?\n([\s\S]+?)^```/gm,(function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",code=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"";e=e.trim();var c=x.b(code.trim(),!0);return'<md-code-block lang="'.concat(e,'" code="\'').concat(c,"'\" line-highlights=\"'").concat(n,"'\" />")}))}function nt(t,e){return["optionPath","mainSitePath","exampleViewPath","exampleEditorPath"].forEach((function(p){var n=h.a[p].replace("${lang}",e);t=t.replace(new RegExp("\\$\\{"+p+"\\}","g"),n)})),t=t.replace(/\$\{lang\}/g,e)}var st={components:{Contributors:K,PostContent:Q},data:function(){return{toc:[]}},mounted:function(){var t,e=this;this.toc=[];for(var s,n=(null===(t=this.$el.querySelector(".post-inner"))||void 0===t?void 0:t.querySelectorAll(" h2,h3"))||[],i=0;i<n.length;i++){var title=n[i].innerText;this.toc.push({title:title,depth:+n[i].nodeName.replace(/\D/g,""),id:(s=title,encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g,"-")))})}setTimeout((function(){e._lazyload=new Y.a({elements_selector:"img[data-src], iframe[data-src]",threshold:300})}))},destroyed:function(){this._lazyload&&this._lazyload.destroy()},head:function(){return{meta:[{hid:"docsearch:language",name:"docsearch:language",content:this.$i18n.locale}]}},asyncData:function(t){return Object(c.a)(regeneratorRuntime.mark((function e(){var c,o,r,l,content,d;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return c=t.params,o=t.i18n,r="".concat(o.locale,"/").concat(c.pathMatch),e.next=4,n(301)("./".concat(r,".md"));case 4:return l=e.sent,content=nt(et(tt(l.default)),o.locale),d=V()({html:!0,linkify:!0}).use(F.a,{permalink:!1,permalinkAfter:!0,permalinkSymbol:"#",permalinkClass:"permalink"}).use((function(t){var e=t.renderer.rules.image;t.renderer.rules.image=function(t,n,c,o,r){var l=t[n],d=l.attrGet("src");return l.attrPush(["data-src",d]),l.attrSet("src",""),e(t,n,c,o,r)}})),e.abrupt("return",{html:d.render(content),postPath:r});case 8:case"end":return e.stop()}}),e)})))()}},at=Object(v.a)(st,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"post-inner"},[t.toc.length?n("div",{staticClass:"table-of-contents"},[n("h4",{staticClass:"toc-container-header"},[t._v(t._s(t.$t("inThisPage")))]),t._v(" "),n("ul",t._l(t.toc,(function(link){return n("li",{key:link.id,class:{toc2:2===link.depth,toc3:3===link.depth}},[n("NuxtLink",{attrs:{to:"#"+link.id}},[t._v(t._s(link.title))])],1)})),0)]):t._e(),t._v(" "),n("div",{staticClass:"nuxt-content"},[n("post-content",{attrs:{content:t.html}})],1)]),t._v(" "),n("contributors",{attrs:{path:t.postPath}})],1)}),[],!1,null,null,null);e.default=at.exports}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/d58fed0446e1448e8acc.js b/handbook/_nuxt/js/d58fed0446e1448e8acc.js
deleted file mode 100644
index c696549..0000000
--- a/handbook/_nuxt/js/d58fed0446e1448e8acc.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{305:function(n,e,o){"use strict";o.r(e),e.default='# Get Inspired\n\nThe following list provides some ideas when you have a question "I don\'t know how to design a chart" or "I don\'t know how to use Apache ECharts to achieve a certain effect".\n\n- [Apache ECharts Official Examples](${mainSitePath}/examples)\n- "Applications - Common Charts" in this handbook\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/db0e35482386339f1402.js b/handbook/_nuxt/js/db0e35482386339f1402.js
new file mode 100644
index 0000000..e63bc2a
--- /dev/null
+++ b/handbook/_nuxt/js/db0e35482386339f1402.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[118],{412:function(r,t,o){"use strict";o.r(t),t.default="# 在百度智能小程序中使用 ECharts\n\n[ECharts 图表](http://smartprogram.baidu.com/docs/develop/framework/echarts/) 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。\n\n[baidu-smart-app-echarts-demo](https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo) 项目是使用该动态库的一个示例工程,可以作为参考,一般情况下不需要引入自己的项目。\n\n如有使用上的问题,可以在 [baidu-smart-app-echarts-demo/issues](https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues) 中咨询。\n\n## 使用方式\n\n参见百度智能小程序文档 [ECharts 图表](http://smartprogram.baidu.com/docs/develop/framework/echarts/)。\n\n## 注意事项\n\n百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与[在微信小程序中使用 ECharts](./zh/application/cross-platform/wechat-app) 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 `provider` 指定动态库名称,具体参见[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「在项目中引用动态库」章节。\n\n请务必查看[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「兼容性说明」以了解各功能的实现方式。\n"}}]);
\ No newline at end of file
diff --git a/handbook/en/basics/download/index.html b/handbook/en/basics/download/index.html
index f1b35af..c39638e 100644
--- a/handbook/en/basics/download/index.html
+++ b/handbook/en/basics/download/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="get-apache-echarts" tabindex="-1">Get Apache ECharts</h1> <p>Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project.</p> <ul><li>Use From GitHub</li> <li>Use From npm</li> <li>Use From CDN</li> <li>Online Customization</li></ul> <p>We'll go over each of these installation methods and the directory structure after download.</p> <h2 id="installation" tabindex="-1">Installation</h2> <h3 id="use-from-npm" tabindex="-1">Use From npm</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</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>See <a href="en/basics/import">Introducing Apache ECharts in your project</a> for details.</p> <h3 id="use-from-cdn" tabindex="-1">Use From CDN</h3> <p>Recommend referencing <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a> from jsDelivr.</p> <h3 id="use-from-github" tabindex="-1">Use From GitHub</h3> <p>You can find links to each version on the <a href="https://github.com/apache/echarts/releases">release</a> page of the <a href="https://github.com/apache/echarts">apache/echarts</a> project. Click on the Source code in Assets at the bottom of the download page, and unzip the <code>echarts.js</code> file in the <code>dist</code> directory to include the full ECharts functionality.</p> <h3 id="online-customization" tabindex="-1">Online Customization</h3> <p>If you want to introduce only some modules to reduce package size, you can use the <a href="https://echarts.apache.org//builder.html">ECharts online customization</a> function.</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/en/basics/download.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,n,o,s,h,c,p,f,u,m,b,g,C,w,v,y,E,S,k,x,P,B,D,G,R,A,U,z,L,F,I,j,N,_,H,V,M,O,T,W,X,Y,$,J,Z,q,K,Q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="get-apache-echarts" tabindex="-1">Get Apache ECharts</h1>\n<p>Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project.</p>\n<ul>\n<li>Use From GitHub</li>\n<li>Use From npm</li>\n<li>Use From CDN</li>\n<li>Online Customization</li>\n</ul>\n<p>We\'ll go over each of these installation methods and the directory structure after download.</p>\n<h2 id="installation" tabindex="-1">Installation</h2>\n<h3 id="use-from-npm" tabindex="-1">Use From npm</h3>\n<md-code-block lang="sh" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<p>See <a href="en/basics/import">Introducing Apache ECharts in your project</a> for details.</p>\n<h3 id="use-from-cdn" tabindex="-1">Use From CDN</h3>\n<p>Recommend referencing <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a> from jsDelivr.</p>\n<h3 id="use-from-github" tabindex="-1">Use From GitHub</h3>\n<p>You can find links to each version on the <a href="https://github.com/apache/echarts/releases">release</a> page of the <a href="https://github.com/apache/echarts">apache/echarts</a> project. Click on the Source code in Assets at the bottom of the download page, and unzip the <code>echarts.js</code> file in the <code>dist</code> directory to include the full ECharts functionality.</p>\n<h3 id="online-customization" tabindex="-1">Online Customization</h3>\n<p>If you want to introduce only some modules to reduce package size, you can use the <a href="https://echarts.apache.org//builder.html">ECharts online customization</a> function.</p>\n',postPath:"en/basics/download"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:u}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:g,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:w},{title:"数据集",dir:v},{title:"数据转换",dir:y},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:B,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:A,draft:t},{title:"阶梯瀑布图",dir:U},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:I},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:_},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:O}]}]},{title:T,dir:i,draft:t},{title:"跨平台方案",dir:W,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:$},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:K,draft:t}]}]},{title:"最佳实践",dir:Q,children:[{title:T,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:u}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:w},{title:"Dataset",dir:v},{title:"Data Transform",dir:y},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:P,children:[{title:"Common Charts",dir:B,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:A,draft:t},{title:"Waterfall",dir:U}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:I},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:_},{title:"Ring Style",dir:H},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:W,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:$},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:K,draft:t}]}]},{title:"Best Practices",dir:Q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/basics/download",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="get-apache-echarts" tabindex="-1">Get Apache ECharts</h1> <p>Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project.</p> <ul><li>Use From GitHub</li> <li>Use From npm</li> <li>Use From CDN</li> <li>Online Customization</li></ul> <p>We'll go over each of these installation methods and the directory structure after download.</p> <h2 id="installation" tabindex="-1">Installation</h2> <h3 id="use-from-npm" tabindex="-1">Use From npm</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</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>See <a href="en/basics/import">Introducing Apache ECharts in your project</a> for details.</p> <h3 id="use-from-cdn" tabindex="-1">Use From CDN</h3> <p>Recommend referencing <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a> from jsDelivr.</p> <h3 id="use-from-github" tabindex="-1">Use From GitHub</h3> <p>You can find links to each version on the <a href="https://github.com/apache/echarts/releases">release</a> page of the <a href="https://github.com/apache/echarts">apache/echarts</a> project. Click on the Source code in Assets at the bottom of the download page, and unzip the <code>echarts.js</code> file in the <code>dist</code> directory to include the full ECharts functionality.</p> <h3 id="online-customization" tabindex="-1">Online Customization</h3> <p>If you want to introduce only some modules to reduce package size, you can use the <a href="https://echarts.apache.org//builder.html">ECharts online customization</a> function.</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/en/basics/download.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,n,o,s,h,c,p,f,u,m,b,g,C,w,v,y,E,S,k,x,P,B,D,G,R,A,U,z,L,F,I,j,N,_,H,V,M,O,T,W,X,Y,$,J,Z,q,K,Q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="get-apache-echarts" tabindex="-1">Get Apache ECharts</h1>\n<p>Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project.</p>\n<ul>\n<li>Use From GitHub</li>\n<li>Use From npm</li>\n<li>Use From CDN</li>\n<li>Online Customization</li>\n</ul>\n<p>We\'ll go over each of these installation methods and the directory structure after download.</p>\n<h2 id="installation" tabindex="-1">Installation</h2>\n<h3 id="use-from-npm" tabindex="-1">Use From npm</h3>\n<md-code-block lang="sh" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<p>See <a href="en/basics/import">Introducing Apache ECharts in your project</a> for details.</p>\n<h3 id="use-from-cdn" tabindex="-1">Use From CDN</h3>\n<p>Recommend referencing <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a> from jsDelivr.</p>\n<h3 id="use-from-github" tabindex="-1">Use From GitHub</h3>\n<p>You can find links to each version on the <a href="https://github.com/apache/echarts/releases">release</a> page of the <a href="https://github.com/apache/echarts">apache/echarts</a> project. Click on the Source code in Assets at the bottom of the download page, and unzip the <code>echarts.js</code> file in the <code>dist</code> directory to include the full ECharts functionality.</p>\n<h3 id="online-customization" tabindex="-1">Online Customization</h3>\n<p>If you want to introduce only some modules to reduce package size, you can use the <a href="https://echarts.apache.org//builder.html">ECharts online customization</a> function.</p>\n',postPath:"en/basics/download"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:u}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:g,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:w},{title:"数据集",dir:v},{title:"数据转换",dir:y},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:B,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:A,draft:t},{title:"阶梯瀑布图",dir:U},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:I},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:_},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:O}]}]},{title:T,dir:i,draft:t},{title:"跨平台方案",dir:W,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:$},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:K,draft:t}]}]},{title:"最佳实践",dir:Q,children:[{title:T,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:u}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:w},{title:"Dataset",dir:v},{title:"Data Transform",dir:y},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:P,children:[{title:"Common Charts",dir:B,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:A,draft:t},{title:"Waterfall",dir:U}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:I},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:_},{title:"Ring Style",dir:H},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:W,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:$},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:K,draft:t}]}]},{title:"Best Practices",dir:Q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/basics/download",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/basics/help/index.html b/handbook/en/basics/help/index.html
index da53b60..3461d2f 100644
--- a/handbook/en/basics/help/index.html
+++ b/handbook/en/basics/help/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="get-help" tabindex="-1">Get Help</h1> <h2 id="technical-problems" tabindex="-1">Technical Problems</h2> <h3 id="make-sure-that-existing-documentation-do-not-solve-your-problem" tabindex="-1">Make sure that existing documentation do not solve your problem</h3> <p>ECharts has a very large number of users, so it's likely that someone else has encountered and solved a problem you've had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help.</p> <p>Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:</p> <ul><li><a href="https://echarts.apache.org//api.html">API</a></li> <li><a href="https://echarts.apache.org//option.html">Option Manual</a>: you can try to use the search function</li> <li>Articles in this handbook</li> <li><a href="https://echarts.apache.org//faq.html">FAQ</a></li> <li>Searching in <a href="https://github.com/apache/echarts/issues">GitHub issue</a></li> <li>Using the search engine</li></ul> <h3 id="create-the-minimal-reproducible-demo" tabindex="-1">Create the Minimal Reproducible Demo</h3> <p>Create an example on <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>, <a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a>, which will make it easier for others to reproduce your problem.</p> <p>The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to Create a Minimal, Reproducible Example</a> for a more detailed description.</p> <h3 id="determining-if-it's-a-bug" tabindex="-1">Determining if It's a Bug</h3> <h4 id="report-a-bug-or-request-a-new-feature" tabindex="-1">Report a Bug or Request a New Feature</h4> <p>If it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the <a href="https://ecomfe.github.io/echarts-issue-helper/">issue template</a> to create a new issue and follow the prompts to describe it in detail.</p> <h4 id="how-to-questions" tabindex="-1">How-To Questions</h4> <p>If it's not a bug, but you don't know how to achieve something, try the <a href="https://stackoverflow.com">stackoverflow.com</a></p> <p>If you don't get an answer, you can also send an email to the email group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>. In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.</p> <h2 id="non-technical-questions" tabindex="-1">Non-technical questions</h2> <p>Other questions can be sent in English to the mail group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</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/en/basics/help.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,l,d,o,n,s,h,c,p,u,m,b,f,g,y,v,w,x,C,k,P,S,B,E,R,q,D,I,M,A,G,L,T,H,_,O,V,z,N,U,W,F,Q,X,$,Y,j,J,K,Z,tt,et,it){return{layout:"default",data:[{html:'<h1 id="get-help" tabindex="-1">Get Help</h1>\n<h2 id="technical-problems" tabindex="-1">Technical Problems</h2>\n<h3 id="make-sure-that-existing-documentation-do-not-solve-your-problem" tabindex="-1">Make sure that existing documentation do not solve your problem</h3>\n<p>ECharts has a very large number of users, so it\'s likely that someone else has encountered and solved a problem you\'ve had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help.</p>\n<p>Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:</p>\n<ul>\n<li><a href="https://echarts.apache.org//api.html">API</a></li>\n<li><a href="https://echarts.apache.org//option.html">Option Manual</a>: you can try to use the search function</li>\n<li>Articles in this handbook</li>\n<li><a href="https://echarts.apache.org//faq.html">FAQ</a></li>\n<li>Searching in <a href="https://github.com/apache/echarts/issues">GitHub issue</a></li>\n<li>Using the search engine</li>\n</ul>\n<h3 id="create-the-minimal-reproducible-demo" tabindex="-1">Create the Minimal Reproducible Demo</h3>\n<p>Create an example on <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>, <a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a>, which will make it easier for others to reproduce your problem.</p>\n<p>The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to Create a Minimal, Reproducible Example</a> for a more detailed description.</p>\n<h3 id="determining-if-it\'s-a-bug" tabindex="-1">Determining if It\'s a Bug</h3>\n<h4 id="report-a-bug-or-request-a-new-feature" tabindex="-1">Report a Bug or Request a New Feature</h4>\n<p>If it doesn\'t match the documentation or your intended result, it\'s probably a bug. If it\'s a bug, or you have a feature request, use the <a href="https://ecomfe.github.io/echarts-issue-helper/">issue template</a> to create a new issue and follow the prompts to describe it in detail.</p>\n<h4 id="how-to-questions" tabindex="-1">How-To Questions</h4>\n<p>If it\'s not a bug, but you don\'t know how to achieve something, try the <a href="https://stackoverflow.com">stackoverflow.com</a></p>\n<p>If you don\'t get an answer, you can also send an email to the email group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>. In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.</p>\n<h2 id="non-technical-questions" tabindex="-1">Non-technical questions</h2>\n<p>Other questions can be sent in English to the mail group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>.</p>\n',postPath:"en/basics/help"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:u},{title:5.2,dir:m}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:g,draft:t},{title:"系列",dir:y,draft:t},{title:"样式",dir:v},{title:"数据集",dir:w},{title:"数据转换",dir:x},{title:"坐标系",dir:C,draft:t},{title:"坐标轴",dir:k},{title:"视觉映射",dir:i},{title:"图例",dir:P},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:E,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:q},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:I,draft:t},{title:"阶梯瀑布图",dir:M},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:A,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:L},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:_}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:U}]}]},{title:W,dir:e,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:$},{title:"数据下钻",dir:Y,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:J,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:K,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:u},{title:5.2,dir:m}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:y,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:w},{title:"Data Transform",dir:x},{title:"Coordinate",dir:C,draft:t},{title:"Axis",dir:k},{title:"Visual Mapping",dir:i},{title:"Legend",dir:P},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:B,children:[{title:"Common Charts",dir:E,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:q},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:I,draft:t},{title:"Waterfall",dir:M}]},{title:"Line",dir:A,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:L},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:_}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:$},{title:"Drilldown",dir:Y,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:J,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:K,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/basics/help",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="get-help" tabindex="-1">Get Help</h1> <h2 id="technical-problems" tabindex="-1">Technical Problems</h2> <h3 id="make-sure-that-existing-documentation-do-not-solve-your-problem" tabindex="-1">Make sure that existing documentation do not solve your problem</h3> <p>ECharts has a very large number of users, so it's likely that someone else has encountered and solved a problem you've had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help.</p> <p>Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:</p> <ul><li><a href="https://echarts.apache.org//api.html">API</a></li> <li><a href="https://echarts.apache.org//option.html">Option Manual</a>: you can try to use the search function</li> <li>Articles in this handbook</li> <li><a href="https://echarts.apache.org//faq.html">FAQ</a></li> <li>Searching in <a href="https://github.com/apache/echarts/issues">GitHub issue</a></li> <li>Using the search engine</li></ul> <h3 id="create-the-minimal-reproducible-demo" tabindex="-1">Create the Minimal Reproducible Demo</h3> <p>Create an example on <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>, <a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a>, which will make it easier for others to reproduce your problem.</p> <p>The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to Create a Minimal, Reproducible Example</a> for a more detailed description.</p> <h3 id="determining-if-it's-a-bug" tabindex="-1">Determining if It's a Bug</h3> <h4 id="report-a-bug-or-request-a-new-feature" tabindex="-1">Report a Bug or Request a New Feature</h4> <p>If it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the <a href="https://ecomfe.github.io/echarts-issue-helper/">issue template</a> to create a new issue and follow the prompts to describe it in detail.</p> <h4 id="how-to-questions" tabindex="-1">How-To Questions</h4> <p>If it's not a bug, but you don't know how to achieve something, try the <a href="https://stackoverflow.com">stackoverflow.com</a></p> <p>If you don't get an answer, you can also send an email to the email group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>. In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.</p> <h2 id="non-technical-questions" tabindex="-1">Non-technical questions</h2> <p>Other questions can be sent in English to the mail group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</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/en/basics/help.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,l,d,o,n,s,h,c,p,u,m,b,f,g,y,v,w,x,C,k,P,S,B,E,R,q,D,I,M,A,G,L,T,H,_,O,V,z,N,U,W,F,Q,X,$,Y,j,J,K,Z,tt,et,it){return{layout:"default",data:[{html:'<h1 id="get-help" tabindex="-1">Get Help</h1>\n<h2 id="technical-problems" tabindex="-1">Technical Problems</h2>\n<h3 id="make-sure-that-existing-documentation-do-not-solve-your-problem" tabindex="-1">Make sure that existing documentation do not solve your problem</h3>\n<p>ECharts has a very large number of users, so it\'s likely that someone else has encountered and solved a problem you\'ve had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help.</p>\n<p>Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:</p>\n<ul>\n<li><a href="https://echarts.apache.org//api.html">API</a></li>\n<li><a href="https://echarts.apache.org//option.html">Option Manual</a>: you can try to use the search function</li>\n<li>Articles in this handbook</li>\n<li><a href="https://echarts.apache.org//faq.html">FAQ</a></li>\n<li>Searching in <a href="https://github.com/apache/echarts/issues">GitHub issue</a></li>\n<li>Using the search engine</li>\n</ul>\n<h3 id="create-the-minimal-reproducible-demo" tabindex="-1">Create the Minimal Reproducible Demo</h3>\n<p>Create an example on <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>, <a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a>, which will make it easier for others to reproduce your problem.</p>\n<p>The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to Create a Minimal, Reproducible Example</a> for a more detailed description.</p>\n<h3 id="determining-if-it\'s-a-bug" tabindex="-1">Determining if It\'s a Bug</h3>\n<h4 id="report-a-bug-or-request-a-new-feature" tabindex="-1">Report a Bug or Request a New Feature</h4>\n<p>If it doesn\'t match the documentation or your intended result, it\'s probably a bug. If it\'s a bug, or you have a feature request, use the <a href="https://ecomfe.github.io/echarts-issue-helper/">issue template</a> to create a new issue and follow the prompts to describe it in detail.</p>\n<h4 id="how-to-questions" tabindex="-1">How-To Questions</h4>\n<p>If it\'s not a bug, but you don\'t know how to achieve something, try the <a href="https://stackoverflow.com">stackoverflow.com</a></p>\n<p>If you don\'t get an answer, you can also send an email to the email group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>. In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.</p>\n<h2 id="non-technical-questions" tabindex="-1">Non-technical questions</h2>\n<p>Other questions can be sent in English to the mail group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>.</p>\n',postPath:"en/basics/help"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:u},{title:5.2,dir:m}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:g,draft:t},{title:"系列",dir:y,draft:t},{title:"样式",dir:v},{title:"数据集",dir:w},{title:"数据转换",dir:x},{title:"坐标系",dir:C,draft:t},{title:"坐标轴",dir:k},{title:"视觉映射",dir:i},{title:"图例",dir:P},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:E,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:q},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:I,draft:t},{title:"阶梯瀑布图",dir:M},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:A,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:L},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:_}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:U}]}]},{title:W,dir:e,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:$},{title:"数据下钻",dir:Y,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:J,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:K,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:u},{title:5.2,dir:m}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:y,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:w},{title:"Data Transform",dir:x},{title:"Coordinate",dir:C,draft:t},{title:"Axis",dir:k},{title:"Visual Mapping",dir:i},{title:"Legend",dir:P},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:B,children:[{title:"Common Charts",dir:E,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:q},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:I,draft:t},{title:"Waterfall",dir:M}]},{title:"Line",dir:A,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:L},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:_}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:$},{title:"Drilldown",dir:Y,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:J,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:K,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/basics/help",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/basics/import/index.html b/handbook/en/basics/import/index.html
index 8af1ec3..21208ca 100644
--- a/handbook/en/basics/import/index.html
+++ b/handbook/en/basics/import/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="use-apache-echarts-with-bundler-and-npm" tabindex="-1">Use Apache ECharts with bundler and NPM</h1> <p>If your development environment uses a package management tool like <code>npm</code> or <code>yarn</code> and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts<sup>TM</sup> via treeshaking.</p> <h2 id="npm-installation-of-echarts" tabindex="-1">NPM Installation of ECharts</h2> <p>You can install ECharts via npm using the following command</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="introduce-echarts" tabindex="-1">Introduce ECharts</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="use-apache-echarts-with-bundler-and-npm" tabindex="-1">Use Apache ECharts with bundler and NPM</h1> <p>If your development environment uses a package management tool like <code>npm</code> or <code>yarn</code> and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts<sup>TM</sup> via treeshaking.</p> <h2 id="npm-installation-of-echarts" tabindex="-1">NPM Installation of ECharts</h2> <p>You can install ECharts via npm using the following command</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="introduce-echarts" tabindex="-1">Introduce ECharts</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
<span class="token comment">// initialize the echarts instance</span>
<span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -90,7 +90,8 @@
<span class="token keyword">var</span> option<span class="token operator">:</span> ECOption <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</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></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/en/basics/import.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,d,l,a,r,n,o,c,h,s,b,g,p,m,I,C,G,u,y,B,v,Z,w,X,W,J,V,R,f,N,Y,k,z,F,H,E,A,S,U,K,M,Q,L,T,D,x,j,P,O,q,_,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="use-apache-echarts-with-bundler-and-npm" tabindex="-1">Use Apache ECharts with bundler and NPM</h1>\n<p>If your development environment uses a package management tool like <code>npm</code> or <code>yarn</code> and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts<sup>TM</sup> via treeshaking.</p>\n<h2 id="npm-installation-of-echarts" tabindex="-1">NPM Installation of ECharts</h2>\n<p>You can install ECharts via npm using the following command</p>\n<md-code-block lang="shell" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<h2 id="introduce-echarts" tabindex="-1">Introduce ECharts</h2>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKCi8vIGluaXRpYWxpemUgdGhlIGVjaGFydHMgaW5zdGFuY2UKdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIERyYXcgdGhlIGNoYXJ0Cm15Q2hhcnQuc2V0T3B0aW9uKHsKICB0aXRsZTogewogICAgdGV4dDogJ0VDaGFydHMgR2V0dGluZyBTdGFydGVkIEV4YW1wbGUnCiAgfSwKICB0b29sdGlwOiB7fSwKICB4QXhpczogewogICAgZGF0YTogWydzaGlydCcsICdjYXJkaWdhbicsICdjaGlmZm9uJywgJ3BhbnRzJywgJ2hlZWxzJywgJ3NvY2tzJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3NhbGVzJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgICB9CiAgXQp9KTs\'" line-highlights="\'\'" />\n<h2 id="importing-required-charts-and-components-to-have-minimal-bundle." tabindex="-1">Importing Required Charts and Components to Have Minimal Bundle.</h2>\n<p>The above code will import all the charts and components in ECharts, but if you don\'t want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle.</p>\n<md-code-block lang="js" code="\'Ly8gSW1wb3J0IHRoZSBlY2hhcnRzIGNvcmUgbW9kdWxlLCB3aGljaCBwcm92aWRlcyB0aGUgbmVjZXNzYXJ5IGludGVyZmFjZXMgZm9yIHVzaW5nIGVjaGFydHMuCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9jb3JlJzsKLy8gSW1wb3J0IGJhciBjaGFydHMsIGFsbCB3aXRoIENoYXJ0IHN1ZmZpeAppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKLy8gaW1wb3J0IHRoZSB0b29sdGlwLCB0aXRsZSwgYW5kIHJlY3Rhbmd1bGFyIGNvb3JkaW5hdGUgc3lzdGVtIGNvbXBvbmVudHMsIGFsbCBzdWZmaXhlZCB3aXRoIENvbXBvbmVudAppbXBvcnQgewogIFRpdGxlQ29tcG9uZW50LAogIFRvb2x0aXBDb21wb25lbnQsCiAgR3JpZENvbXBvbmVudAp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIEltcG9ydCB0aGUgQ2FudmFzIHJlbmRlcmVyLCBub3RlIHRoYXQgaW50cm9kdWNpbmcgdGhlIENhbnZhc1JlbmRlcmVyIG9yIFNWR1JlbmRlcmVyIGlzIGEgcmVxdWlyZWQgc3RlcAppbXBvcnQgeyBDYW52YXNSZW5kZXJlciB9IGZyb20gJ2VjaGFydHMvcmVuZGVyZXJzJzsKCi8vIFJlZ2lzdGVyIHRoZSByZXF1aXJlZCBjb21wb25lbnRzCmVjaGFydHMudXNlKFsKICBUaXRsZUNvbXBvbmVudCwKICBUb29sdGlwQ29tcG9uZW50LAogIEdyaWRDb21wb25lbnQsCiAgQmFyQ2hhcnQsCiAgQ2FudmFzUmVuZGVyZXIKXSk7CgovLyBUaGUgbmV4dCBzdGVwIGlzIHRoZSBzYW1lIGFzIGJlZm9yZSwgaW5pdGlhbGl6ZSB0aGUgY2hhcnQgYW5kIHNldCB0aGUgY29uZmlndXJhdGlvbiBpdGVtcwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<blockquote>\n<p>Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import <code>CanvasRenderer</code> or <code>SVGRenderer</code> as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the <code>CanvasRenderer</code> module, which is not needed.</p>\n</blockquote>\n<p>The "Full Code" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.</p>\n<h2 id="minimal-option-type-in-typescript" tabindex="-1">Minimal Option Type in TypeScript</h2>\n<p>For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal <code>EChartsOption</code> type. This stricter type can effectively help you check for missing components or charts.</p>\n<md-code-block lang="ts" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgewogIEJhckNoYXJ0LAogIC8vIFRoZSBzZXJpZXMgdHlwZXMgYXJlIGRlZmluZWQgd2l0aCB0aGUgU2VyaWVzT3B0aW9uIHN1ZmZpeAogIEJhclNlcmllc09wdGlvbiwKICBMaW5lQ2hhcnQsCiAgTGluZVNlcmllc09wdGlvbgp9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsKICBUaXRsZUNvbXBvbmVudCwKICAvLyBUaGUgY29tcG9uZW50IHR5cGVzIGFyZSBkZWZpbmVkIHdpdGggdGhlIHN1ZmZpeCBDb21wb25lbnRPcHRpb24KICBUaXRsZUNvbXBvbmVudE9wdGlvbiwKICBHcmlkQ29tcG9uZW50LAogIEdyaWRDb21wb25lbnRPcHRpb24KfSBmcm9tICdlY2hhcnRzL2NvbXBvbmVudHMnOwppbXBvcnQgeyBDYW52YXNSZW5kZXJlciB9IGZyb20gJ2VjaGFydHMvcmVuZGVyZXJzJzsKCi8vIENvbWJpbmUgYW4gT3B0aW9uIHR5cGUgd2l0aCBvbmx5IHJlcXVpcmVkIGNvbXBvbmVudHMgYW5kIGNoYXJ0cyB2aWEgQ29tcG9zZU9wdGlvbgp0eXBlIEVDT3B0aW9uID0gZWNoYXJ0cy5Db21wb3NlT3B0aW9uPAogIHwgQmFyU2VyaWVzT3B0aW9uCiAgfCBMaW5lU2VyaWVzT3B0aW9uCiAgfCBUaXRsZUNvbXBvbmVudE9wdGlvbgogIHwgR3JpZENvbXBvbmVudE9wdGlvbgo-OwoKLy8gUmVnaXN0ZXIgdGhlIHJlcXVpcmVkIGNvbXBvbmVudHMKZWNoYXJ0cy51c2UoWwogIFRpdGxlQ29tcG9uZW50LAogIFRvb2x0aXBDb21wb25lbnQsCiAgR3JpZENvbXBvbmVudCwKICBCYXJDaGFydCwKICBDYW52YXNSZW5kZXJlcgpdKTsKCnZhciBvcHRpb246IEVDT3B0aW9uID0gewogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n',postPath:"en/basics/import"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:b},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:p}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:C,draft:t},{title:"系列",dir:G,draft:t},{title:"样式",dir:u},{title:"数据集",dir:y},{title:"数据转换",dir:B},{title:"坐标系",dir:v,draft:t},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:i},{title:"图例",dir:w},{title:"事件与行为",dir:X}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:V},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:f},{title:"极坐标系柱状图",dir:N,draft:t},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:E},{title:"阶梯线图",dir:A}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:K}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:Q}]}]},{title:L,dir:e,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:D}]},{title:"数据处理",dir:x,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:P,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:L,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:b},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:p}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:C,draft:t},{title:"Series",dir:G,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:y},{title:"Data Transform",dir:B},{title:"Coordinate",dir:v,draft:t},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:i},{title:"Legend",dir:w},{title:"Event and Action",dir:X}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:V},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:f},{title:"Bar Polar",dir:N,draft:t},{title:"Waterfall",dir:Y}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:E},{title:"Step Line",dir:A}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:U},{title:"Rose Style",dir:K}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:Q}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:D}]},{title:"Data",dir:x,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:P,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/basics/import",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/basics/import.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,d,l,a,r,n,o,c,h,s,b,g,p,m,I,C,G,u,y,B,v,Z,w,X,W,J,V,R,f,N,Y,k,z,F,H,E,A,S,U,K,M,Q,L,T,D,x,j,P,O,q,_,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="use-apache-echarts-with-bundler-and-npm" tabindex="-1">Use Apache ECharts with bundler and NPM</h1>\n<p>If your development environment uses a package management tool like <code>npm</code> or <code>yarn</code> and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts<sup>TM</sup> via treeshaking.</p>\n<h2 id="npm-installation-of-echarts" tabindex="-1">NPM Installation of ECharts</h2>\n<p>You can install ECharts via npm using the following command</p>\n<md-code-block lang="shell" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<h2 id="introduce-echarts" tabindex="-1">Introduce ECharts</h2>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKCi8vIGluaXRpYWxpemUgdGhlIGVjaGFydHMgaW5zdGFuY2UKdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIERyYXcgdGhlIGNoYXJ0Cm15Q2hhcnQuc2V0T3B0aW9uKHsKICB0aXRsZTogewogICAgdGV4dDogJ0VDaGFydHMgR2V0dGluZyBTdGFydGVkIEV4YW1wbGUnCiAgfSwKICB0b29sdGlwOiB7fSwKICB4QXhpczogewogICAgZGF0YTogWydzaGlydCcsICdjYXJkaWdhbicsICdjaGlmZm9uJywgJ3BhbnRzJywgJ2hlZWxzJywgJ3NvY2tzJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3NhbGVzJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgICB9CiAgXQp9KTs\'" line-highlights="\'\'" />\n<h2 id="importing-required-charts-and-components-to-have-minimal-bundle." tabindex="-1">Importing Required Charts and Components to Have Minimal Bundle.</h2>\n<p>The above code will import all the charts and components in ECharts, but if you don\'t want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle.</p>\n<md-code-block lang="js" code="\'Ly8gSW1wb3J0IHRoZSBlY2hhcnRzIGNvcmUgbW9kdWxlLCB3aGljaCBwcm92aWRlcyB0aGUgbmVjZXNzYXJ5IGludGVyZmFjZXMgZm9yIHVzaW5nIGVjaGFydHMuCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9jb3JlJzsKLy8gSW1wb3J0IGJhciBjaGFydHMsIGFsbCB3aXRoIENoYXJ0IHN1ZmZpeAppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKLy8gaW1wb3J0IHRoZSB0b29sdGlwLCB0aXRsZSwgYW5kIHJlY3Rhbmd1bGFyIGNvb3JkaW5hdGUgc3lzdGVtIGNvbXBvbmVudHMsIGFsbCBzdWZmaXhlZCB3aXRoIENvbXBvbmVudAppbXBvcnQgewogIFRpdGxlQ29tcG9uZW50LAogIFRvb2x0aXBDb21wb25lbnQsCiAgR3JpZENvbXBvbmVudAp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIEltcG9ydCB0aGUgQ2FudmFzIHJlbmRlcmVyLCBub3RlIHRoYXQgaW50cm9kdWNpbmcgdGhlIENhbnZhc1JlbmRlcmVyIG9yIFNWR1JlbmRlcmVyIGlzIGEgcmVxdWlyZWQgc3RlcAppbXBvcnQgeyBDYW52YXNSZW5kZXJlciB9IGZyb20gJ2VjaGFydHMvcmVuZGVyZXJzJzsKCi8vIFJlZ2lzdGVyIHRoZSByZXF1aXJlZCBjb21wb25lbnRzCmVjaGFydHMudXNlKFsKICBUaXRsZUNvbXBvbmVudCwKICBUb29sdGlwQ29tcG9uZW50LAogIEdyaWRDb21wb25lbnQsCiAgQmFyQ2hhcnQsCiAgQ2FudmFzUmVuZGVyZXIKXSk7CgovLyBUaGUgbmV4dCBzdGVwIGlzIHRoZSBzYW1lIGFzIGJlZm9yZSwgaW5pdGlhbGl6ZSB0aGUgY2hhcnQgYW5kIHNldCB0aGUgY29uZmlndXJhdGlvbiBpdGVtcwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<blockquote>\n<p>Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import <code>CanvasRenderer</code> or <code>SVGRenderer</code> as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the <code>CanvasRenderer</code> module, which is not needed.</p>\n</blockquote>\n<p>The "Full Code" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.</p>\n<h2 id="minimal-option-type-in-typescript" tabindex="-1">Minimal Option Type in TypeScript</h2>\n<p>For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal <code>EChartsOption</code> type. This stricter type can effectively help you check for missing components or charts.</p>\n<md-code-block lang="ts" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgewogIEJhckNoYXJ0LAogIC8vIFRoZSBzZXJpZXMgdHlwZXMgYXJlIGRlZmluZWQgd2l0aCB0aGUgU2VyaWVzT3B0aW9uIHN1ZmZpeAogIEJhclNlcmllc09wdGlvbiwKICBMaW5lQ2hhcnQsCiAgTGluZVNlcmllc09wdGlvbgp9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsKICBUaXRsZUNvbXBvbmVudCwKICAvLyBUaGUgY29tcG9uZW50IHR5cGVzIGFyZSBkZWZpbmVkIHdpdGggdGhlIHN1ZmZpeCBDb21wb25lbnRPcHRpb24KICBUaXRsZUNvbXBvbmVudE9wdGlvbiwKICBHcmlkQ29tcG9uZW50LAogIEdyaWRDb21wb25lbnRPcHRpb24KfSBmcm9tICdlY2hhcnRzL2NvbXBvbmVudHMnOwppbXBvcnQgeyBDYW52YXNSZW5kZXJlciB9IGZyb20gJ2VjaGFydHMvcmVuZGVyZXJzJzsKCi8vIENvbWJpbmUgYW4gT3B0aW9uIHR5cGUgd2l0aCBvbmx5IHJlcXVpcmVkIGNvbXBvbmVudHMgYW5kIGNoYXJ0cyB2aWEgQ29tcG9zZU9wdGlvbgp0eXBlIEVDT3B0aW9uID0gZWNoYXJ0cy5Db21wb3NlT3B0aW9uPAogIHwgQmFyU2VyaWVzT3B0aW9uCiAgfCBMaW5lU2VyaWVzT3B0aW9uCiAgfCBUaXRsZUNvbXBvbmVudE9wdGlvbgogIHwgR3JpZENvbXBvbmVudE9wdGlvbgo-OwoKLy8gUmVnaXN0ZXIgdGhlIHJlcXVpcmVkIGNvbXBvbmVudHMKZWNoYXJ0cy51c2UoWwogIFRpdGxlQ29tcG9uZW50LAogIFRvb2x0aXBDb21wb25lbnQsCiAgR3JpZENvbXBvbmVudCwKICBCYXJDaGFydCwKICBDYW52YXNSZW5kZXJlcgpdKTsKCnZhciBvcHRpb246IEVDT3B0aW9uID0gewogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n',postPath:"en/basics/import"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:b},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:p}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:C,draft:t},{title:"系列",dir:G,draft:t},{title:"样式",dir:u},{title:"数据集",dir:y},{title:"数据转换",dir:B},{title:"坐标系",dir:v,draft:t},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:i},{title:"图例",dir:w},{title:"事件与行为",dir:X}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:V},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:f},{title:"极坐标系柱状图",dir:N,draft:t},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:E},{title:"阶梯线图",dir:A}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:K}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:Q}]}]},{title:L,dir:e,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:D}]},{title:"数据处理",dir:x,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:P,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:L,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:b},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:p}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:C,draft:t},{title:"Series",dir:G,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:y},{title:"Data Transform",dir:B},{title:"Coordinate",dir:v,draft:t},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:i},{title:"Legend",dir:w},{title:"Event and Action",dir:X}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:V},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:f},{title:"Bar Polar",dir:N,draft:t},{title:"Waterfall",dir:Y}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:E},{title:"Step Line",dir:A}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:U},{title:"Rose Style",dir:K}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:Q}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:D}]},{title:"Data",dir:x,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:P,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/basics/import",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/basics/inspiration/index.html b/handbook/en/basics/inspiration/index.html
index a00aa4f..f74d61e 100644
--- a/handbook/en/basics/inspiration/index.html
+++ b/handbook/en/basics/inspiration/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="get-inspired" tabindex="-1">Get Inspired</h1> <p>The following list provides some ideas when you have a question "I don't know how to design a chart" or "I don't know how to use Apache ECharts to achieve a certain effect".</p> <ul><li><a href="https://echarts.apache.org//examples">Apache ECharts Official Examples</a></li> <li>"Applications - Common Charts" in this handbook</li></ul></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/en/basics/inspiration.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,o,s,h,c,p,f,u,m,g,b,C,w,v,E,P,S,k,x,B,y,R,A,D,L,q,G,I,_,T,V,M,z,H,O,U,N,W,$,F,X,j,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="get-inspired" tabindex="-1">Get Inspired</h1>\n<p>The following list provides some ideas when you have a question "I don\'t know how to design a chart" or "I don\'t know how to use Apache ECharts to achieve a certain effect".</p>\n<ul>\n<li><a href="https://echarts.apache.org//examples">Apache ECharts Official Examples</a></li>\n<li>"Applications - Common Charts" in this handbook</li>\n</ul>\n',postPath:"en/basics/inspiration"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:u}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:g},{title:"配置项",dir:b,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:w},{title:"数据集",dir:v},{title:"数据转换",dir:E},{title:"坐标系",dir:P,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:A},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:q},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:I},{title:"堆叠折线图",dir:_},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:N}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:$,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:F}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:u}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:g},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:w},{title:"Dataset",dir:v},{title:"Data Transform",dir:E},{title:"Coordinate",dir:P,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:B,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:A},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:q}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:I},{title:"Stacked Line",dir:_},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:H},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:$,children:[{title:"Server Side Rendering",dir:F}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/basics/inspiration",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="get-inspired" tabindex="-1">Get Inspired</h1> <p>The following list provides some ideas when you have a question "I don't know how to design a chart" or "I don't know how to use Apache ECharts to achieve a certain effect".</p> <ul><li><a href="https://echarts.apache.org//examples">Apache ECharts Official Examples</a></li> <li>"How To Guides - Common Charts" in this handbook</li></ul></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/en/basics/inspiration.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,o,s,h,c,p,f,u,m,g,b,C,w,v,E,P,S,k,x,B,y,R,D,G,L,q,A,I,T,_,V,H,M,z,O,U,N,W,$,F,X,j,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="get-inspired" tabindex="-1">Get Inspired</h1>\n<p>The following list provides some ideas when you have a question "I don\'t know how to design a chart" or "I don\'t know how to use Apache ECharts to achieve a certain effect".</p>\n<ul>\n<li><a href="https://echarts.apache.org//examples">Apache ECharts Official Examples</a></li>\n<li>"How To Guides - Common Charts" in this handbook</li>\n</ul>\n',postPath:"en/basics/inspiration"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:u}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:g},{title:"配置项",dir:b,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:w},{title:"数据集",dir:v},{title:"数据转换",dir:E},{title:"坐标系",dir:P,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:G},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:q},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:A,children:[{title:"基础折线图",dir:I},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:_},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:z},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:N}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:$,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:F}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:u}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:g},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:w},{title:"Dataset",dir:v},{title:"Data Transform",dir:E},{title:"Coordinate",dir:P,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:B,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:G},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:q}]},{title:"Line",dir:A,children:[{title:"Basic Line",dir:I},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:_},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:z},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:$,children:[{title:"Server Side Rendering",dir:F}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/basics/inspiration",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/basics/release-note/5-2-0/index.html b/handbook/en/basics/release-note/5-2-0/index.html
index cedd1aa..dc104cd 100644
--- a/handbook/en/basics/release-note/5-2-0/index.html
+++ b/handbook/en/basics/release-note/5-2-0/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="what's-new-in-apache-echarts-5.2.0" tabindex="-1">What's New in Apache ECharts 5.2.0</h1> <h2 id="universal-transition" tabindex="-1">Universal Transition</h2> <p>Natural and smooth transition animations have been an important feature in Apache ECharts. By avoiding abrupt changes from data update, it not only improves the visual effect, but also provides the possibility to express the association and evolution of data. Therefore, in 5.2.0, we have further enhanced this animation capability. Next, we will see how this <strong>Universal Transition</strong> adds expressiveness and narrative power to the chart.</p> <p>In previous versions, transition animations had certain limitations: they could only be used for the position, size of the same shape, and they could only work on the same type of series. For example, the following example reflects the change in data percent through the change in sector shape in a pie chart.</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">function makeRandomData() {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="what's-new-in-apache-echarts-5.2.0" tabindex="-1">What's New in Apache ECharts 5.2.0</h1> <h2 id="universal-transition" tabindex="-1">Universal Transition</h2> <p>Natural and smooth transition animations have been an important feature in Apache ECharts. By avoiding abrupt changes from data update, it not only improves the visual effect, but also provides the possibility to express the association and evolution of data. Therefore, in 5.2.0, we have further enhanced this animation capability. Next, we will see how this <strong>Universal Transition</strong> adds expressiveness and narrative power to the chart.</p> <p>In previous versions, transition animations had certain limitations: they could only be used for the position, size of the same shape, and they could only work on the same type of series. For example, the following example reflects the change in data percent through the change in sector shape in a pie chart.</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">function makeRandomData() {
return [
{
value: Math.random(),
@@ -594,7 +594,8 @@
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="summary" tabindex="-1">Summary</h2> <p>If you're interested in some of the features and optimizations in 5.2.0, you may want to update to the latest version of Apache ECharts and try it out for yourself.</p> <p>If you're interested in what's next for Apache ECharts, you can also follow our development plans at <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a>. Feel free to join us as a contributor (learn more at <a href="https://github.com/apache/echarts/wiki">Wiki</a>).</p> <h3 id="full-changelog" tabindex="-1">Full Changelog</h3> <h4 id="break-changes" tabindex="-1">Break Changes</h4> <ul><li>[Fix][pie] Negative value will be filtered <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li></ul> <h4 id="all-changes" tabindex="-1">All Changes</h4> <ul><li><strong>[Feature] Introduce universal transition to all series. <a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li> <li>[Feature][color] Add <code>series.colorBy</code> <a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][label] Support sector label positions for polar bars <a href="https://github.com/ecomfe/zrender/issues/774">#774</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][effectscatter] Add <code>rippleEffect.number</code> <a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Feature][gauge] Add <code>pointer.showAbove</code> to allow pointer show above the title and details. <a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Feature][emphasis] <code>emphasis.color</code> can use <code>'inherit'</code> to be not higlighted. <a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li> <li>[Feature][pie] Display an empty cicle when pie don't have value. <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][dataset] Fix dataset performance drops signifcantly on high dimensions data. <a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][axis] Optimize format in time axis <a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li> <li>[Fix][custom] Optimize text font compatibility with legacy code. <a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][memory] Optimize memory when chart instance is still hold after dispose <a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][line] Optimize color gradient when having infinite value. <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][date] Optimize date parsing <a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li> <li>[Fix][line] Fix render bug. <a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][candlestick] Fix style lost after update <a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][sankey] Gradient should follow orient. <a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][tooltip] Fix tooltip formatter doesn't renders HTMLElement if tooltip position is specified. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][tooltip] Tooltip should clear content when formatter returns null. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][bar] Set label to be inside when position is <code>'middle'</code> <a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][marker] Fix 'clampData' undefined error in 'getMarkerPosition' <a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][treemap] Fix old nodes not removed when disabled animation <a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li> <li>[Fix][tree] Fix edge may not removed when update data <a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie/sunburst] Fix <code>borderRadius</code> can't be reset in pie series and sunburst series when setting it to <code>null</code> or <code>undefined</code> <a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][canvas] Fix unexpected <code>none</code> or <code>null</code> fillStyle may be warned in firefox <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][highlight] Hightlight multiple series through <code>chart.dispatchAction</code> not work as expected <a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][sankey] Fix drag bug when using <code>series.nodes</code> to represent data. <a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li> <li>[Fix][svg] Optimize exported SVG compatibility for Powerpoint. <a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][legend] Fix <code>text.lineHeight</code> not work <a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie] Change the default <code>itemStyle.borderJoin</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][radar] Change the default <code>lineStyle.join</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][treemap] Fix <code>label.show</code> set to <code>false</code> will throw error <a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][pictorialbar] Fix pictorialBar zero value label display. <a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][lines] Fix lines can't be cleared by chart.clear() <a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][endlabel] Fix endLabel not display when only set <code>emphasis.show</code> to <code>true</code>. <a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][svg] Fix rect path not closed. <a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][treemap] Add <code>treeAncestors</code> in callback params <a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][tree] Fix error when running setOption twice with different data <a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][radar] Fix radar symbol border is scaled <a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][marker] Fix symbolOffset and symbolKeepAspect doesn't work in markPoint. <a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][gauge] Fix data index and series index is missing. <a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li> <li>[Fix][tooltip] Tooltip arrow will follow borderWidth. <a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li> <li>[Fix][geo] Fix geo switch from hidden to show fail. <a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][type] Optimize type of <code>renderItem</code> in custom series.</li> <li>[Fix][type] Optimize option type of <code>echarts.init</code>. <a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li> <li>[Fix][type] There is no <code>polarIndex</code> when coordinate of series is polar <a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][type] Optimize type when using SVG source in geo component. <a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li> <li>[Fix][type] Fix wrong type for <code>pie</code> data and <code>map</code> data. <a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</li></ul></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/en/basics/release-note/5-2-0.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,s,o,r,n,h,g,l,c,d,I,p,C,A,u,m,b,f,w,y,B,G,F,v,x,Z,H,X,R,J,W,Y,K,k,S,V,z,N,O,L,T,D,U,M,E,Q,j,P,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="what\'s-new-in-apache-echarts-5.2.0" tabindex="-1">What\'s New in Apache ECharts 5.2.0</h1>\n<h2 id="universal-transition" tabindex="-1">Universal Transition</h2>\n<p>Natural and smooth transition animations have been an important feature in Apache ECharts. By avoiding abrupt changes from data update, it not only improves the visual effect, but also provides the possibility to express the association and evolution of data. Therefore, in 5.2.0, we have further enhanced this animation capability. Next, we will see how this <strong>Universal Transition</strong> adds expressiveness and narrative power to the chart.</p>\n<p>In previous versions, transition animations had certain limitations: they could only be used for the position, size of the same shape, and they could only work on the same type of series. For example, the following example reflects the change in data percent through the change in sector shape in a pie chart.</p>\n<md-live lang="js" code="\'ZnVuY3Rpb24gbWFrZVJhbmRvbURhdGEoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdBJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdCJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdDJwogICAgfQogIF07Cn0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiBbMCwgJzUwJSddLAogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgXQp9OwoKc2V0SW50ZXJ2YWwoKCkgPT4gewogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogewogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgfSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'lr\'}" />\n<p>And starting with 5.2.0, we introduced universal transition, a more powerful animation feature. With that, transitions are no longer limited to between series of the same type. Now, we can use this cross-series morphing to animate between any type of series and any type of shapes.</p>\n<p>How cool would this be? Let\'s have a look!</p>\n<h3 id="morphing-transition-across-series" tabindex="-1">Morphing transition across series</h3>\n<p>With <code>universalTransition: true</code> set to enable universion transition feature, switching from pie charts to bar charts, or from bar charts to scatter charts, or even between more complex charts like Sunburst and Treemap, can be morphed naturally.</p>\n<p>As follows, switching between a pie chart and a bar chart.</p>\n<md-live lang="js" code="\'Y29uc3QgZGF0YXNldCA9IHsKICBkaW1lbnNpb25zOiBbJ25hbWUnLCAnc2NvcmUnXSwKICBzb3VyY2U6IFsKICAgIFsnSGFubmFoIEtyYXVzZScsIDMxNF0sCiAgICBbJ1poYW8gUWlhbicsIDM1MV0sCiAgICBbJ0phc21pbiBLcmF1c2UgJywgMjg3XSwKICAgIFsnTGkgTGVpJywgMjE5XSwKICAgIFsnS2FybGUgTmV1bWFubicsIDI1M10sCiAgICBbJ01pYSBOZXVtYW5uJywgMTY1XSwKICAgIFsnQsO2aG0gRnVjaHMnLCAzMThdLAogICAgWydIYW4gTWVpbWVpJywgMzY2XQogIF0KfTsKY29uc3QgcGllT3B0aW9uID0gewogIGRhdGFzZXQ6IFtkYXRhc2V0XSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIGFzc29jaWF0ZSB0aGUgc2VyaWVzIHRvIGJlIGFuaW1hdGVkIGJ5IGlkCiAgICAgIGlkOiAnU2NvcmUnLAogICAgICByYWRpdXM6IFswLCAnNTAlJ10sCiAgICAgIHVuaXZlcnNhbFRyYW5zaXRpb246IHRydWUsCiAgICAgIGFuaW1hdGlvbkR1cmF0aW9uVXBkYXRlOiAxMDAwCiAgICB9CiAgXQp9Owpjb25zdCBiYXJPcHRpb24gPSB7CiAgZGF0YXNldDogW2RhdGFzZXRdLAogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICAvLyBhc3NvY2lhdGUgdGhlIHNlcmllcyB0byBiZSBhbmltYXRlZCBieSBpZAogICAgICBpZDogJ1Njb3JlJywKICAgICAgLy8gRWFjaCBkYXRhIHdpbGwgaGF2ZSBhIGRpZmZlcmVudCBjb2xvcgogICAgICBjb2xvckJ5OiAnZGF0YScsCiAgICAgIGVuY29kZTogeyB4OiAnbmFtZScsIHk6ICdzY29yZScgfSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CgpvcHRpb24gPSBiYXJPcHRpb247CgpzZXRJbnRlcnZhbCgoKSA9PiB7CiAgb3B0aW9uID0gb3B0aW9uID09PSBwaWVPcHRpb24gPyBiYXJPcHRpb24gOiBwaWVPcHRpb247CiAgLy8gVXNlIHRoZSBub3RNZXJnZSBmb3JtIHRvIHJlbW92ZSB0aGUgYXhlcwogIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbiwgdHJ1ZSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'bt\'}" />\n<p>More transitions between common charts.</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition.gif"></p>\n<p>Such transitions are no longer limited to just the basic line, bar, and pie charts, but also between bars and maps:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-2.gif"></p>\n<p>or between Sunburst and Treemap, or even between very flexible custom series can be transitions.</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-3.gif"></p>\n<blockquote>\n<p>Note that you need to configure the series ids to ensure that there is a one-to-one correspondence between the series that need to be animated for the transition.</p>\n</blockquote>\n<h3 id="data-split-and-merge-animations" tabindex="-1">Data split and merge animations</h3>\n<p>In addition to the common update of data values, sometimes we also encounter data aggregation, drill-down and other updates after interactions, when we can not directly apply one-to-one transitions, but need to use more animation effects like splitting and merging to express the transformation of data.</p>\n<p>In order to be able to express the possible many-to-many connections between data, in 5.2.0 we introduced a new concept <code>groupId</code>. We can set the group to the whole series via <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a>, or more fine-grained by <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.data.groupId</a> to set the group to which each data belongs. It\'s even easier if you use a <code>dataset</code> to manage the data, you can use <code>encode.itemGroupId</code> to specify a dimension encoded as <code>groupId</code>.</p>\n<p>For example, if we want to implement a drill-down animation for a bar chart, we can set the entire series of data after the drill-down to the same <code>groupId</code>, which then corresponds to the data before the drill-down</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0FuaW1hbHMnLCAnRnJ1aXRzJywgJ0NhcnMnXQogIH0sCiAgeUF4aXM6IHt9LAogIGRhdGFHcm91cElkOiAnJywKICBhbmltYXRpb25EdXJhdGlvblVwZGF0ZTogNTAwLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBpZDogJ3NhbGVzJywKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiA1LAogICAgICAgIGdyb3VwSWQ6ICdhbmltYWxzJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDIsCiAgICAgICAgZ3JvdXBJZDogJ2ZydWl0cycKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiA0LAogICAgICAgIGdyb3VwSWQ6ICdjYXJzJwogICAgICB9CiAgICBdLAogICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogewogICAgICBlbmFibGVkOiB0cnVlLAogICAgICBkaXZpZGVTaGFwZTogJ2Nsb25lJwogICAgfQogIH0KfTsKCmNvbnN0IGRyaWxsZG93bkRhdGEgPSBbCiAgewogICAgZGF0YUdyb3VwSWQ6ICdhbmltYWxzJywKICAgIGRhdGE6IFsKICAgICAgWydDYXRzJywgNF0sCiAgICAgIFsnRG9ncycsIDJdLAogICAgICBbJ0Nvd3MnLCAxXSwKICAgICAgWydTaGVlcCcsIDJdLAogICAgICBbJ1BpZ3MnLCAxXSwKICAgICAgWydDb3dzJywgMV0sCiAgICAgIFsnU2hlZXAnLCAyXSwKICAgICAgWydQaWdzJywgMV0KICAgIF0KICB9LAogIHsKICAgIGRhdGFHcm91cElkOiAnZnJ1aXRzJywKICAgIGRhdGE6IFsKICAgICAgWydBcHBsZXMnLCA0XSwKICAgICAgWydPcmFuZ2VzJywgMl0sCiAgICAgIFsnT3JhbmdlcycsIDJdCiAgICBdCiAgfSwKICB7CiAgICBkYXRhR3JvdXBJZDogJ2NhcnMnLAogICAgZGF0YTogWwogICAgICBbJ1RveW90YScsIDRdLAogICAgICBbJ09wZWwnLCAyXSwKICAgICAgWydWb2xrc3dhZ2VuJywgMl0sCiAgICAgIFsnVm9sa3N3YWdlbicsIDJdCiAgICBdCiAgfQpdOwoKbXlDaGFydC5vbignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LmRhdGEpIHsKICAgIGNvbnN0IHN1YkRhdGEgPSBkcmlsbGRvd25EYXRhLmZpbmQoZGF0YSA9PiB7CiAgICAgIHJldHVybiBkYXRhLmRhdGFHcm91cElkID09PSBldmVudC5kYXRhLmdyb3VwSWQ7CiAgICB9KTsKICAgIGlmICghc3ViRGF0YSkgewogICAgICByZXR1cm47CiAgICB9CiAgICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICAgIHhBeGlzOiB7CiAgICAgICAgZGF0YTogc3ViRGF0YS5kYXRhLm1hcChpdGVtID0-IHsKICAgICAgICAgIHJldHVybiBpdGVtWzBdOwogICAgICAgIH0pCiAgICAgIH0sCiAgICAgIHNlcmllczogewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGlkOiAnc2FsZXMnLAogICAgICAgIGRhdGFHcm91cElkOiBzdWJEYXRhLmRhdGFHcm91cElkLAogICAgICAgIGRhdGE6IHN1YkRhdGEuZGF0YS5tYXAoaXRlbSA9PiB7CiAgICAgICAgICByZXR1cm4gaXRlbVsxXTsKICAgICAgICB9KSwKICAgICAgICB1bml2ZXJzYWxUcmFuc2l0aW9uOiB7CiAgICAgICAgICBlbmFibGVkOiB0cnVlLAogICAgICAgICAgZGl2aWRlU2hhcGU6ICdjbG9uZScKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGdyYXBoaWM6IFsKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAndGV4dCcsCiAgICAgICAgICBsZWZ0OiA1MCwKICAgICAgICAgIHRvcDogMjAsCiAgICAgICAgICBzdHlsZTogewogICAgICAgICAgICB0ZXh0OiAnQmFjaycsCiAgICAgICAgICAgIGZvbnRTaXplOiAxOAogICAgICAgICAgfSwKICAgICAgICAgIG9uY2xpY2s6IGZ1bmN0aW9uKCkgewogICAgICAgICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24sIHRydWUpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgXQogICAgfSk7CiAgfQp9KTs\'" v-bind="{layout: \'lr\'}" />\n<p>With <code>groupId</code>, we can also implement richer aggregation and drill-down animations.</p>\n<p>Aggregation of data.</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition.gif"></p>\n<p>Drilling down of a single series into two series:</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition-2.gif"></p>\n<p>Universal transition take the ability to express the relationships and evolution of data to a new level, giving wings to your visualization creation inspiration.</p>\n<p>At this point, we know you\'re already eager to try it out. But don\'t worry, there are even more new features in 5.2.0 that are worth checking out.</p>\n<h2 id="color-palette-picking-strategy" tabindex="-1">Color palette picking strategy</h2>\n<p>In the above universal transition example, you may have noticed that we use a <code>colorBy</code> configuration that was not available in the previous version. This configuration is also a new feature we added in this version to configure different granularity of color palette color picking for the series. This configuration currently supports two strategies.</p>\n<ul>\n<li><code>\'series\'</code> assigns the colors in the palette by series, so that all data in the same series are in the same color.</li>\n<li><code>\'data\'</code> assigns colors in the palette according to data items, with each data item using a different color.</li>\n</ul>\n<p>Previously, we fixed this strategy for each type of series, for example, the bar chart was fixed with <code>\'series\'</code> and the pie chart was fixed with <code>\'data\'</code>.</p>\n<p>And now with this new feature, we can assign a different color to each data item in the bar chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBjb2xvckJ5OiAnZGF0YScKICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>Or use one color uniformly in the pie chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBjb2xvckJ5OiAnc2VyaWVzJywKICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgIGl0ZW1TdHlsZTogewogICAgICBib3JkZXJDb2xvcjogJyNmZmYnLAogICAgICBib3JkZXJXaWR0aDogMQogICAgfSwKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgbmFtZTogJ0RpcmVjdCBWaXNpdCcKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiAyMzQsCiAgICAgICAgbmFtZTogJ1VuaW9uIEFkJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgIH0KICAgIF0KICB9Cn07\'" v-bind="{layout: \'lr\'}" />\n<p>This configuration allows us to avoid the trouble of finding palette colors and setting them one by one, and may provide convenience in specific scenarios. We will further enhance this configuration later to provide more strategies.</p>\n<h2 id="labels-for-polar-bar-charts" tabindex="-1">Labels for polar bar charts</h2>\n<p>In this version we have implemented labels for bar charts on polar coordinates and support rich label positioning configurations. The following is a progress chart with labels displayed at the start points.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGFuZ2xlQXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtYXg6IDEwCiAgfSwKICByYWRpdXNBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ0FBQScsICdCQkInLCAnQ0NDJywgJ0RERCddCiAgfSwKICBwb2xhcjoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMywgNCwgNSwgNl0sCiAgICAgIGNvbG9yQnk6ICdkYXRhJywKICAgICAgcm91bmRDYXA6IHRydWUsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyBUcnkgY2hhbmdpbmcgaXQgdG8gJ2luc2lkZVN0YXJ0JwogICAgICAgIHBvc2l0aW9uOiAnc3RhcnQnLAogICAgICAgIGZvcm1hdHRlcjogJ3tifScKICAgICAgfSwKICAgICAgY29vcmRpbmF0ZVN5c3RlbTogJ3BvbGFyJwogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>More configurations for label positions.</p>\n<p><img src="" alt="" data-src="images/5-2-0/polar-bar-label.jpg"></p>\n<p>This flexible label position configuration item greatly enriches the expressiveness of the polar bar chart, allowing the text to clearly match the corresponding data.</p>\n<h2 id="pie-chart-style-for-empty-data" tabindex="-1">Pie chart style for empty data</h2>\n<p>In the previous version, if there was no data in the pie chart, the screen might be completely blank. Because there was no visual element, users may wonder if there was a bug.</p>\n<p>To solve this problem, in this version we will default to display a gray placeholder circle when there is no data to prevent the screen from being completely blank. We can configure the style of this placeholder circle with <code>emptyCircleStyle</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogW10sCiAgICAgIC8vIHNob3dFbXB0eUNpcmNsZTogZmFsc2UsCiAgICAgIGVtcHR5Q2lyY2xlU3R5bGU6IHsKICAgICAgICAvLyBjaGFuZ2UgdGhlIHN0eWxlIHRvIGVtcHR5IGNpcmNsZQogICAgICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLAogICAgICAgIGJvcmRlckNvbG9yOiAnI2RkZCcsCiAgICAgICAgYm9yZGVyV2lkdGg6IDEKICAgICAgfQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>If you don\'t want to show this gray circle, you can also set <code>showEmptyCircle: false</code> to turn it off.</p>\n<h2 id="performance-enhancements-for-high-dimensional-data" tabindex="-1">Performance enhancements for high-dimensional data</h2>\n<p>We have introduced <a href="https://echarts.apache.org/option.html#dataset">dataset</a> since 4.0 to manage chart data. However, in some extreme scenarios with particularly high-dimensional (>100) data, we may encounter some dramatic performance degradation, such as the following scenario of visualizing a thousand-dimensional data through a thousand series (<a href="https://github.com/apache/echarts/issues/11907">#11907</a>), which may even may lead to getting stuck.</p>\n<md-code-block lang="js" code="\'Y29uc3QgaW5kaWNlcyA9IEFycmF5LmZyb20oQXJyYXkoMTAwMCksIChfLCBpKSA9PiB7CiAgcmV0dXJuIGBpbmRleCR7aX1gOwp9KTsKY29uc3Qgb3B0aW9uID0gewogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgZGF0YXNldDogewogICAgLy8gZGltZW5zaW9uOiBbJ2RhdGUnLCAuIC4gaW5kaWNlc10sCiAgICBzb3VyY2U6IEFycmF5LmZyb20oQXJyYXkoMTApLCAoXywgaSkgPT4gewogICAgICByZXR1cm4gewogICAgICAgIGRhdGU6IGksCiAgICAgICAgLi4uIC5pbmRpY2VzLnJlZHVjZSgoaXRlbSwgbmV4dCkgPT4gewogICAgICAgICAgaXRlbVtuZXh0XSA9IE1hdGgucmFuZG9tKCkgKiAxMDA7CiAgICAgICAgICByZXR1cm4gaXRlbTsKICAgICAgICB9LCB7fSkKICAgICAgfTsKICAgIH0pCiAgfSwKICBzZXJpZXM6IGluZGljZXMubWFwKGluZGV4ID0-IHsKICAgIHJldHVybiB7IHR5cGU6ICdsaW5lJywgbmFtZTogaW5kZXggfTsKICB9KQp9Ow\'" line-highlights="\'\'" />\n<p>The reason for this performance problem is that we process the high-dimensional dataset at the bottom of each series as needed and save a copy of the processed data and the meta information about the dimensions of the data. This meant that the <code>1000 x 1000</code> dimensions had to be processed and saved in the example, which put a huge pressure on memory and garbage collection, resulting in a dramatic performance drop for high dimensions.</p>\n<p>In the new version we have optimized this problem so that all series share the dataset storage as much as possible (whether or not they do depends on how the series uses the data).\nThis optimization ensure that memory does not explode as the dataset dimensions and series grow, significantly improving initialization performance in this extreme scenario. The rendering time for the example just described has also been reduced to an acceptable 300 ms or less.</p>\n<p>It is not just this high-dimensional scenario that benefits from this optimization. When using a dataset with large amount of data, multiple series only process the data once because of data sharing, so it can also bring significant performance gains.</p>\n<h2 id="type-optimization-for-custom-series" tabindex="-1">Type optimization for custom series</h2>\n<p>Custom series provide a very flexible way to create series graphs. Compared to other series, the learning curve for custom series can be a bit steep. Therefore, in this release, we have further optimized the type of the core method <code>renderItem</code> in the custom series by making more precise inferences about the types of the parameters and return values of <code>renderItem</code>, so that it is possible to infer which properties of the elements can be set based on the type returned:</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdjdXN0b20nLAogIHJlbmRlckl0ZW0ocGFyYW1zKSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnZ3JvdXAnLAogICAgICAvLyBUaGUgZ3JvdXAgdHlwZSB1c2VzIGNoaWxkcmVuIHRvIHN0b3JlIGNoaWxkcmVuIG9mIG90aGVyIHR5cGVzCiAgICAgIGNoaWxkcmVuOiBbCiAgICAgICAgewogICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAvLyBjaXJjbGUgaGFzIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhYmxlIHNoYXBlIGF0dHJpYnV0ZXMKICAgICAgICAgIHNoYXBlOiB7IHI6IDEwLCBjeDogMCwgY3k6IDAgfSwKICAgICAgICAgIC8vIENvbmZpZ3VyYWJsZSBzdHlsZXMKICAgICAgICAgIHN0eWxlOiB7IGZpbGw6ICdyZWQnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdyZWN0JywKICAgICAgICAgIC8vIHJlY3QgaGFzIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhYmxlIHNoYXBlIHByb3BlcnRpZXMKICAgICAgICAgIHNoYXBlOiB7IHg6IDAsIHk6IDAsIHdpZHRoOiAxMDAsIGhlaWdodDogMTAwIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdwYXRoJywKICAgICAgICAgIC8vIEN1c3RvbSBwYXRoIHNoYXBlcwogICAgICAgICAgc2hhcGU6IHsgZDogJy4uLicgfQogICAgICAgIH0KICAgICAgXQogICAgfTsKICB9Cn07\'" line-highlights="\'\'" />\n<h2 id="summary" tabindex="-1">Summary</h2>\n<p>If you\'re interested in some of the features and optimizations in 5.2.0, you may want to update to the latest version of Apache ECharts and try it out for yourself.</p>\n<p>If you\'re interested in what\'s next for Apache ECharts, you can also follow our development plans at <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a>. Feel free to join us as a contributor (learn more at <a href="https://github.com/apache/echarts/wiki">Wiki</a>).</p>\n<h3 id="full-changelog" tabindex="-1">Full Changelog</h3>\n<h4 id="break-changes" tabindex="-1">Break Changes</h4>\n<ul>\n<li>[Fix][pie] Negative value will be filtered <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n</ul>\n<h4 id="all-changes" tabindex="-1">All Changes</h4>\n<ul>\n<li><strong>[Feature] Introduce universal transition to all series. <a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li>\n<li>[Feature][color] Add <code>series.colorBy</code> <a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][label] Support sector label positions for polar bars <a href="https://github.com/ecomfe/zrender/issues/774">#774</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][effectscatter] Add <code>rippleEffect.number</code> <a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Feature][gauge] Add <code>pointer.showAbove</code> to allow pointer show above the title and details. <a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Feature][emphasis] <code>emphasis.color</code> can use <code>\'inherit\'</code> to be not higlighted. <a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li>\n<li>[Feature][pie] Display an empty cicle when pie don\'t have value. <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][dataset] Fix dataset performance drops signifcantly on high dimensions data. <a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][axis] Optimize format in time axis <a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li>\n<li>[Fix][custom] Optimize text font compatibility with legacy code. <a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][memory] Optimize memory when chart instance is still hold after dispose <a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][line] Optimize color gradient when having infinite value. <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][date] Optimize date parsing <a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li>\n<li>[Fix][line] Fix render bug. <a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][candlestick] Fix style lost after update <a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][sankey] Gradient should follow orient. <a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][tooltip] Fix tooltip formatter doesn\'t renders HTMLElement if tooltip position is specified. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][tooltip] Tooltip should clear content when formatter returns null. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][bar] Set label to be inside when position is <code>\'middle\'</code> <a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][marker] Fix \'clampData\' undefined error in \'getMarkerPosition\' <a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][treemap] Fix old nodes not removed when disabled animation <a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li>\n<li>[Fix][tree] Fix edge may not removed when update data <a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie/sunburst] Fix <code>borderRadius</code> can\'t be reset in pie series and sunburst series when setting it to <code>null</code> or <code>undefined</code> <a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][canvas] Fix unexpected <code>none</code> or <code>null</code> fillStyle may be warned in firefox <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][highlight] Hightlight multiple series through <code>chart.dispatchAction</code> not work as expected <a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][sankey] Fix drag bug when using <code>series.nodes</code> to represent data. <a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li>\n<li>[Fix][svg] Optimize exported SVG compatibility for Powerpoint. <a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][legend] Fix <code>text.lineHeight</code> not work <a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie] Change the default <code>itemStyle.borderJoin</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][radar] Change the default <code>lineStyle.join</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][treemap] Fix <code>label.show</code> set to <code>false</code> will throw error <a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][pictorialbar] Fix pictorialBar zero value label display. <a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][lines] Fix lines can\'t be cleared by chart.clear() <a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][endlabel] Fix endLabel not display when only set <code>emphasis.show</code> to <code>true</code>. <a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][svg] Fix rect path not closed. <a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][treemap] Add <code>treeAncestors</code> in callback params <a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][tree] Fix error when running setOption twice with different data <a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][radar] Fix radar symbol border is scaled <a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][marker] Fix symbolOffset and symbolKeepAspect doesn\'t work in markPoint. <a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][gauge] Fix data index and series index is missing. <a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li>\n<li>[Fix][tooltip] Tooltip arrow will follow borderWidth. <a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li>\n<li>[Fix][geo] Fix geo switch from hidden to show fail. <a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][type] Optimize type of <code>renderItem</code> in custom series.</li>\n<li>[Fix][type] Optimize option type of <code>echarts.init</code>. <a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li>\n<li>[Fix][type] There is no <code>polarIndex</code> when coordinate of series is polar <a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][type] Optimize type when using SVG source in geo component. <a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li>\n<li>[Fix][type] Fix wrong type for <code>pie</code> data and <code>map</code> data. <a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n</ul>\n',postPath:"en/basics/release-note/5-2-0"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:s},{title:"入门篇",dir:o,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:h,draft:e},{title:"获取灵感",dir:g},{title:"寻求帮助",dir:l},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:d},{title:"ECharts 5 升级指南",dir:I},{title:5.2,dir:p}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:u,draft:e},{title:"系列",dir:m,draft:e},{title:"样式",dir:b},{title:"数据集",dir:f},{title:"数据转换",dir:w},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:G},{title:"事件与行为",dir:F}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Z},{title:"堆叠柱状图",dir:H},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:R,draft:e},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:K},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:L,children:[{title:"基础散点图",dir:T}]}]},{title:D,dir:t,draft:e},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:E,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:j,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:D,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:s},{title:"Basics",dir:o,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:n},{title:"Resources",dir:h,draft:e},{title:"Inspiration",dir:g},{title:"Get Help",dir:l},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:d},{title:"ECharts 5 Upgrade Guide",dir:I},{title:5.2,dir:p}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:u,draft:e},{title:"Series",dir:m,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:f},{title:"Data Transform",dir:w},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:G},{title:"Event and Action",dir:F}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Z},{title:"Stacked Bar",dir:H},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:R,draft:e},{title:"Waterfall",dir:J}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:K},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:N},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:L,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:E,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:j,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/basics/release-note/5-2-0",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="summary" tabindex="-1">Summary</h2> <p>If you're interested in some of the features and optimizations in 5.2.0, you may want to update to the latest version of Apache ECharts and try it out for yourself.</p> <p>If you're interested in what's next for Apache ECharts, you can also follow our development plans at <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a>. Feel free to join us as a contributor (learn more at <a href="https://github.com/apache/echarts/wiki">Wiki</a>).</p> <h3 id="full-changelog" tabindex="-1">Full Changelog</h3> <h4 id="break-changes" tabindex="-1">Break Changes</h4> <ul><li>[Fix][pie] Negative value will be filtered <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li></ul> <h4 id="all-changes" tabindex="-1">All Changes</h4> <ul><li><strong>[Feature] Introduce universal transition to all series. <a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li> <li>[Feature][color] Add <code>series.colorBy</code> <a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][label] Support sector label positions for polar bars <a href="https://github.com/ecomfe/zrender/issues/774">#774</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][effectscatter] Add <code>rippleEffect.number</code> <a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Feature][gauge] Add <code>pointer.showAbove</code> to allow pointer show above the title and details. <a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Feature][emphasis] <code>emphasis.color</code> can use <code>'inherit'</code> to be not higlighted. <a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li> <li>[Feature][pie] Display an empty cicle when pie don't have value. <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][dataset] Fix dataset performance drops signifcantly on high dimensions data. <a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][axis] Optimize format in time axis <a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li> <li>[Fix][custom] Optimize text font compatibility with legacy code. <a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][memory] Optimize memory when chart instance is still hold after dispose <a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][line] Optimize color gradient when having infinite value. <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][date] Optimize date parsing <a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li> <li>[Fix][line] Fix render bug. <a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][candlestick] Fix style lost after update <a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][sankey] Gradient should follow orient. <a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][tooltip] Fix tooltip formatter doesn't renders HTMLElement if tooltip position is specified. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][tooltip] Tooltip should clear content when formatter returns null. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][bar] Set label to be inside when position is <code>'middle'</code> <a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][marker] Fix 'clampData' undefined error in 'getMarkerPosition' <a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][treemap] Fix old nodes not removed when disabled animation <a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li> <li>[Fix][tree] Fix edge may not removed when update data <a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie/sunburst] Fix <code>borderRadius</code> can't be reset in pie series and sunburst series when setting it to <code>null</code> or <code>undefined</code> <a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][canvas] Fix unexpected <code>none</code> or <code>null</code> fillStyle may be warned in firefox <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][highlight] Hightlight multiple series through <code>chart.dispatchAction</code> not work as expected <a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][sankey] Fix drag bug when using <code>series.nodes</code> to represent data. <a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li> <li>[Fix][svg] Optimize exported SVG compatibility for Powerpoint. <a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][legend] Fix <code>text.lineHeight</code> not work <a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie] Change the default <code>itemStyle.borderJoin</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][radar] Change the default <code>lineStyle.join</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][treemap] Fix <code>label.show</code> set to <code>false</code> will throw error <a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][pictorialbar] Fix pictorialBar zero value label display. <a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][lines] Fix lines can't be cleared by chart.clear() <a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][endlabel] Fix endLabel not display when only set <code>emphasis.show</code> to <code>true</code>. <a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][svg] Fix rect path not closed. <a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][treemap] Add <code>treeAncestors</code> in callback params <a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][tree] Fix error when running setOption twice with different data <a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][radar] Fix radar symbol border is scaled <a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][marker] Fix symbolOffset and symbolKeepAspect doesn't work in markPoint. <a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][gauge] Fix data index and series index is missing. <a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li> <li>[Fix][tooltip] Tooltip arrow will follow borderWidth. <a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li> <li>[Fix][geo] Fix geo switch from hidden to show fail. <a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][type] Optimize type of <code>renderItem</code> in custom series.</li> <li>[Fix][type] Optimize option type of <code>echarts.init</code>. <a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li> <li>[Fix][type] There is no <code>polarIndex</code> when coordinate of series is polar <a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][type] Optimize type when using SVG source in geo component. <a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li> <li>[Fix][type] Fix wrong type for <code>pie</code> data and <code>map</code> data. <a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</li></ul></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/en/basics/release-note/5-2-0.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,s,o,r,n,h,g,l,c,d,I,p,C,A,u,m,b,f,w,y,B,G,F,v,x,Z,H,X,R,J,W,Y,K,k,S,V,z,N,O,L,T,D,U,M,E,Q,j,P,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="what\'s-new-in-apache-echarts-5.2.0" tabindex="-1">What\'s New in Apache ECharts 5.2.0</h1>\n<h2 id="universal-transition" tabindex="-1">Universal Transition</h2>\n<p>Natural and smooth transition animations have been an important feature in Apache ECharts. By avoiding abrupt changes from data update, it not only improves the visual effect, but also provides the possibility to express the association and evolution of data. Therefore, in 5.2.0, we have further enhanced this animation capability. Next, we will see how this <strong>Universal Transition</strong> adds expressiveness and narrative power to the chart.</p>\n<p>In previous versions, transition animations had certain limitations: they could only be used for the position, size of the same shape, and they could only work on the same type of series. For example, the following example reflects the change in data percent through the change in sector shape in a pie chart.</p>\n<md-live lang="js" code="\'ZnVuY3Rpb24gbWFrZVJhbmRvbURhdGEoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdBJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdCJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdDJwogICAgfQogIF07Cn0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiBbMCwgJzUwJSddLAogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgXQp9OwoKc2V0SW50ZXJ2YWwoKCkgPT4gewogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogewogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgfSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'lr\'}" />\n<p>And starting with 5.2.0, we introduced universal transition, a more powerful animation feature. With that, transitions are no longer limited to between series of the same type. Now, we can use this cross-series morphing to animate between any type of series and any type of shapes.</p>\n<p>How cool would this be? Let\'s have a look!</p>\n<h3 id="morphing-transition-across-series" tabindex="-1">Morphing transition across series</h3>\n<p>With <code>universalTransition: true</code> set to enable universion transition feature, switching from pie charts to bar charts, or from bar charts to scatter charts, or even between more complex charts like Sunburst and Treemap, can be morphed naturally.</p>\n<p>As follows, switching between a pie chart and a bar chart.</p>\n<md-live lang="js" code="\'Y29uc3QgZGF0YXNldCA9IHsKICBkaW1lbnNpb25zOiBbJ25hbWUnLCAnc2NvcmUnXSwKICBzb3VyY2U6IFsKICAgIFsnSGFubmFoIEtyYXVzZScsIDMxNF0sCiAgICBbJ1poYW8gUWlhbicsIDM1MV0sCiAgICBbJ0phc21pbiBLcmF1c2UgJywgMjg3XSwKICAgIFsnTGkgTGVpJywgMjE5XSwKICAgIFsnS2FybGUgTmV1bWFubicsIDI1M10sCiAgICBbJ01pYSBOZXVtYW5uJywgMTY1XSwKICAgIFsnQsO2aG0gRnVjaHMnLCAzMThdLAogICAgWydIYW4gTWVpbWVpJywgMzY2XQogIF0KfTsKY29uc3QgcGllT3B0aW9uID0gewogIGRhdGFzZXQ6IFtkYXRhc2V0XSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIGFzc29jaWF0ZSB0aGUgc2VyaWVzIHRvIGJlIGFuaW1hdGVkIGJ5IGlkCiAgICAgIGlkOiAnU2NvcmUnLAogICAgICByYWRpdXM6IFswLCAnNTAlJ10sCiAgICAgIHVuaXZlcnNhbFRyYW5zaXRpb246IHRydWUsCiAgICAgIGFuaW1hdGlvbkR1cmF0aW9uVXBkYXRlOiAxMDAwCiAgICB9CiAgXQp9Owpjb25zdCBiYXJPcHRpb24gPSB7CiAgZGF0YXNldDogW2RhdGFzZXRdLAogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICAvLyBhc3NvY2lhdGUgdGhlIHNlcmllcyB0byBiZSBhbmltYXRlZCBieSBpZAogICAgICBpZDogJ1Njb3JlJywKICAgICAgLy8gRWFjaCBkYXRhIHdpbGwgaGF2ZSBhIGRpZmZlcmVudCBjb2xvcgogICAgICBjb2xvckJ5OiAnZGF0YScsCiAgICAgIGVuY29kZTogeyB4OiAnbmFtZScsIHk6ICdzY29yZScgfSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CgpvcHRpb24gPSBiYXJPcHRpb247CgpzZXRJbnRlcnZhbCgoKSA9PiB7CiAgb3B0aW9uID0gb3B0aW9uID09PSBwaWVPcHRpb24gPyBiYXJPcHRpb24gOiBwaWVPcHRpb247CiAgLy8gVXNlIHRoZSBub3RNZXJnZSBmb3JtIHRvIHJlbW92ZSB0aGUgYXhlcwogIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbiwgdHJ1ZSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'bt\'}" />\n<p>More transitions between common charts.</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition.gif"></p>\n<p>Such transitions are no longer limited to just the basic line, bar, and pie charts, but also between bars and maps:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-2.gif"></p>\n<p>or between Sunburst and Treemap, or even between very flexible custom series can be transitions.</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-3.gif"></p>\n<blockquote>\n<p>Note that you need to configure the series ids to ensure that there is a one-to-one correspondence between the series that need to be animated for the transition.</p>\n</blockquote>\n<h3 id="data-split-and-merge-animations" tabindex="-1">Data split and merge animations</h3>\n<p>In addition to the common update of data values, sometimes we also encounter data aggregation, drill-down and other updates after interactions, when we can not directly apply one-to-one transitions, but need to use more animation effects like splitting and merging to express the transformation of data.</p>\n<p>In order to be able to express the possible many-to-many connections between data, in 5.2.0 we introduced a new concept <code>groupId</code>. We can set the group to the whole series via <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a>, or more fine-grained by <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.data.groupId</a> to set the group to which each data belongs. It\'s even easier if you use a <code>dataset</code> to manage the data, you can use <code>encode.itemGroupId</code> to specify a dimension encoded as <code>groupId</code>.</p>\n<p>For example, if we want to implement a drill-down animation for a bar chart, we can set the entire series of data after the drill-down to the same <code>groupId</code>, which then corresponds to the data before the drill-down</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0FuaW1hbHMnLCAnRnJ1aXRzJywgJ0NhcnMnXQogIH0sCiAgeUF4aXM6IHt9LAogIGRhdGFHcm91cElkOiAnJywKICBhbmltYXRpb25EdXJhdGlvblVwZGF0ZTogNTAwLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBpZDogJ3NhbGVzJywKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiA1LAogICAgICAgIGdyb3VwSWQ6ICdhbmltYWxzJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDIsCiAgICAgICAgZ3JvdXBJZDogJ2ZydWl0cycKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiA0LAogICAgICAgIGdyb3VwSWQ6ICdjYXJzJwogICAgICB9CiAgICBdLAogICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogewogICAgICBlbmFibGVkOiB0cnVlLAogICAgICBkaXZpZGVTaGFwZTogJ2Nsb25lJwogICAgfQogIH0KfTsKCmNvbnN0IGRyaWxsZG93bkRhdGEgPSBbCiAgewogICAgZGF0YUdyb3VwSWQ6ICdhbmltYWxzJywKICAgIGRhdGE6IFsKICAgICAgWydDYXRzJywgNF0sCiAgICAgIFsnRG9ncycsIDJdLAogICAgICBbJ0Nvd3MnLCAxXSwKICAgICAgWydTaGVlcCcsIDJdLAogICAgICBbJ1BpZ3MnLCAxXSwKICAgICAgWydDb3dzJywgMV0sCiAgICAgIFsnU2hlZXAnLCAyXSwKICAgICAgWydQaWdzJywgMV0KICAgIF0KICB9LAogIHsKICAgIGRhdGFHcm91cElkOiAnZnJ1aXRzJywKICAgIGRhdGE6IFsKICAgICAgWydBcHBsZXMnLCA0XSwKICAgICAgWydPcmFuZ2VzJywgMl0sCiAgICAgIFsnT3JhbmdlcycsIDJdCiAgICBdCiAgfSwKICB7CiAgICBkYXRhR3JvdXBJZDogJ2NhcnMnLAogICAgZGF0YTogWwogICAgICBbJ1RveW90YScsIDRdLAogICAgICBbJ09wZWwnLCAyXSwKICAgICAgWydWb2xrc3dhZ2VuJywgMl0sCiAgICAgIFsnVm9sa3N3YWdlbicsIDJdCiAgICBdCiAgfQpdOwoKbXlDaGFydC5vbignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LmRhdGEpIHsKICAgIGNvbnN0IHN1YkRhdGEgPSBkcmlsbGRvd25EYXRhLmZpbmQoZGF0YSA9PiB7CiAgICAgIHJldHVybiBkYXRhLmRhdGFHcm91cElkID09PSBldmVudC5kYXRhLmdyb3VwSWQ7CiAgICB9KTsKICAgIGlmICghc3ViRGF0YSkgewogICAgICByZXR1cm47CiAgICB9CiAgICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICAgIHhBeGlzOiB7CiAgICAgICAgZGF0YTogc3ViRGF0YS5kYXRhLm1hcChpdGVtID0-IHsKICAgICAgICAgIHJldHVybiBpdGVtWzBdOwogICAgICAgIH0pCiAgICAgIH0sCiAgICAgIHNlcmllczogewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGlkOiAnc2FsZXMnLAogICAgICAgIGRhdGFHcm91cElkOiBzdWJEYXRhLmRhdGFHcm91cElkLAogICAgICAgIGRhdGE6IHN1YkRhdGEuZGF0YS5tYXAoaXRlbSA9PiB7CiAgICAgICAgICByZXR1cm4gaXRlbVsxXTsKICAgICAgICB9KSwKICAgICAgICB1bml2ZXJzYWxUcmFuc2l0aW9uOiB7CiAgICAgICAgICBlbmFibGVkOiB0cnVlLAogICAgICAgICAgZGl2aWRlU2hhcGU6ICdjbG9uZScKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGdyYXBoaWM6IFsKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAndGV4dCcsCiAgICAgICAgICBsZWZ0OiA1MCwKICAgICAgICAgIHRvcDogMjAsCiAgICAgICAgICBzdHlsZTogewogICAgICAgICAgICB0ZXh0OiAnQmFjaycsCiAgICAgICAgICAgIGZvbnRTaXplOiAxOAogICAgICAgICAgfSwKICAgICAgICAgIG9uY2xpY2s6IGZ1bmN0aW9uKCkgewogICAgICAgICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24sIHRydWUpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgXQogICAgfSk7CiAgfQp9KTs\'" v-bind="{layout: \'lr\'}" />\n<p>With <code>groupId</code>, we can also implement richer aggregation and drill-down animations.</p>\n<p>Aggregation of data.</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition.gif"></p>\n<p>Drilling down of a single series into two series:</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition-2.gif"></p>\n<p>Universal transition take the ability to express the relationships and evolution of data to a new level, giving wings to your visualization creation inspiration.</p>\n<p>At this point, we know you\'re already eager to try it out. But don\'t worry, there are even more new features in 5.2.0 that are worth checking out.</p>\n<h2 id="color-palette-picking-strategy" tabindex="-1">Color palette picking strategy</h2>\n<p>In the above universal transition example, you may have noticed that we use a <code>colorBy</code> configuration that was not available in the previous version. This configuration is also a new feature we added in this version to configure different granularity of color palette color picking for the series. This configuration currently supports two strategies.</p>\n<ul>\n<li><code>\'series\'</code> assigns the colors in the palette by series, so that all data in the same series are in the same color.</li>\n<li><code>\'data\'</code> assigns colors in the palette according to data items, with each data item using a different color.</li>\n</ul>\n<p>Previously, we fixed this strategy for each type of series, for example, the bar chart was fixed with <code>\'series\'</code> and the pie chart was fixed with <code>\'data\'</code>.</p>\n<p>And now with this new feature, we can assign a different color to each data item in the bar chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBjb2xvckJ5OiAnZGF0YScKICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>Or use one color uniformly in the pie chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBjb2xvckJ5OiAnc2VyaWVzJywKICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgIGl0ZW1TdHlsZTogewogICAgICBib3JkZXJDb2xvcjogJyNmZmYnLAogICAgICBib3JkZXJXaWR0aDogMQogICAgfSwKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgbmFtZTogJ0RpcmVjdCBWaXNpdCcKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiAyMzQsCiAgICAgICAgbmFtZTogJ1VuaW9uIEFkJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgIH0KICAgIF0KICB9Cn07\'" v-bind="{layout: \'lr\'}" />\n<p>This configuration allows us to avoid the trouble of finding palette colors and setting them one by one, and may provide convenience in specific scenarios. We will further enhance this configuration later to provide more strategies.</p>\n<h2 id="labels-for-polar-bar-charts" tabindex="-1">Labels for polar bar charts</h2>\n<p>In this version we have implemented labels for bar charts on polar coordinates and support rich label positioning configurations. The following is a progress chart with labels displayed at the start points.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGFuZ2xlQXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtYXg6IDEwCiAgfSwKICByYWRpdXNBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ0FBQScsICdCQkInLCAnQ0NDJywgJ0RERCddCiAgfSwKICBwb2xhcjoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMywgNCwgNSwgNl0sCiAgICAgIGNvbG9yQnk6ICdkYXRhJywKICAgICAgcm91bmRDYXA6IHRydWUsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyBUcnkgY2hhbmdpbmcgaXQgdG8gJ2luc2lkZVN0YXJ0JwogICAgICAgIHBvc2l0aW9uOiAnc3RhcnQnLAogICAgICAgIGZvcm1hdHRlcjogJ3tifScKICAgICAgfSwKICAgICAgY29vcmRpbmF0ZVN5c3RlbTogJ3BvbGFyJwogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>More configurations for label positions.</p>\n<p><img src="" alt="" data-src="images/5-2-0/polar-bar-label.jpg"></p>\n<p>This flexible label position configuration item greatly enriches the expressiveness of the polar bar chart, allowing the text to clearly match the corresponding data.</p>\n<h2 id="pie-chart-style-for-empty-data" tabindex="-1">Pie chart style for empty data</h2>\n<p>In the previous version, if there was no data in the pie chart, the screen might be completely blank. Because there was no visual element, users may wonder if there was a bug.</p>\n<p>To solve this problem, in this version we will default to display a gray placeholder circle when there is no data to prevent the screen from being completely blank. We can configure the style of this placeholder circle with <code>emptyCircleStyle</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogW10sCiAgICAgIC8vIHNob3dFbXB0eUNpcmNsZTogZmFsc2UsCiAgICAgIGVtcHR5Q2lyY2xlU3R5bGU6IHsKICAgICAgICAvLyBjaGFuZ2UgdGhlIHN0eWxlIHRvIGVtcHR5IGNpcmNsZQogICAgICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLAogICAgICAgIGJvcmRlckNvbG9yOiAnI2RkZCcsCiAgICAgICAgYm9yZGVyV2lkdGg6IDEKICAgICAgfQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>If you don\'t want to show this gray circle, you can also set <code>showEmptyCircle: false</code> to turn it off.</p>\n<h2 id="performance-enhancements-for-high-dimensional-data" tabindex="-1">Performance enhancements for high-dimensional data</h2>\n<p>We have introduced <a href="https://echarts.apache.org/option.html#dataset">dataset</a> since 4.0 to manage chart data. However, in some extreme scenarios with particularly high-dimensional (>100) data, we may encounter some dramatic performance degradation, such as the following scenario of visualizing a thousand-dimensional data through a thousand series (<a href="https://github.com/apache/echarts/issues/11907">#11907</a>), which may even may lead to getting stuck.</p>\n<md-code-block lang="js" code="\'Y29uc3QgaW5kaWNlcyA9IEFycmF5LmZyb20oQXJyYXkoMTAwMCksIChfLCBpKSA9PiB7CiAgcmV0dXJuIGBpbmRleCR7aX1gOwp9KTsKY29uc3Qgb3B0aW9uID0gewogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgZGF0YXNldDogewogICAgLy8gZGltZW5zaW9uOiBbJ2RhdGUnLCAuIC4gaW5kaWNlc10sCiAgICBzb3VyY2U6IEFycmF5LmZyb20oQXJyYXkoMTApLCAoXywgaSkgPT4gewogICAgICByZXR1cm4gewogICAgICAgIGRhdGU6IGksCiAgICAgICAgLi4uIC5pbmRpY2VzLnJlZHVjZSgoaXRlbSwgbmV4dCkgPT4gewogICAgICAgICAgaXRlbVtuZXh0XSA9IE1hdGgucmFuZG9tKCkgKiAxMDA7CiAgICAgICAgICByZXR1cm4gaXRlbTsKICAgICAgICB9LCB7fSkKICAgICAgfTsKICAgIH0pCiAgfSwKICBzZXJpZXM6IGluZGljZXMubWFwKGluZGV4ID0-IHsKICAgIHJldHVybiB7IHR5cGU6ICdsaW5lJywgbmFtZTogaW5kZXggfTsKICB9KQp9Ow\'" line-highlights="\'\'" />\n<p>The reason for this performance problem is that we process the high-dimensional dataset at the bottom of each series as needed and save a copy of the processed data and the meta information about the dimensions of the data. This meant that the <code>1000 x 1000</code> dimensions had to be processed and saved in the example, which put a huge pressure on memory and garbage collection, resulting in a dramatic performance drop for high dimensions.</p>\n<p>In the new version we have optimized this problem so that all series share the dataset storage as much as possible (whether or not they do depends on how the series uses the data).\nThis optimization ensure that memory does not explode as the dataset dimensions and series grow, significantly improving initialization performance in this extreme scenario. The rendering time for the example just described has also been reduced to an acceptable 300 ms or less.</p>\n<p>It is not just this high-dimensional scenario that benefits from this optimization. When using a dataset with large amount of data, multiple series only process the data once because of data sharing, so it can also bring significant performance gains.</p>\n<h2 id="type-optimization-for-custom-series" tabindex="-1">Type optimization for custom series</h2>\n<p>Custom series provide a very flexible way to create series graphs. Compared to other series, the learning curve for custom series can be a bit steep. Therefore, in this release, we have further optimized the type of the core method <code>renderItem</code> in the custom series by making more precise inferences about the types of the parameters and return values of <code>renderItem</code>, so that it is possible to infer which properties of the elements can be set based on the type returned:</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdjdXN0b20nLAogIHJlbmRlckl0ZW0ocGFyYW1zKSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnZ3JvdXAnLAogICAgICAvLyBUaGUgZ3JvdXAgdHlwZSB1c2VzIGNoaWxkcmVuIHRvIHN0b3JlIGNoaWxkcmVuIG9mIG90aGVyIHR5cGVzCiAgICAgIGNoaWxkcmVuOiBbCiAgICAgICAgewogICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAvLyBjaXJjbGUgaGFzIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhYmxlIHNoYXBlIGF0dHJpYnV0ZXMKICAgICAgICAgIHNoYXBlOiB7IHI6IDEwLCBjeDogMCwgY3k6IDAgfSwKICAgICAgICAgIC8vIENvbmZpZ3VyYWJsZSBzdHlsZXMKICAgICAgICAgIHN0eWxlOiB7IGZpbGw6ICdyZWQnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdyZWN0JywKICAgICAgICAgIC8vIHJlY3QgaGFzIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhYmxlIHNoYXBlIHByb3BlcnRpZXMKICAgICAgICAgIHNoYXBlOiB7IHg6IDAsIHk6IDAsIHdpZHRoOiAxMDAsIGhlaWdodDogMTAwIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdwYXRoJywKICAgICAgICAgIC8vIEN1c3RvbSBwYXRoIHNoYXBlcwogICAgICAgICAgc2hhcGU6IHsgZDogJy4uLicgfQogICAgICAgIH0KICAgICAgXQogICAgfTsKICB9Cn07\'" line-highlights="\'\'" />\n<h2 id="summary" tabindex="-1">Summary</h2>\n<p>If you\'re interested in some of the features and optimizations in 5.2.0, you may want to update to the latest version of Apache ECharts and try it out for yourself.</p>\n<p>If you\'re interested in what\'s next for Apache ECharts, you can also follow our development plans at <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a>. Feel free to join us as a contributor (learn more at <a href="https://github.com/apache/echarts/wiki">Wiki</a>).</p>\n<h3 id="full-changelog" tabindex="-1">Full Changelog</h3>\n<h4 id="break-changes" tabindex="-1">Break Changes</h4>\n<ul>\n<li>[Fix][pie] Negative value will be filtered <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n</ul>\n<h4 id="all-changes" tabindex="-1">All Changes</h4>\n<ul>\n<li><strong>[Feature] Introduce universal transition to all series. <a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li>\n<li>[Feature][color] Add <code>series.colorBy</code> <a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][label] Support sector label positions for polar bars <a href="https://github.com/ecomfe/zrender/issues/774">#774</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][effectscatter] Add <code>rippleEffect.number</code> <a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Feature][gauge] Add <code>pointer.showAbove</code> to allow pointer show above the title and details. <a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Feature][emphasis] <code>emphasis.color</code> can use <code>\'inherit\'</code> to be not higlighted. <a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li>\n<li>[Feature][pie] Display an empty cicle when pie don\'t have value. <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][dataset] Fix dataset performance drops signifcantly on high dimensions data. <a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][axis] Optimize format in time axis <a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li>\n<li>[Fix][custom] Optimize text font compatibility with legacy code. <a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][memory] Optimize memory when chart instance is still hold after dispose <a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][line] Optimize color gradient when having infinite value. <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][date] Optimize date parsing <a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li>\n<li>[Fix][line] Fix render bug. <a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][candlestick] Fix style lost after update <a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][sankey] Gradient should follow orient. <a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][tooltip] Fix tooltip formatter doesn\'t renders HTMLElement if tooltip position is specified. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][tooltip] Tooltip should clear content when formatter returns null. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][bar] Set label to be inside when position is <code>\'middle\'</code> <a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][marker] Fix \'clampData\' undefined error in \'getMarkerPosition\' <a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][treemap] Fix old nodes not removed when disabled animation <a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li>\n<li>[Fix][tree] Fix edge may not removed when update data <a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie/sunburst] Fix <code>borderRadius</code> can\'t be reset in pie series and sunburst series when setting it to <code>null</code> or <code>undefined</code> <a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][canvas] Fix unexpected <code>none</code> or <code>null</code> fillStyle may be warned in firefox <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][highlight] Hightlight multiple series through <code>chart.dispatchAction</code> not work as expected <a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][sankey] Fix drag bug when using <code>series.nodes</code> to represent data. <a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li>\n<li>[Fix][svg] Optimize exported SVG compatibility for Powerpoint. <a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][legend] Fix <code>text.lineHeight</code> not work <a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie] Change the default <code>itemStyle.borderJoin</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][radar] Change the default <code>lineStyle.join</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][treemap] Fix <code>label.show</code> set to <code>false</code> will throw error <a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][pictorialbar] Fix pictorialBar zero value label display. <a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][lines] Fix lines can\'t be cleared by chart.clear() <a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][endlabel] Fix endLabel not display when only set <code>emphasis.show</code> to <code>true</code>. <a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][svg] Fix rect path not closed. <a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][treemap] Add <code>treeAncestors</code> in callback params <a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][tree] Fix error when running setOption twice with different data <a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][radar] Fix radar symbol border is scaled <a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][marker] Fix symbolOffset and symbolKeepAspect doesn\'t work in markPoint. <a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][gauge] Fix data index and series index is missing. <a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li>\n<li>[Fix][tooltip] Tooltip arrow will follow borderWidth. <a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li>\n<li>[Fix][geo] Fix geo switch from hidden to show fail. <a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][type] Optimize type of <code>renderItem</code> in custom series.</li>\n<li>[Fix][type] Optimize option type of <code>echarts.init</code>. <a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li>\n<li>[Fix][type] There is no <code>polarIndex</code> when coordinate of series is polar <a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][type] Optimize type when using SVG source in geo component. <a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li>\n<li>[Fix][type] Fix wrong type for <code>pie</code> data and <code>map</code> data. <a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n</ul>\n',postPath:"en/basics/release-note/5-2-0"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:s},{title:"入门篇",dir:o,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:h,draft:e},{title:"获取灵感",dir:g},{title:"寻求帮助",dir:l},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:d},{title:"ECharts 5 升级指南",dir:I},{title:5.2,dir:p}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:u,draft:e},{title:"系列",dir:m,draft:e},{title:"样式",dir:b},{title:"数据集",dir:f},{title:"数据转换",dir:w},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:G},{title:"事件与行为",dir:F}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Z},{title:"堆叠柱状图",dir:H},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:R,draft:e},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:K},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:L,children:[{title:"基础散点图",dir:T}]}]},{title:D,dir:t,draft:e},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:E,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:j,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:D,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:s},{title:"Basics",dir:o,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:n},{title:"Resources",dir:h,draft:e},{title:"Inspiration",dir:g},{title:"Get Help",dir:l},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:d},{title:"ECharts 5 Upgrade Guide",dir:I},{title:5.2,dir:p}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:u,draft:e},{title:"Series",dir:m,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:f},{title:"Data Transform",dir:w},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:G},{title:"Event and Action",dir:F}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Z},{title:"Stacked Bar",dir:H},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:R,draft:e},{title:"Waterfall",dir:J}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:K},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:N},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:L,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:E,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:j,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/basics/release-note/5-2-0",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/basics/release-note/v5-feature/index.html b/handbook/en/basics/release-note/v5-feature/index.html
index ccb4c09..476794c 100644
--- a/handbook/en/basics/release-note/v5-feature/index.html
+++ b/handbook/en/basics/release-note/v5-feature/index.html
@@ -4,14 +4,15 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="new-features-in-echarts-5" tabindex="-1">New features in ECharts 5</h1> <p>Data visualization has come a long way in the last few years. Developers no longer expect visualization products to be simple chart creation tools, but have more advanced needs in terms of interaction, performance, data processing, and more.</p> <p>Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.</p> <img data-src="images/feature-v5/echarts-5-en.png" width="800px"> <p>"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.</p> <h2 id="storytelling" tabindex="-1">Storytelling</h2> <p>The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.</p> <h4 id="bar%2Fline-racing" tabindex="-1">Bar/Line Racing</h4> <p>Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.</p> <iframe width="700" height="400" src=""></iframe> <iframe width="700" height="400" src=""></iframe> <p>The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.</p> <h4 id="custom-series-animation" tabindex="-1">Custom Series Animation</h4> <p>In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.</p> <p>Imagine what amazing visualizations you can create with these dynamic effects!</p> <h2 id="visual-design" tabindex="-1">Visual Design</h2> <p>The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.</p> <h4 id="overall-design" tabindex="-1">Overall Design</h4> <p>We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.</p> <img data-src="images/feature-v5/theme-color.png" width="400px"> <p>Let's look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.</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>For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:</p> <img data-src="images/feature-v5/dataZoom.png" width="500px"> <img data-src="images/feature-v5/timeline.png" width="500px"> <h4 id="label" tabindex="-1">Label</h4> <p>Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.</p> <p>Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.</p> <p>These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.</p> <p>We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.</p> <p>The new label feature allows you to have very clear label presentation even in a confined space mobile:</p> <img data-src="images/feature-v5/pie-label.png" width="400px"> <h4 id="time-axis" tabindex="-1">Time Axis</h4> <p>Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis's label content to different needs.</p> <p>First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The <code>formatter</code> of labels supports templates for time (e.g. <code>{yyyy}-{MM}-{dd}</code>), and different <code>formatter</code> can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.</p> <p>The display of the time scale at different dataZoom granularities.</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="tooltip" tabindex="-1">Tooltip</h4> <p>Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.</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>In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.</p> <h4 id="gauge" tabindex="-1">Gauge</h4> <p>We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.</p> <p>Different styles of gauge pointers.</p> <img data-src="images/feature-v5/gauge-pointer.png" width="600px"> <p>These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.</p> <iframe width="600" height="600" src=""></iframe> <h4 id="round-corner" tabindex="-1">Round Corner</h4> <p>Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don't underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.</p> <iframe width="400" height="400" src=""></iframe> <h2 id="interactivity" tabindex="-1">Interactivity</h2> <p>The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.</p> <h4 id="multi-state" tabindex="-1">Multi-State</h4> <p>In ECharts 4, there were two interactive states, <code>emphasis</code> and <code>normal</code>, graph will enter the <code>emphasis</code> state when the mouse hovered to distinguish the data.</p> <p>This time in Apache ECharts 5, we have added a new effect of <strong>blur</strong> other non-related elements to the original mouse hover highlighting, so that the target data can be focused.</p> <p>For example, in this <a href="https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack">bar chart</a> example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in <code>emphasis</code> can now be set in <code>blur</code>.</p> <p>In addition, we've added <strong>click to select</strong> to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the <code>selectchanged</code> event to get all the selected shapes for further processing. As with <code>emphasis</code> and <code>blur</code>, the selection style can also be configured in <code>select</code>.</p> <h4 id="performance-improvements" tabindex="-1">Performance improvements</h4> <h5 id="dirty-rectangle-rendering" tabindex="-1">Dirty Rectangle Rendering</h5> <p>Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.</p> <p>A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.</p> <img data-src="images/feature-v5/dirty-rect.gif" width="500px"> <p>You can see the effect by enable dirty rectangle optimization on the new example page.</p> <h5 id="line-chart-performance-optimization-for-real-time-time-series-data" tabindex="-1">Line Chart Performance Optimization for Real-Time Time-Series Data</h5> <p>In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.</p> <p>Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.</p> <h2 id="development-experience" tabindex="-1">Development Experience</h2> <p>We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.</p> <h4 id="datasets" tabindex="-1">Datasets</h4> <p>ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.</p> <h4 id="internationalization" tabindex="-1">Internationalization</h4> <p>The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.</p> <p>Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the <code>registerLocale</code> function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.</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>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="new-features-in-echarts-5" tabindex="-1">New features in ECharts 5</h1> <p>Data visualization has come a long way in the last few years. Developers no longer expect visualization products to be simple chart creation tools, but have more advanced needs in terms of interaction, performance, data processing, and more.</p> <p>Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.</p> <img data-src="images/feature-v5/echarts-5-en.png" width="800px"> <p>"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.</p> <h2 id="storytelling" tabindex="-1">Storytelling</h2> <p>The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.</p> <h4 id="bar%2Fline-racing" tabindex="-1">Bar/Line Racing</h4> <p>Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.</p> <iframe width="700" height="400" src=""></iframe> <iframe width="700" height="400" src=""></iframe> <p>The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.</p> <h4 id="custom-series-animation" tabindex="-1">Custom Series Animation</h4> <p>In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.</p> <p>Imagine what amazing visualizations you can create with these dynamic effects!</p> <h2 id="visual-design" tabindex="-1">Visual Design</h2> <p>The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.</p> <h4 id="overall-design" tabindex="-1">Overall Design</h4> <p>We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.</p> <img data-src="images/feature-v5/theme-color.png" width="400px"> <p>Let's look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.</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>For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:</p> <img data-src="images/feature-v5/dataZoom.png" width="500px"> <img data-src="images/feature-v5/timeline.png" width="500px"> <h4 id="label" tabindex="-1">Label</h4> <p>Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.</p> <p>Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.</p> <p>These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.</p> <p>We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.</p> <p>The new label feature allows you to have very clear label presentation even in a confined space mobile:</p> <img data-src="images/feature-v5/pie-label.png" width="400px"> <h4 id="time-axis" tabindex="-1">Time Axis</h4> <p>Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis's label content to different needs.</p> <p>First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The <code>formatter</code> of labels supports templates for time (e.g. <code>{yyyy}-{MM}-{dd}</code>), and different <code>formatter</code> can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.</p> <p>The display of the time scale at different dataZoom granularities.</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="tooltip" tabindex="-1">Tooltip</h4> <p>Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.</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>In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.</p> <h4 id="gauge" tabindex="-1">Gauge</h4> <p>We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.</p> <p>Different styles of gauge pointers.</p> <img data-src="images/feature-v5/gauge-pointer.png" width="600px"> <p>These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.</p> <iframe width="600" height="600" src=""></iframe> <h4 id="round-corner" tabindex="-1">Round Corner</h4> <p>Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don't underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.</p> <iframe width="400" height="400" src=""></iframe> <h2 id="interactivity" tabindex="-1">Interactivity</h2> <p>The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.</p> <h4 id="multi-state" tabindex="-1">Multi-State</h4> <p>In ECharts 4, there were two interactive states, <code>emphasis</code> and <code>normal</code>, graph will enter the <code>emphasis</code> state when the mouse hovered to distinguish the data.</p> <p>This time in Apache ECharts 5, we have added a new effect of <strong>blur</strong> other non-related elements to the original mouse hover highlighting, so that the target data can be focused.</p> <p>For example, in this <a href="https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack">bar chart</a> example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in <code>emphasis</code> can now be set in <code>blur</code>.</p> <p>In addition, we've added <strong>click to select</strong> to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the <code>selectchanged</code> event to get all the selected shapes for further processing. As with <code>emphasis</code> and <code>blur</code>, the selection style can also be configured in <code>select</code>.</p> <h4 id="performance-improvements" tabindex="-1">Performance improvements</h4> <h5 id="dirty-rectangle-rendering" tabindex="-1">Dirty Rectangle Rendering</h5> <p>Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.</p> <p>A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.</p> <img data-src="images/feature-v5/dirty-rect.gif" width="500px"> <p>You can see the effect by enable dirty rectangle optimization on the new example page.</p> <h5 id="line-chart-performance-optimization-for-real-time-time-series-data" tabindex="-1">Line Chart Performance Optimization for Real-Time Time-Series Data</h5> <p>In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.</p> <p>Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.</p> <h2 id="development-experience" tabindex="-1">Development Experience</h2> <p>We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.</p> <h4 id="datasets" tabindex="-1">Datasets</h4> <p>ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.</p> <h4 id="internationalization" tabindex="-1">Internationalization</h4> <p>The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.</p> <p>Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the <code>registerLocale</code> function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.</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>
locale<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-refactoring" tabindex="-1">TypeScript Refactoring</h4> <p>In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.</p> <p>For developers, we can also generate better and more code-compliant <code>DTS</code> type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinityTyped</a>, which is a lot of work, so thanks for your contribution.</p> <p>In addition, if a developer's component is introduced on-demand, we provide a <code>ComposeOption</code> type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.</p> <h2 id="accessibility" tabindex="-1">Accessibility</h2> <p>Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.</p> <p>In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.</p> <h4 id="theme-colors" tabindex="-1">Theme Colors</h4> <p>We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.</p> <p>Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.</p> <h4 id="decal-patterns" tabindex="-1">Decal Patterns</h4> <p>ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.</p> <iframe width="600" height="350" src=""></iframe> <p>In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.</p> <iframe width="600" height="350" src=""></iframe> <h2 id="summary" tabindex="-1">Summary</h2> <p>In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.</p> <p>Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We'll be working on future developments with even more enthusiasm, and we'll see you all in 6 with even more enthusiasm!</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/en/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/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,n,r,o,s,d,l,h,c,p,m,g,f,u,y,b,v,w,x,C,k,E,T,z,A,I,S,D,R,P,W,L,B,G,V,F,M,j,O,q,H,Y,Z,_,U,J,N,K,Q,X,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="new-features-in-echarts-5" tabindex="-1">New features in ECharts 5</h1>\n<p>Data visualization has come a long way in the last few years. Developers no longer expect visualization products to be simple chart creation tools, but have more advanced needs in terms of interaction, performance, data processing, and more.</p>\n<p>Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.</p>\n<img data-src="images/feature-v5/echarts-5-en.png" width="800px" />\n<p>"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.</p>\n<h2 id="storytelling" tabindex="-1">Storytelling</h2>\n<p>The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users\' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.</p>\n<h4 id="bar%2Fline-racing" tabindex="-1">Bar/Line Racing</h4>\n<p>Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.</p>\n<md-example src="bar-race-country" width="700" height="400" />\n<md-example src="line-race" width="700" height="400" />\n<p>The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.</p>\n<h4 id="custom-series-animation" tabindex="-1">Custom Series Animation</h4>\n<p>In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.</p>\n<p>Imagine what amazing visualizations you can create with these dynamic effects!</p>\n<h2 id="visual-design" tabindex="-1">Visual Design</h2>\n<p>The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.</p>\n<h4 id="overall-design" tabindex="-1">Overall Design</h4>\n<p>We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.</p>\n<img data-src="images/feature-v5/theme-color.png" width="400px" />\n<p>Let\'s look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.</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>For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:</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="label" tabindex="-1">Label</h4>\n<p>Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.</p>\n<p>Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.</p>\n<p>These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.</p>\n<p>We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.</p>\n<p>The new label feature allows you to have very clear label presentation even in a confined space mobile:</p>\n<img data-src="images/feature-v5/pie-label.png" width="400px" />\n<h4 id="time-axis" tabindex="-1">Time Axis</h4>\n<p>Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis\'s label content to different needs.</p>\n<p>First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The <code>formatter</code> of labels supports templates for time (e.g. <code>{yyyy}-{MM}-{dd}</code>), and different <code>formatter</code> can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.</p>\n<p>The display of the time scale at different dataZoom granularities.</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="tooltip" tabindex="-1">Tooltip</h4>\n<p>Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.</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>In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.</p>\n<h4 id="gauge" tabindex="-1">Gauge</h4>\n<p>We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.</p>\n<p>Different styles of gauge pointers.</p>\n<img data-src="images/feature-v5/gauge-pointer.png" width="600px" />\n<p>These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.</p>\n<md-example src="gauge-clock" width="600" height="600" />\n<h4 id="round-corner" tabindex="-1">Round Corner</h4>\n<p>Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don\'t underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.</p>\n<md-example src="sunburst-borderRadius" width="400" height="400" />\n<h2 id="interactivity" tabindex="-1">Interactivity</h2>\n<p>The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.</p>\n<h4 id="multi-state" tabindex="-1">Multi-State</h4>\n<p>In ECharts 4, there were two interactive states, <code>emphasis</code> and <code>normal</code>, graph will enter the <code>emphasis</code> state when the mouse hovered to distinguish the data.</p>\n<p>This time in Apache ECharts 5, we have added a new effect of <strong>blur</strong> other non-related elements to the original mouse hover highlighting, so that the target data can be focused.</p>\n<p>For example, in this <a href="https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack">bar chart</a> example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in <code>emphasis</code> can now be set in <code>blur</code>.</p>\n<p>In addition, we\'ve added <strong>click to select</strong> to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the <code>selectchanged</code> event to get all the selected shapes for further processing. As with <code>emphasis</code> and <code>blur</code>, the selection style can also be configured in <code>select</code>.</p>\n<h4 id="performance-improvements" tabindex="-1">Performance improvements</h4>\n<h5 id="dirty-rectangle-rendering" tabindex="-1">Dirty Rectangle Rendering</h5>\n<p>Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.</p>\n<p>A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.</p>\n<img data-src="images/feature-v5/dirty-rect.gif" width="500px" />\n<p>You can see the effect by enable dirty rectangle optimization on the new example page.</p>\n<h5 id="line-chart-performance-optimization-for-real-time-time-series-data" tabindex="-1">Line Chart Performance Optimization for Real-Time Time-Series Data</h5>\n<p>In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.</p>\n<p>Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.</p>\n<h2 id="development-experience" tabindex="-1">Development Experience</h2>\n<p>We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.</p>\n<h4 id="datasets" tabindex="-1">Datasets</h4>\n<p>ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.</p>\n<h4 id="internationalization" tabindex="-1">Internationalization</h4>\n<p>The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.</p>\n<p>Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the <code>registerLocale</code> function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.</p>\n<md-code-block lang="js" code="\'Ly8gaW1wb3J0IHRoZSBsYW5nIG9iamVjdCBhbmQgc2V0IHdoZW4gaW5pdAplY2hhcnRzLnJlZ2lzdGVyTG9jYWxlKCdERScsIGxhbmcpOwplY2hhcnRzLmluaXQoRG9tRWxlbWVudCwgbnVsbCwgewogIGxvY2FsZTogJ0RFJwp9KTs\'" line-highlights="\'\'" />\n<h4 id="typescript-refactoring" tabindex="-1">TypeScript Refactoring</h4>\n<p>In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.</p>\n<p>For developers, we can also generate better and more code-compliant <code>DTS</code> type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinityTyped</a>, which is a lot of work, so thanks for your contribution.</p>\n<p>In addition, if a developer\'s component is introduced on-demand, we provide a <code>ComposeOption</code> type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.</p>\n<h2 id="accessibility" tabindex="-1">Accessibility</h2>\n<p>Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.</p>\n<p>In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.</p>\n<h4 id="theme-colors" tabindex="-1">Theme Colors</h4>\n<p>We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.</p>\n<p>Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.</p>\n<h4 id="decal-patterns" tabindex="-1">Decal Patterns</h4>\n<p>ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.</p>\n<md-example src="doc-example/aria-decal-simple" width="600" height="350" />\n<p>In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.</p>\n<md-example src="doc-example/aria-decal-newspaper" width="600" height="350" />\n<h2 id="summary" tabindex="-1">Summary</h2>\n<p>In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.</p>\n<p>Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We\'ll be working on future developments with even more enthusiasm, and we\'ll see you all in 6 with even more enthusiasm!</p>\n',postPath:"en/basics/release-note/v5-feature"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:n},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:d,draft:e},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:g}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:y,draft:e},{title:"系列",dir:b,draft:e},{title:"样式",dir:v},{title:"数据集",dir:w},{title:"数据转换",dir:x},{title:"坐标系",dir:C,draft:e},{title:"坐标轴",dir:k},{title:"视觉映射",dir:i},{title:"图例",dir:E},{title:"事件与行为",dir:T}]},{title:"应用篇",dir:z,children:[{title:"常用图表类型",dir:A,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:I},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:R,draft:e},{title:"阶梯瀑布图",dir:P},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:B},{title:"区域面积图",dir:G},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:j},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:q,children:[{title:"基础散点图",dir:H}]}]},{title:Y,dir:t,draft:e},{title:"跨平台方案",dir:Z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:_}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:N,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:X,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:Y,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:n},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:s},{title:"Resources",dir:d,draft:e},{title:"Inspiration",dir:l},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:g}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:y,draft:e},{title:"Series",dir:b,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:w},{title:"Data Transform",dir:x},{title:"Coordinate",dir:C,draft:e},{title:"Axis",dir:k},{title:"Visual Mapping",dir:i},{title:"Legend",dir:E},{title:"Event and Action",dir:T}]},{title:"How To Guides",dir:z,children:[{title:"Common Charts",dir:A,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:I},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:R,draft:e},{title:"Waterfall",dir:P}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:B},{title:"Area Chart",dir:G},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:j},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:q,children:[{title:"Basic Scatter",dir:H}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:Z,children:[{title:"Server Side Rendering",dir:_}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:N,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:X,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/basics/release-note/v5-feature",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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-refactoring" tabindex="-1">TypeScript Refactoring</h4> <p>In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.</p> <p>For developers, we can also generate better and more code-compliant <code>DTS</code> type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinityTyped</a>, which is a lot of work, so thanks for your contribution.</p> <p>In addition, if a developer's component is introduced on-demand, we provide a <code>ComposeOption</code> type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.</p> <h2 id="accessibility" tabindex="-1">Accessibility</h2> <p>Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.</p> <p>In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.</p> <h4 id="theme-colors" tabindex="-1">Theme Colors</h4> <p>We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.</p> <p>Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.</p> <h4 id="decal-patterns" tabindex="-1">Decal Patterns</h4> <p>ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.</p> <iframe width="600" height="350" src=""></iframe> <p>In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.</p> <iframe width="600" height="350" src=""></iframe> <h2 id="summary" tabindex="-1">Summary</h2> <p>In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.</p> <p>Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We'll be working on future developments with even more enthusiasm, and we'll see you all in 6 with even more enthusiasm!</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/en/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/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,n,r,o,s,d,l,h,c,p,m,g,f,u,y,b,v,w,x,C,k,E,T,z,A,I,S,D,R,P,W,L,B,G,V,F,M,j,O,q,H,Y,Z,_,U,J,N,K,Q,X,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="new-features-in-echarts-5" tabindex="-1">New features in ECharts 5</h1>\n<p>Data visualization has come a long way in the last few years. Developers no longer expect visualization products to be simple chart creation tools, but have more advanced needs in terms of interaction, performance, data processing, and more.</p>\n<p>Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.</p>\n<img data-src="images/feature-v5/echarts-5-en.png" width="800px" />\n<p>"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.</p>\n<h2 id="storytelling" tabindex="-1">Storytelling</h2>\n<p>The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users\' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.</p>\n<h4 id="bar%2Fline-racing" tabindex="-1">Bar/Line Racing</h4>\n<p>Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.</p>\n<md-example src="bar-race-country" width="700" height="400" />\n<md-example src="line-race" width="700" height="400" />\n<p>The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.</p>\n<h4 id="custom-series-animation" tabindex="-1">Custom Series Animation</h4>\n<p>In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.</p>\n<p>Imagine what amazing visualizations you can create with these dynamic effects!</p>\n<h2 id="visual-design" tabindex="-1">Visual Design</h2>\n<p>The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.</p>\n<h4 id="overall-design" tabindex="-1">Overall Design</h4>\n<p>We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.</p>\n<img data-src="images/feature-v5/theme-color.png" width="400px" />\n<p>Let\'s look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.</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>For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:</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="label" tabindex="-1">Label</h4>\n<p>Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.</p>\n<p>Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.</p>\n<p>These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.</p>\n<p>We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.</p>\n<p>The new label feature allows you to have very clear label presentation even in a confined space mobile:</p>\n<img data-src="images/feature-v5/pie-label.png" width="400px" />\n<h4 id="time-axis" tabindex="-1">Time Axis</h4>\n<p>Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis\'s label content to different needs.</p>\n<p>First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The <code>formatter</code> of labels supports templates for time (e.g. <code>{yyyy}-{MM}-{dd}</code>), and different <code>formatter</code> can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.</p>\n<p>The display of the time scale at different dataZoom granularities.</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="tooltip" tabindex="-1">Tooltip</h4>\n<p>Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.</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>In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.</p>\n<h4 id="gauge" tabindex="-1">Gauge</h4>\n<p>We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.</p>\n<p>Different styles of gauge pointers.</p>\n<img data-src="images/feature-v5/gauge-pointer.png" width="600px" />\n<p>These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.</p>\n<md-example src="gauge-clock" width="600" height="600" />\n<h4 id="round-corner" tabindex="-1">Round Corner</h4>\n<p>Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don\'t underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.</p>\n<md-example src="sunburst-borderRadius" width="400" height="400" />\n<h2 id="interactivity" tabindex="-1">Interactivity</h2>\n<p>The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.</p>\n<h4 id="multi-state" tabindex="-1">Multi-State</h4>\n<p>In ECharts 4, there were two interactive states, <code>emphasis</code> and <code>normal</code>, graph will enter the <code>emphasis</code> state when the mouse hovered to distinguish the data.</p>\n<p>This time in Apache ECharts 5, we have added a new effect of <strong>blur</strong> other non-related elements to the original mouse hover highlighting, so that the target data can be focused.</p>\n<p>For example, in this <a href="https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack">bar chart</a> example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in <code>emphasis</code> can now be set in <code>blur</code>.</p>\n<p>In addition, we\'ve added <strong>click to select</strong> to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the <code>selectchanged</code> event to get all the selected shapes for further processing. As with <code>emphasis</code> and <code>blur</code>, the selection style can also be configured in <code>select</code>.</p>\n<h4 id="performance-improvements" tabindex="-1">Performance improvements</h4>\n<h5 id="dirty-rectangle-rendering" tabindex="-1">Dirty Rectangle Rendering</h5>\n<p>Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.</p>\n<p>A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.</p>\n<img data-src="images/feature-v5/dirty-rect.gif" width="500px" />\n<p>You can see the effect by enable dirty rectangle optimization on the new example page.</p>\n<h5 id="line-chart-performance-optimization-for-real-time-time-series-data" tabindex="-1">Line Chart Performance Optimization for Real-Time Time-Series Data</h5>\n<p>In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.</p>\n<p>Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.</p>\n<h2 id="development-experience" tabindex="-1">Development Experience</h2>\n<p>We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.</p>\n<h4 id="datasets" tabindex="-1">Datasets</h4>\n<p>ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.</p>\n<h4 id="internationalization" tabindex="-1">Internationalization</h4>\n<p>The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.</p>\n<p>Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the <code>registerLocale</code> function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.</p>\n<md-code-block lang="js" code="\'Ly8gaW1wb3J0IHRoZSBsYW5nIG9iamVjdCBhbmQgc2V0IHdoZW4gaW5pdAplY2hhcnRzLnJlZ2lzdGVyTG9jYWxlKCdERScsIGxhbmcpOwplY2hhcnRzLmluaXQoRG9tRWxlbWVudCwgbnVsbCwgewogIGxvY2FsZTogJ0RFJwp9KTs\'" line-highlights="\'\'" />\n<h4 id="typescript-refactoring" tabindex="-1">TypeScript Refactoring</h4>\n<p>In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.</p>\n<p>For developers, we can also generate better and more code-compliant <code>DTS</code> type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinityTyped</a>, which is a lot of work, so thanks for your contribution.</p>\n<p>In addition, if a developer\'s component is introduced on-demand, we provide a <code>ComposeOption</code> type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.</p>\n<h2 id="accessibility" tabindex="-1">Accessibility</h2>\n<p>Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.</p>\n<p>In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.</p>\n<h4 id="theme-colors" tabindex="-1">Theme Colors</h4>\n<p>We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.</p>\n<p>Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.</p>\n<h4 id="decal-patterns" tabindex="-1">Decal Patterns</h4>\n<p>ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.</p>\n<md-example src="doc-example/aria-decal-simple" width="600" height="350" />\n<p>In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.</p>\n<md-example src="doc-example/aria-decal-newspaper" width="600" height="350" />\n<h2 id="summary" tabindex="-1">Summary</h2>\n<p>In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.</p>\n<p>Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We\'ll be working on future developments with even more enthusiasm, and we\'ll see you all in 6 with even more enthusiasm!</p>\n',postPath:"en/basics/release-note/v5-feature"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:n},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:d,draft:e},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:g}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:y,draft:e},{title:"系列",dir:b,draft:e},{title:"样式",dir:v},{title:"数据集",dir:w},{title:"数据转换",dir:x},{title:"坐标系",dir:C,draft:e},{title:"坐标轴",dir:k},{title:"视觉映射",dir:i},{title:"图例",dir:E},{title:"事件与行为",dir:T}]},{title:"应用篇",dir:z,children:[{title:"常用图表类型",dir:A,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:I},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:R,draft:e},{title:"阶梯瀑布图",dir:P},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:B},{title:"区域面积图",dir:G},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:j},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:q,children:[{title:"基础散点图",dir:H}]}]},{title:Y,dir:t,draft:e},{title:"跨平台方案",dir:Z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:_}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:N,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:X,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:Y,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:n},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:s},{title:"Resources",dir:d,draft:e},{title:"Inspiration",dir:l},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:g}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:y,draft:e},{title:"Series",dir:b,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:w},{title:"Data Transform",dir:x},{title:"Coordinate",dir:C,draft:e},{title:"Axis",dir:k},{title:"Visual Mapping",dir:i},{title:"Legend",dir:E},{title:"Event and Action",dir:T}]},{title:"How To Guides",dir:z,children:[{title:"Common Charts",dir:A,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:I},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:R,draft:e},{title:"Waterfall",dir:P}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:B},{title:"Area Chart",dir:G},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:j},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:q,children:[{title:"Basic Scatter",dir:H}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:Z,children:[{title:"Server Side Rendering",dir:_}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:N,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:X,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/basics/release-note/v5-feature",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/basics/release-note/v5-upgrade-guide/index.html b/handbook/en/basics/release-note/v5-upgrade-guide/index.html
index bed0123..4070498 100644
--- a/handbook/en/basics/release-note/v5-upgrade-guide/index.html
+++ b/handbook/en/basics/release-note/v5-upgrade-guide/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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-upgrade-guide" tabindex="-1">Apache ECharts 5 Upgrade Guide</h1> <p>This guide is for those who want to upgrade from echarts 4.x (hereafter <code>v4</code>) to echarts 5.x (hereafter <code>v5</code>). You can find out what new features <code>v5</code> brings that are worth upgrading in <a href="en/basics/release-note/v5-feature">New Features in ECharts 5</a>. In most cases, developers won't need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, <code>v5</code> still brings some breaking changes that require special attention. In addition, in some cases, <code>v5</code> provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We'll try to explain these changes in detail in this document.</p> <h2 id="breaking-changes" tabindex="-1">Breaking Changes</h2> <h4 id="default-theme" tabindex="-1">Default theme</h4> <p>First of all, the default theme has been changed. <code>v5</code> has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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-upgrade-guide" tabindex="-1">Apache ECharts 5 Upgrade Guide</h1> <p>This guide is for those who want to upgrade from echarts 4.x (hereafter <code>v4</code>) to echarts 5.x (hereafter <code>v5</code>). You can find out what new features <code>v5</code> brings that are worth upgrading in <a href="en/basics/release-note/v5-feature">New Features in ECharts 5</a>. In most cases, developers won't need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, <code>v5</code> still brings some breaking changes that require special attention. In addition, in some cases, <code>v5</code> provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We'll try to explain these changes in detail in this document.</p> <h2 id="breaking-changes" tabindex="-1">Breaking Changes</h2> <h4 id="default-theme" tabindex="-1">Default theme</h4> <p>First of all, the default theme has been changed. <code>v5</code> has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
color<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'#c23531'</span><span class="token punctuation">,</span>
<span class="token string">'#2f4554'</span><span class="token punctuation">,</span>
@@ -80,7 +80,8 @@
<ul><li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li> <li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li></ul></li> <li><code>dataZoom component</code>:
<ul><li>option <code>dataZoom.handleIcon</code> need prefix <code>path://</code> if using SVGPath.</li></ul></li> <li><code>radar</code>:
<ul><li>option <code>radar.name</code> is deprecated. Use <code>radar.axisName</code> instead.</li> <li>option <code>radar.nameGap</code> is deprecated. Use <code>radar.axisNameGap</code> instead.</li></ul></li> <li>Parse and format:
-<ul><li><code>echarts.format.formatTime</code> is deprecated. Use <code>echarts.time.format</code> instead.</li> <li><code>echarts.number.parseDate</code> is deprecated. Use <code>echarts.time.parse</code> instead.</li> <li><code>echarts.format.getTextRect</code> is deprecated.</li></ul></li></ul></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/en/basics/release-note/v5-upgrade-guide.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,o,d,a,n,r,l,c,s,h,p,g,u,m,b,f,y,v,I,w,C,x,S,A,k,B,W,G,J,Y,M,N,U,Z,V,T,j,z,L,R,X,E,P,F,H,D,O,Q,K,q,_,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5-upgrade-guide" tabindex="-1">Apache ECharts 5 Upgrade Guide</h1>\n<p>This guide is for those who want to upgrade from echarts 4.x (hereafter <code>v4</code>) to echarts 5.x (hereafter <code>v5</code>). You can find out what new features <code>v5</code> brings that are worth upgrading in <a href="en/basics/release-note/v5-feature">New Features in ECharts 5</a>. In most cases, developers won\'t need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, <code>v5</code> still brings some breaking changes that require special attention. In addition, in some cases, <code>v5</code> provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We\'ll try to explain these changes in detail in this document.</p>\n<h2 id="breaking-changes" tabindex="-1">Breaking Changes</h2>\n<h4 id="default-theme" tabindex="-1">Default theme</h4>\n<p>First of all, the default theme has been changed. <code>v5</code> has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBjb2xvcjogWwogICAgJyNjMjM1MzEnLAogICAgJyMyZjQ1NTQnLAogICAgJyM2MWEwYTgnLAogICAgJyNkNDgyNjUnLAogICAgJyM5MWM3YWUnLAogICAgJyM3NDlmODMnLAogICAgJyNjYTg2MjInLAogICAgJyNiZGEyOWEnLAogICAgJyM2ZTcwNzQnLAogICAgJyM1NDY1NzAnLAogICAgJyNjNGNjZDMnCiAgXQogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<p>Or, to make a simple <code>v4</code> theme.</p>\n<md-code-block lang="js" code="\'dmFyIHRoZW1lRUM0ID0gewogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdCn07CnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sIHRoZW1lRUM0KTsKY2hhcnQuc2V0T3B0aW9uKC8qIC4uLiAqLyk7\'" line-highlights="\'\'" />\n<h4 id="importing-echarts" tabindex="-1">Importing ECharts</h4>\n<h5 id="removing-support-for-default-exports" tabindex="-1">Removing Support for Default Exports</h5>\n<p>Since <code>v5</code>, echarts only provides <code>named exports</code>.</p>\n<p>So if you are importing <code>echarts</code> like this:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Ci8vIE9yIGltcG9ydCBjb3JlIG1vZHVsZQppbXBvcnQgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>It will throw error in <code>v5</code>. You need to change the code as follows to import the entire module.</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKLy8gT3IKaW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<h5 id="tree-shaking-api" tabindex="-1">tree-shaking API</h5>\n<p>In 5.0.1, we introduced the new <a href="en/basics/import">tree-shaking API</a></p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsgR3JpZENvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIE5vdGUgdGhhdCB0aGUgQ2FudmFzIHJlbmRlcmVyIGlzIG5vIGxvbmdlciBpbmNsdWRlZCBieSBkZWZhdWx0IGFuZCBuZWVkcyB0byBiZSBpbXBvcnRlZCBleHBsaWN0bHksIG9yIGltcG9ydCB0aGUgU1ZHUmVuZGVyZXIgaWYgeW91IG5lZWQgdG8gdXNlIHRoZSBTVkcgcmVuZGVyaW5nIG1vZGUKaW1wb3J0IHsgQ2FudmFzUmVuZGVyZXIgfSBmcm9tICdlY2hhcnRzL3JlbmRlcmVycyc7CgplY2hhcnRzLnVzZShbQmFyQ2hhcnQsIEdyaWRDb21wb25lbnQsIENhbnZhc1JlbmRlcmVyXSk7\'" line-highlights="\'\'" />\n<p>To make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the <code>Full Code</code> tab on the example page to see the modules you need to introduce and the related code.</p>\n<p>In most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported:</p>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NvbXBvbmVudC9ncmlkJyk7\'" line-highlights="\'\'" />\n<p>Second, because our source code has been rewritten using TypeScript, <code>v5</code> will no longer support importing files from <code>echarts/src</code>. You need to change it to import from <code>echarts/lib</code>.</p>\n<h5 id="dependency-adjustment" tabindex="-1">Dependency Adjustment</h5>\n<blockquote>\n<p>Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package.</p>\n</blockquote>\n<p>In order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, <code>CanvasRenderer</code> is no longer introduced by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted.</p>\n<ul>\n<li>The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before</li>\n</ul>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NoYXJ0L2xpbmUnKTs\'" line-highlights="\'\'" />\n<p>Need to introduce the <code>grid</code> component separately again</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2dyaWQnKTs\'" line-highlights="\'\'" />\n<p>Reference issues: <a href="https://github.com/apache/echarts/issues/14080">#14080</a>, <a href="https://github.com/apache/echarts/issues/13764">#13764</a></p>\n<ul>\n<li><code>aria</code> components are no longer imported by default. You need import it manually if necessary.</li>\n</ul>\n<md-code-block lang="js" code="\'aW1wb3J0IHsgQXJpYUNvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmVjaGFydHMudXNlKEFyaWFDb21wb25lbnQpOw\'" line-highlights="\'\'" />\n<p>Or</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2FyaWEnKTs\'" line-highlights="\'\'" />\n<h4 id="removes-built-in-geojson" tabindex="-1">Removes Built-in GeoJSON</h4>\n<p><code>v5</code> removes the built-in geoJSON (previously in the <code>echarts/map</code> folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface.</p>\n<h4 id="browser-compatibility" tabindex="-1">Browser Compatibility</h4>\n<p>IE8 is no longer supported by <code>v5</code>. We no longer maintain and upgrade the previous <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML renderer</a> for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with <code>v5.0.1</code>.</p>\n<h4 id="echarts-configuration-item-adjustment" tabindex="-1">ECharts configuration item adjustment</h4>\n<h5 id="visual-style-settings-priority-change" tabindex="-1">Visual style settings priority change</h5>\n<p>The priority of the visuals between <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are reversed since <code>v5</code>.</p>\n<p>That is, previously in <code>v4</code>, the visuals (i.e., color, symbol, symbolSize, ...) that generated by <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> has the highest priority, which will overwrite the same visuals settings in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a>. That brought troubles when needing to specify specific style to some certain data items while using <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a>. Since <code>v5</code>, the visuals specified in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> has the highest priority.</p>\n<p>In most cases, users will probably not notice this change when migrating from <code>v4</code> to <code>v5</code>. But users can still check that if <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are both specified.</p>\n<h5 id="padding-for-rich-text" tabindex="-1"><code>padding</code> for Rich Text</h5>\n<p><code>v5</code> adjusts the <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> to make it more compliant with CSS specifications. In <code>v4</code>, for example <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>33</code> and <code>padding-bottom</code> is <code>11</code>. The position of the top and bottom is adjusted in <code>v5</code>, <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>11</code> and <code>padding-bottom</code> is <code>33</code>.</p>\n<p>If the user is using <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>, this order needs to be adjusted.</p>\n<h2 id="echarts-related-extensions" tabindex="-1">ECharts Related Extensions</h2>\n<p>These extensions need to be upgraded to new version to support echarts <code>v5</code>:</p>\n<ul>\n<li><a href="https://github.com/ecomfe/echarts-gl">echarts-gl</a></li>\n<li><a href="https://github.com/ecomfe/echarts-wordcloud">echarts-wordcloud</a></li>\n<li><a href="https://github.com/ecomfe/echarts-liquidfill">echarts-liquidfill</a></li>\n</ul>\n<h2 id="deprecated-api" tabindex="-1">Deprecated API</h2>\n<p>Some of the API and echarts options are deprecated since <code>v5</code>, but are still backward compatible. Users can <strong>keep using these deprecated API</strong>, with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance.</p>\n<p>The deprecated API and their corresponding new API are listed as follows:</p>\n<ul>\n<li>Transform related props of a graphic element are changed:\n<ul>\n<li>Changes:\n<ul>\n<li><code>position: [number, number]</code> are changed to <code>x: number</code>/<code>y: number</code>.</li>\n<li><code>scale: [number, number]</code> are changed to <code>scaleX: number</code>/<code>scaleY: number</code>.</li>\n<li><code>origin: [number, number]</code> are changed to <code>originX: number</code>/<code>originY: number</code>.</li>\n</ul>\n</li>\n<li>The <code>position</code>, <code>scale</code> and <code>origin</code> are still supported but deprecated.</li>\n<li>It effects these places:\n<ul>\n<li>In the <code>graphic</code> components: the declarations of each element.</li>\n<li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>.</li>\n<li>Directly use zrender graphic elements.</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Text related props on graphic elements are changed:\n<ul>\n<li>Changes:\n<ul>\n<li>The declaration of attached text (or say, rect text) are changed.\n<ul>\n<li>Prop <code>style.text</code> are deprecated in elements except <code>Text</code>. Instead, Prop set <code>textContent</code> and <code>textConfig</code> are provided to support more powerful capabilities.</li>\n<li>These related props at the left part below are deprecated. Use the right part below instead.\n<ul>\n<li>textPosition => textConfig.position</li>\n<li>textOffset => textConfig.offset</li>\n<li>textRotation => textConfig.rotation</li>\n<li>textDistance => textConfig.distance</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>The props at the left part below are deprecated in <code>style</code> and <code>style.rich.?</code>. Use the props at the right part below instead.\n<ul>\n<li>textFill => fill</li>\n<li>textStroke => stroke</li>\n<li>textFont => font</li>\n<li>textStrokeWidth => lineWidth</li>\n<li>textAlign => align</li>\n<li>textVerticalAlign => verticalAlign);</li>\n<li>textLineHeight =></li>\n<li>textWidth => width</li>\n<li>textHeight => hight</li>\n<li>textBackgroundColor => backgroundColor</li>\n<li>textPadding => padding</li>\n<li>textBorderColor => borderColor</li>\n<li>textBorderWidth => borderWidth</li>\n<li>textBorderRadius => borderRadius</li>\n<li>textBoxShadowColor => shadowColor</li>\n<li>textBoxShadowBlur => shadowBlur</li>\n<li>textBoxShadowOffsetX => shadowOffsetX</li>\n<li>textBoxShadowOffsetY => shadowOffsetY</li>\n</ul>\n</li>\n<li>Note: these props are not changed:\n<ul>\n<li>textShadowColor</li>\n<li>textShadowBlur</li>\n<li>textShadowOffsetX</li>\n<li>textShadowOffsetY</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>It effects these places:\n<ul>\n<li>In the <code>graphic</code> components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]</li>\n<li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>. [compat, but not accurately the same in some complicated cases].</li>\n<li>Directly use zrender API to create graphic elements. [No compat, breaking change].</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>API on chart instance:\n<ul>\n<li><code>chart.one(...)</code> is deprecated.</li>\n</ul>\n</li>\n<li><code>label</code>:\n<ul>\n<li>In props <code>color</code>, <code>textBorderColor</code>, <code>backgroundColor</code> and <code>borderColor</code>, the value <code>\'auto\'</code> is deprecated. Use the value <code>\'inherit\'</code> instead.</li>\n</ul>\n</li>\n<li><code>hoverAnimation</code>:\n<ul>\n<li>option <code>series.hoverAnimation</code> is deprecated. Use <code>series.emphasis.scale</code> instead.</li>\n</ul>\n</li>\n<li><code>line series</code>:\n<ul>\n<li>option <code>series.clipOverflow</code> is deprecated. Use <code>series.clip</code> instead.</li>\n</ul>\n</li>\n<li><code>custom series</code>:\n<ul>\n<li>In <code>renderItem</code>, the <code>api.style(...)</code> and <code>api.styleEmphasis(...)</code> are deprecated. Because it is not really necessary and hard to ensure backward compatibility. Users can fetch system designated visual by <code>api.visual(...)</code>.</li>\n</ul>\n</li>\n<li><code>sunburst series</code>:\n<ul>\n<li>Action type <code>highlight</code> is deprecated. Use <code>sunburstHighlight</code> instead.</li>\n<li>Action type <code>downplay</code> is deprecated. Use <code>sunburstUnhighlight</code> instead.</li>\n<li>option <code>series.downplay</code> is deprecated. Use <code>series.blur</code> instead.</li>\n<li>option <code>series.highlightPolicy</code> is deprecated. Use <code>series.emphasis.focus</code> instead.</li>\n</ul>\n</li>\n<li><code>pie series</code>:\n<ul>\n<li>The action type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>pieToggleSelect</code> => <code>toggleSelect</code></li>\n<li><code>pieSelect</code> => <code>select</code></li>\n<li><code>pieUnSelect</code> => <code>unselect</code></li>\n</ul>\n</li>\n<li>The event type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>pieselectchanged</code> => <code>selectchanged</code></li>\n<li><code>pieselected</code> => <code>selected</code></li>\n<li><code>pieunselected</code> => <code>unselected</code></li>\n</ul>\n</li>\n<li>option <code>series.label.margin</code> is deprecated. Use <code>series.label.edgeDistance</code> instead.</li>\n<li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li>\n<li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li>\n</ul>\n</li>\n<li><code>map series</code>:\n<ul>\n<li>The action type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>mapToggleSelect</code> => <code>toggleSelect</code></li>\n<li><code>mapSelect</code> => <code>select</code></li>\n<li><code>mapUnSelect</code> => <code>unselect</code></li>\n</ul>\n</li>\n<li>The event type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>mapselectchanged</code> => <code>selectchanged</code></li>\n<li><code>mapselected</code> => <code>selected</code></li>\n<li><code>mapunselected</code> => <code>unselected</code></li>\n</ul>\n</li>\n<li>option <code>series.mapType</code> is deprecated. Use <code>series.map</code> instead.</li>\n<li>option <code>series.mapLocation</code> is deprecated.</li>\n</ul>\n</li>\n<li><code>graph series</code>:\n<ul>\n<li>option <code>series.focusNodeAdjacency</code> is deprecated. Use <code>series.emphasis: { focus: \'adjacency\'}</code> instead.</li>\n</ul>\n</li>\n<li><code>gauge series</code>:\n<ul>\n<li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li>\n<li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li>\n</ul>\n</li>\n<li><code>dataZoom component</code>:\n<ul>\n<li>option <code>dataZoom.handleIcon</code> need prefix <code>path://</code> if using SVGPath.</li>\n</ul>\n</li>\n<li><code>radar</code>:\n<ul>\n<li>option <code>radar.name</code> is deprecated. Use <code>radar.axisName</code> instead.</li>\n<li>option <code>radar.nameGap</code> is deprecated. Use <code>radar.axisNameGap</code> instead.</li>\n</ul>\n</li>\n<li>Parse and format:\n<ul>\n<li><code>echarts.format.formatTime</code> is deprecated. Use <code>echarts.time.format</code> instead.</li>\n<li><code>echarts.number.parseDate</code> is deprecated. Use <code>echarts.time.parse</code> instead.</li>\n<li><code>echarts.format.getTextRect</code> is deprecated.</li>\n</ul>\n</li>\n</ul>\n',postPath:"en/basics/release-note/v5-upgrade-guide"}],fetch:{},error:o,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:r},{title:"资源列表",dir:l,draft:e},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:u}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:f,draft:e},{title:"系列",dir:y,draft:e},{title:"样式",dir:v},{title:"数据集",dir:I},{title:"数据转换",dir:w},{title:"坐标系",dir:C,draft:e},{title:"坐标轴",dir:x},{title:"视觉映射",dir:i},{title:"图例",dir:S},{title:"事件与行为",dir:A}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:B,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:J},{title:"极坐标系柱状图",dir:Y,draft:e},{title:"阶梯瀑布图",dir:M},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:N,children:[{title:"基础折线图",dir:U},{title:"堆叠折线图",dir:Z},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:T},{title:"阶梯线图",dir:j}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:L},{title:"南丁格尔图(玫瑰图)",dir:R}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:E}]}]},{title:P,dir:t,draft:e},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:H}]},{title:"数据处理",dir:D,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:Q,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:r},{title:"Resources",dir:l,draft:e},{title:"Inspiration",dir:c},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:u}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:f,draft:e},{title:"Series",dir:y,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:I},{title:"Data Transform",dir:w},{title:"Coordinate",dir:C,draft:e},{title:"Axis",dir:x},{title:"Visual Mapping",dir:i},{title:"Legend",dir:S},{title:"Event and Action",dir:A}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:B,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:J},{title:"Bar Polar",dir:Y,draft:e},{title:"Waterfall",dir:M}]},{title:"Line",dir:N,children:[{title:"Basic Line",dir:U},{title:"Stacked Line",dir:Z},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:T},{title:"Step Line",dir:j}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:L},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:E}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:H}]},{title:"Data",dir:D,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:Q,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/basics/release-note/v5-upgrade-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:o}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<ul><li><code>echarts.format.formatTime</code> is deprecated. Use <code>echarts.time.format</code> instead.</li> <li><code>echarts.number.parseDate</code> is deprecated. Use <code>echarts.time.parse</code> instead.</li> <li><code>echarts.format.getTextRect</code> is deprecated.</li></ul></li></ul></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/en/basics/release-note/v5-upgrade-guide.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,o,d,a,n,r,l,c,s,h,p,g,u,m,b,f,y,v,I,w,C,x,S,A,k,B,W,G,J,Y,M,N,U,Z,V,T,j,z,L,R,X,E,P,F,H,D,O,Q,K,q,_,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5-upgrade-guide" tabindex="-1">Apache ECharts 5 Upgrade Guide</h1>\n<p>This guide is for those who want to upgrade from echarts 4.x (hereafter <code>v4</code>) to echarts 5.x (hereafter <code>v5</code>). You can find out what new features <code>v5</code> brings that are worth upgrading in <a href="en/basics/release-note/v5-feature">New Features in ECharts 5</a>. In most cases, developers won\'t need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, <code>v5</code> still brings some breaking changes that require special attention. In addition, in some cases, <code>v5</code> provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We\'ll try to explain these changes in detail in this document.</p>\n<h2 id="breaking-changes" tabindex="-1">Breaking Changes</h2>\n<h4 id="default-theme" tabindex="-1">Default theme</h4>\n<p>First of all, the default theme has been changed. <code>v5</code> has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBjb2xvcjogWwogICAgJyNjMjM1MzEnLAogICAgJyMyZjQ1NTQnLAogICAgJyM2MWEwYTgnLAogICAgJyNkNDgyNjUnLAogICAgJyM5MWM3YWUnLAogICAgJyM3NDlmODMnLAogICAgJyNjYTg2MjInLAogICAgJyNiZGEyOWEnLAogICAgJyM2ZTcwNzQnLAogICAgJyM1NDY1NzAnLAogICAgJyNjNGNjZDMnCiAgXQogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<p>Or, to make a simple <code>v4</code> theme.</p>\n<md-code-block lang="js" code="\'dmFyIHRoZW1lRUM0ID0gewogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdCn07CnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sIHRoZW1lRUM0KTsKY2hhcnQuc2V0T3B0aW9uKC8qIC4uLiAqLyk7\'" line-highlights="\'\'" />\n<h4 id="importing-echarts" tabindex="-1">Importing ECharts</h4>\n<h5 id="removing-support-for-default-exports" tabindex="-1">Removing Support for Default Exports</h5>\n<p>Since <code>v5</code>, echarts only provides <code>named exports</code>.</p>\n<p>So if you are importing <code>echarts</code> like this:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Ci8vIE9yIGltcG9ydCBjb3JlIG1vZHVsZQppbXBvcnQgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>It will throw error in <code>v5</code>. You need to change the code as follows to import the entire module.</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKLy8gT3IKaW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<h5 id="tree-shaking-api" tabindex="-1">tree-shaking API</h5>\n<p>In 5.0.1, we introduced the new <a href="en/basics/import">tree-shaking API</a></p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsgR3JpZENvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIE5vdGUgdGhhdCB0aGUgQ2FudmFzIHJlbmRlcmVyIGlzIG5vIGxvbmdlciBpbmNsdWRlZCBieSBkZWZhdWx0IGFuZCBuZWVkcyB0byBiZSBpbXBvcnRlZCBleHBsaWN0bHksIG9yIGltcG9ydCB0aGUgU1ZHUmVuZGVyZXIgaWYgeW91IG5lZWQgdG8gdXNlIHRoZSBTVkcgcmVuZGVyaW5nIG1vZGUKaW1wb3J0IHsgQ2FudmFzUmVuZGVyZXIgfSBmcm9tICdlY2hhcnRzL3JlbmRlcmVycyc7CgplY2hhcnRzLnVzZShbQmFyQ2hhcnQsIEdyaWRDb21wb25lbnQsIENhbnZhc1JlbmRlcmVyXSk7\'" line-highlights="\'\'" />\n<p>To make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the <code>Full Code</code> tab on the example page to see the modules you need to introduce and the related code.</p>\n<p>In most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported:</p>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NvbXBvbmVudC9ncmlkJyk7\'" line-highlights="\'\'" />\n<p>Second, because our source code has been rewritten using TypeScript, <code>v5</code> will no longer support importing files from <code>echarts/src</code>. You need to change it to import from <code>echarts/lib</code>.</p>\n<h5 id="dependency-adjustment" tabindex="-1">Dependency Adjustment</h5>\n<blockquote>\n<p>Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package.</p>\n</blockquote>\n<p>In order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, <code>CanvasRenderer</code> is no longer introduced by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted.</p>\n<ul>\n<li>The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before</li>\n</ul>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NoYXJ0L2xpbmUnKTs\'" line-highlights="\'\'" />\n<p>Need to introduce the <code>grid</code> component separately again</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2dyaWQnKTs\'" line-highlights="\'\'" />\n<p>Reference issues: <a href="https://github.com/apache/echarts/issues/14080">#14080</a>, <a href="https://github.com/apache/echarts/issues/13764">#13764</a></p>\n<ul>\n<li><code>aria</code> components are no longer imported by default. You need import it manually if necessary.</li>\n</ul>\n<md-code-block lang="js" code="\'aW1wb3J0IHsgQXJpYUNvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmVjaGFydHMudXNlKEFyaWFDb21wb25lbnQpOw\'" line-highlights="\'\'" />\n<p>Or</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2FyaWEnKTs\'" line-highlights="\'\'" />\n<h4 id="removes-built-in-geojson" tabindex="-1">Removes Built-in GeoJSON</h4>\n<p><code>v5</code> removes the built-in geoJSON (previously in the <code>echarts/map</code> folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface.</p>\n<h4 id="browser-compatibility" tabindex="-1">Browser Compatibility</h4>\n<p>IE8 is no longer supported by <code>v5</code>. We no longer maintain and upgrade the previous <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML renderer</a> for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with <code>v5.0.1</code>.</p>\n<h4 id="echarts-configuration-item-adjustment" tabindex="-1">ECharts configuration item adjustment</h4>\n<h5 id="visual-style-settings-priority-change" tabindex="-1">Visual style settings priority change</h5>\n<p>The priority of the visuals between <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are reversed since <code>v5</code>.</p>\n<p>That is, previously in <code>v4</code>, the visuals (i.e., color, symbol, symbolSize, ...) that generated by <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> has the highest priority, which will overwrite the same visuals settings in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a>. That brought troubles when needing to specify specific style to some certain data items while using <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a>. Since <code>v5</code>, the visuals specified in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> has the highest priority.</p>\n<p>In most cases, users will probably not notice this change when migrating from <code>v4</code> to <code>v5</code>. But users can still check that if <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are both specified.</p>\n<h5 id="padding-for-rich-text" tabindex="-1"><code>padding</code> for Rich Text</h5>\n<p><code>v5</code> adjusts the <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> to make it more compliant with CSS specifications. In <code>v4</code>, for example <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>33</code> and <code>padding-bottom</code> is <code>11</code>. The position of the top and bottom is adjusted in <code>v5</code>, <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>11</code> and <code>padding-bottom</code> is <code>33</code>.</p>\n<p>If the user is using <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>, this order needs to be adjusted.</p>\n<h2 id="echarts-related-extensions" tabindex="-1">ECharts Related Extensions</h2>\n<p>These extensions need to be upgraded to new version to support echarts <code>v5</code>:</p>\n<ul>\n<li><a href="https://github.com/ecomfe/echarts-gl">echarts-gl</a></li>\n<li><a href="https://github.com/ecomfe/echarts-wordcloud">echarts-wordcloud</a></li>\n<li><a href="https://github.com/ecomfe/echarts-liquidfill">echarts-liquidfill</a></li>\n</ul>\n<h2 id="deprecated-api" tabindex="-1">Deprecated API</h2>\n<p>Some of the API and echarts options are deprecated since <code>v5</code>, but are still backward compatible. Users can <strong>keep using these deprecated API</strong>, with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance.</p>\n<p>The deprecated API and their corresponding new API are listed as follows:</p>\n<ul>\n<li>Transform related props of a graphic element are changed:\n<ul>\n<li>Changes:\n<ul>\n<li><code>position: [number, number]</code> are changed to <code>x: number</code>/<code>y: number</code>.</li>\n<li><code>scale: [number, number]</code> are changed to <code>scaleX: number</code>/<code>scaleY: number</code>.</li>\n<li><code>origin: [number, number]</code> are changed to <code>originX: number</code>/<code>originY: number</code>.</li>\n</ul>\n</li>\n<li>The <code>position</code>, <code>scale</code> and <code>origin</code> are still supported but deprecated.</li>\n<li>It effects these places:\n<ul>\n<li>In the <code>graphic</code> components: the declarations of each element.</li>\n<li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>.</li>\n<li>Directly use zrender graphic elements.</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Text related props on graphic elements are changed:\n<ul>\n<li>Changes:\n<ul>\n<li>The declaration of attached text (or say, rect text) are changed.\n<ul>\n<li>Prop <code>style.text</code> are deprecated in elements except <code>Text</code>. Instead, Prop set <code>textContent</code> and <code>textConfig</code> are provided to support more powerful capabilities.</li>\n<li>These related props at the left part below are deprecated. Use the right part below instead.\n<ul>\n<li>textPosition => textConfig.position</li>\n<li>textOffset => textConfig.offset</li>\n<li>textRotation => textConfig.rotation</li>\n<li>textDistance => textConfig.distance</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>The props at the left part below are deprecated in <code>style</code> and <code>style.rich.?</code>. Use the props at the right part below instead.\n<ul>\n<li>textFill => fill</li>\n<li>textStroke => stroke</li>\n<li>textFont => font</li>\n<li>textStrokeWidth => lineWidth</li>\n<li>textAlign => align</li>\n<li>textVerticalAlign => verticalAlign);</li>\n<li>textLineHeight =></li>\n<li>textWidth => width</li>\n<li>textHeight => hight</li>\n<li>textBackgroundColor => backgroundColor</li>\n<li>textPadding => padding</li>\n<li>textBorderColor => borderColor</li>\n<li>textBorderWidth => borderWidth</li>\n<li>textBorderRadius => borderRadius</li>\n<li>textBoxShadowColor => shadowColor</li>\n<li>textBoxShadowBlur => shadowBlur</li>\n<li>textBoxShadowOffsetX => shadowOffsetX</li>\n<li>textBoxShadowOffsetY => shadowOffsetY</li>\n</ul>\n</li>\n<li>Note: these props are not changed:\n<ul>\n<li>textShadowColor</li>\n<li>textShadowBlur</li>\n<li>textShadowOffsetX</li>\n<li>textShadowOffsetY</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>It effects these places:\n<ul>\n<li>In the <code>graphic</code> components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]</li>\n<li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>. [compat, but not accurately the same in some complicated cases].</li>\n<li>Directly use zrender API to create graphic elements. [No compat, breaking change].</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>API on chart instance:\n<ul>\n<li><code>chart.one(...)</code> is deprecated.</li>\n</ul>\n</li>\n<li><code>label</code>:\n<ul>\n<li>In props <code>color</code>, <code>textBorderColor</code>, <code>backgroundColor</code> and <code>borderColor</code>, the value <code>\'auto\'</code> is deprecated. Use the value <code>\'inherit\'</code> instead.</li>\n</ul>\n</li>\n<li><code>hoverAnimation</code>:\n<ul>\n<li>option <code>series.hoverAnimation</code> is deprecated. Use <code>series.emphasis.scale</code> instead.</li>\n</ul>\n</li>\n<li><code>line series</code>:\n<ul>\n<li>option <code>series.clipOverflow</code> is deprecated. Use <code>series.clip</code> instead.</li>\n</ul>\n</li>\n<li><code>custom series</code>:\n<ul>\n<li>In <code>renderItem</code>, the <code>api.style(...)</code> and <code>api.styleEmphasis(...)</code> are deprecated. Because it is not really necessary and hard to ensure backward compatibility. Users can fetch system designated visual by <code>api.visual(...)</code>.</li>\n</ul>\n</li>\n<li><code>sunburst series</code>:\n<ul>\n<li>Action type <code>highlight</code> is deprecated. Use <code>sunburstHighlight</code> instead.</li>\n<li>Action type <code>downplay</code> is deprecated. Use <code>sunburstUnhighlight</code> instead.</li>\n<li>option <code>series.downplay</code> is deprecated. Use <code>series.blur</code> instead.</li>\n<li>option <code>series.highlightPolicy</code> is deprecated. Use <code>series.emphasis.focus</code> instead.</li>\n</ul>\n</li>\n<li><code>pie series</code>:\n<ul>\n<li>The action type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>pieToggleSelect</code> => <code>toggleSelect</code></li>\n<li><code>pieSelect</code> => <code>select</code></li>\n<li><code>pieUnSelect</code> => <code>unselect</code></li>\n</ul>\n</li>\n<li>The event type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>pieselectchanged</code> => <code>selectchanged</code></li>\n<li><code>pieselected</code> => <code>selected</code></li>\n<li><code>pieunselected</code> => <code>unselected</code></li>\n</ul>\n</li>\n<li>option <code>series.label.margin</code> is deprecated. Use <code>series.label.edgeDistance</code> instead.</li>\n<li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li>\n<li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li>\n</ul>\n</li>\n<li><code>map series</code>:\n<ul>\n<li>The action type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>mapToggleSelect</code> => <code>toggleSelect</code></li>\n<li><code>mapSelect</code> => <code>select</code></li>\n<li><code>mapUnSelect</code> => <code>unselect</code></li>\n</ul>\n</li>\n<li>The event type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>mapselectchanged</code> => <code>selectchanged</code></li>\n<li><code>mapselected</code> => <code>selected</code></li>\n<li><code>mapunselected</code> => <code>unselected</code></li>\n</ul>\n</li>\n<li>option <code>series.mapType</code> is deprecated. Use <code>series.map</code> instead.</li>\n<li>option <code>series.mapLocation</code> is deprecated.</li>\n</ul>\n</li>\n<li><code>graph series</code>:\n<ul>\n<li>option <code>series.focusNodeAdjacency</code> is deprecated. Use <code>series.emphasis: { focus: \'adjacency\'}</code> instead.</li>\n</ul>\n</li>\n<li><code>gauge series</code>:\n<ul>\n<li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li>\n<li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li>\n</ul>\n</li>\n<li><code>dataZoom component</code>:\n<ul>\n<li>option <code>dataZoom.handleIcon</code> need prefix <code>path://</code> if using SVGPath.</li>\n</ul>\n</li>\n<li><code>radar</code>:\n<ul>\n<li>option <code>radar.name</code> is deprecated. Use <code>radar.axisName</code> instead.</li>\n<li>option <code>radar.nameGap</code> is deprecated. Use <code>radar.axisNameGap</code> instead.</li>\n</ul>\n</li>\n<li>Parse and format:\n<ul>\n<li><code>echarts.format.formatTime</code> is deprecated. Use <code>echarts.time.format</code> instead.</li>\n<li><code>echarts.number.parseDate</code> is deprecated. Use <code>echarts.time.parse</code> instead.</li>\n<li><code>echarts.format.getTextRect</code> is deprecated.</li>\n</ul>\n</li>\n</ul>\n',postPath:"en/basics/release-note/v5-upgrade-guide"}],fetch:{},error:o,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:r},{title:"资源列表",dir:l,draft:e},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:u}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:f,draft:e},{title:"系列",dir:y,draft:e},{title:"样式",dir:v},{title:"数据集",dir:I},{title:"数据转换",dir:w},{title:"坐标系",dir:C,draft:e},{title:"坐标轴",dir:x},{title:"视觉映射",dir:i},{title:"图例",dir:S},{title:"事件与行为",dir:A}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:B,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:J},{title:"极坐标系柱状图",dir:Y,draft:e},{title:"阶梯瀑布图",dir:M},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:N,children:[{title:"基础折线图",dir:U},{title:"堆叠折线图",dir:Z},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:T},{title:"阶梯线图",dir:j}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:L},{title:"南丁格尔图(玫瑰图)",dir:R}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:E}]}]},{title:P,dir:t,draft:e},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:H}]},{title:"数据处理",dir:D,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:Q,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:r},{title:"Resources",dir:l,draft:e},{title:"Inspiration",dir:c},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:u}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:f,draft:e},{title:"Series",dir:y,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:I},{title:"Data Transform",dir:w},{title:"Coordinate",dir:C,draft:e},{title:"Axis",dir:x},{title:"Visual Mapping",dir:i},{title:"Legend",dir:S},{title:"Event and Action",dir:A}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:B,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:J},{title:"Bar Polar",dir:Y,draft:e},{title:"Waterfall",dir:M}]},{title:"Line",dir:N,children:[{title:"Basic Line",dir:U},{title:"Stacked Line",dir:Z},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:T},{title:"Step Line",dir:j}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:L},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:E}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:H}]},{title:"Data",dir:D,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:Q,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/basics/release-note/v5-upgrade-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:o}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/best-practices/aria/index.html b/handbook/en/best-practices/aria/index.html
index 1128b29..911d1c5 100644
--- a/handbook/en/best-practices/aria/index.html
+++ b/handbook/en/best-practices/aria/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="web-accessibility" tabindex="-1">Web Accessibility</h1> <p><a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people.</p> <p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> as <code>true</code>. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.</p> <p>About the configuration item:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="web-accessibility" tabindex="-1">Web Accessibility</h1> <p><a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people.</p> <p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> as <code>true</code>. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.</p> <p>About the configuration item:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
aria<span class="token operator">:</span> <span class="token punctuation">{</span>
show<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
@@ -29,7 +29,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><iframe width="100%" height="350" src=""></iframe></p> <p>There will be an <code>area-label</code> attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:</p> <pre><code>This is a chart about "Referrer of a User" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.
-</code></pre> <h2 id="overall-description-modification" tabindex="-1">Overall Description Modification</h2> <p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p> <p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> configuration item.</p> <h2 id="customize-template-description" tabindex="-1">Customize Template Description</h2> <p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p> <p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use <code>aria.description</code> to cover the default if needed.</p> <p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> as the overall description. Configuration item <code>aria.general.withTitle</code> and <code>'{title}'</code> will be replaced by the chart title. In another word, if <code>aria.general.withTitle</code> was defined as <code>This is a chart about "{title}"</code>, and the title is <code>'Prize Distribution Chart'</code>, the description of this part will be <code>'This is a chart about "Prize Distribution Chart"'</code>.</p> <p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p> <p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria">ARIA Document</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/en/best-practices/aria.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,l,o,n,h,s,c,p,g,f,m,u,b,I,C,w,A,y,v,W,B,E,T,x,S,D,R,k,P,Z,H,V,F,U,z,J,G,L,M,K,X,O,Y,q,N,_,j,Q,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="web-accessibility" tabindex="-1">Web Accessibility</h1>\n<p><a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people.</p>\n<p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> as <code>true</code>. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.</p>\n<p>About the configuration item:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGFyaWE6IHsKICAgIHNob3c6IHRydWUKICB9LAogIHRpdGxlOiB7CiAgICB0ZXh0OiAnUmVmZXJyZXIgb2YgYSBVc2VyJywKICAgIHg6ICdjZW50ZXInCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1JlZmVycmVyJywKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdEaXJlY3QgVmlzaXQnIH0sCiAgICAgICAgeyB2YWx1ZTogMzEwLCBuYW1lOiAnRW1haWwgTWFya2V0aW5nJyB9LAogICAgICAgIHsgdmFsdWU6IDIzNCwgbmFtZTogJ1VuaW9uIEFkJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ1ZpZGVvIEFkJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICdTZWFyY2ggRW5naW5lJyB9CiAgICAgIF0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/aria-pie"></md-example></p>\n<p>There will be an <code>area-label</code> attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:</p>\n<pre><code>This is a chart about "Referrer of a User" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.\n</code></pre>\n<h2 id="overall-description-modification" tabindex="-1">Overall Description Modification</h2>\n<p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p>\n<p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> configuration item.</p>\n<h2 id="customize-template-description" tabindex="-1">Customize Template Description</h2>\n<p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p>\n<p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use <code>aria.description</code> to cover the default if needed.</p>\n<p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> as the overall description. Configuration item <code>aria.general.withTitle</code> and <code>\'{title}\'</code> will be replaced by the chart title. In another word, if <code>aria.general.withTitle</code> was defined as <code>This is a chart about "{title}"</code>, and the title is <code>\'Prize Distribution Chart\'</code>, the description of this part will be <code>\'This is a chart about "Prize Distribution Chart"\'</code>.</p>\n<p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p>\n<p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria">ARIA Document</a>.</p>\n',postPath:"en/best-practices/aria"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:b,draft:t},{title:"系列",dir:I,draft:t},{title:"样式",dir:C},{title:"数据集",dir:w},{title:"数据转换",dir:A},{title:"坐标系",dir:y,draft:t},{title:"坐标轴",dir:v},{title:"视觉映射",dir:i},{title:"图例",dir:W},{title:"事件与行为",dir:B}]},{title:"应用篇",dir:E,children:[{title:"常用图表类型",dir:T,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:x},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:k},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:P,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:U}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:G}]},{title:"散点图",dir:L,children:[{title:"基础散点图",dir:M}]}]},{title:K,dir:e,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:O}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:N,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:I,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:w},{title:"Data Transform",dir:A},{title:"Coordinate",dir:y,draft:t},{title:"Axis",dir:v},{title:"Visual Mapping",dir:i},{title:"Legend",dir:W},{title:"Event and Action",dir:B}]},{title:"How To Guides",dir:E,children:[{title:"Common Charts",dir:T,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:x},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:k}]},{title:"Line",dir:P,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:U}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:J},{title:"Rose Style",dir:G}]},{title:"Scatter",dir:L,children:[{title:"Basic Scatter",dir:M}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:O}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:N,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/best-practices/aria",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+</code></pre> <h2 id="overall-description-modification" tabindex="-1">Overall Description Modification</h2> <p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p> <p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> configuration item.</p> <h2 id="customize-template-description" tabindex="-1">Customize Template Description</h2> <p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p> <p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use <code>aria.description</code> to cover the default if needed.</p> <p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> as the overall description. Configuration item <code>aria.general.withTitle</code> and <code>'{title}'</code> will be replaced by the chart title. In another word, if <code>aria.general.withTitle</code> was defined as <code>This is a chart about "{title}"</code>, and the title is <code>'Prize Distribution Chart'</code>, the description of this part will be <code>'This is a chart about "Prize Distribution Chart"'</code>.</p> <p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p> <p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria">ARIA Document</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/en/best-practices/aria.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,l,o,n,h,s,c,p,g,f,m,u,b,I,C,w,A,y,v,W,B,E,T,x,S,D,R,k,P,Z,H,V,F,U,z,J,G,L,M,K,X,O,Y,q,N,_,j,Q,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="web-accessibility" tabindex="-1">Web Accessibility</h1>\n<p><a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people.</p>\n<p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> as <code>true</code>. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.</p>\n<p>About the configuration item:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGFyaWE6IHsKICAgIHNob3c6IHRydWUKICB9LAogIHRpdGxlOiB7CiAgICB0ZXh0OiAnUmVmZXJyZXIgb2YgYSBVc2VyJywKICAgIHg6ICdjZW50ZXInCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1JlZmVycmVyJywKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdEaXJlY3QgVmlzaXQnIH0sCiAgICAgICAgeyB2YWx1ZTogMzEwLCBuYW1lOiAnRW1haWwgTWFya2V0aW5nJyB9LAogICAgICAgIHsgdmFsdWU6IDIzNCwgbmFtZTogJ1VuaW9uIEFkJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ1ZpZGVvIEFkJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICdTZWFyY2ggRW5naW5lJyB9CiAgICAgIF0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/aria-pie"></md-example></p>\n<p>There will be an <code>area-label</code> attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:</p>\n<pre><code>This is a chart about "Referrer of a User" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.\n</code></pre>\n<h2 id="overall-description-modification" tabindex="-1">Overall Description Modification</h2>\n<p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p>\n<p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> configuration item.</p>\n<h2 id="customize-template-description" tabindex="-1">Customize Template Description</h2>\n<p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p>\n<p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use <code>aria.description</code> to cover the default if needed.</p>\n<p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> as the overall description. Configuration item <code>aria.general.withTitle</code> and <code>\'{title}\'</code> will be replaced by the chart title. In another word, if <code>aria.general.withTitle</code> was defined as <code>This is a chart about "{title}"</code>, and the title is <code>\'Prize Distribution Chart\'</code>, the description of this part will be <code>\'This is a chart about "Prize Distribution Chart"\'</code>.</p>\n<p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p>\n<p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria">ARIA Document</a>.</p>\n',postPath:"en/best-practices/aria"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:b,draft:t},{title:"系列",dir:I,draft:t},{title:"样式",dir:C},{title:"数据集",dir:w},{title:"数据转换",dir:A},{title:"坐标系",dir:y,draft:t},{title:"坐标轴",dir:v},{title:"视觉映射",dir:i},{title:"图例",dir:W},{title:"事件与行为",dir:B}]},{title:"应用篇",dir:E,children:[{title:"常用图表类型",dir:T,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:x},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:k},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:P,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:U}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:G}]},{title:"散点图",dir:L,children:[{title:"基础散点图",dir:M}]}]},{title:K,dir:e,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:O}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:N,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:I,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:w},{title:"Data Transform",dir:A},{title:"Coordinate",dir:y,draft:t},{title:"Axis",dir:v},{title:"Visual Mapping",dir:i},{title:"Legend",dir:W},{title:"Event and Action",dir:B}]},{title:"How To Guides",dir:E,children:[{title:"Common Charts",dir:T,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:x},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:k}]},{title:"Line",dir:P,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:U}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:J},{title:"Rose Style",dir:G}]},{title:"Scatter",dir:L,children:[{title:"Basic Scatter",dir:M}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:O}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:N,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/best-practices/aria",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/best-practices/canvas-vs-svg/index.html b/handbook/en/best-practices/canvas-vs-svg/index.html
index df638e4..83acf9c 100644
--- a/handbook/en/best-practices/canvas-vs-svg/index.html
+++ b/handbook/en/best-practices/canvas-vs-svg/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practices/canvas-vs-svg" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="render-with-svg-or-canvas" tabindex="-1">Render with SVG or Canvas</h1> <p>Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them.</p> <p>Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> was released, ECharts provided the SVG render as an additional option. You can specify the <a href="http://echarts.baidu.com/api.html#echarts.init">renderer parameter</a> as <code>'canvas'</code> or <code>'svg'</code> while initializing a chart.</p> <blockquote><p>SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library <a href="https://github.com/ecomfe/zrender">ZRender</a>. It formed an interchangeable SVG renderer and Canvas renderer.</p></blockquote> <h2 id="how-to-choose-a-renderer%3F" tabindex="-1">How to Choose a Renderer?</h2> <p>Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">effect</a>. However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.</p> <p>The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.</p> <ul><li>In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.</li> <li>In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practices/canvas-vs-svg" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="render-with-svg-or-canvas" tabindex="-1">Render with SVG or Canvas</h1> <p>Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them.</p> <p>Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> was released, ECharts provided the SVG render as an additional option. You can specify the <a href="http://echarts.baidu.com/api.html#echarts.init">renderer parameter</a> as <code>'canvas'</code> or <code>'svg'</code> while initializing a chart.</p> <blockquote><p>SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library <a href="https://github.com/ecomfe/zrender">ZRender</a>. It formed an interchangeable SVG renderer and Canvas renderer.</p></blockquote> <h2 id="how-to-choose-a-renderer%3F" tabindex="-1">How to Choose a Renderer?</h2> <p>Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">effect</a>. However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.</p> <p>The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.</p> <ul><li>In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.</li> <li>In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.
<ul><li>In situations where many instances of ECharts have to be created and the browser is prone to crashing (probably because the number of Canvas is causing the memory footprint to exceed the phone's capacity), the SVG renderer can be used to make improvements. Roughly speaking, the SVG renderer may work better if the chart is running on a low-end Android, or if we are using specific charts such as the <a href="https://ecomfe.github.io/echarts-liquidfill/example/">LiquidFill chart</a>.</li> <li>For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.</li></ul></li></ul> <p>We strongly welcome <a href="https://github.com/apache/echarts/issues/new">feedback</a> from developers on their experiences and scenarios to help us make better optimizations.</p> <p>Note: Currently, some special rendering still relies on Canvas: e.g. <a href="https://echarts.apache.org/option.html#series-lines.effect">trail effect</a>, <a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap">heatmap with blending effect</a>, etc.</p> <h2 id="how-to-use-the-renderer" tabindex="-1">How to Use the Renderer</h2> <p>If <code>echarts</code> is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</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>If you are using treeshakable import as described in <a href="en/basics/import">Introducing Apache ECharts in your project</a>, you will need to import the required renderers manually</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/core'</span><span class="token punctuation">;</span>
<span class="token comment">// You can use only the renderers you need</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> SVGRenderer<span class="token punctuation">,</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span>
@@ -18,7 +18,8 @@
<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// using the SVG renderer</span>
-<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<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 punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/best-practices/canvas-vs-svg.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,n,d,l,s,o,h,c,p,m,g,b,f,u,w,v,y,C,I,Z,S,V,G,k,R,W,B,X,x,Y,E,H,J,L,N,P,z,F,M,D,A,j,T,U,q,K,O,_,Q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="render-with-svg-or-canvas" tabindex="-1">Render with SVG or Canvas</h1>\n<p>Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them.</p>\n<p>Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> was released, ECharts provided the SVG render as an additional option. You can specify the <a href="http://echarts.baidu.com/api.html#echarts.init">renderer parameter</a> as <code>\'canvas\'</code> or <code>\'svg\'</code> while initializing a chart.</p>\n<blockquote>\n<p>SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library <a href="https://github.com/ecomfe/zrender">ZRender</a>. It formed an interchangeable SVG renderer and Canvas renderer.</p>\n</blockquote>\n<h2 id="how-to-choose-a-renderer%3F" tabindex="-1">How to Choose a Renderer?</h2>\n<p>Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">effect</a>. However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.</p>\n<p>The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.</p>\n<ul>\n<li>In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.</li>\n<li>In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.\n<ul>\n<li>In situations where many instances of ECharts have to be created and the browser is prone to crashing (probably because the number of Canvas is causing the memory footprint to exceed the phone\'s capacity), the SVG renderer can be used to make improvements. Roughly speaking, the SVG renderer may work better if the chart is running on a low-end Android, or if we are using specific charts such as the <a href="https://ecomfe.github.io/echarts-liquidfill/example/">LiquidFill chart</a>.</li>\n<li>For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.</li>\n</ul>\n</li>\n</ul>\n<p>We strongly welcome <a href="https://github.com/apache/echarts/issues/new">feedback</a> from developers on their experiences and scenarios to help us make better optimizations.</p>\n<p>Note: Currently, some special rendering still relies on Canvas: e.g. <a href="https://echarts.apache.org/option.html#series-lines.effect">trail effect</a>, <a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap">heatmap with blending effect</a>, etc.</p>\n<h2 id="how-to-use-the-renderer" tabindex="-1">How to Use the Renderer</h2>\n<p>If <code>echarts</code> is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>If you are using treeshakable import as described in <a href="en/basics/import">Introducing Apache ECharts in your project</a>, you will need to import the required renderers manually</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwovLyBZb3UgY2FuIHVzZSBvbmx5IHRoZSByZW5kZXJlcnMgeW91IG5lZWQKaW1wb3J0IHsgU1ZHUmVuZGVyZXIsIENhbnZhc1JlbmRlcmVyIH0gZnJvbSAnZWNoYXJ0cy9yZW5kZXJlcnMnOwoKZWNoYXJ0cy51c2UoW1NWR1JlbmRlcmVyLCBDYW52YXNSZW5kZXJlcl0pOw\'" line-highlights="\'\'" />\n<p>Then, we can <a href="https://echarts.apache.org//api.html/api.html#echarts.init">pass in the parameter</a> when initializing the chart instance in code to select the renderer.</p>\n<md-code-block lang="js" code="\'Ly8gVXNlIHRoZSBDYW52YXMgcmVuZGVyZXIgKGRlZmF1bHQpCnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChjb250YWluZXJEb20sIG51bGwsIHsgcmVuZGVyZXI6ICdjYW52YXMnIH0pOwovLyBFcXVpdmFsZW50IHRvLgp2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoY29udGFpbmVyRG9tKTsKCi8vIHVzaW5nIHRoZSBTVkcgcmVuZGVyZXIKdmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGNvbnRhaW5lckRvbSwgbnVsbCwgeyByZW5kZXJlcjogJ3N2ZycgfSk7\'" line-highlights="\'\'" />\n',postPath:"en/best-practices/canvas-vs-svg"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:n,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:s,draft:e},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:u,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:v},{title:"数据集",dir:y},{title:"数据转换",dir:C},{title:"坐标系",dir:I,draft:e},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:i},{title:"图例",dir:S},{title:"事件与行为",dir:V}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:B},{title:"极坐标系柱状图",dir:X,draft:e},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:E},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:J},{title:"平滑曲线图",dir:L},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:P},{title:"圆环图",dir:z},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:D}]}]},{title:A,dir:t,draft:e},{title:"跨平台方案",dir:j,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:T}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:K,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:A,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:n,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:l},{title:"Resources",dir:s,draft:e},{title:"Inspiration",dir:o},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:u,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:y},{title:"Data Transform",dir:C},{title:"Coordinate",dir:I,draft:e},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:i},{title:"Legend",dir:S},{title:"Event and Action",dir:V}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:B},{title:"Bar Polar",dir:X,draft:e},{title:"Waterfall",dir:x}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:E},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:J},{title:"Smoothed Line",dir:L},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:P},{title:"Ring Style",dir:z},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:T}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:K,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/best-practices/canvas-vs-svg",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<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 punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/best-practices/canvas-vs-svg.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,n,d,l,s,o,h,c,p,m,g,b,f,u,w,v,y,C,I,Z,S,V,G,k,R,W,B,X,x,Y,E,H,J,L,N,P,z,F,M,D,A,j,T,U,q,K,O,_,Q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="render-with-svg-or-canvas" tabindex="-1">Render with SVG or Canvas</h1>\n<p>Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them.</p>\n<p>Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> was released, ECharts provided the SVG render as an additional option. You can specify the <a href="http://echarts.baidu.com/api.html#echarts.init">renderer parameter</a> as <code>\'canvas\'</code> or <code>\'svg\'</code> while initializing a chart.</p>\n<blockquote>\n<p>SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library <a href="https://github.com/ecomfe/zrender">ZRender</a>. It formed an interchangeable SVG renderer and Canvas renderer.</p>\n</blockquote>\n<h2 id="how-to-choose-a-renderer%3F" tabindex="-1">How to Choose a Renderer?</h2>\n<p>Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">effect</a>. However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.</p>\n<p>The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.</p>\n<ul>\n<li>In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.</li>\n<li>In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.\n<ul>\n<li>In situations where many instances of ECharts have to be created and the browser is prone to crashing (probably because the number of Canvas is causing the memory footprint to exceed the phone\'s capacity), the SVG renderer can be used to make improvements. Roughly speaking, the SVG renderer may work better if the chart is running on a low-end Android, or if we are using specific charts such as the <a href="https://ecomfe.github.io/echarts-liquidfill/example/">LiquidFill chart</a>.</li>\n<li>For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.</li>\n</ul>\n</li>\n</ul>\n<p>We strongly welcome <a href="https://github.com/apache/echarts/issues/new">feedback</a> from developers on their experiences and scenarios to help us make better optimizations.</p>\n<p>Note: Currently, some special rendering still relies on Canvas: e.g. <a href="https://echarts.apache.org/option.html#series-lines.effect">trail effect</a>, <a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap">heatmap with blending effect</a>, etc.</p>\n<h2 id="how-to-use-the-renderer" tabindex="-1">How to Use the Renderer</h2>\n<p>If <code>echarts</code> is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>If you are using treeshakable import as described in <a href="en/basics/import">Introducing Apache ECharts in your project</a>, you will need to import the required renderers manually</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwovLyBZb3UgY2FuIHVzZSBvbmx5IHRoZSByZW5kZXJlcnMgeW91IG5lZWQKaW1wb3J0IHsgU1ZHUmVuZGVyZXIsIENhbnZhc1JlbmRlcmVyIH0gZnJvbSAnZWNoYXJ0cy9yZW5kZXJlcnMnOwoKZWNoYXJ0cy51c2UoW1NWR1JlbmRlcmVyLCBDYW52YXNSZW5kZXJlcl0pOw\'" line-highlights="\'\'" />\n<p>Then, we can <a href="https://echarts.apache.org//api.html/api.html#echarts.init">pass in the parameter</a> when initializing the chart instance in code to select the renderer.</p>\n<md-code-block lang="js" code="\'Ly8gVXNlIHRoZSBDYW52YXMgcmVuZGVyZXIgKGRlZmF1bHQpCnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChjb250YWluZXJEb20sIG51bGwsIHsgcmVuZGVyZXI6ICdjYW52YXMnIH0pOwovLyBFcXVpdmFsZW50IHRvLgp2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoY29udGFpbmVyRG9tKTsKCi8vIHVzaW5nIHRoZSBTVkcgcmVuZGVyZXIKdmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGNvbnRhaW5lckRvbSwgbnVsbCwgeyByZW5kZXJlcjogJ3N2ZycgfSk7\'" line-highlights="\'\'" />\n',postPath:"en/best-practices/canvas-vs-svg"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:n,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:s,draft:e},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:u,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:v},{title:"数据集",dir:y},{title:"数据转换",dir:C},{title:"坐标系",dir:I,draft:e},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:i},{title:"图例",dir:S},{title:"事件与行为",dir:V}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:B},{title:"极坐标系柱状图",dir:X,draft:e},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:E},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:J},{title:"平滑曲线图",dir:L},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:P},{title:"圆环图",dir:z},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:D}]}]},{title:A,dir:t,draft:e},{title:"跨平台方案",dir:j,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:T}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:K,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:A,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:n,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:l},{title:"Resources",dir:s,draft:e},{title:"Inspiration",dir:o},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:u,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:y},{title:"Data Transform",dir:C},{title:"Coordinate",dir:I,draft:e},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:i},{title:"Legend",dir:S},{title:"Event and Action",dir:V}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:B},{title:"Bar Polar",dir:X,draft:e},{title:"Waterfall",dir:x}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:E},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:J},{title:"Smoothed Line",dir:L},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:P},{title:"Ring Style",dir:z},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:T}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:K,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/best-practices/canvas-vs-svg",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/concepts/axis/index.html b/handbook/en/concepts/axis/index.html
index 775a3e0..b413597 100644
--- a/handbook/en/concepts/axis/index.html
+++ b/handbook/en/concepts/axis/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="axis" tabindex="-1">Axis</h1> <p>The x/y-axis in the Cartesian coordinate system.</p> <h2 id="x-axis%2C-y-axis" tabindex="-1">x-axis, y-axis</h2> <p>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</p> <p><img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg"></p> <p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="axis" tabindex="-1">Axis</h1> <p>The x/y-axis in the Cartesian coordinate system.</p> <h2 id="x-axis%2C-y-axis" tabindex="-1">x-axis, y-axis</h2> <p>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</p> <p><img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg"></p> <p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
@@ -280,7 +280,8 @@
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis">Official Website</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/en/concepts/axis.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/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,g,a,d,l,I,C,r,o,A,s,n,h,c,p,u,b,m,x,w,B,f,y,L,G,K,H,Z,W,v,X,T,F,J,O,S,V,k,M,Y,z,D,R,U,E,Q,j,N,P,q,_,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="axis" tabindex="-1">Axis</h1>\n<p>The x/y-axis in the Cartesian coordinate system.</p>\n<h2 id="x-axis%2C-y-axis" tabindex="-1">x-axis, y-axis</h2>\n<p>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</p>\n<p><img max-width="830" width="100%" height="100%"\nsrc="images/design/axis/charts_axis_img02.jpg">\n</img></p>\n<p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICAvLyAuLi4KICB9LAogIHlBeGlzOiB7CiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: "Sales Time", "Sales Location" and "product name", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as "Sales Quantity" and "Sales Price".</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBuYW1lOiAnU2FsZXMgUXVhbnRpdHknCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>When x-axis has a large span, we can use the zoom method to display part of the data in the chart.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBuYW1lOiAnU2FsZXMgUXVhbnRpdHknCiAgICAvLyAuLi4KICB9LAogIGRhdGFab29tOiBbXQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config <a href="https://echarts.apache.org/option.html#xAxis.offset">offset</a> to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1NhbGVzIFF1YW50aXR5JwogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICdTYWxlcyBQcmljZScKICAgICAgLy8gLi4uCiAgICB9CiAgXQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<h2 id="axis-line" tabindex="-1">Axis Line</h2>\n<p>ECharts provide the config of <a href="https://echarts.apache.org/option.html#xAxis.axisLine">axisLine</a>. You can change the setting according to the demand, such as the arrow on two sides and the style of axes.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGluZTogewogICAgICBzeW1ib2w6ICdhcnJvdycsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMaW5lOiB7CiAgICAgIHN5bWJvbDogJ2Fycm93JywKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="tick" tabindex="-1">Tick</h2>\n<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisTick">axisTick</a>. You can change the setting according to the demand, such as the length of ticks, and the style of ticks.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzVGljazogewogICAgICBsZW5ndGg6IDYsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNUaWNrOiB7CiAgICAgIGxlbmd0aDogNiwKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="label" tabindex="-1">Label</h2>\n<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisLabel">axisLabel</a>. You can change the setting according to the demand, such as the text alignment and the customized label content.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGFiZWw6IHsKICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBrZycsCiAgICAgIGFsaWduOiAnY2VudGVyJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMYWJlbDogewogICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IMKlJywKICAgICAgYWxpZ246ICdjZW50ZXInCiAgICAgIC8vIC4uLgogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="example" tabindex="-1">Example</h2>\n<p>The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJywKICAgIGF4aXNQb2ludGVyOiB7IHR5cGU6ICdjcm9zcycgfQogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBheGlzVGljazogewogICAgICAgIGFsaWduV2l0aExhYmVsOiB0cnVlCiAgICAgIH0sCiAgICAgIGF4aXNMYWJlbDogewogICAgICAgIHJvdGF0ZTogMzAKICAgICAgfSwKICAgICAgZGF0YTogWwogICAgICAgICdKYW51YXJ5JywKICAgICAgICAnRmVicnVhcnknLAogICAgICAgICdNYXJjaCcsCiAgICAgICAgJ0FwcmlsJywKICAgICAgICAnTWF5JywKICAgICAgICAnSnVuZScsCiAgICAgICAgJ0p1bHknLAogICAgICAgICdBdWd1c3QnLAogICAgICAgICdTZXB0ZW1iZXInLAogICAgICAgICdPY3RvYmVyJywKICAgICAgICAnTm92ZW1iZXInLAogICAgICAgICdEZWNlbWJlcicKICAgICAgXQogICAgfQogIF0sCiAgeUF4aXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1ByZWNpcGl0YXRpb24nLAogICAgICBtaW46IDAsCiAgICAgIG1heDogMjUwLAogICAgICBwb3NpdGlvbjogJ3JpZ2h0JywKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBtbCcKICAgICAgfQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDI1LAogICAgICBwb3NpdGlvbjogJ2xlZnQnLAogICAgICBheGlzTGFiZWw6IHsKICAgICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IMKwQycKICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdQcmVjaXBpdGF0aW9uJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHlBeGlzSW5kZXg6IDAsCiAgICAgIGRhdGE6IFs2LCAzMiwgNzAsIDg2LCA2OC43LCAxMDAuNywgMTI1LjYsIDExMi4yLCA3OC43LCA0OC44LCAzNi4wLCAxOS4zXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzbW9vdGg6IHRydWUsCiAgICAgIHlBeGlzSW5kZXg6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICA2LjAsCiAgICAgICAgMTAuMiwKICAgICAgICAxMC4zLAogICAgICAgIDExLjUsCiAgICAgICAgMTAuMywKICAgICAgICAxMy4yLAogICAgICAgIDE0LjMsCiAgICAgICAgMTYuNCwKICAgICAgICAxOC4wLAogICAgICAgIDE2LjUsCiAgICAgICAgMTIuMCwKICAgICAgICA1LjIKICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis">Official Website</a>.</p>\n',postPath:"en/concepts/axis"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:I},{title:"资源列表",dir:C,draft:i},{title:"获取灵感",dir:r},{title:"寻求帮助",dir:o},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:n},{title:5.2,dir:h}]}]},{title:"概念篇",dir:c,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:x},{title:"数据转换",dir:w},{title:"坐标系",dir:B,draft:i},{title:"坐标轴",dir:f},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:v,draft:i},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:T,children:[{title:"基础折线图",dir:F},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:M},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:D}]}]},{title:R,dir:t,draft:i},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:E}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:N,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:R,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:I},{title:"Resources",dir:C,draft:i},{title:"Inspiration",dir:r},{title:"Get Help",dir:o},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:n},{title:5.2,dir:h}]}]},{title:"Concepts",dir:c,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:x},{title:"Data Transform",dir:w},{title:"Coordinate",dir:B,draft:i},{title:"Axis",dir:f},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:v,draft:i},{title:"Waterfall",dir:X}]},{title:"Line",dir:T,children:[{title:"Basic Line",dir:F},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:M},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:E}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:N,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/en/concepts/axis",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis">Official Website</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/en/concepts/axis.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/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,g,a,d,l,I,C,r,o,A,s,n,h,c,p,u,b,m,x,w,B,f,y,L,G,K,H,Z,W,v,X,T,F,J,O,S,V,k,M,Y,z,D,R,U,E,Q,j,N,P,q,_,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="axis" tabindex="-1">Axis</h1>\n<p>The x/y-axis in the Cartesian coordinate system.</p>\n<h2 id="x-axis%2C-y-axis" tabindex="-1">x-axis, y-axis</h2>\n<p>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</p>\n<p><img max-width="830" width="100%" height="100%"\nsrc="images/design/axis/charts_axis_img02.jpg">\n</img></p>\n<p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICAvLyAuLi4KICB9LAogIHlBeGlzOiB7CiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: "Sales Time", "Sales Location" and "product name", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as "Sales Quantity" and "Sales Price".</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBuYW1lOiAnU2FsZXMgUXVhbnRpdHknCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>When x-axis has a large span, we can use the zoom method to display part of the data in the chart.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBuYW1lOiAnU2FsZXMgUXVhbnRpdHknCiAgICAvLyAuLi4KICB9LAogIGRhdGFab29tOiBbXQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config <a href="https://echarts.apache.org/option.html#xAxis.offset">offset</a> to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1NhbGVzIFF1YW50aXR5JwogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICdTYWxlcyBQcmljZScKICAgICAgLy8gLi4uCiAgICB9CiAgXQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<h2 id="axis-line" tabindex="-1">Axis Line</h2>\n<p>ECharts provide the config of <a href="https://echarts.apache.org/option.html#xAxis.axisLine">axisLine</a>. You can change the setting according to the demand, such as the arrow on two sides and the style of axes.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGluZTogewogICAgICBzeW1ib2w6ICdhcnJvdycsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMaW5lOiB7CiAgICAgIHN5bWJvbDogJ2Fycm93JywKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="tick" tabindex="-1">Tick</h2>\n<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisTick">axisTick</a>. You can change the setting according to the demand, such as the length of ticks, and the style of ticks.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzVGljazogewogICAgICBsZW5ndGg6IDYsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNUaWNrOiB7CiAgICAgIGxlbmd0aDogNiwKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="label" tabindex="-1">Label</h2>\n<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisLabel">axisLabel</a>. You can change the setting according to the demand, such as the text alignment and the customized label content.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGFiZWw6IHsKICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBrZycsCiAgICAgIGFsaWduOiAnY2VudGVyJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMYWJlbDogewogICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IMKlJywKICAgICAgYWxpZ246ICdjZW50ZXInCiAgICAgIC8vIC4uLgogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="example" tabindex="-1">Example</h2>\n<p>The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJywKICAgIGF4aXNQb2ludGVyOiB7IHR5cGU6ICdjcm9zcycgfQogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBheGlzVGljazogewogICAgICAgIGFsaWduV2l0aExhYmVsOiB0cnVlCiAgICAgIH0sCiAgICAgIGF4aXNMYWJlbDogewogICAgICAgIHJvdGF0ZTogMzAKICAgICAgfSwKICAgICAgZGF0YTogWwogICAgICAgICdKYW51YXJ5JywKICAgICAgICAnRmVicnVhcnknLAogICAgICAgICdNYXJjaCcsCiAgICAgICAgJ0FwcmlsJywKICAgICAgICAnTWF5JywKICAgICAgICAnSnVuZScsCiAgICAgICAgJ0p1bHknLAogICAgICAgICdBdWd1c3QnLAogICAgICAgICdTZXB0ZW1iZXInLAogICAgICAgICdPY3RvYmVyJywKICAgICAgICAnTm92ZW1iZXInLAogICAgICAgICdEZWNlbWJlcicKICAgICAgXQogICAgfQogIF0sCiAgeUF4aXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1ByZWNpcGl0YXRpb24nLAogICAgICBtaW46IDAsCiAgICAgIG1heDogMjUwLAogICAgICBwb3NpdGlvbjogJ3JpZ2h0JywKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBtbCcKICAgICAgfQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDI1LAogICAgICBwb3NpdGlvbjogJ2xlZnQnLAogICAgICBheGlzTGFiZWw6IHsKICAgICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IMKwQycKICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdQcmVjaXBpdGF0aW9uJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHlBeGlzSW5kZXg6IDAsCiAgICAgIGRhdGE6IFs2LCAzMiwgNzAsIDg2LCA2OC43LCAxMDAuNywgMTI1LjYsIDExMi4yLCA3OC43LCA0OC44LCAzNi4wLCAxOS4zXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzbW9vdGg6IHRydWUsCiAgICAgIHlBeGlzSW5kZXg6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICA2LjAsCiAgICAgICAgMTAuMiwKICAgICAgICAxMC4zLAogICAgICAgIDExLjUsCiAgICAgICAgMTAuMywKICAgICAgICAxMy4yLAogICAgICAgIDE0LjMsCiAgICAgICAgMTYuNCwKICAgICAgICAxOC4wLAogICAgICAgIDE2LjUsCiAgICAgICAgMTIuMCwKICAgICAgICA1LjIKICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis">Official Website</a>.</p>\n',postPath:"en/concepts/axis"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:I},{title:"资源列表",dir:C,draft:i},{title:"获取灵感",dir:r},{title:"寻求帮助",dir:o},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:n},{title:5.2,dir:h}]}]},{title:"概念篇",dir:c,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:x},{title:"数据转换",dir:w},{title:"坐标系",dir:B,draft:i},{title:"坐标轴",dir:f},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:v,draft:i},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:T,children:[{title:"基础折线图",dir:F},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:M},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:D}]}]},{title:R,dir:t,draft:i},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:E}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:N,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:R,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:I},{title:"Resources",dir:C,draft:i},{title:"Inspiration",dir:r},{title:"Get Help",dir:o},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:n},{title:5.2,dir:h}]}]},{title:"Concepts",dir:c,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:x},{title:"Data Transform",dir:w},{title:"Coordinate",dir:B,draft:i},{title:"Axis",dir:f},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:v,draft:i},{title:"Waterfall",dir:X}]},{title:"Line",dir:T,children:[{title:"Basic Line",dir:F},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:M},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:E}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:N,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/en/concepts/axis",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/concepts/chart-size/index.html b/handbook/en/concepts/chart-size/index.html
index 83cb36e..12e4b12 100644
--- a/handbook/en/concepts/chart-size/index.html
+++ b/handbook/en/concepts/chart-size/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="chart-container-and-size" tabindex="-1">Chart Container and Size</h1> <p>In <a href="en/get-started">Get Started</a>, we introduced the API to initialize the ECharts <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>. <a href="https://echarts.apache.org//api.html#echarts.init">API Document</a> has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.</p> <p>Refer to several common usage scenarios, here is the example to initialize a chart and change the size.</p> <h2 id="initialization" tabindex="-1">Initialization</h2> <h3 id="define-a-parent-container-in-html" tabindex="-1">Define a Parent Container in HTML</h3> <p>In general, you need to define a <code><div></code> node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring <code>opts.width</code> or <code>opts.height</code>, the size of the chart will default to the size of the node.</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"><</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>main<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> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></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"></</span>div</span><span class="token punctuation">></span></span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="chart-container-and-size" tabindex="-1">Chart Container and Size</h1> <p>In <a href="en/get-started">Get Started</a>, we introduced the API to initialize the ECharts <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>. <a href="https://echarts.apache.org//api.html#echarts.init">API Document</a> has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.</p> <p>Refer to several common usage scenarios, here is the example to initialize a chart and change the size.</p> <h2 id="initialization" tabindex="-1">Initialization</h2> <h3 id="define-a-parent-container-in-html" tabindex="-1">Define a Parent Container in HTML</h3> <p>In general, you need to define a <code><div></code> node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring <code>opts.width</code> or <code>opts.height</code>, the size of the chart will default to the size of the node.</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"><</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>main<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> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></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"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
var myChart = echarts.init(document.getElementById('main'));
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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>To be noticed, before calling <code>echarts.init</code>, you need to make sure the container already has width and height.</p> <h3 id="specify-the-chart-size" tabindex="-1">Specify the chart size</h3> <p>If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.</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"><</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>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
@@ -35,7 +35,8 @@
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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> <h3 id="state-a-specific-chart-size" tabindex="-1">State a Specific Chart Size</h3> <p>Except for calling <code>resize()</code> without parameters, you can state the height and width to implement the chart size different from the size of the container.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">resize</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
width<span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
height<span class="token operator">:</span> <span class="token number">400</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> <blockquote><p>Tips: Pay attention to how the API defined while reading the documentation. <code>resize()</code> API was sometimes mistaken for the form like <code>myCharts.resize(800, 400)</code> which do not exist.</p></blockquote> <h3 id="dispose-and-rebuild-of-the-container-node" tabindex="-1">Dispose and Rebuild of the Container Node</h3> <p>We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.</p> <p>Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.</p> <p>The correct way is, call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to dispose the instance after the container was disposed, and call <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> to initialize after the container was added again.</p> <blockquote><p>Tips: Call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to release resources while disposing the node to avoid memory leaks.</p></blockquote></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/en/concepts/chart-size.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/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,r,d,n,h,l,o,c,s,p,g,f,m,b,C,u,w,I,z,B,P,y,S,k,A,v,x,W,D,R,G,Z,L,H,X,E,N,V,Y,j,T,J,M,F,K,Q,O,U,q,_,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="chart-container-and-size" tabindex="-1">Chart Container and Size</h1>\n<p>In <a href="en/get-started">Get Started</a>, we introduced the API to initialize the ECharts <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>. <a href="https://echarts.apache.org//api.html#echarts.init">API Document</a> has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.</p>\n<p>Refer to several common usage scenarios, here is the example to initialize a chart and change the size.</p>\n<h2 id="initialization" tabindex="-1">Initialization</h2>\n<h3 id="define-a-parent-container-in-html" tabindex="-1">Define a Parent Container in HTML</h3>\n<p>In general, you need to define a <code><div></code> node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring <code>opts.width</code> or <code>opts.height</code>, the size of the chart will default to the size of the node.</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgogIHZhciBteUNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwo8L3NjcmlwdD4\'" line-highlights="\'\'" />\n<p>To be noticed, before calling <code>echarts.init</code>, you need to make sure the container already has width and height.</p>\n<h3 id="specify-the-chart-size" tabindex="-1">Specify the chart size</h3>\n<p>If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiI-PC9kaXY-CjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpLCBudWxsLCB7CiAgICB3aWR0aDogNjAwLAogICAgaGVpZ2h0OiA0MDAKICB9KTsKPC9zY3JpcHQ-\'" line-highlights="\'\'" />\n<h2 id="reactive-of-the-container-size" tabindex="-1">Reactive of the Container Size</h2>\n<h3 id="listen-to-the-container-size-to-change-the-chart-size" tabindex="-1">Listen to the Container Size to Change the Chart Size</h3>\n<p>In some cases, we want to accordingly change the chart size while the size of containers changed.</p>\n<p>For instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.</p>\n<p>You can listen to <code>window.onresize</code> of the site to catch the event that the browser is resized. Then use <a href="https://echarts.apache.org/api.html#echartsInstance.resize"><code>echartsInstance.resize</code></a> to resize the chart.</p>\n<md-code-block lang="html" code="\'PHN0eWxlPgogICNtYWluLAogIGh0bWwsCiAgYm9keSB7CiAgICB3aWR0aDogMTAwJTsKICB9CiAgI21haW4gewogICAgaGVpZ2h0OiA0MDBweDsKICB9Cjwvc3R5bGU-CjxkaXYgaWQ9Im1haW4iPjwvZGl2Pgo8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI-CiAgdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CiAgd2luZG93Lm9ucmVzaXplID0gZnVuY3Rpb24oKSB7CiAgICBteUNoYXJ0LnJlc2l6ZSgpOwogIH07Cjwvc2NyaXB0Pg\'" line-highlights="\'\'" />\n<h3 id="state-a-specific-chart-size" tabindex="-1">State a Specific Chart Size</h3>\n<p>Except for calling <code>resize()</code> without parameters, you can state the height and width to implement the chart size different from the size of the container.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5yZXNpemUoewogIHdpZHRoOiA4MDAsCiAgaGVpZ2h0OiA0MDAKfSk7\'" line-highlights="\'\'" />\n<blockquote>\n<p>Tips: Pay attention to how the API defined while reading the documentation. <code>resize()</code> API was sometimes mistaken for the form like <code>myCharts.resize(800, 400)</code> which do not exist.</p>\n</blockquote>\n<h3 id="dispose-and-rebuild-of-the-container-node" tabindex="-1">Dispose and Rebuild of the Container Node</h3>\n<p>We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.</p>\n<p>Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.</p>\n<p>The correct way is, call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to dispose the instance after the container was disposed, and call <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> to initialize after the container was added again.</p>\n<blockquote>\n<p>Tips: Call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to release resources while disposing the node to avoid memory leaks.</p>\n</blockquote>\n',postPath:"en/concepts/chart-size"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:l,draft:e},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:c},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:C,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:w},{title:"数据集",dir:I},{title:"数据转换",dir:z},{title:"坐标系",dir:B,draft:e},{title:"坐标轴",dir:P},{title:"视觉映射",dir:i},{title:"图例",dir:y},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:A,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:D,draft:e},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:L},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:X},{title:"阶梯线图",dir:E}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:T}]}]},{title:J,dir:t,draft:e},{title:"跨平台方案",dir:M,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:F}]},{title:"数据处理",dir:K,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:O,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:J,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:h},{title:"Resources",dir:l,draft:e},{title:"Inspiration",dir:o},{title:"Get Help",dir:c},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:C,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:w},{title:"Dataset",dir:I},{title:"Data Transform",dir:z},{title:"Coordinate",dir:B,draft:e},{title:"Axis",dir:P},{title:"Visual Mapping",dir:i},{title:"Legend",dir:y},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:A,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:D,draft:e},{title:"Waterfall",dir:R}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:L},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:X},{title:"Step Line",dir:E}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:V},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:M,children:[{title:"Server Side Rendering",dir:F}]},{title:"Data",dir:K,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:O,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/concepts/chart-size",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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> <blockquote><p>Tips: Pay attention to how the API defined while reading the documentation. <code>resize()</code> API was sometimes mistaken for the form like <code>myCharts.resize(800, 400)</code> which do not exist.</p></blockquote> <h3 id="dispose-and-rebuild-of-the-container-node" tabindex="-1">Dispose and Rebuild of the Container Node</h3> <p>We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.</p> <p>Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.</p> <p>The correct way is, call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to dispose the instance after the container was disposed, and call <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> to initialize after the container was added again.</p> <blockquote><p>Tips: Call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to release resources while disposing the node to avoid memory leaks.</p></blockquote></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/en/concepts/chart-size.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/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,r,d,n,h,l,o,c,s,p,g,f,m,b,C,u,w,I,z,B,P,y,S,k,A,v,x,W,D,R,G,Z,L,H,X,E,N,V,Y,j,T,J,M,F,K,Q,O,U,q,_,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="chart-container-and-size" tabindex="-1">Chart Container and Size</h1>\n<p>In <a href="en/get-started">Get Started</a>, we introduced the API to initialize the ECharts <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>. <a href="https://echarts.apache.org//api.html#echarts.init">API Document</a> has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.</p>\n<p>Refer to several common usage scenarios, here is the example to initialize a chart and change the size.</p>\n<h2 id="initialization" tabindex="-1">Initialization</h2>\n<h3 id="define-a-parent-container-in-html" tabindex="-1">Define a Parent Container in HTML</h3>\n<p>In general, you need to define a <code><div></code> node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring <code>opts.width</code> or <code>opts.height</code>, the size of the chart will default to the size of the node.</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgogIHZhciBteUNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwo8L3NjcmlwdD4\'" line-highlights="\'\'" />\n<p>To be noticed, before calling <code>echarts.init</code>, you need to make sure the container already has width and height.</p>\n<h3 id="specify-the-chart-size" tabindex="-1">Specify the chart size</h3>\n<p>If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiI-PC9kaXY-CjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpLCBudWxsLCB7CiAgICB3aWR0aDogNjAwLAogICAgaGVpZ2h0OiA0MDAKICB9KTsKPC9zY3JpcHQ-\'" line-highlights="\'\'" />\n<h2 id="reactive-of-the-container-size" tabindex="-1">Reactive of the Container Size</h2>\n<h3 id="listen-to-the-container-size-to-change-the-chart-size" tabindex="-1">Listen to the Container Size to Change the Chart Size</h3>\n<p>In some cases, we want to accordingly change the chart size while the size of containers changed.</p>\n<p>For instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.</p>\n<p>You can listen to <code>window.onresize</code> of the site to catch the event that the browser is resized. Then use <a href="https://echarts.apache.org/api.html#echartsInstance.resize"><code>echartsInstance.resize</code></a> to resize the chart.</p>\n<md-code-block lang="html" code="\'PHN0eWxlPgogICNtYWluLAogIGh0bWwsCiAgYm9keSB7CiAgICB3aWR0aDogMTAwJTsKICB9CiAgI21haW4gewogICAgaGVpZ2h0OiA0MDBweDsKICB9Cjwvc3R5bGU-CjxkaXYgaWQ9Im1haW4iPjwvZGl2Pgo8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI-CiAgdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CiAgd2luZG93Lm9ucmVzaXplID0gZnVuY3Rpb24oKSB7CiAgICBteUNoYXJ0LnJlc2l6ZSgpOwogIH07Cjwvc2NyaXB0Pg\'" line-highlights="\'\'" />\n<h3 id="state-a-specific-chart-size" tabindex="-1">State a Specific Chart Size</h3>\n<p>Except for calling <code>resize()</code> without parameters, you can state the height and width to implement the chart size different from the size of the container.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5yZXNpemUoewogIHdpZHRoOiA4MDAsCiAgaGVpZ2h0OiA0MDAKfSk7\'" line-highlights="\'\'" />\n<blockquote>\n<p>Tips: Pay attention to how the API defined while reading the documentation. <code>resize()</code> API was sometimes mistaken for the form like <code>myCharts.resize(800, 400)</code> which do not exist.</p>\n</blockquote>\n<h3 id="dispose-and-rebuild-of-the-container-node" tabindex="-1">Dispose and Rebuild of the Container Node</h3>\n<p>We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.</p>\n<p>Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.</p>\n<p>The correct way is, call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to dispose the instance after the container was disposed, and call <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> to initialize after the container was added again.</p>\n<blockquote>\n<p>Tips: Call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to release resources while disposing the node to avoid memory leaks.</p>\n</blockquote>\n',postPath:"en/concepts/chart-size"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:l,draft:e},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:c},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:C,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:w},{title:"数据集",dir:I},{title:"数据转换",dir:z},{title:"坐标系",dir:B,draft:e},{title:"坐标轴",dir:P},{title:"视觉映射",dir:i},{title:"图例",dir:y},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:A,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:D,draft:e},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:L},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:X},{title:"阶梯线图",dir:E}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:T}]}]},{title:J,dir:t,draft:e},{title:"跨平台方案",dir:M,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:F}]},{title:"数据处理",dir:K,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:O,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:J,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:h},{title:"Resources",dir:l,draft:e},{title:"Inspiration",dir:o},{title:"Get Help",dir:c},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:C,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:w},{title:"Dataset",dir:I},{title:"Data Transform",dir:z},{title:"Coordinate",dir:B,draft:e},{title:"Axis",dir:P},{title:"Visual Mapping",dir:i},{title:"Legend",dir:y},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:A,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:D,draft:e},{title:"Waterfall",dir:R}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:L},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:X},{title:"Step Line",dir:E}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:V},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:M,children:[{title:"Server Side Rendering",dir:F}]},{title:"Data",dir:K,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:O,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/concepts/chart-size",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/concepts/data-transform/index.html b/handbook/en/concepts/data-transform/index.html
index 4ddeccb..841fca5 100644
--- a/handbook/en/concepts/data-transform/index.html
+++ b/handbook/en/concepts/data-transform/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="data-transform" tabindex="-1">Data Transform</h1> <p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "transformation").</p> <p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ...
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="data-transform" tabindex="-1">Data Transform</h1> <p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "transformation").</p> <p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ...
With the help of those transform methods, users can be implements the features like:</p> <ul><li>Partition data into multiple series.</li> <li>Make some statistics and visualize the result.</li> <li>Adapt some visualization algorithms to data and display the result.</li> <li>Sort data.</li> <li>Remove or choose some kind of empty or special datums.</li> <li>...</li></ul> <h2 id="get-started-to-data-transform" tabindex="-1">Get Started to Data Transform</h2> <p>In echarts, data transform is implemented based on the concept of <a href="~https://echarts.apache.org/option.html##dataset">dataset</a>. A <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can be configured in a dataset instance to indicate that this dataset is to be generated from this <code>transform</code>. For example:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var option = {
dataset: [
{
@@ -588,7 +588,8 @@
datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span></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>Examples with echarts-stat:</p> <ul><li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1">Aggregate</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1">Bar histogram</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1">Scatter clustering</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1">Scatter linear regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1">Scatter exponential regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">Scatter logarithmic regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">Scatter polynomial regression</a></li></ul></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/en/concepts/data-transform.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,g,t,i,I,o,C,a,l,d,n,A,c,s,r,m,h,b,y,p,G,u,Z,B,W,w,J,M,X,R,f,F,L,z,H,S,N,Y,V,v,x,D,T,k,K,E,U,j,O,Q,q,P,_,$,ee,ge,te){return{layout:"default",data:[{html:'<h1 id="data-transform" tabindex="-1">Data Transform</h1>\n<p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "transformation").</p>\n<p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ...\nWith the help of those transform methods, users can be implements the features like:</p>\n<ul>\n<li>Partition data into multiple series.</li>\n<li>Make some statistics and visualize the result.</li>\n<li>Adapt some visualization algorithms to data and display the result.</li>\n<li>Sort data.</li>\n<li>Remove or choose some kind of empty or special datums.</li>\n<li>...</li>\n</ul>\n<h2 id="get-started-to-data-transform" tabindex="-1">Get Started to Data Transform</h2>\n<p>In echarts, data transform is implemented based on the concept of <a href="~https://echarts.apache.org/option.html##dataset">dataset</a>. A <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can be configured in a dataset instance to indicate that this dataset is to be generated from this <code>transform</code>. For example:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAwYC4KICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0NlcmVhbCcsIDIzMSwgMTQsIDIwMTFdLAogICAgICAgIFsnVG9mdScsIDIzNSwgNSwgMjAxMV0sCiAgICAgICAgWydEdW1wbGluZycsIDM0MSwgMjUsIDIwMTFdLAogICAgICAgIFsnQmlzY3VpdCcsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnQ2VyZWFsJywgMjAxLCAxOSwgMjAxMl0sCiAgICAgICAgWydUb2Z1JywgMjU1LCA3LCAyMDEyXSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjQxLCAyNywgMjAxMl0sCiAgICAgICAgWydCaXNjdWl0JywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydDZXJlYWwnLCAxODEsIDIxLCAyMDEzXSwKICAgICAgICBbJ1RvZnUnLCAzOTUsIDQsIDIwMTNdLAogICAgICAgIFsnRHVtcGxpbmcnLCAyODEsIDMxLCAyMDEzXSwKICAgICAgICBbJ0Jpc2N1aXQnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnQ2VyZWFsJywgMjExLCAxNywgMjAxNF0sCiAgICAgICAgWydUb2Z1JywgMzQ1LCAzLCAyMDE0XSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjExLCAzNSwgMjAxNF0sCiAgICAgICAgWydCaXNjdWl0JywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICAgIC8vIGlkOiAnYScKICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAxYC4KICAgICAgLy8gQSBgdHJhbnNmb3JtYCBpcyBjb25maWd1cmVkIHRvIGluZGljYXRlIHRoYXQgdGhlCiAgICAgIC8vIGZpbmFsIGRhdGEgb2YgdGhpcyBkYXRhc2V0IGlzIHRyYW5zZm9ybWVkIHZpYSB0aGlzCiAgICAgIC8vIHRyYW5zZm9ybSBmdW5jdGlvbi4KICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1llYXInLCB2YWx1ZTogMjAxMSB9CiAgICAgIH0KICAgICAgLy8gVGhlcmUgY2FuIGJlIG9wdGlvbmFsIHByb3BlcnRpZXMgYGZyb21EYXRhc2V0SW5kZXhgIG9yIGBmcm9tRGF0YXNldElkYAogICAgICAvLyB0byBpbmRpY2F0ZSB0aGF0IHdoZXJlIGlzIHRoZSBpbnB1dCBkYXRhIG9mIHRoZSB0cmFuc2Zvcm0gZnJvbS4KICAgICAgLy8gRm9yIGV4YW1wbGUsIGBmcm9tRGF0YXNldEluZGV4OiAwYCBzcGVjaWZ5IHRoZSBpbnB1dCBkYXRhIGlzIGZyb20KICAgICAgLy8gdGhlIGRhdGFzZXQgb24gYGRhdGFzZXRJbmRleDogMGAsIG9yIGBmcm9tRGF0YXNldElkOiAnYSdgIHNwZWNpZnkgdGhlCiAgICAgIC8vIGlucHV0IGRhdGEgaXMgZnJvbSB0aGUgZGF0YXNldCBoYXZpbmcgYGlkOiAnYSdgLgogICAgICAvLyBbREVGQVVMVF9SVUxFXQogICAgICAvLyBJZiBib3RoIGBmcm9tRGF0YXNldEluZGV4YCBhbmQgYGZyb21EYXRhc2V0SWRgIGFyZSBvbWl0dGVkLAogICAgICAvLyBgZnJvbURhdGFzZXRJbmRleDogMGAgYXJlIHVzZWQgYnkgZGVmYXVsdC4KICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAyYC4KICAgICAgLy8gU2ltaWxhcmx5LCBpZiBuZWl0aGVyIGBmcm9tRGF0YXNldEluZGV4YCBub3IgYGZyb21EYXRhc2V0SWRgIGlzCiAgICAgIC8vIHNwZWNpZmllZCwgYGZyb21EYXRhc2V0SW5kZXg6IDBgIGlzIHVzZWQgYnkgZGVmYXVsdAogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyBUaGUgImZpbHRlciIgdHJhbnNmb3JtIGZpbHRlcnMgYW5kIGdldHMgZGF0YSBpdGVtcyBvbmx5IG1hdGNoCiAgICAgICAgLy8gdGhlIGdpdmVuIGNvbmRpdGlvbiBpbiBwcm9wZXJ0eSBgY29uZmlnYC4KICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICAvLyBUcmFuc2Zvcm1zIGhhcyBhIHByb3BlcnR5IGBjb25maWdgLiBJbiB0aGlzICJmaWx0ZXIiIHRyYW5zZm9ybSwKICAgICAgICAvLyB0aGUgYGNvbmZpZ2Agc3BlY2lmeSB0aGUgY29uZGl0aW9uIHRoYXQgZWFjaCByZXN1bHQgZGF0YSBpdGVtCiAgICAgICAgLy8gc2hvdWxkIGJlIHNhdGlzZmllZC4gSW4gdGhpcyBjYXNlLCB0aGlzIHRyYW5zZm9ybSBnZXQgYWxsIG9mCiAgICAgICAgLy8gdGhlIGRhdGEgaXRlbXMgdGhhdCB0aGUgdmFsdWUgb24gZGltZW5zaW9uICJZZWFyIiBlcXVhbHMgdG8gMjAxMi4KICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsIHZhbHVlOiAyMDEyIH0KICAgICAgfQogICAgfSwKICAgIHsKICAgICAgLy8gVGhpcyBkYXRhc2V0IGlzIG9uIGBkYXRhc2V0SW5kZXg6IDNgCiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgdmFsdWU6IDIwMTMgfQogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWycyNSUnLCAnNTAlJ10sCiAgICAgIC8vIEluIHRoaXMgY2FzZSwgZWFjaCAicGllIiBzZXJpZXMgcmVmZXJlbmNlIHRvIGEgZGF0YXNldCB0aGF0IGhhcwogICAgICAvLyB0aGUgcmVzdWx0IG9mIGl0cyAiZmlsdGVyIiB0cmFuc2Zvcm0uCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWyc1MCUnLCAnNTAlJ10sCiAgICAgIGRhdGFzZXRJbmRleDogMgogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWyc3NSUnLCAnNTAlJ10sCiAgICAgIGRhdGFzZXRJbmRleDogMwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>Let\'s summarize the key points of using data transform:</p>\n<ul>\n<li>Generate new data from existing declared data via the declaration of <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> in some blank dataset.</li>\n<li>Series references these datasets to show the result.</li>\n</ul>\n<h2 id="advanced-usage" tabindex="-1">Advanced Usage</h2>\n<h4 id="piped-transform" tabindex="-1">Piped Transform</h4>\n<p>There is a syntactic sugar that pipe transforms like:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXSAvLyBUaGUgb3JpZ2luYWwgZGF0YQogICAgfSwKICAgIHsKICAgICAgLy8gRGVjbGFyZSB0cmFuc2Zvcm1zIGluIGFuIGFycmF5IHRvIHBpcGUgbXVsdGlwbGUgdHJhbnNmb3JtcywKICAgICAgLy8gd2hpY2ggbWFrZXMgdGhlbSBleGVjdXRlIG9uZSBieSBvbmUgYW5kIHRha2UgdGhlIG91dHB1dCBvZgogICAgICAvLyB0aGUgcHJldmlvdXMgdHJhbnNmb3JtIGFzIHRoZSBpbnB1dCBvZiB0aGUgbmV4dCB0cmFuc2Zvcm0uCiAgICAgIHRyYW5zZm9ybTogWwogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCB2YWx1ZTogJ1RvZnUnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgb3JkZXI6ICdkZXNjJyB9CiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgLy8gRGlzcGxheSB0aGUgcmVzdWx0IG9mIHRoZSBwaXBlZCB0cmFuc2Zvcm0uCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).</p>\n</blockquote>\n<h4 id="output-multiple-data" tabindex="-1">Output Multiple Data</h4>\n<p>In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.</p>\n<p>For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity">example</a>.</p>\n<p>We use prop <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> to satisfy this requirement. For example:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgLy8gT3JpZ2luYWwgc291cmNlIGRhdGEuCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdib3hwbG90JwogICAgICB9CiAgICAgIC8vIEFmdGVyIHRoaXMgImJveHBsb3QgdHJhbnNmb3JtIiB0d28gcmVzdWx0IGRhdGEgZ2VuZXJhdGVkOgogICAgICAvLyByZXN1bHRbMF06IFRoZSBib3hwbG90IGRhdGEKICAgICAgLy8gcmVzdWx0WzFdOiBUaGUgb3V0bGllciBkYXRhCiAgICAgIC8vIEJ5IGRlZmF1bHQsIHdoZW4gc2VyaWVzIG9yIG90aGVyIGRhdGFzZXQgcmVmZXJlbmNlIHRoaXMgZGF0YXNldCwKICAgICAgLy8gb25seSByZXN1bHRbMF0gY2FuIGJlIHZpc2l0ZWQuCiAgICAgIC8vIElmIHdlIG5lZWQgdG8gdmlzaXQgcmVzdWx0WzFdLCB3ZSBoYXZlIHRvIHVzZSBhbm90aGVyIGRhdGFzZXQKICAgICAgLy8gYXMgZm9sbG93czoKICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZXh0cmEgZGF0YXNldCByZWZlcmVuY2VzIHRoZSBkYXRhc2V0IGFib3ZlLCBhbmQgcmV0cmlldmVzCiAgICAgIC8vIHRoZSByZXN1bHRbMV0gYXMgaXRzIG93biBkYXRhLiBUaHVzIHNlcmllcyBvciBvdGhlciBkYXRhc2V0IGNhbgogICAgICAvLyByZWZlcmVuY2UgdGhpcyBkYXRhc2V0IHRvIGdldCB0aGUgZGF0YSBmcm9tIHJlc3VsdFsxXS4KICAgICAgZnJvbURhdGFzZXRJbmRleDogMSwKICAgICAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ2JveHBsb3QnLAogICAgICB0eXBlOiAnYm94cGxvdCcsCiAgICAgIC8vIFJlZmVyZW5jZSB0aGUgZGF0YSBmcm9tIHJlc3VsdFswXS4KICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9LAogICAgewogICAgICBuYW1lOiAnb3V0bGllcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgLy8gUmVmZXJlbmNlIHRoZSBkYXRhIGZyb20gcmVzdWx0WzFdLgogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p>What more, <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> and <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by <code>fromTransformResult</code>. For example:</p>\n<md-code-block lang="js" code="\'ewogIGZyb21EYXRhc2V0SW5kZXg6IDEsCiAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMSwKICB0cmFuc2Zvcm06IHsKICAgIHR5cGU6ICdzb3J0JywKICAgIGNvbmZpZzogeyBkaW1lbnNpb246IDIsIG9yZGVyOiAnZGVzYycgfQogIH0KfQ\'" line-highlights="\'\'" />\n<h4 id="debug-in-develop-environment" tabindex="-1">Debug in Develop Environment</h4>\n<p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code>transform.print</code> might help in such case. (<code>transform.print</code> is only available in dev environment).</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7fSwKICAgICAgICAvLyBUaGUgcmVzdWx0IG9mIHRoaXMgdHJhbnNmb3JtIHdpbGwgYmUgcHJpbnRlZAogICAgICAgIC8vIGluIGRldiB0b29sIHZpYSBgY29uc29sZS5sb2dgLgogICAgICAgIHByaW50OiB0cnVlCiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h2 id="filter-transform" tabindex="-1">Filter Transform</h2>\n<p>Transform type "filter" is a built-in transform that provide data filter according to specified conditions. The basic option is like:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0xhdHRlJywgMjMxLCAxNCwgMjAxMV0sCiAgICAgICAgWydUb2Z1JywgMjM1LCA1LCAyMDExXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzQxLCAyNSwgMjAxMV0sCiAgICAgICAgWydQb3JyaWRnZScsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnTGF0dGUnLCAyMDEsIDE5LCAyMDEyXSwKICAgICAgICBbJ1RvZnUnLCAyNTUsIDcsIDIwMTJdLAogICAgICAgIFsnTWlsayBUZWUnLCAyNDEsIDI3LCAyMDEyXSwKICAgICAgICBbJ1BvcnJpZGdlJywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydMYXR0ZScsIDE4MSwgMjEsIDIwMTNdLAogICAgICAgIFsnVG9mdScsIDM5NSwgNCwgMjAxM10sCiAgICAgICAgWydNaWxrIFRlZScsIDI4MSwgMzEsIDIwMTNdLAogICAgICAgIFsnUG9ycmlkZ2UnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnTGF0dGUnLCAyMTEsIDE3LCAyMDE0XSwKICAgICAgICBbJ1RvZnUnLCAzNDUsIDMsIDIwMTRdLAogICAgICAgIFsnTWlsayBUZWUnLCAyMTEsIDM1LCAyMDE0XSwKICAgICAgICBbJ1BvcnJpZGdlJywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9CiAgICAgICAgLy8gVGhlIGNvbmZpZyBpcyB0aGUgImNvbmRpdGlvbiIgb2YgdGhpcyBmaWx0ZXIuCiAgICAgICAgLy8gVGhpcyB0cmFuc2Zvcm0gdHJhdmVyc2UgdGhlIHNvdXJjZSBkYXRhIGFuZAogICAgICAgIC8vIGFuZCByZXRyaWV2ZSBhbGwgdGhlIGl0ZW1zIHRoYXQgdGhlICJZZWFyIgogICAgICAgIC8vIGlzIGAyMDExYC4KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAncGllJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KfTs\'" v-bind="{}" />\n<p>This is another example of filter transform:</p>\n<p><md-example src="data-transform-filter"></md-example></p>\n<p><strong>About dimension:</strong></p>\n<p>The <code>config.dimension</code> can be:</p>\n<ul>\n<li>Dimension name declared in dataset, like <code>config: { dimension: \'Year\', \'=\': 2011 }</code>. Dimension name declaration is not mandatory.</li>\n<li>Dimension index (start from 0), like <code>config: { dimension: 3, \'=\': 2011 }</code>.</li>\n</ul>\n<p><strong>About relational operator:</strong></p>\n<p>The relational operator can be:\n<code>></code>(<code>gt</code>), <code>>=</code>(<code>gte</code>), <code><</code>(<code>lt</code>), <code><=</code>(<code>lte</code>), <code>=</code>(<code>eq</code>), <code>!=</code>(<code>ne</code>, <code><></code>), <code>reg</code>. (The name in the parentheses are aliases). They follows the common semantics.\nBesides the common number comparison, there is some extra features:</p>\n<ul>\n<li>Multiple operators are able to appear in one {} item like <code>{ dimension: \'Price\', \'>=\': 20, \'<\': 30 }</code>, which means logical "and" (Price >= 20 and Price < 30).</li>\n<li>The data value can be "numeric string". Numeric string is a string that can be converted to number. Like \' 123 \'. White spaces and line breaks will be auto trimmed in the conversion.</li>\n<li>If we need to compare "JS <code>Date</code> instance" or date string (like \'2012-05-12\'), we need to specify <code>parser: \'time\'</code> manually, like <code>config: { dimension: 3, lt: \'2012-05-12\', parser: \'time\' }</code>.</li>\n<li>Pure string comparison is supported but can only be used in <code>=</code>, <code>!=</code>. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> do not support pure string comparison (the "right value" of the four operators can not be a "string").</li>\n<li>The operator <code>reg</code> can be used to make regular expression test. Like using <code>{ dimension: \'Name\', reg: /\\s+Müller\\s*$/ }</code> to select all data items that the "Name" dimension contains family name Müller.</li>\n</ul>\n<p><strong>About logical relationship:</strong></p>\n<p>Sometimes we also need to express logical relationship ( <code>and</code> / <code>or</code> / <code>not</code> ):</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8gLi4uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogewogICAgICAgICAgLy8gVXNlIG9wZXJhdG9yICJhbmQiLgogICAgICAgICAgLy8gU2ltaWxhcmx5LCB3ZSBjYW4gYWxzbyB1c2UgIm9yIiwgIm5vdCIgaW4gdGhlIHNhbWUgcGxhY2UuCiAgICAgICAgICAvLyBCdXQgIm5vdCIgc2hvdWxkIGJlIGZvbGxvd2VkIHdpdGggYSB7Li4ufSByYXRoZXIgdGhhbiBgWy4uLl1gLgogICAgICAgICAgYW5kOiBbCiAgICAgICAgICAgIHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9LAogICAgICAgICAgICB7IGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMjAsICc8JzogMzAgfQogICAgICAgICAgXQogICAgICAgIH0KICAgICAgICAvLyBUaGUgY29uZGl0aW9uIGlzICJZZWFyIiBpcyAyMDExIGFuZCAiUHJpY2UiIGlzIGdyZWF0ZXIKICAgICAgICAvLyBvciBlcXVhbCB0byAyMCBidXQgbGVzcyB0aGFuIDMwLgogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgZGF0YXNldEluZGV4OiAxCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p><code>and</code>/<code>or</code>/<code>not</code> can be nested like:</p>\n<md-code-block lang="js" code="\'dHJhbnNmb3JtOiB7CiAgdHlwZTogJ2ZpbHRlcicsCiAgY29uZmlnOiB7CiAgICBvcjogW3sKICAgICAgYW5kOiBbewogICAgICAgIGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMTAsICc8JzogMjAKICAgICAgfSwgewogICAgICAgIGRpbWVuc2lvbjogJ1NhbGVzJywgJzwnOiAxMDAKICAgICAgfSwgewogICAgICAgIG5vdDogeyBkaW1lbnNpb246ICdQcm9kdWN0JywgJz0nOiAnVG9mdScgfQogICAgICB9XQogICAgfSwgewogICAgICBhbmQ6IFt7CiAgICAgICAgZGltZW5zaW9uOiAnUHJpY2UnLCAnPj0nOiAxMCwgJzwnOiAyMAogICAgICB9LCB7CiAgICAgICAgZGltZW5zaW9uOiAnU2FsZXMnLCAnPCc6IDEwMAogICAgICB9LCB7CiAgICAgICAgbm90OiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCAnPSc6ICdDYWtlJyB9CiAgICAgIH1dCiAgICB9XQogIH0KfQ\'" line-highlights="\'\'" />\n<p><strong>About parser:</strong></p>\n<p>Some "parser" can be specified when make value comparison. At present only supported:</p>\n<ul>\n<li><code>parser: \'time\'</code>: Parse the value to date time before comparing. The parser rule is the same as <code>echarts.time.parse</code>, where JS <code>Date</code> instance, timestamp number (in millisecond) and time string (like <code>\'2012-05-12 03:11:22\'</code>) are supported to be parse to timestamp number, while other value will be parsed to <code>NaN</code>.</li>\n<li><code>parser: \'trim\'</code>: Trim the string before making comparison. For non-string, return the original value.</li>\n<li><code>parser: \'number\'</code>: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to <code>NaN</code>. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like <code>\'33%\'</code>, <code>12px</code>), we should use <code>parser: \'number\'</code> to convert them to number before making comparison.</li>\n</ul>\n<p>This is an example to show the <code>parser: \'time\'</code>:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ0RhdGUnXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzExLCAyMSwgJzIwMTItMDUtMTInXSwKICAgICAgICBbJ0Nha2UnLCAxMzUsIDI4LCAnMjAxMi0wNS0yMiddLAogICAgICAgIFsnTGF0dGUnLCAyNjIsIDM2LCAnMjAxMi0wNi0wMiddLAogICAgICAgIFsnTWlsayBUZWUnLCAzNTksIDIxLCAnMjAxMi0wNi0yMiddLAogICAgICAgIFsnQ2FrZScsIDEyMSwgMjgsICcyMDEyLTA3LTAyJ10sCiAgICAgICAgWydMYXR0ZScsIDI3MSwgMzYsICcyMDEyLTA2LTIyJ10KICAgICAgICAvLyAuLi4KICAgICAgXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICBkaW1lbnNpb246ICdEYXRlJywKICAgICAgICAgICc-PSc6ICcyMDEyLTA1JywKICAgICAgICAgICc8JzogJzIwMTItMDYnLAogICAgICAgICAgcGFyc2VyOiAndGltZScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><strong>Formally definition:</strong></p>\n<p>Finally, we give the formally definition of the filter transform config here:</p>\n<md-code-block lang="ts" code="\'dHlwZSBGaWx0ZXJUcmFuc2Zvcm0gPSB7CiAgdHlwZTogJ2ZpbHRlcic7CiAgY29uZmlnOiBDb25kaXRpb25hbEV4cHJlc3Npb25PcHRpb247Cn07CnR5cGUgQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uID0KICB8IHRydWUKICB8IGZhbHNlCiAgfCBSZWxhdGlvbmFsRXhwcmVzc2lvbk9wdGlvbgogIHwgTG9naWNhbEV4cHJlc3Npb25PcHRpb247CnR5cGUgUmVsYXRpb25hbEV4cHJlc3Npb25PcHRpb24gPSB7CiAgZGltZW5zaW9uOiBEaW1lbnNpb25OYW1lIHwgRGltZW5zaW9uSW5kZXg7CiAgcGFyc2VyPzogJ3RpbWUnIHwgJ3RyaW0nIHwgJ251bWJlcic7CiAgbHQ_OiBEYXRhVmFsdWU7IC8vIGxlc3MgdGhhbgogIGx0ZT86IERhdGFWYWx1ZTsgLy8gbGVzcyB0aGFuIG9yIGVxdWFsCiAgZ3Q_OiBEYXRhVmFsdWU7IC8vIGdyZWF0ZXIgdGhhbgogIGd0ZT86IERhdGFWYWx1ZTsgLy8gZ3JlYXRlciB0aGFuIG9yIGVxdWFsCiAgZXE_OiBEYXRhVmFsdWU7IC8vIGVxdWFsCiAgbmU_OiBEYXRhVmFsdWU7IC8vIG5vdCBlcXVhbAogICc8Jz86IERhdGFWYWx1ZTsgLy8gbHQKICAnPD0nPzogRGF0YVZhbHVlOyAvLyBsdGUKICAnPic_OiBEYXRhVmFsdWU7IC8vIGd0CiAgJz49Jz86IERhdGFWYWx1ZTsgLy8gZ3RlCiAgJz0nPzogRGF0YVZhbHVlOyAvLyBlcQogICchPSc_OiBEYXRhVmFsdWU7IC8vIG5lCiAgJzw-Jz86IERhdGFWYWx1ZTsgLy8gbmUgKFNRTCBzdHlsZSkKICByZWc_OiBSZWdFeHAgfCBzdHJpbmc7IC8vIFJlZ0V4cAp9Owp0eXBlIExvZ2ljYWxFeHByZXNzaW9uT3B0aW9uID0gewogIGFuZD86IENvbmRpdGlvbmFsRXhwcmVzc2lvbk9wdGlvbltdOwogIG9yPzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uW107CiAgbm90PzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uOwp9Owp0eXBlIERhdGFWYWx1ZSA9IHN0cmluZyB8IG51bWJlciB8IERhdGU7CnR5cGUgRGltZW5zaW9uTmFtZSA9IHN0cmluZzsKdHlwZSBEaW1lbnNpb25JbmRleCA9IG51bWJlcjs\'" line-highlights="\'\'" />\n<h2 id="the-transform-%22sort%22" tabindex="-1">The transform "sort"</h2>\n<p>Another built-in transform is "sort".</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAvLyBTb3J0IGJ5IHNjb3JlLgogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnYXNjJyB9CiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p><md-example src="data-transform-sort-bar"></md-example></p>\n<p>Some extra features about "sort transform":</p>\n<ul>\n<li>Order by multiple dimensions is supported. See examples below.</li>\n<li>The sort rule:\n<ul>\n<li>By default "numeric" (that is, number and numeric-string like <code>\' 123 \'</code>) are able to sorted by numeric order.</li>\n<li>Otherwise "non-numeric-string" are also able to be ordered among themselves. This might help to the case like grouping data items with the same tag, especially when multiple dimensions participated in the sort (See example below).</li>\n<li>When "numeric" is compared with "non-numeric-string", or either of them is compared with other types of value, they are not comparable. So we call the latter one as "incomparable" and treat it as "min value" or "max value" according to the prop <code>incomparable: \'min\' | \'max\'</code>. This feature usually helps to decide whether to put the empty values (like <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>\'\'</code>, <code>\'-\'</code>) or other illegal values to the head or tail.</li>\n</ul>\n</li>\n<li><code>filter: \'time\' | \'trim\' | \'number\'</code> can be used, the same as "filter transform".\n<ul>\n<li>If intending to sort time values (JS <code>Date</code> instance or time string like <code>\'2012-03-12 11:13:54\'</code>), <code>parser: \'time\'</code> should be specified. Like <code>config: { dimension: \'date\', order: \'desc\', parser: \'time\' }</code></li>\n<li>If intending to sort values with unit suffix (like <code>\'33%\'</code>, <code>\'16px\'</code>), need to use <code>parser: \'number\'</code>.</li>\n</ul>\n</li>\n</ul>\n<p>See an example of multiple order:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICBjb25maWc6IFsKICAgICAgICAgIC8vIFNvcnQgYnkgdGhlIHR3byBkaW1lbnNpb25zLgogICAgICAgICAgeyBkaW1lbnNpb246ICdwcm9mZXNzaW9uJywgb3JkZXI6ICdkZXNjJyB9LAogICAgICAgICAgeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnZGVzYycgfQogICAgICAgIF0KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnYmFyJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/data-transform-multiple-sort-bar"></md-example></p>\n<p>Finally, we give the formally definition of the sort transform config here:</p>\n<md-code-block lang="ts" code="\'dHlwZSBTb3J0VHJhbnNmb3JtID0gewogIHR5cGU6ICdmaWx0ZXInOwogIGNvbmZpZzogT3JkZXJFeHByZXNzaW9uIHwgT3JkZXJFeHByZXNzaW9uW107Cn07CnR5cGUgT3JkZXJFeHByZXNzaW9uID0gewogIGRpbWVuc2lvbjogRGltZW5zaW9uTmFtZSB8IERpbWVuc2lvbkluZGV4OwogIG9yZGVyOiAnYXNjJyB8ICdkZXNjJzsKICBpbmNvbXBhcmFibGU_OiAnbWluJyB8ICdtYXgnOwogIHBhcnNlcj86ICd0aW1lJyB8ICd0cmltJyB8ICdudW1iZXInOwp9Owp0eXBlIERpbWVuc2lvbk5hbWUgPSBzdHJpbmc7CnR5cGUgRGltZW5zaW9uSW5kZXggPSBudW1iZXI7\'" line-highlights="\'\'" />\n<h2 id="use-external-transforms" tabindex="-1">Use External Transforms</h2>\n<p>Besides built-in transforms (like \'filter\', \'sort\'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> as an example:</p>\n<p>This case show how to make a regression line via ecStat:</p>\n<md-code-block lang="js" code="\'Ly8gUmVnaXN0ZXIgdGhlIGV4dGVybmFsIHRyYW5zZm9ybSBhdCBmaXJzdC4KZWNoYXJ0cy5yZWdpc3RlclRyYW5zZm9ybShlY1N0YXRUcmFuc2Zvcm0oZWNTdGF0KS5yZWdyZXNzaW9uKTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiByYXdEYXRhCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyBSZWZlcmVuY2UgdGhlIHJlZ2lzdGVyZWQgZXh0ZXJuYWwgdHJhbnNmb3JtLgogICAgICAgIC8vIE5vdGUgdGhhdCBleHRlcm5hbCB0cmFuc2Zvcm0gaGFzIGEgbmFtZXNwYWNlIChsaWtlICdlY1N0YXQ6eHh4JwogICAgICAgIC8vIGhhcyBuYW1lc3BhY2UgJ2VjU3RhdCcpLgogICAgICAgIC8vIGJ1aWx0LWluIHRyYW5zZm9ybSAobGlrZSAnZmlsdGVyJywgJ3NvcnQnKSBkb2VzIG5vdCBoYXZlIGEgbmFtZXNwYWNlLgogICAgICAgIHR5cGU6ICdlY1N0YXQ6cmVncmVzc2lvbicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICAvLyBQYXJhbWV0ZXJzIG5lZWRlZCBieSB0aGUgZXh0ZXJuYWwgdHJhbnNmb3JtLgogICAgICAgICAgbWV0aG9kOiAnZXhwb25lbnRpYWwnCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogeyB0eXBlOiAnY2F0ZWdvcnknIH0sCiAgeUF4aXM6IHt9LAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnc2NhdHRlcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YXNldEluZGV4OiAwCiAgICB9LAogICAgewogICAgICBuYW1lOiAncmVncmVzc2lvbicsCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3ltYm9sOiAnbm9uZScsCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>Examples with echarts-stat:</p>\n<ul>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1">Aggregate</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1">Bar histogram</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1">Scatter clustering</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1">Scatter linear regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1">Scatter exponential regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">Scatter logarithmic regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">Scatter polynomial regression</a></li>\n</ul>\n',postPath:"en/concepts/data-transform"}],fetch:{},error:i,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:I},{title:"入门篇",dir:o,children:[{title:"获取 ECharts",dir:C},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:l,draft:e},{title:"获取灵感",dir:d},{title:"寻求帮助",dir:n},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"ECharts 5 升级指南",dir:s},{title:5.2,dir:r}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:h},{title:"配置项",dir:b,draft:e},{title:"系列",dir:y,draft:e},{title:"样式",dir:p},{title:"数据集",dir:G},{title:"数据转换",dir:u},{title:"坐标系",dir:Z,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:t},{title:"图例",dir:W},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:M,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:f},{title:"极坐标系柱状图",dir:F,draft:e},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:S},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:Y},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:v},{title:"圆环图",dir:x},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:k}]}]},{title:K,dir:g,draft:e},{title:"跨平台方案",dir:E,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:Q,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:g,draft:e},{title:ee,dir:ge},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:I},{title:"Basics",dir:o,children:[{title:"Download ECharts",dir:C},{title:"Import ECharts",dir:a},{title:"Resources",dir:l,draft:e},{title:"Inspiration",dir:d},{title:"Get Help",dir:n},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:c},{title:"ECharts 5 Upgrade Guide",dir:s},{title:5.2,dir:r}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:h},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:y,draft:e},{title:"Style",dir:p},{title:"Dataset",dir:G},{title:"Data Transform",dir:u},{title:"Coordinate",dir:Z,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:t},{title:"Legend",dir:W},{title:"Event and Action",dir:w}]},{title:"How To Guides",dir:J,children:[{title:"Common Charts",dir:M,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:f},{title:"Bar Polar",dir:F,draft:e},{title:"Waterfall",dir:L}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:S},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:Y},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:v},{title:"Ring Style",dir:x},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:k}]}]},{title:"Mobile",dir:g,draft:e},{title:"Cross Platform",dir:E,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:Q,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:g,draft:e},{title:ee,dir:ge},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},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:e,routePath:"/en/concepts/data-transform",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:i}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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>Examples with echarts-stat:</p> <ul><li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1">Aggregate</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1">Bar histogram</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1">Scatter clustering</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1">Scatter linear regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1">Scatter exponential regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">Scatter logarithmic regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">Scatter polynomial regression</a></li></ul></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/en/concepts/data-transform.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,g,t,i,I,o,C,a,l,d,n,A,c,s,r,m,h,b,y,p,G,u,Z,B,W,w,J,M,X,R,f,F,L,z,H,S,N,Y,V,v,x,D,T,k,K,E,U,j,O,Q,q,P,_,$,ee,ge,te){return{layout:"default",data:[{html:'<h1 id="data-transform" tabindex="-1">Data Transform</h1>\n<p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "transformation").</p>\n<p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ...\nWith the help of those transform methods, users can be implements the features like:</p>\n<ul>\n<li>Partition data into multiple series.</li>\n<li>Make some statistics and visualize the result.</li>\n<li>Adapt some visualization algorithms to data and display the result.</li>\n<li>Sort data.</li>\n<li>Remove or choose some kind of empty or special datums.</li>\n<li>...</li>\n</ul>\n<h2 id="get-started-to-data-transform" tabindex="-1">Get Started to Data Transform</h2>\n<p>In echarts, data transform is implemented based on the concept of <a href="~https://echarts.apache.org/option.html##dataset">dataset</a>. A <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can be configured in a dataset instance to indicate that this dataset is to be generated from this <code>transform</code>. For example:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAwYC4KICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0NlcmVhbCcsIDIzMSwgMTQsIDIwMTFdLAogICAgICAgIFsnVG9mdScsIDIzNSwgNSwgMjAxMV0sCiAgICAgICAgWydEdW1wbGluZycsIDM0MSwgMjUsIDIwMTFdLAogICAgICAgIFsnQmlzY3VpdCcsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnQ2VyZWFsJywgMjAxLCAxOSwgMjAxMl0sCiAgICAgICAgWydUb2Z1JywgMjU1LCA3LCAyMDEyXSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjQxLCAyNywgMjAxMl0sCiAgICAgICAgWydCaXNjdWl0JywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydDZXJlYWwnLCAxODEsIDIxLCAyMDEzXSwKICAgICAgICBbJ1RvZnUnLCAzOTUsIDQsIDIwMTNdLAogICAgICAgIFsnRHVtcGxpbmcnLCAyODEsIDMxLCAyMDEzXSwKICAgICAgICBbJ0Jpc2N1aXQnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnQ2VyZWFsJywgMjExLCAxNywgMjAxNF0sCiAgICAgICAgWydUb2Z1JywgMzQ1LCAzLCAyMDE0XSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjExLCAzNSwgMjAxNF0sCiAgICAgICAgWydCaXNjdWl0JywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICAgIC8vIGlkOiAnYScKICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAxYC4KICAgICAgLy8gQSBgdHJhbnNmb3JtYCBpcyBjb25maWd1cmVkIHRvIGluZGljYXRlIHRoYXQgdGhlCiAgICAgIC8vIGZpbmFsIGRhdGEgb2YgdGhpcyBkYXRhc2V0IGlzIHRyYW5zZm9ybWVkIHZpYSB0aGlzCiAgICAgIC8vIHRyYW5zZm9ybSBmdW5jdGlvbi4KICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1llYXInLCB2YWx1ZTogMjAxMSB9CiAgICAgIH0KICAgICAgLy8gVGhlcmUgY2FuIGJlIG9wdGlvbmFsIHByb3BlcnRpZXMgYGZyb21EYXRhc2V0SW5kZXhgIG9yIGBmcm9tRGF0YXNldElkYAogICAgICAvLyB0byBpbmRpY2F0ZSB0aGF0IHdoZXJlIGlzIHRoZSBpbnB1dCBkYXRhIG9mIHRoZSB0cmFuc2Zvcm0gZnJvbS4KICAgICAgLy8gRm9yIGV4YW1wbGUsIGBmcm9tRGF0YXNldEluZGV4OiAwYCBzcGVjaWZ5IHRoZSBpbnB1dCBkYXRhIGlzIGZyb20KICAgICAgLy8gdGhlIGRhdGFzZXQgb24gYGRhdGFzZXRJbmRleDogMGAsIG9yIGBmcm9tRGF0YXNldElkOiAnYSdgIHNwZWNpZnkgdGhlCiAgICAgIC8vIGlucHV0IGRhdGEgaXMgZnJvbSB0aGUgZGF0YXNldCBoYXZpbmcgYGlkOiAnYSdgLgogICAgICAvLyBbREVGQVVMVF9SVUxFXQogICAgICAvLyBJZiBib3RoIGBmcm9tRGF0YXNldEluZGV4YCBhbmQgYGZyb21EYXRhc2V0SWRgIGFyZSBvbWl0dGVkLAogICAgICAvLyBgZnJvbURhdGFzZXRJbmRleDogMGAgYXJlIHVzZWQgYnkgZGVmYXVsdC4KICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAyYC4KICAgICAgLy8gU2ltaWxhcmx5LCBpZiBuZWl0aGVyIGBmcm9tRGF0YXNldEluZGV4YCBub3IgYGZyb21EYXRhc2V0SWRgIGlzCiAgICAgIC8vIHNwZWNpZmllZCwgYGZyb21EYXRhc2V0SW5kZXg6IDBgIGlzIHVzZWQgYnkgZGVmYXVsdAogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyBUaGUgImZpbHRlciIgdHJhbnNmb3JtIGZpbHRlcnMgYW5kIGdldHMgZGF0YSBpdGVtcyBvbmx5IG1hdGNoCiAgICAgICAgLy8gdGhlIGdpdmVuIGNvbmRpdGlvbiBpbiBwcm9wZXJ0eSBgY29uZmlnYC4KICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICAvLyBUcmFuc2Zvcm1zIGhhcyBhIHByb3BlcnR5IGBjb25maWdgLiBJbiB0aGlzICJmaWx0ZXIiIHRyYW5zZm9ybSwKICAgICAgICAvLyB0aGUgYGNvbmZpZ2Agc3BlY2lmeSB0aGUgY29uZGl0aW9uIHRoYXQgZWFjaCByZXN1bHQgZGF0YSBpdGVtCiAgICAgICAgLy8gc2hvdWxkIGJlIHNhdGlzZmllZC4gSW4gdGhpcyBjYXNlLCB0aGlzIHRyYW5zZm9ybSBnZXQgYWxsIG9mCiAgICAgICAgLy8gdGhlIGRhdGEgaXRlbXMgdGhhdCB0aGUgdmFsdWUgb24gZGltZW5zaW9uICJZZWFyIiBlcXVhbHMgdG8gMjAxMi4KICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsIHZhbHVlOiAyMDEyIH0KICAgICAgfQogICAgfSwKICAgIHsKICAgICAgLy8gVGhpcyBkYXRhc2V0IGlzIG9uIGBkYXRhc2V0SW5kZXg6IDNgCiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgdmFsdWU6IDIwMTMgfQogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWycyNSUnLCAnNTAlJ10sCiAgICAgIC8vIEluIHRoaXMgY2FzZSwgZWFjaCAicGllIiBzZXJpZXMgcmVmZXJlbmNlIHRvIGEgZGF0YXNldCB0aGF0IGhhcwogICAgICAvLyB0aGUgcmVzdWx0IG9mIGl0cyAiZmlsdGVyIiB0cmFuc2Zvcm0uCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWyc1MCUnLCAnNTAlJ10sCiAgICAgIGRhdGFzZXRJbmRleDogMgogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWyc3NSUnLCAnNTAlJ10sCiAgICAgIGRhdGFzZXRJbmRleDogMwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>Let\'s summarize the key points of using data transform:</p>\n<ul>\n<li>Generate new data from existing declared data via the declaration of <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> in some blank dataset.</li>\n<li>Series references these datasets to show the result.</li>\n</ul>\n<h2 id="advanced-usage" tabindex="-1">Advanced Usage</h2>\n<h4 id="piped-transform" tabindex="-1">Piped Transform</h4>\n<p>There is a syntactic sugar that pipe transforms like:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXSAvLyBUaGUgb3JpZ2luYWwgZGF0YQogICAgfSwKICAgIHsKICAgICAgLy8gRGVjbGFyZSB0cmFuc2Zvcm1zIGluIGFuIGFycmF5IHRvIHBpcGUgbXVsdGlwbGUgdHJhbnNmb3JtcywKICAgICAgLy8gd2hpY2ggbWFrZXMgdGhlbSBleGVjdXRlIG9uZSBieSBvbmUgYW5kIHRha2UgdGhlIG91dHB1dCBvZgogICAgICAvLyB0aGUgcHJldmlvdXMgdHJhbnNmb3JtIGFzIHRoZSBpbnB1dCBvZiB0aGUgbmV4dCB0cmFuc2Zvcm0uCiAgICAgIHRyYW5zZm9ybTogWwogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCB2YWx1ZTogJ1RvZnUnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgb3JkZXI6ICdkZXNjJyB9CiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgLy8gRGlzcGxheSB0aGUgcmVzdWx0IG9mIHRoZSBwaXBlZCB0cmFuc2Zvcm0uCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).</p>\n</blockquote>\n<h4 id="output-multiple-data" tabindex="-1">Output Multiple Data</h4>\n<p>In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.</p>\n<p>For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity">example</a>.</p>\n<p>We use prop <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> to satisfy this requirement. For example:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgLy8gT3JpZ2luYWwgc291cmNlIGRhdGEuCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdib3hwbG90JwogICAgICB9CiAgICAgIC8vIEFmdGVyIHRoaXMgImJveHBsb3QgdHJhbnNmb3JtIiB0d28gcmVzdWx0IGRhdGEgZ2VuZXJhdGVkOgogICAgICAvLyByZXN1bHRbMF06IFRoZSBib3hwbG90IGRhdGEKICAgICAgLy8gcmVzdWx0WzFdOiBUaGUgb3V0bGllciBkYXRhCiAgICAgIC8vIEJ5IGRlZmF1bHQsIHdoZW4gc2VyaWVzIG9yIG90aGVyIGRhdGFzZXQgcmVmZXJlbmNlIHRoaXMgZGF0YXNldCwKICAgICAgLy8gb25seSByZXN1bHRbMF0gY2FuIGJlIHZpc2l0ZWQuCiAgICAgIC8vIElmIHdlIG5lZWQgdG8gdmlzaXQgcmVzdWx0WzFdLCB3ZSBoYXZlIHRvIHVzZSBhbm90aGVyIGRhdGFzZXQKICAgICAgLy8gYXMgZm9sbG93czoKICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZXh0cmEgZGF0YXNldCByZWZlcmVuY2VzIHRoZSBkYXRhc2V0IGFib3ZlLCBhbmQgcmV0cmlldmVzCiAgICAgIC8vIHRoZSByZXN1bHRbMV0gYXMgaXRzIG93biBkYXRhLiBUaHVzIHNlcmllcyBvciBvdGhlciBkYXRhc2V0IGNhbgogICAgICAvLyByZWZlcmVuY2UgdGhpcyBkYXRhc2V0IHRvIGdldCB0aGUgZGF0YSBmcm9tIHJlc3VsdFsxXS4KICAgICAgZnJvbURhdGFzZXRJbmRleDogMSwKICAgICAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ2JveHBsb3QnLAogICAgICB0eXBlOiAnYm94cGxvdCcsCiAgICAgIC8vIFJlZmVyZW5jZSB0aGUgZGF0YSBmcm9tIHJlc3VsdFswXS4KICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9LAogICAgewogICAgICBuYW1lOiAnb3V0bGllcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgLy8gUmVmZXJlbmNlIHRoZSBkYXRhIGZyb20gcmVzdWx0WzFdLgogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p>What more, <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> and <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by <code>fromTransformResult</code>. For example:</p>\n<md-code-block lang="js" code="\'ewogIGZyb21EYXRhc2V0SW5kZXg6IDEsCiAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMSwKICB0cmFuc2Zvcm06IHsKICAgIHR5cGU6ICdzb3J0JywKICAgIGNvbmZpZzogeyBkaW1lbnNpb246IDIsIG9yZGVyOiAnZGVzYycgfQogIH0KfQ\'" line-highlights="\'\'" />\n<h4 id="debug-in-develop-environment" tabindex="-1">Debug in Develop Environment</h4>\n<p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code>transform.print</code> might help in such case. (<code>transform.print</code> is only available in dev environment).</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7fSwKICAgICAgICAvLyBUaGUgcmVzdWx0IG9mIHRoaXMgdHJhbnNmb3JtIHdpbGwgYmUgcHJpbnRlZAogICAgICAgIC8vIGluIGRldiB0b29sIHZpYSBgY29uc29sZS5sb2dgLgogICAgICAgIHByaW50OiB0cnVlCiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h2 id="filter-transform" tabindex="-1">Filter Transform</h2>\n<p>Transform type "filter" is a built-in transform that provide data filter according to specified conditions. The basic option is like:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0xhdHRlJywgMjMxLCAxNCwgMjAxMV0sCiAgICAgICAgWydUb2Z1JywgMjM1LCA1LCAyMDExXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzQxLCAyNSwgMjAxMV0sCiAgICAgICAgWydQb3JyaWRnZScsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnTGF0dGUnLCAyMDEsIDE5LCAyMDEyXSwKICAgICAgICBbJ1RvZnUnLCAyNTUsIDcsIDIwMTJdLAogICAgICAgIFsnTWlsayBUZWUnLCAyNDEsIDI3LCAyMDEyXSwKICAgICAgICBbJ1BvcnJpZGdlJywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydMYXR0ZScsIDE4MSwgMjEsIDIwMTNdLAogICAgICAgIFsnVG9mdScsIDM5NSwgNCwgMjAxM10sCiAgICAgICAgWydNaWxrIFRlZScsIDI4MSwgMzEsIDIwMTNdLAogICAgICAgIFsnUG9ycmlkZ2UnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnTGF0dGUnLCAyMTEsIDE3LCAyMDE0XSwKICAgICAgICBbJ1RvZnUnLCAzNDUsIDMsIDIwMTRdLAogICAgICAgIFsnTWlsayBUZWUnLCAyMTEsIDM1LCAyMDE0XSwKICAgICAgICBbJ1BvcnJpZGdlJywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9CiAgICAgICAgLy8gVGhlIGNvbmZpZyBpcyB0aGUgImNvbmRpdGlvbiIgb2YgdGhpcyBmaWx0ZXIuCiAgICAgICAgLy8gVGhpcyB0cmFuc2Zvcm0gdHJhdmVyc2UgdGhlIHNvdXJjZSBkYXRhIGFuZAogICAgICAgIC8vIGFuZCByZXRyaWV2ZSBhbGwgdGhlIGl0ZW1zIHRoYXQgdGhlICJZZWFyIgogICAgICAgIC8vIGlzIGAyMDExYC4KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAncGllJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KfTs\'" v-bind="{}" />\n<p>This is another example of filter transform:</p>\n<p><md-example src="data-transform-filter"></md-example></p>\n<p><strong>About dimension:</strong></p>\n<p>The <code>config.dimension</code> can be:</p>\n<ul>\n<li>Dimension name declared in dataset, like <code>config: { dimension: \'Year\', \'=\': 2011 }</code>. Dimension name declaration is not mandatory.</li>\n<li>Dimension index (start from 0), like <code>config: { dimension: 3, \'=\': 2011 }</code>.</li>\n</ul>\n<p><strong>About relational operator:</strong></p>\n<p>The relational operator can be:\n<code>></code>(<code>gt</code>), <code>>=</code>(<code>gte</code>), <code><</code>(<code>lt</code>), <code><=</code>(<code>lte</code>), <code>=</code>(<code>eq</code>), <code>!=</code>(<code>ne</code>, <code><></code>), <code>reg</code>. (The name in the parentheses are aliases). They follows the common semantics.\nBesides the common number comparison, there is some extra features:</p>\n<ul>\n<li>Multiple operators are able to appear in one {} item like <code>{ dimension: \'Price\', \'>=\': 20, \'<\': 30 }</code>, which means logical "and" (Price >= 20 and Price < 30).</li>\n<li>The data value can be "numeric string". Numeric string is a string that can be converted to number. Like \' 123 \'. White spaces and line breaks will be auto trimmed in the conversion.</li>\n<li>If we need to compare "JS <code>Date</code> instance" or date string (like \'2012-05-12\'), we need to specify <code>parser: \'time\'</code> manually, like <code>config: { dimension: 3, lt: \'2012-05-12\', parser: \'time\' }</code>.</li>\n<li>Pure string comparison is supported but can only be used in <code>=</code>, <code>!=</code>. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> do not support pure string comparison (the "right value" of the four operators can not be a "string").</li>\n<li>The operator <code>reg</code> can be used to make regular expression test. Like using <code>{ dimension: \'Name\', reg: /\\s+Müller\\s*$/ }</code> to select all data items that the "Name" dimension contains family name Müller.</li>\n</ul>\n<p><strong>About logical relationship:</strong></p>\n<p>Sometimes we also need to express logical relationship ( <code>and</code> / <code>or</code> / <code>not</code> ):</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8gLi4uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogewogICAgICAgICAgLy8gVXNlIG9wZXJhdG9yICJhbmQiLgogICAgICAgICAgLy8gU2ltaWxhcmx5LCB3ZSBjYW4gYWxzbyB1c2UgIm9yIiwgIm5vdCIgaW4gdGhlIHNhbWUgcGxhY2UuCiAgICAgICAgICAvLyBCdXQgIm5vdCIgc2hvdWxkIGJlIGZvbGxvd2VkIHdpdGggYSB7Li4ufSByYXRoZXIgdGhhbiBgWy4uLl1gLgogICAgICAgICAgYW5kOiBbCiAgICAgICAgICAgIHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9LAogICAgICAgICAgICB7IGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMjAsICc8JzogMzAgfQogICAgICAgICAgXQogICAgICAgIH0KICAgICAgICAvLyBUaGUgY29uZGl0aW9uIGlzICJZZWFyIiBpcyAyMDExIGFuZCAiUHJpY2UiIGlzIGdyZWF0ZXIKICAgICAgICAvLyBvciBlcXVhbCB0byAyMCBidXQgbGVzcyB0aGFuIDMwLgogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgZGF0YXNldEluZGV4OiAxCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p><code>and</code>/<code>or</code>/<code>not</code> can be nested like:</p>\n<md-code-block lang="js" code="\'dHJhbnNmb3JtOiB7CiAgdHlwZTogJ2ZpbHRlcicsCiAgY29uZmlnOiB7CiAgICBvcjogW3sKICAgICAgYW5kOiBbewogICAgICAgIGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMTAsICc8JzogMjAKICAgICAgfSwgewogICAgICAgIGRpbWVuc2lvbjogJ1NhbGVzJywgJzwnOiAxMDAKICAgICAgfSwgewogICAgICAgIG5vdDogeyBkaW1lbnNpb246ICdQcm9kdWN0JywgJz0nOiAnVG9mdScgfQogICAgICB9XQogICAgfSwgewogICAgICBhbmQ6IFt7CiAgICAgICAgZGltZW5zaW9uOiAnUHJpY2UnLCAnPj0nOiAxMCwgJzwnOiAyMAogICAgICB9LCB7CiAgICAgICAgZGltZW5zaW9uOiAnU2FsZXMnLCAnPCc6IDEwMAogICAgICB9LCB7CiAgICAgICAgbm90OiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCAnPSc6ICdDYWtlJyB9CiAgICAgIH1dCiAgICB9XQogIH0KfQ\'" line-highlights="\'\'" />\n<p><strong>About parser:</strong></p>\n<p>Some "parser" can be specified when make value comparison. At present only supported:</p>\n<ul>\n<li><code>parser: \'time\'</code>: Parse the value to date time before comparing. The parser rule is the same as <code>echarts.time.parse</code>, where JS <code>Date</code> instance, timestamp number (in millisecond) and time string (like <code>\'2012-05-12 03:11:22\'</code>) are supported to be parse to timestamp number, while other value will be parsed to <code>NaN</code>.</li>\n<li><code>parser: \'trim\'</code>: Trim the string before making comparison. For non-string, return the original value.</li>\n<li><code>parser: \'number\'</code>: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to <code>NaN</code>. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like <code>\'33%\'</code>, <code>12px</code>), we should use <code>parser: \'number\'</code> to convert them to number before making comparison.</li>\n</ul>\n<p>This is an example to show the <code>parser: \'time\'</code>:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ0RhdGUnXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzExLCAyMSwgJzIwMTItMDUtMTInXSwKICAgICAgICBbJ0Nha2UnLCAxMzUsIDI4LCAnMjAxMi0wNS0yMiddLAogICAgICAgIFsnTGF0dGUnLCAyNjIsIDM2LCAnMjAxMi0wNi0wMiddLAogICAgICAgIFsnTWlsayBUZWUnLCAzNTksIDIxLCAnMjAxMi0wNi0yMiddLAogICAgICAgIFsnQ2FrZScsIDEyMSwgMjgsICcyMDEyLTA3LTAyJ10sCiAgICAgICAgWydMYXR0ZScsIDI3MSwgMzYsICcyMDEyLTA2LTIyJ10KICAgICAgICAvLyAuLi4KICAgICAgXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICBkaW1lbnNpb246ICdEYXRlJywKICAgICAgICAgICc-PSc6ICcyMDEyLTA1JywKICAgICAgICAgICc8JzogJzIwMTItMDYnLAogICAgICAgICAgcGFyc2VyOiAndGltZScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><strong>Formally definition:</strong></p>\n<p>Finally, we give the formally definition of the filter transform config here:</p>\n<md-code-block lang="ts" code="\'dHlwZSBGaWx0ZXJUcmFuc2Zvcm0gPSB7CiAgdHlwZTogJ2ZpbHRlcic7CiAgY29uZmlnOiBDb25kaXRpb25hbEV4cHJlc3Npb25PcHRpb247Cn07CnR5cGUgQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uID0KICB8IHRydWUKICB8IGZhbHNlCiAgfCBSZWxhdGlvbmFsRXhwcmVzc2lvbk9wdGlvbgogIHwgTG9naWNhbEV4cHJlc3Npb25PcHRpb247CnR5cGUgUmVsYXRpb25hbEV4cHJlc3Npb25PcHRpb24gPSB7CiAgZGltZW5zaW9uOiBEaW1lbnNpb25OYW1lIHwgRGltZW5zaW9uSW5kZXg7CiAgcGFyc2VyPzogJ3RpbWUnIHwgJ3RyaW0nIHwgJ251bWJlcic7CiAgbHQ_OiBEYXRhVmFsdWU7IC8vIGxlc3MgdGhhbgogIGx0ZT86IERhdGFWYWx1ZTsgLy8gbGVzcyB0aGFuIG9yIGVxdWFsCiAgZ3Q_OiBEYXRhVmFsdWU7IC8vIGdyZWF0ZXIgdGhhbgogIGd0ZT86IERhdGFWYWx1ZTsgLy8gZ3JlYXRlciB0aGFuIG9yIGVxdWFsCiAgZXE_OiBEYXRhVmFsdWU7IC8vIGVxdWFsCiAgbmU_OiBEYXRhVmFsdWU7IC8vIG5vdCBlcXVhbAogICc8Jz86IERhdGFWYWx1ZTsgLy8gbHQKICAnPD0nPzogRGF0YVZhbHVlOyAvLyBsdGUKICAnPic_OiBEYXRhVmFsdWU7IC8vIGd0CiAgJz49Jz86IERhdGFWYWx1ZTsgLy8gZ3RlCiAgJz0nPzogRGF0YVZhbHVlOyAvLyBlcQogICchPSc_OiBEYXRhVmFsdWU7IC8vIG5lCiAgJzw-Jz86IERhdGFWYWx1ZTsgLy8gbmUgKFNRTCBzdHlsZSkKICByZWc_OiBSZWdFeHAgfCBzdHJpbmc7IC8vIFJlZ0V4cAp9Owp0eXBlIExvZ2ljYWxFeHByZXNzaW9uT3B0aW9uID0gewogIGFuZD86IENvbmRpdGlvbmFsRXhwcmVzc2lvbk9wdGlvbltdOwogIG9yPzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uW107CiAgbm90PzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uOwp9Owp0eXBlIERhdGFWYWx1ZSA9IHN0cmluZyB8IG51bWJlciB8IERhdGU7CnR5cGUgRGltZW5zaW9uTmFtZSA9IHN0cmluZzsKdHlwZSBEaW1lbnNpb25JbmRleCA9IG51bWJlcjs\'" line-highlights="\'\'" />\n<h2 id="the-transform-%22sort%22" tabindex="-1">The transform "sort"</h2>\n<p>Another built-in transform is "sort".</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAvLyBTb3J0IGJ5IHNjb3JlLgogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnYXNjJyB9CiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p><md-example src="data-transform-sort-bar"></md-example></p>\n<p>Some extra features about "sort transform":</p>\n<ul>\n<li>Order by multiple dimensions is supported. See examples below.</li>\n<li>The sort rule:\n<ul>\n<li>By default "numeric" (that is, number and numeric-string like <code>\' 123 \'</code>) are able to sorted by numeric order.</li>\n<li>Otherwise "non-numeric-string" are also able to be ordered among themselves. This might help to the case like grouping data items with the same tag, especially when multiple dimensions participated in the sort (See example below).</li>\n<li>When "numeric" is compared with "non-numeric-string", or either of them is compared with other types of value, they are not comparable. So we call the latter one as "incomparable" and treat it as "min value" or "max value" according to the prop <code>incomparable: \'min\' | \'max\'</code>. This feature usually helps to decide whether to put the empty values (like <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>\'\'</code>, <code>\'-\'</code>) or other illegal values to the head or tail.</li>\n</ul>\n</li>\n<li><code>filter: \'time\' | \'trim\' | \'number\'</code> can be used, the same as "filter transform".\n<ul>\n<li>If intending to sort time values (JS <code>Date</code> instance or time string like <code>\'2012-03-12 11:13:54\'</code>), <code>parser: \'time\'</code> should be specified. Like <code>config: { dimension: \'date\', order: \'desc\', parser: \'time\' }</code></li>\n<li>If intending to sort values with unit suffix (like <code>\'33%\'</code>, <code>\'16px\'</code>), need to use <code>parser: \'number\'</code>.</li>\n</ul>\n</li>\n</ul>\n<p>See an example of multiple order:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICBjb25maWc6IFsKICAgICAgICAgIC8vIFNvcnQgYnkgdGhlIHR3byBkaW1lbnNpb25zLgogICAgICAgICAgeyBkaW1lbnNpb246ICdwcm9mZXNzaW9uJywgb3JkZXI6ICdkZXNjJyB9LAogICAgICAgICAgeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnZGVzYycgfQogICAgICAgIF0KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnYmFyJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/data-transform-multiple-sort-bar"></md-example></p>\n<p>Finally, we give the formally definition of the sort transform config here:</p>\n<md-code-block lang="ts" code="\'dHlwZSBTb3J0VHJhbnNmb3JtID0gewogIHR5cGU6ICdmaWx0ZXInOwogIGNvbmZpZzogT3JkZXJFeHByZXNzaW9uIHwgT3JkZXJFeHByZXNzaW9uW107Cn07CnR5cGUgT3JkZXJFeHByZXNzaW9uID0gewogIGRpbWVuc2lvbjogRGltZW5zaW9uTmFtZSB8IERpbWVuc2lvbkluZGV4OwogIG9yZGVyOiAnYXNjJyB8ICdkZXNjJzsKICBpbmNvbXBhcmFibGU_OiAnbWluJyB8ICdtYXgnOwogIHBhcnNlcj86ICd0aW1lJyB8ICd0cmltJyB8ICdudW1iZXInOwp9Owp0eXBlIERpbWVuc2lvbk5hbWUgPSBzdHJpbmc7CnR5cGUgRGltZW5zaW9uSW5kZXggPSBudW1iZXI7\'" line-highlights="\'\'" />\n<h2 id="use-external-transforms" tabindex="-1">Use External Transforms</h2>\n<p>Besides built-in transforms (like \'filter\', \'sort\'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> as an example:</p>\n<p>This case show how to make a regression line via ecStat:</p>\n<md-code-block lang="js" code="\'Ly8gUmVnaXN0ZXIgdGhlIGV4dGVybmFsIHRyYW5zZm9ybSBhdCBmaXJzdC4KZWNoYXJ0cy5yZWdpc3RlclRyYW5zZm9ybShlY1N0YXRUcmFuc2Zvcm0oZWNTdGF0KS5yZWdyZXNzaW9uKTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiByYXdEYXRhCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyBSZWZlcmVuY2UgdGhlIHJlZ2lzdGVyZWQgZXh0ZXJuYWwgdHJhbnNmb3JtLgogICAgICAgIC8vIE5vdGUgdGhhdCBleHRlcm5hbCB0cmFuc2Zvcm0gaGFzIGEgbmFtZXNwYWNlIChsaWtlICdlY1N0YXQ6eHh4JwogICAgICAgIC8vIGhhcyBuYW1lc3BhY2UgJ2VjU3RhdCcpLgogICAgICAgIC8vIGJ1aWx0LWluIHRyYW5zZm9ybSAobGlrZSAnZmlsdGVyJywgJ3NvcnQnKSBkb2VzIG5vdCBoYXZlIGEgbmFtZXNwYWNlLgogICAgICAgIHR5cGU6ICdlY1N0YXQ6cmVncmVzc2lvbicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICAvLyBQYXJhbWV0ZXJzIG5lZWRlZCBieSB0aGUgZXh0ZXJuYWwgdHJhbnNmb3JtLgogICAgICAgICAgbWV0aG9kOiAnZXhwb25lbnRpYWwnCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogeyB0eXBlOiAnY2F0ZWdvcnknIH0sCiAgeUF4aXM6IHt9LAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnc2NhdHRlcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YXNldEluZGV4OiAwCiAgICB9LAogICAgewogICAgICBuYW1lOiAncmVncmVzc2lvbicsCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3ltYm9sOiAnbm9uZScsCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>Examples with echarts-stat:</p>\n<ul>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1">Aggregate</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1">Bar histogram</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1">Scatter clustering</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1">Scatter linear regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1">Scatter exponential regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">Scatter logarithmic regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">Scatter polynomial regression</a></li>\n</ul>\n',postPath:"en/concepts/data-transform"}],fetch:{},error:i,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:I},{title:"入门篇",dir:o,children:[{title:"获取 ECharts",dir:C},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:l,draft:e},{title:"获取灵感",dir:d},{title:"寻求帮助",dir:n},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"ECharts 5 升级指南",dir:s},{title:5.2,dir:r}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:h},{title:"配置项",dir:b,draft:e},{title:"系列",dir:y,draft:e},{title:"样式",dir:p},{title:"数据集",dir:G},{title:"数据转换",dir:u},{title:"坐标系",dir:Z,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:t},{title:"图例",dir:W},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:M,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:f},{title:"极坐标系柱状图",dir:F,draft:e},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:S},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:Y},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:v},{title:"圆环图",dir:x},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:k}]}]},{title:K,dir:g,draft:e},{title:"跨平台方案",dir:E,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:Q,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:g,draft:e},{title:ee,dir:ge},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:I},{title:"Basics",dir:o,children:[{title:"Download ECharts",dir:C},{title:"Import ECharts",dir:a},{title:"Resources",dir:l,draft:e},{title:"Inspiration",dir:d},{title:"Get Help",dir:n},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:c},{title:"ECharts 5 Upgrade Guide",dir:s},{title:5.2,dir:r}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:h},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:y,draft:e},{title:"Style",dir:p},{title:"Dataset",dir:G},{title:"Data Transform",dir:u},{title:"Coordinate",dir:Z,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:t},{title:"Legend",dir:W},{title:"Event and Action",dir:w}]},{title:"How To Guides",dir:J,children:[{title:"Common Charts",dir:M,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:f},{title:"Bar Polar",dir:F,draft:e},{title:"Waterfall",dir:L}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:S},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:Y},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:v},{title:"Ring Style",dir:x},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:k}]}]},{title:"Mobile",dir:g,draft:e},{title:"Cross Platform",dir:E,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:Q,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:g,draft:e},{title:ee,dir:ge},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},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:e,routePath:"/en/concepts/data-transform",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:i}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/concepts/dataset/index.html b/handbook/en/concepts/dataset/index.html
index 97febdb..432559a 100644
--- a/handbook/en/concepts/dataset/index.html
+++ b/handbook/en/concepts/dataset/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="dataset" tabindex="-1">Dataset</h1> <p><code>dataset</code> is a component dedicated to manage data. Although you can set the data in <code>series.data</code> for every series, we recommend you use the <code>dataset</code> to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p> <h2 id="define-data-under-series" tabindex="-1">Define <code>data</code> under <code>series</code></h2> <p>If data is defined under <code>series</code>, for example:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="dataset" tabindex="-1">Dataset</h1> <p><code>dataset</code> is a component dedicated to manage data. Although you can set the data in <code>series.data</code> for every series, we recommend you use the <code>dataset</code> to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p> <h2 id="define-data-under-series" tabindex="-1">Define <code>data</code> under <code>series</code></h2> <p>If data is defined under <code>series</code>, for example:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
@@ -475,7 +475,8 @@
<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>In fact, <a href="https://echarts.apache.org/option.html##series.data">series.data</a> is an important setting method which will always exist. Some special non-table format chart like <a href="https://echarts.apache.org/option.html##series-treemap">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph">graph</a> and <a href="https://echarts.apache.org/option.html##series-lines">lines</a> still cannot be edit in dataset, you still need to use <a href="https://echarts.apache.org/option.html##series.data">series.data</a>. In another way, for render huge amount of data (over a million), you need to use <a href="https://echarts.apache.org/api.html#echartsInstance.appendData">appendData</a> which is not supported by <code>dataset</code>.</p> <h2 id="others" tabindex="-1">Others</h2> <p>The following charts now support dataset:
<code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.
-ECharts will support more charts in the future.</p> <p>In the end, here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-link">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</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/en/concepts/dataset.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,o,d,s,n,g,l,c,r,I,h,C,p,A,m,u,b,y,B,w,f,G,Z,W,X,v,L,H,N,J,Y,M,F,z,S,x,V,D,R,O,j,k,E,Q,T,K,U,P,q,_,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="dataset" tabindex="-1">Dataset</h1>\n<p><code>dataset</code> is a component dedicated to manage data. Although you can set the data in <code>series.data</code> for every series, we recommend you use the <code>dataset</code> to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p>\n<h2 id="define-data-under-series" tabindex="-1">Define <code>data</code> under <code>series</code></h2>\n<p>If data is defined under <code>series</code>, for example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>Define <code>data</code> under <code>series</code> is suitable for customization for some special data structures such as "tree", "graph" and large data.\nHowever, it is not conducive to the data sharing for multiple series as well as mapping arrangement of chart types and series based on the original data. The other disadvantage is that programmers always need to divide the data in separate series (and categories) first.</p>\n<h2 id="define-data-in-dataset" tabindex="-1">Define <code>data</code> in <code>dataset</code></h2>\n<p>Here are the advantages if you define <code>data</code> in <code>dataset</code>:</p>\n<ul>\n<li>Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</li>\n<li>Divide data from other configurations. The data often change but others not. It is\nEasy to manage separately.</li>\n<li>Data can be reused by several series or component, you don\'t need to create copies of a large amount of data for every series.</li>\n<li>Support more common data format, such as a 2D array, array of classes, etc., to avoid users from converting for data format to a certain extent.</li>\n</ul>\n<p>Here is a simple <code>dataset</code> example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8gUHJvdmlkZSBhIHNldCBvZiBkYXRhLgogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDE1JywgJzIwMTYnLCAnMjAxNyddLAogICAgICBbJ01hdGNoYSBMYXR0ZScsIDQzLjMsIDg1LjgsIDkzLjddLAogICAgICBbJ01pbGsgVGVhJywgODMuMSwgNzMuNCwgNTUuMV0sCiAgICAgIFsnQ2hlZXNlIENvY29hJywgODYuNCwgNjUuMiwgODIuNV0sCiAgICAgIFsnV2FsbnV0IEJyb3duaWUnLCA3Mi40LCA1My45LCAzOS4xXQogICAgXQogIH0sCiAgLy8gRGVjbGFyZSBhbiB4LWF4aXMgKGNhdGVnb3J5IGF4aXMpLgogIC8vIFRoZSBjYXRlZ29yeSBtYXAgdGhlIGZpcnN0IHJvdyBpbiB0aGUgZGF0YXNldCBieSBkZWZhdWx0LgogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICAvLyBEZWNsYXJlIGEgeS1heGlzICh2YWx1ZSBheGlzKS4KICB5QXhpczoge30sCiAgLy8gRGVjbGFyZSBzZXZlcmFsICdiYXInIHNlcmllcywKICAvLyBldmVyeSBzZXJpZXMgd2lsbCBhdXRvLW1hcCB0byBlYWNoIHJvd3MgYnkgZGVmYXVsdC4KICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>Or try to use the "array of classes" format:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8gRGVmaW5lIHRoZSBkaW1lbnNpb24gb2YgYXJyYXkuIEluIGNhcnRlc2lhbiBjb29yZGluYXRlIHN5c3RlbSwKICAgIC8vIGlmIHRoZSB0eXBlIG9mIHgtYXhpcyBpcyBjYXRlZ29yeSwgbWFwIHRoZSBmaXJzdCBkaW1lbnNpb24gdG8KICAgIC8vIHgtYXhpcyBieSBkZWZhdWx0LCB0aGUgc2Vjb25kIGRpbWVuc2lvbiB0byB5LWF4aXMuCiAgICAvLyBZb3UgY2FuIGFsc28gc3BlY2lmeSAnc2VyaWVzLmVuY29kZScgdG8gY29tcGxldGUgdGhlIG1hcAogICAgLy8gd2l0aG91dCBzcGVjaWZ5IGRpbWVuc2lvbnMuIFBsZWFzZSBzZWUgYmVsb3cuCgogICAgZGltZW5zaW9uczogWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgJzIwMTUnOiA0My4zLCAnMjAxNic6IDg1LjgsICcyMDE3JzogOTMuNyB9LAogICAgICB7IHByb2R1Y3Q6ICdNaWxrIFRlYScsICcyMDE1JzogODMuMSwgJzIwMTYnOiA3My40LCAnMjAxNyc6IDU1LjEgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgJzIwMTUnOiA4Ni40LCAnMjAxNic6IDY1LjIsICcyMDE3JzogODIuNSB9LAogICAgICB7IHByb2R1Y3Q6ICdXYWxudXQgQnJvd25pZScsICcyMDE1JzogNzIuNCwgJzIwMTYnOiA1My45LCAnMjAxNyc6IDM5LjEgfQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<h2 id="map-from-data-to-chart" tabindex="-1">Map from Data to Chart</h2>\n<p>The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</p>\n<p>In short, you can set these configs of mapping:</p>\n<ul>\n<li>Specify \'column\' or \'row\' of <code>dataset</code> to map the <code>series</code>. You can use <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">series.seriesLayoutBy</a> to configure it. The default is to map according to the column.</li>\n<li>Rule of specifying dimension mapping: how to mapping from dimensions of \'dataset\' to <code>axis</code>, <code>tooltip</code>, <code>label</code> and <code>visualMap</code>. To configure the mapping, please use <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> and <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a>. The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in <code>dataset.source</code>; three-column chart mapping with each row in <code>dataset.source</code> one by one.</li>\n</ul>\n<p>The details of the configuration are shown below:</p>\n<h2 id="map-row-or-column-of-dataset-to-series" tabindex="-1">Map Row or Column of <code>dataset</code> to <code>series</code></h2>\n<p>After having the dataset, you can configure flexibly: how the data map to the axis and graph series.</p>\n<p>You can use <code>seriesLayoutBy</code> to change the understanding of row and column of the chart. <code>seriesLayoutBy</code> can be:</p>\n<ul>\n<li>\'column\': Default, the series are placed above the column of <code>dataset</code>.</li>\n<li>\'row\': The series is placed above the row of <code>dataset</code>.</li>\n</ul>\n<p>Check this case:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDEyJywgJzIwMTMnLCAnMjAxNCcsICcyMDE1J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDEuMSwgMzAuNCwgNjUuMSwgNTMuM10sCiAgICAgIFsnTWlsayBUZWEnLCA4Ni41LCA5Mi4xLCA4NS43LCA4My4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCAyNC4xLCA2Ny4yLCA3OS41LCA4Ni40XQogICAgXQogIH0sCiAgeEF4aXM6IFsKICAgIHsgdHlwZTogJ2NhdGVnb3J5JywgZ3JpZEluZGV4OiAwIH0sCiAgICB7IHR5cGU6ICdjYXRlZ29yeScsIGdyaWRJbmRleDogMSB9CiAgXSwKICB5QXhpczogW3sgZ3JpZEluZGV4OiAwIH0sIHsgZ3JpZEluZGV4OiAxIH1dLAogIGdyaWQ6IFt7IGJvdHRvbTogJzU1JScgfSwgeyB0b3A6ICc1NSUnIH1dLAogIHNlcmllczogWwogICAgLy8gVGhlc2Ugc2VyaWVzIHdpbGwgc2hvdyBpbiB0aGUgZmlyc3QgY29vcmRpbmF0ZSwgZWFjaCBzZXJpZXMgbWFwIGEgcm93IGluIGRhdGFzZXQuCiAgICB7IHR5cGU6ICdiYXInLCBzZXJpZXNMYXlvdXRCeTogJ3JvdycgfSwKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAncm93JyB9LAogICAgeyB0eXBlOiAnYmFyJywgc2VyaWVzTGF5b3V0Qnk6ICdyb3cnIH0sCiAgICAvLyBUaGVzZSBzZXJpZXMgd2lsbCBzaG93IGluIHRoZSBzZWNvbmQgY29vcmRpbmF0ZSwgZWFjaCBzZXJpZXMgbWFwIGEgY29sdW1uIGluIGRhdGFzZXQuCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0KICBdCn07\'" v-bind="{}" />\n<p>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by">this case</a>.</p>\n<h2 id="dimension" tabindex="-1">Dimension</h2>\n<p>Most of the data described in commonly used charts is a "two-dimensional table" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a "dimension" and each row was called "item", vice versa.</p>\n<p>The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, <code>\'score\'</code>, <code>\'amount\'</code>, <code>\'product\'</code> are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in <code>dataset.source</code>. You can also use <code>dataset.sourceHeader: true</code> to declare that the first column (row) represents the dimension name.</p>\n<p>Try to use single <code>dataset.dimensions</code> or some <code>series.dimensions</code> to define the dimensions, therefore you can specify the name and type together.</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbjEgPSB7CiAgZGF0YXNldDogewogICAgZGltZW5zaW9uczogWwogICAgICB7IG5hbWU6ICdzY29yZScgfSwKICAgICAgLy8gY2FuIGJlIGFiYnJldmlhdGVkIGFzICdzdHJpbmcnLCB0byBpbmRpY2F0ZSBkaW1lbnNpb24gbmFtZSDjgIIKICAgICAgJ2Ftb3VudCcsCiAgICAgIC8vIFNwZWNpZnkgZGltZW5zaW9ucyBpbiAndHlwZScuCiAgICAgIHsgbmFtZTogJ3Byb2R1Y3QnLCB0eXBlOiAnb3JkaW5hbCcgfQogICAgXSwKICAgIHNvdXJjZTogW10KICB9CiAgLy8gLi4uCn07Cgp2YXIgb3B0aW9uMiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFtdCiAgfSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdsaW5lJywKICAgIC8vIHNlcmllcy5kaW1lbnNpb25zIHdpbGwgY292ZXIgdGhlIGNvbmZpZyBpbiBkYXRhc2V0LmRpbWVuc2lvbgogICAgZGltZW5zaW9uczogWwogICAgICBudWxsLCAvLyB1c2UgbnVsbCBpZiB5b3UgZG8gbm90IHdhbnQgZGltZW5zaW9uIG5hbWUuCiAgICAgICdhbW91bnQnLAogICAgICB7IG5hbWU6ICdwcm9kdWN0JywgdHlwZTogJ29yZGluYWwnIH0KICAgIF0KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>In most cases, you don\'t need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.</p>\n<p>Dimension type can be the following values:</p>\n<ul>\n<li><code>\'number\'</code>: Default, normal data.</li>\n<li><code>\'ordinal\'</code>: String types data like categories, text can be used on the axis only with the dimension type \'ordinal\'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.</li>\n<li><code>\'time\'</code>: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as <code>\'time\'</code>. For instance, ECharts will auto-analyze if the data of this dimension is \'2017-05-10\'<code>. If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) =</code>\'time\'<code>), the dimension type will also be</code>\'time\'`. See <a href="https://echarts.apache.org/option.html##series.data">data</a> for more time type support.</li>\n<li><code>\'float\'</code>: Use <code>TypedArray</code> to optimize the performance in <code>\'float\'</code> dimension.</li>\n<li><code>\'int\'</code>: Use <code>TypedArray</code> to optimize the performance in <code>\'int\'</code> dimension.</li>\n</ul>\n<h2 id="map-from-data-to-charts-(series.encode)" tabindex="-1">Map from Data to Charts (series.encode)</h2>\n<p>After understand the concept of dimension, you can use <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> to make a mapping:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWydzY29yZScsICdhbW91bnQnLCAncHJvZHVjdCddLAogICAgICBbODkuMywgNTgyMTIsICdNYXRjaGEgTGF0dGUnXSwKICAgICAgWzU3LjEsIDc4MjU0LCAnTWlsayBUZWEnXSwKICAgICAgWzc0LjQsIDQxMDMyLCAnQ2hlZXNlIENvY29hJ10sCiAgICAgIFs1MC4xLCAxMjc1NSwgJ0NoZWVzZSBCcm93bmllJ10sCiAgICAgIFs4OS43LCAyMDE0NSwgJ01hdGNoYSBDb2NvYSddLAogICAgICBbNjguMSwgNzkxNDYsICdUZWEnXSwKICAgICAgWzE5LjYsIDkxODUyLCAnT3JhbmdlIEp1aWNlJ10sCiAgICAgIFsxMC42LCAxMDE4NTIsICdMZW1vbiBKdWljZSddLAogICAgICBbMzIuNywgMjAxMTIsICdXYWxudXQgQnJvd25pZSddCiAgICBdCiAgfSwKICB4QXhpczoge30sCiAgeUF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZW5jb2RlOiB7CiAgICAgICAgLy8gTWFwICJhbW91bnQiIGNvbHVtbiB0byB4LWF4aXMuCiAgICAgICAgeDogJ2Ftb3VudCcsCiAgICAgICAgLy8gTWFwICJwcm9kdWN0IiByb3cgdG8geS1heGlzLgogICAgICAgIHk6ICdwcm9kdWN0JwogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>The basic structure of <code>series.encode</code> declaration:</p>\n<ul>\n<li>To the left of the colon: Specific name of axis or label.</li>\n<li>To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).</li>\n</ul>\n<p>Generally, the following info is not necessary to be defined. Fill in as needed.</p>\n<p>Attribute suggested by <code>series.encode</code></p>\n<md-code-block lang="js" code="\'Ly8gU3VwcG9ydGVkIGluIGV2ZXJ5IGNvb3JkaW5hdGUgYW5kIHNlcmllczoKZW5jb2RlOiB7CiAgLy8gRGlzcGxheSB0aGUgdmFsdWUgb2YgZGltZW5zaW9uIG5hbWVkICJwcm9kdWN0IiBhbmQgInNjb3JlIiBpbiB0b29sdGlwLgogIHRvb2x0aXA6IFsncHJvZHVjdCcsICdzY29yZSddCiAgLy8gQ29ubmVjdCBkaW1lbnNpb24gbmFtZSBvZiAiRGltZW5zaW9uIDEiIGFuZCAiRGltZW5zaW9uIDMiIGFzIHRoZSBzZXJpZXMgbmFtZS4gKEF2b2lkIHRvIHJlcGVhdCBsb25nZXIgbmFtZXMgaW4gc2VyaWVzLm5hbWUpCiAgc2VyaWVzTmFtZTogWzEsIDNdLAogIC8vIE1lYW5zIHRvIHVzZSB0aGUgdmFsdWUgaW4gIkRpbWVuc2lvbiAyIiBhcyB0aGUgaWQuIEl0IG1ha2VzIHRoZSBuZXcgYW5kIG9sZCBkYXRhIGNvcnJlc3BvbmQgYnkgaWQKCS8vIHdoZW4gdXNpbmcgc2V0T3B0aW9uIHRvIHVwZGF0ZSBkYXRhLCBzbyB0aGF0IGl0IGNhbiBzaG93IGFuaW1hdGlvbiBwcm9wZXJseS4KICBpdGVtSWQ6IDIsCiAgLy8gVGhlIGl0ZW1OYW1lIHdpbGwgc2hvdyBpbiB0aGUgbGVnZW5kIG9mIFBpZSBDaGFydHMuCiAgaXRlbU5hbWU6IDMKfQoKLy8gR3JpZC9jYXJ0ZXNpYW4gY29vcmRpbmF0ZSB1bmlxdWUgY29uZmlnczoKZW5jb2RlOiB7CiAgLy8gTWFwICJEaW1lbnNpb24gMSIsICJEaW1lbnNpb24gNSIgYW5kICJkaW1lbnNpb24gbmFtZWQgJ3Njb3JlJyIgdG8geC1heGlzOgogIHg6IFsxLCA1LCAnc2NvcmUnXSwKICAvLyBNYXAgIkRpbWVuc2lvbiAwIiB0byB5LWF4aXM6CiAgeTogMAp9CgovLyBzaW5nbGVBeGlzIHVuaXF1ZSBjb25maWdzOgplbmNvZGU6IHsKICBzaW5nbGU6IDMKfQoKLy8gUG9sYXIgY29vcmRpbmF0ZSB1bmlxdWUgY29uZmlnczoKZW5jb2RlOiB7CiAgcmFkaXVzOiAzLAogIGFuZ2xlOiAyCn0KCi8vIEdlby1jb29yZGluYXRlIHVuaXF1ZSBjb25maWdzOgplbmNvZGU6IHsKICBsbmc6IDMsCiAgbGF0OiAyCn0KCi8vIEZvciBzb21lIGNoYXJ0cyB3aXRob3V0IGNvb3JkaW5hdGUgbGlrZSBwaWUgY2hhcnQsIGZ1bm5lbCBjaGFydDoKZW5jb2RlOiB7CiAgdmFsdWU6IDMKfQ\'" line-highlights="\'\'" />\n<p>This is a richer <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1">example</a> of <code>series.encode</code>.</p>\n<h2 id="default-series.encode" tabindex="-1">Default series.encode</h2>\n<p>It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if <code>series.encode</code> is not specified. The default rule is:</p>\n<ul>\n<li>In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = \'category\'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.</li>\n<li>Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).</li>\n</ul>\n<p>While the default rule cannot fulfill the requirements, you can configure <code>encode</code> by yourself, which is not complicate. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-default">example</a>.</p>\n<h2 id="some-normal-settings-of-series.encode" tabindex="-1">Some Normal Settings of series.encode</h2>\n<p>Q: How to set the 3rd column as x-axis, 5th column as y-axis?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgLy8gZGltZW5zaW9uSW5kZXggY291bnQgZnJvbSAwLCBzbyB0aGUgM3JkIGxpbmUgaXMgZGltZW5zaW9uc1syXS4KICAgIGVuY29kZTogeyB4OiAyLCB5OiA0IH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>Q: How to set the 3rd row as x-axis, 5th row as y-axis?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfSwKICAgIHNlcmllc0xheW91dEJ5OiAncm93JwogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Q: How to set the 2nd column as a label?</p>\n<p>A:\nWe now support to trace value from specific dimension for <a href="https://echarts.apache.org/option.html##series.label.formatter">label.formatter</a>:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgbGFiZWw6IHsKICAgIC8vIGAne0BzY29yZX0nYCBtZWFucyB0aGUgdmFsdWUgaW4gdGhlIGRpbWVuc2lvbiBuYW1lZCAic2NvcmUiLgogICAgLy8gYCd7QFs0XX0nYCBtZWFucyB0aGUgdmFsdWUgaW4gZGltZW5zaW9uIDQuCiAgICBmb3JtYXR0ZXI6ICdhYWF7QHByb2R1Y3R9YmJie0BzY29yZX1jY2N7QFs0XX1kZGQnOwogIH0KfQ\'" line-highlights="\'\'" />\n<p>Q: How to show the 2nd and 3rd column in the tooltip?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7CiAgICAgIHRvb2x0aXA6IFsxLCAyXQogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>Q: How to define the dimension name if is not included in the dataset?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBkaW1lbnNpb25zOiBbJ3Njb3JlJywgJ2Ftb3VudCddLAogICAgc291cmNlOiBbCiAgICAgIFs4OS4zLCAzMzcxXSwKICAgICAgWzkyLjEsIDgxMjNdLAogICAgICBbOTQuNCwgMTk1NF0sCiAgICAgIFs4NS40LCA4MjldCiAgICBdCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Q: How to map the 3rd column to the size of the scatter chart?</p>\n<p>A:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWzEyLCAzMjMsIDExLjJdLAogICAgICBbMjMsIDE2NywgOC4zXSwKICAgICAgWzgxLCAyODQsIDEyXSwKICAgICAgWzkxLCA0MTMsIDQuMV0sCiAgICAgIFsxMywgMjg3LCAxMy41XQogICAgXQogIH0sCiAgdmlzdWFsTWFwOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIGRpbWVuc2lvbjogMiwgLy8gbWVhbnMgdGhlIDNyZCBjb2x1bW4KICAgIG1pbjogMiwgLy8gbG93ZXIgYm91bmQKICAgIG1heDogMTUsIC8vIGhpZ2hlciBib3VuZAogICAgaW5SYW5nZTogewogICAgICAvLyBTaXplIG9mIHRoZSBidWJibGUuCiAgICAgIHN5bWJvbFNpemU6IFs1LCA2MF0KICAgIH0KICB9LAogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnc2NhdHRlcicKICB9Cn07\'" v-bind="{}" />\n<p>Q: I specified a mapping in encode, why it is not worked?</p>\n<p>A: Check your spelling, such as misspell the dimension name <code>\'Life Expectancy\'</code> to <code>\'Life Expectency\'</code> in encode.</p>\n<h2 id="visual-channel-mapping" tabindex="-1">Visual Channel Mapping</h2>\n<p>We can map visual channel by using <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a>. Check details in the <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> document. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0">example</a>.</p>\n<h2 id="formats-of-charts" tabindex="-1">Formats of Charts</h2>\n<p>In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like \'MS Excel\' and \'Numbers\' all uses a two-dimensional table. Their data can be exported to JSON format and input to <code>dataset.source</code> and avoid some steps of data processing.</p>\n<blockquote>\n<p>You can switch .csv file to JSON using tools like <a href="https://github.com/d3/d3-dsv">dsv</a> or <a href="https://github.com/mholt/PapaParse">PapaParse</a>.</p>\n</blockquote>\n<p>As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.</p>\n<p>Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don\'t support <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">seriesLayoutBy</a> in this format right now.</p>\n<md-code-block lang="js" code="\'ZGF0YXNldDogWwogIHsKICAgIC8vIGNvbHVtbiBieSBjb2x1bW4ga2V5LXZhbHVlIGFycmF5IGlzIGEgbm9ybWFsIGZvcm1hdAogICAgc291cmNlOiBbCiAgICAgIHsgcHJvZHVjdDogJ01hdGNoYSBMYXR0ZScsIGNvdW50OiA4MjMsIHNjb3JlOiA5NS44IH0sCiAgICAgIHsgcHJvZHVjdDogJ01pbGsgVGVhJywgY291bnQ6IDIzNSwgc2NvcmU6IDgxLjQgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgY291bnQ6IDEwNDIsIHNjb3JlOiA5MS4yIH0sCiAgICAgIHsgcHJvZHVjdDogJ1dhbG51dCBCcm93bmllJywgY291bnQ6IDk4OCwgc2NvcmU6IDc2LjkgfQogICAgXQogIH0sCiAgewogICAgLy8gcm93IGJ5IHJvdyBrZXktdmFsdWUKICAgIHNvdXJjZTogewogICAgICBwcm9kdWN0OiBbJ01hdGNoYSBMYXR0ZScsICdNaWxrIFRlYScsICdDaGVlc2UgQ29jb2EnLCAnV2FsbnV0IEJyb3duaWUnXSwKICAgICAgY291bnQ6IFs4MjMsIDIzNSwgMTA0MiwgOTg4XSwKICAgICAgc2NvcmU6IFs5NS44LCA4MS40LCA5MS4yLCA3Ni45XQogICAgfQogIH0KXTs\'" line-highlights="\'\'" />\n<h2 id="how-to-reference-several-datasets" tabindex="-1">How to Reference Several Datasets</h2>\n<p>ECharts support to define several datasets at the same moment. Series can assign the one to reference by <a href="https://echarts.apache.org/option.html##series.datasetIndex">series.datasetIndex</a>. For example:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIDFzdCBEYXRhc2V0CiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIDJuZCBEYXRhc2V0CiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIDNyZCBEYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICAvLyBVc2UgMm5kIGRhdGFzZXQKICAgICAgZGF0YXNldEluZGV4OiAyCiAgICB9LAogICAgewogICAgICAvLyBVc2UgMXN0IGRhdGFzZXQKICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<h2 id="series.data-in-echarts-3" tabindex="-1">series.data in ECharts 3</h2>\n<p>ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the <a href="https://echarts.apache.org/option.html##series.data">series.data</a>, then use <a href="https://echarts.apache.org/option.html##series.data">series.data</a> but not <code>dataset</code>.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>In fact, <a href="https://echarts.apache.org/option.html##series.data">series.data</a> is an important setting method which will always exist. Some special non-table format chart like <a href="https://echarts.apache.org/option.html##series-treemap">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph">graph</a> and <a href="https://echarts.apache.org/option.html##series-lines">lines</a> still cannot be edit in dataset, you still need to use <a href="https://echarts.apache.org/option.html##series.data">series.data</a>. In another way, for render huge amount of data (over a million), you need to use <a href="https://echarts.apache.org/api.html#echartsInstance.appendData">appendData</a> which is not supported by <code>dataset</code>.</p>\n<h2 id="others" tabindex="-1">Others</h2>\n<p>The following charts now support dataset:\n<code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.\nECharts will support more charts in the future.</p>\n<p>In the end, here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-link">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</p>\n',postPath:"en/concepts/dataset"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:o},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:s},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:g,draft:e},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:c},{title:"版本特性",dir:r,children:[{title:"ECharts 5 特性介绍",dir:I},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:C}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:b},{title:"数据集",dir:y},{title:"数据转换",dir:B},{title:"坐标系",dir:w,draft:e},{title:"坐标轴",dir:f},{title:"视觉映射",dir:i},{title:"图例",dir:G},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:X,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:H},{title:"极坐标系柱状图",dir:N,draft:e},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:x}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:D},{title:"南丁格尔图(玫瑰图)",dir:R}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:j}]}]},{title:k,dir:t,draft:e},{title:"跨平台方案",dir:E,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:K},{title:"数据下钻",dir:U,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:k,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:o},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:s},{title:"Import ECharts",dir:n},{title:"Resources",dir:g,draft:e},{title:"Inspiration",dir:l},{title:"Get Help",dir:c},{title:"What's New",dir:r,children:[{title:"ECharts 5 Features",dir:I},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:C}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:y},{title:"Data Transform",dir:B},{title:"Coordinate",dir:w,draft:e},{title:"Axis",dir:f},{title:"Visual Mapping",dir:i},{title:"Legend",dir:G},{title:"Event and Action",dir:Z}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:X,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:H},{title:"Bar Polar",dir:N,draft:e},{title:"Waterfall",dir:J}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:x}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:D},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:E,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:K},{title:"Drilldown",dir:U,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/concepts/dataset",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ECharts will support more charts in the future.</p> <p>In the end, here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-link">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</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/en/concepts/dataset.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,o,d,s,n,g,l,c,r,I,h,C,p,A,m,u,b,y,B,w,f,G,Z,W,X,v,L,H,N,J,Y,M,F,z,S,x,V,D,R,O,j,k,E,Q,T,K,U,P,q,_,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="dataset" tabindex="-1">Dataset</h1>\n<p><code>dataset</code> is a component dedicated to manage data. Although you can set the data in <code>series.data</code> for every series, we recommend you use the <code>dataset</code> to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p>\n<h2 id="define-data-under-series" tabindex="-1">Define <code>data</code> under <code>series</code></h2>\n<p>If data is defined under <code>series</code>, for example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>Define <code>data</code> under <code>series</code> is suitable for customization for some special data structures such as "tree", "graph" and large data.\nHowever, it is not conducive to the data sharing for multiple series as well as mapping arrangement of chart types and series based on the original data. The other disadvantage is that programmers always need to divide the data in separate series (and categories) first.</p>\n<h2 id="define-data-in-dataset" tabindex="-1">Define <code>data</code> in <code>dataset</code></h2>\n<p>Here are the advantages if you define <code>data</code> in <code>dataset</code>:</p>\n<ul>\n<li>Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</li>\n<li>Divide data from other configurations. The data often change but others not. It is\nEasy to manage separately.</li>\n<li>Data can be reused by several series or component, you don\'t need to create copies of a large amount of data for every series.</li>\n<li>Support more common data format, such as a 2D array, array of classes, etc., to avoid users from converting for data format to a certain extent.</li>\n</ul>\n<p>Here is a simple <code>dataset</code> example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8gUHJvdmlkZSBhIHNldCBvZiBkYXRhLgogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDE1JywgJzIwMTYnLCAnMjAxNyddLAogICAgICBbJ01hdGNoYSBMYXR0ZScsIDQzLjMsIDg1LjgsIDkzLjddLAogICAgICBbJ01pbGsgVGVhJywgODMuMSwgNzMuNCwgNTUuMV0sCiAgICAgIFsnQ2hlZXNlIENvY29hJywgODYuNCwgNjUuMiwgODIuNV0sCiAgICAgIFsnV2FsbnV0IEJyb3duaWUnLCA3Mi40LCA1My45LCAzOS4xXQogICAgXQogIH0sCiAgLy8gRGVjbGFyZSBhbiB4LWF4aXMgKGNhdGVnb3J5IGF4aXMpLgogIC8vIFRoZSBjYXRlZ29yeSBtYXAgdGhlIGZpcnN0IHJvdyBpbiB0aGUgZGF0YXNldCBieSBkZWZhdWx0LgogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICAvLyBEZWNsYXJlIGEgeS1heGlzICh2YWx1ZSBheGlzKS4KICB5QXhpczoge30sCiAgLy8gRGVjbGFyZSBzZXZlcmFsICdiYXInIHNlcmllcywKICAvLyBldmVyeSBzZXJpZXMgd2lsbCBhdXRvLW1hcCB0byBlYWNoIHJvd3MgYnkgZGVmYXVsdC4KICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>Or try to use the "array of classes" format:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8gRGVmaW5lIHRoZSBkaW1lbnNpb24gb2YgYXJyYXkuIEluIGNhcnRlc2lhbiBjb29yZGluYXRlIHN5c3RlbSwKICAgIC8vIGlmIHRoZSB0eXBlIG9mIHgtYXhpcyBpcyBjYXRlZ29yeSwgbWFwIHRoZSBmaXJzdCBkaW1lbnNpb24gdG8KICAgIC8vIHgtYXhpcyBieSBkZWZhdWx0LCB0aGUgc2Vjb25kIGRpbWVuc2lvbiB0byB5LWF4aXMuCiAgICAvLyBZb3UgY2FuIGFsc28gc3BlY2lmeSAnc2VyaWVzLmVuY29kZScgdG8gY29tcGxldGUgdGhlIG1hcAogICAgLy8gd2l0aG91dCBzcGVjaWZ5IGRpbWVuc2lvbnMuIFBsZWFzZSBzZWUgYmVsb3cuCgogICAgZGltZW5zaW9uczogWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgJzIwMTUnOiA0My4zLCAnMjAxNic6IDg1LjgsICcyMDE3JzogOTMuNyB9LAogICAgICB7IHByb2R1Y3Q6ICdNaWxrIFRlYScsICcyMDE1JzogODMuMSwgJzIwMTYnOiA3My40LCAnMjAxNyc6IDU1LjEgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgJzIwMTUnOiA4Ni40LCAnMjAxNic6IDY1LjIsICcyMDE3JzogODIuNSB9LAogICAgICB7IHByb2R1Y3Q6ICdXYWxudXQgQnJvd25pZScsICcyMDE1JzogNzIuNCwgJzIwMTYnOiA1My45LCAnMjAxNyc6IDM5LjEgfQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<h2 id="map-from-data-to-chart" tabindex="-1">Map from Data to Chart</h2>\n<p>The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</p>\n<p>In short, you can set these configs of mapping:</p>\n<ul>\n<li>Specify \'column\' or \'row\' of <code>dataset</code> to map the <code>series</code>. You can use <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">series.seriesLayoutBy</a> to configure it. The default is to map according to the column.</li>\n<li>Rule of specifying dimension mapping: how to mapping from dimensions of \'dataset\' to <code>axis</code>, <code>tooltip</code>, <code>label</code> and <code>visualMap</code>. To configure the mapping, please use <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> and <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a>. The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in <code>dataset.source</code>; three-column chart mapping with each row in <code>dataset.source</code> one by one.</li>\n</ul>\n<p>The details of the configuration are shown below:</p>\n<h2 id="map-row-or-column-of-dataset-to-series" tabindex="-1">Map Row or Column of <code>dataset</code> to <code>series</code></h2>\n<p>After having the dataset, you can configure flexibly: how the data map to the axis and graph series.</p>\n<p>You can use <code>seriesLayoutBy</code> to change the understanding of row and column of the chart. <code>seriesLayoutBy</code> can be:</p>\n<ul>\n<li>\'column\': Default, the series are placed above the column of <code>dataset</code>.</li>\n<li>\'row\': The series is placed above the row of <code>dataset</code>.</li>\n</ul>\n<p>Check this case:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDEyJywgJzIwMTMnLCAnMjAxNCcsICcyMDE1J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDEuMSwgMzAuNCwgNjUuMSwgNTMuM10sCiAgICAgIFsnTWlsayBUZWEnLCA4Ni41LCA5Mi4xLCA4NS43LCA4My4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCAyNC4xLCA2Ny4yLCA3OS41LCA4Ni40XQogICAgXQogIH0sCiAgeEF4aXM6IFsKICAgIHsgdHlwZTogJ2NhdGVnb3J5JywgZ3JpZEluZGV4OiAwIH0sCiAgICB7IHR5cGU6ICdjYXRlZ29yeScsIGdyaWRJbmRleDogMSB9CiAgXSwKICB5QXhpczogW3sgZ3JpZEluZGV4OiAwIH0sIHsgZ3JpZEluZGV4OiAxIH1dLAogIGdyaWQ6IFt7IGJvdHRvbTogJzU1JScgfSwgeyB0b3A6ICc1NSUnIH1dLAogIHNlcmllczogWwogICAgLy8gVGhlc2Ugc2VyaWVzIHdpbGwgc2hvdyBpbiB0aGUgZmlyc3QgY29vcmRpbmF0ZSwgZWFjaCBzZXJpZXMgbWFwIGEgcm93IGluIGRhdGFzZXQuCiAgICB7IHR5cGU6ICdiYXInLCBzZXJpZXNMYXlvdXRCeTogJ3JvdycgfSwKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAncm93JyB9LAogICAgeyB0eXBlOiAnYmFyJywgc2VyaWVzTGF5b3V0Qnk6ICdyb3cnIH0sCiAgICAvLyBUaGVzZSBzZXJpZXMgd2lsbCBzaG93IGluIHRoZSBzZWNvbmQgY29vcmRpbmF0ZSwgZWFjaCBzZXJpZXMgbWFwIGEgY29sdW1uIGluIGRhdGFzZXQuCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0KICBdCn07\'" v-bind="{}" />\n<p>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by">this case</a>.</p>\n<h2 id="dimension" tabindex="-1">Dimension</h2>\n<p>Most of the data described in commonly used charts is a "two-dimensional table" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a "dimension" and each row was called "item", vice versa.</p>\n<p>The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, <code>\'score\'</code>, <code>\'amount\'</code>, <code>\'product\'</code> are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in <code>dataset.source</code>. You can also use <code>dataset.sourceHeader: true</code> to declare that the first column (row) represents the dimension name.</p>\n<p>Try to use single <code>dataset.dimensions</code> or some <code>series.dimensions</code> to define the dimensions, therefore you can specify the name and type together.</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbjEgPSB7CiAgZGF0YXNldDogewogICAgZGltZW5zaW9uczogWwogICAgICB7IG5hbWU6ICdzY29yZScgfSwKICAgICAgLy8gY2FuIGJlIGFiYnJldmlhdGVkIGFzICdzdHJpbmcnLCB0byBpbmRpY2F0ZSBkaW1lbnNpb24gbmFtZSDjgIIKICAgICAgJ2Ftb3VudCcsCiAgICAgIC8vIFNwZWNpZnkgZGltZW5zaW9ucyBpbiAndHlwZScuCiAgICAgIHsgbmFtZTogJ3Byb2R1Y3QnLCB0eXBlOiAnb3JkaW5hbCcgfQogICAgXSwKICAgIHNvdXJjZTogW10KICB9CiAgLy8gLi4uCn07Cgp2YXIgb3B0aW9uMiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFtdCiAgfSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdsaW5lJywKICAgIC8vIHNlcmllcy5kaW1lbnNpb25zIHdpbGwgY292ZXIgdGhlIGNvbmZpZyBpbiBkYXRhc2V0LmRpbWVuc2lvbgogICAgZGltZW5zaW9uczogWwogICAgICBudWxsLCAvLyB1c2UgbnVsbCBpZiB5b3UgZG8gbm90IHdhbnQgZGltZW5zaW9uIG5hbWUuCiAgICAgICdhbW91bnQnLAogICAgICB7IG5hbWU6ICdwcm9kdWN0JywgdHlwZTogJ29yZGluYWwnIH0KICAgIF0KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>In most cases, you don\'t need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.</p>\n<p>Dimension type can be the following values:</p>\n<ul>\n<li><code>\'number\'</code>: Default, normal data.</li>\n<li><code>\'ordinal\'</code>: String types data like categories, text can be used on the axis only with the dimension type \'ordinal\'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.</li>\n<li><code>\'time\'</code>: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as <code>\'time\'</code>. For instance, ECharts will auto-analyze if the data of this dimension is \'2017-05-10\'<code>. If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) =</code>\'time\'<code>), the dimension type will also be</code>\'time\'`. See <a href="https://echarts.apache.org/option.html##series.data">data</a> for more time type support.</li>\n<li><code>\'float\'</code>: Use <code>TypedArray</code> to optimize the performance in <code>\'float\'</code> dimension.</li>\n<li><code>\'int\'</code>: Use <code>TypedArray</code> to optimize the performance in <code>\'int\'</code> dimension.</li>\n</ul>\n<h2 id="map-from-data-to-charts-(series.encode)" tabindex="-1">Map from Data to Charts (series.encode)</h2>\n<p>After understand the concept of dimension, you can use <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> to make a mapping:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWydzY29yZScsICdhbW91bnQnLCAncHJvZHVjdCddLAogICAgICBbODkuMywgNTgyMTIsICdNYXRjaGEgTGF0dGUnXSwKICAgICAgWzU3LjEsIDc4MjU0LCAnTWlsayBUZWEnXSwKICAgICAgWzc0LjQsIDQxMDMyLCAnQ2hlZXNlIENvY29hJ10sCiAgICAgIFs1MC4xLCAxMjc1NSwgJ0NoZWVzZSBCcm93bmllJ10sCiAgICAgIFs4OS43LCAyMDE0NSwgJ01hdGNoYSBDb2NvYSddLAogICAgICBbNjguMSwgNzkxNDYsICdUZWEnXSwKICAgICAgWzE5LjYsIDkxODUyLCAnT3JhbmdlIEp1aWNlJ10sCiAgICAgIFsxMC42LCAxMDE4NTIsICdMZW1vbiBKdWljZSddLAogICAgICBbMzIuNywgMjAxMTIsICdXYWxudXQgQnJvd25pZSddCiAgICBdCiAgfSwKICB4QXhpczoge30sCiAgeUF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZW5jb2RlOiB7CiAgICAgICAgLy8gTWFwICJhbW91bnQiIGNvbHVtbiB0byB4LWF4aXMuCiAgICAgICAgeDogJ2Ftb3VudCcsCiAgICAgICAgLy8gTWFwICJwcm9kdWN0IiByb3cgdG8geS1heGlzLgogICAgICAgIHk6ICdwcm9kdWN0JwogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>The basic structure of <code>series.encode</code> declaration:</p>\n<ul>\n<li>To the left of the colon: Specific name of axis or label.</li>\n<li>To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).</li>\n</ul>\n<p>Generally, the following info is not necessary to be defined. Fill in as needed.</p>\n<p>Attribute suggested by <code>series.encode</code></p>\n<md-code-block lang="js" code="\'Ly8gU3VwcG9ydGVkIGluIGV2ZXJ5IGNvb3JkaW5hdGUgYW5kIHNlcmllczoKZW5jb2RlOiB7CiAgLy8gRGlzcGxheSB0aGUgdmFsdWUgb2YgZGltZW5zaW9uIG5hbWVkICJwcm9kdWN0IiBhbmQgInNjb3JlIiBpbiB0b29sdGlwLgogIHRvb2x0aXA6IFsncHJvZHVjdCcsICdzY29yZSddCiAgLy8gQ29ubmVjdCBkaW1lbnNpb24gbmFtZSBvZiAiRGltZW5zaW9uIDEiIGFuZCAiRGltZW5zaW9uIDMiIGFzIHRoZSBzZXJpZXMgbmFtZS4gKEF2b2lkIHRvIHJlcGVhdCBsb25nZXIgbmFtZXMgaW4gc2VyaWVzLm5hbWUpCiAgc2VyaWVzTmFtZTogWzEsIDNdLAogIC8vIE1lYW5zIHRvIHVzZSB0aGUgdmFsdWUgaW4gIkRpbWVuc2lvbiAyIiBhcyB0aGUgaWQuIEl0IG1ha2VzIHRoZSBuZXcgYW5kIG9sZCBkYXRhIGNvcnJlc3BvbmQgYnkgaWQKCS8vIHdoZW4gdXNpbmcgc2V0T3B0aW9uIHRvIHVwZGF0ZSBkYXRhLCBzbyB0aGF0IGl0IGNhbiBzaG93IGFuaW1hdGlvbiBwcm9wZXJseS4KICBpdGVtSWQ6IDIsCiAgLy8gVGhlIGl0ZW1OYW1lIHdpbGwgc2hvdyBpbiB0aGUgbGVnZW5kIG9mIFBpZSBDaGFydHMuCiAgaXRlbU5hbWU6IDMKfQoKLy8gR3JpZC9jYXJ0ZXNpYW4gY29vcmRpbmF0ZSB1bmlxdWUgY29uZmlnczoKZW5jb2RlOiB7CiAgLy8gTWFwICJEaW1lbnNpb24gMSIsICJEaW1lbnNpb24gNSIgYW5kICJkaW1lbnNpb24gbmFtZWQgJ3Njb3JlJyIgdG8geC1heGlzOgogIHg6IFsxLCA1LCAnc2NvcmUnXSwKICAvLyBNYXAgIkRpbWVuc2lvbiAwIiB0byB5LWF4aXM6CiAgeTogMAp9CgovLyBzaW5nbGVBeGlzIHVuaXF1ZSBjb25maWdzOgplbmNvZGU6IHsKICBzaW5nbGU6IDMKfQoKLy8gUG9sYXIgY29vcmRpbmF0ZSB1bmlxdWUgY29uZmlnczoKZW5jb2RlOiB7CiAgcmFkaXVzOiAzLAogIGFuZ2xlOiAyCn0KCi8vIEdlby1jb29yZGluYXRlIHVuaXF1ZSBjb25maWdzOgplbmNvZGU6IHsKICBsbmc6IDMsCiAgbGF0OiAyCn0KCi8vIEZvciBzb21lIGNoYXJ0cyB3aXRob3V0IGNvb3JkaW5hdGUgbGlrZSBwaWUgY2hhcnQsIGZ1bm5lbCBjaGFydDoKZW5jb2RlOiB7CiAgdmFsdWU6IDMKfQ\'" line-highlights="\'\'" />\n<p>This is a richer <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1">example</a> of <code>series.encode</code>.</p>\n<h2 id="default-series.encode" tabindex="-1">Default series.encode</h2>\n<p>It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if <code>series.encode</code> is not specified. The default rule is:</p>\n<ul>\n<li>In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = \'category\'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.</li>\n<li>Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).</li>\n</ul>\n<p>While the default rule cannot fulfill the requirements, you can configure <code>encode</code> by yourself, which is not complicate. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-default">example</a>.</p>\n<h2 id="some-normal-settings-of-series.encode" tabindex="-1">Some Normal Settings of series.encode</h2>\n<p>Q: How to set the 3rd column as x-axis, 5th column as y-axis?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgLy8gZGltZW5zaW9uSW5kZXggY291bnQgZnJvbSAwLCBzbyB0aGUgM3JkIGxpbmUgaXMgZGltZW5zaW9uc1syXS4KICAgIGVuY29kZTogeyB4OiAyLCB5OiA0IH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>Q: How to set the 3rd row as x-axis, 5th row as y-axis?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfSwKICAgIHNlcmllc0xheW91dEJ5OiAncm93JwogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Q: How to set the 2nd column as a label?</p>\n<p>A:\nWe now support to trace value from specific dimension for <a href="https://echarts.apache.org/option.html##series.label.formatter">label.formatter</a>:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgbGFiZWw6IHsKICAgIC8vIGAne0BzY29yZX0nYCBtZWFucyB0aGUgdmFsdWUgaW4gdGhlIGRpbWVuc2lvbiBuYW1lZCAic2NvcmUiLgogICAgLy8gYCd7QFs0XX0nYCBtZWFucyB0aGUgdmFsdWUgaW4gZGltZW5zaW9uIDQuCiAgICBmb3JtYXR0ZXI6ICdhYWF7QHByb2R1Y3R9YmJie0BzY29yZX1jY2N7QFs0XX1kZGQnOwogIH0KfQ\'" line-highlights="\'\'" />\n<p>Q: How to show the 2nd and 3rd column in the tooltip?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7CiAgICAgIHRvb2x0aXA6IFsxLCAyXQogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>Q: How to define the dimension name if is not included in the dataset?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBkaW1lbnNpb25zOiBbJ3Njb3JlJywgJ2Ftb3VudCddLAogICAgc291cmNlOiBbCiAgICAgIFs4OS4zLCAzMzcxXSwKICAgICAgWzkyLjEsIDgxMjNdLAogICAgICBbOTQuNCwgMTk1NF0sCiAgICAgIFs4NS40LCA4MjldCiAgICBdCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Q: How to map the 3rd column to the size of the scatter chart?</p>\n<p>A:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWzEyLCAzMjMsIDExLjJdLAogICAgICBbMjMsIDE2NywgOC4zXSwKICAgICAgWzgxLCAyODQsIDEyXSwKICAgICAgWzkxLCA0MTMsIDQuMV0sCiAgICAgIFsxMywgMjg3LCAxMy41XQogICAgXQogIH0sCiAgdmlzdWFsTWFwOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIGRpbWVuc2lvbjogMiwgLy8gbWVhbnMgdGhlIDNyZCBjb2x1bW4KICAgIG1pbjogMiwgLy8gbG93ZXIgYm91bmQKICAgIG1heDogMTUsIC8vIGhpZ2hlciBib3VuZAogICAgaW5SYW5nZTogewogICAgICAvLyBTaXplIG9mIHRoZSBidWJibGUuCiAgICAgIHN5bWJvbFNpemU6IFs1LCA2MF0KICAgIH0KICB9LAogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnc2NhdHRlcicKICB9Cn07\'" v-bind="{}" />\n<p>Q: I specified a mapping in encode, why it is not worked?</p>\n<p>A: Check your spelling, such as misspell the dimension name <code>\'Life Expectancy\'</code> to <code>\'Life Expectency\'</code> in encode.</p>\n<h2 id="visual-channel-mapping" tabindex="-1">Visual Channel Mapping</h2>\n<p>We can map visual channel by using <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a>. Check details in the <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> document. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0">example</a>.</p>\n<h2 id="formats-of-charts" tabindex="-1">Formats of Charts</h2>\n<p>In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like \'MS Excel\' and \'Numbers\' all uses a two-dimensional table. Their data can be exported to JSON format and input to <code>dataset.source</code> and avoid some steps of data processing.</p>\n<blockquote>\n<p>You can switch .csv file to JSON using tools like <a href="https://github.com/d3/d3-dsv">dsv</a> or <a href="https://github.com/mholt/PapaParse">PapaParse</a>.</p>\n</blockquote>\n<p>As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.</p>\n<p>Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don\'t support <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">seriesLayoutBy</a> in this format right now.</p>\n<md-code-block lang="js" code="\'ZGF0YXNldDogWwogIHsKICAgIC8vIGNvbHVtbiBieSBjb2x1bW4ga2V5LXZhbHVlIGFycmF5IGlzIGEgbm9ybWFsIGZvcm1hdAogICAgc291cmNlOiBbCiAgICAgIHsgcHJvZHVjdDogJ01hdGNoYSBMYXR0ZScsIGNvdW50OiA4MjMsIHNjb3JlOiA5NS44IH0sCiAgICAgIHsgcHJvZHVjdDogJ01pbGsgVGVhJywgY291bnQ6IDIzNSwgc2NvcmU6IDgxLjQgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgY291bnQ6IDEwNDIsIHNjb3JlOiA5MS4yIH0sCiAgICAgIHsgcHJvZHVjdDogJ1dhbG51dCBCcm93bmllJywgY291bnQ6IDk4OCwgc2NvcmU6IDc2LjkgfQogICAgXQogIH0sCiAgewogICAgLy8gcm93IGJ5IHJvdyBrZXktdmFsdWUKICAgIHNvdXJjZTogewogICAgICBwcm9kdWN0OiBbJ01hdGNoYSBMYXR0ZScsICdNaWxrIFRlYScsICdDaGVlc2UgQ29jb2EnLCAnV2FsbnV0IEJyb3duaWUnXSwKICAgICAgY291bnQ6IFs4MjMsIDIzNSwgMTA0MiwgOTg4XSwKICAgICAgc2NvcmU6IFs5NS44LCA4MS40LCA5MS4yLCA3Ni45XQogICAgfQogIH0KXTs\'" line-highlights="\'\'" />\n<h2 id="how-to-reference-several-datasets" tabindex="-1">How to Reference Several Datasets</h2>\n<p>ECharts support to define several datasets at the same moment. Series can assign the one to reference by <a href="https://echarts.apache.org/option.html##series.datasetIndex">series.datasetIndex</a>. For example:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIDFzdCBEYXRhc2V0CiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIDJuZCBEYXRhc2V0CiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIDNyZCBEYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICAvLyBVc2UgMm5kIGRhdGFzZXQKICAgICAgZGF0YXNldEluZGV4OiAyCiAgICB9LAogICAgewogICAgICAvLyBVc2UgMXN0IGRhdGFzZXQKICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<h2 id="series.data-in-echarts-3" tabindex="-1">series.data in ECharts 3</h2>\n<p>ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the <a href="https://echarts.apache.org/option.html##series.data">series.data</a>, then use <a href="https://echarts.apache.org/option.html##series.data">series.data</a> but not <code>dataset</code>.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>In fact, <a href="https://echarts.apache.org/option.html##series.data">series.data</a> is an important setting method which will always exist. Some special non-table format chart like <a href="https://echarts.apache.org/option.html##series-treemap">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph">graph</a> and <a href="https://echarts.apache.org/option.html##series-lines">lines</a> still cannot be edit in dataset, you still need to use <a href="https://echarts.apache.org/option.html##series.data">series.data</a>. In another way, for render huge amount of data (over a million), you need to use <a href="https://echarts.apache.org/api.html#echartsInstance.appendData">appendData</a> which is not supported by <code>dataset</code>.</p>\n<h2 id="others" tabindex="-1">Others</h2>\n<p>The following charts now support dataset:\n<code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.\nECharts will support more charts in the future.</p>\n<p>In the end, here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-link">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</p>\n',postPath:"en/concepts/dataset"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:o},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:s},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:g,draft:e},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:c},{title:"版本特性",dir:r,children:[{title:"ECharts 5 特性介绍",dir:I},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:C}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:b},{title:"数据集",dir:y},{title:"数据转换",dir:B},{title:"坐标系",dir:w,draft:e},{title:"坐标轴",dir:f},{title:"视觉映射",dir:i},{title:"图例",dir:G},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:X,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:H},{title:"极坐标系柱状图",dir:N,draft:e},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:x}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:D},{title:"南丁格尔图(玫瑰图)",dir:R}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:j}]}]},{title:k,dir:t,draft:e},{title:"跨平台方案",dir:E,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:K},{title:"数据下钻",dir:U,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:k,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:o},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:s},{title:"Import ECharts",dir:n},{title:"Resources",dir:g,draft:e},{title:"Inspiration",dir:l},{title:"Get Help",dir:c},{title:"What's New",dir:r,children:[{title:"ECharts 5 Features",dir:I},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:C}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:y},{title:"Data Transform",dir:B},{title:"Coordinate",dir:w,draft:e},{title:"Axis",dir:f},{title:"Visual Mapping",dir:i},{title:"Legend",dir:G},{title:"Event and Action",dir:Z}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:X,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:H},{title:"Bar Polar",dir:N,draft:e},{title:"Waterfall",dir:J}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:x}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:D},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:E,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:K},{title:"Drilldown",dir:U,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/concepts/dataset",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/concepts/event/index.html b/handbook/en/concepts/event/index.html
index af70d02..8800d84 100644
--- a/handbook/en/concepts/event/index.html
+++ b/handbook/en/concepts/event/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="event-and-action" tabindex="-1">Event and Action</h1> <p>Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.</p> <p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="event-and-action" tabindex="-1">Event and Action</h1> <p>Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.</p> <p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Print name in console</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'legendselectchanged'</a> triggered while changing the legend selected (please notice that <code>legendselected</code> won't be triggered in this situation), <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'datazoom'</a> triggered while zooming the data area.</p> <h2 id="handling-the-mouse-events" tabindex="-1">Handling the Mouse Events</h2> <p>ECharts support general mouse events: <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. This is an example of opening the search result page after clicking the bar chart.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Init the ECharts base on DOM</span>
@@ -315,7 +315,8 @@
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Click on blank. Do something.</span>
<span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></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/en/concepts/event.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,g,l,d,n,a,c,I,o,C,r,h,s,b,A,p,Z,m,G,B,y,u,W,w,X,Y,v,V,K,J,H,L,k,R,N,F,S,f,U,z,j,x,Q,T,M,E,O,D,P,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="event-and-action" tabindex="-1">Event and Action</h1>\n<p>Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.</p>\n<p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyBQcmludCBuYW1lIGluIGNvbnNvbGUKICBjb25zb2xlLmxvZyhwYXJhbXMubmFtZSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'legendselectchanged\'</a> triggered while changing the legend selected (please notice that <code>legendselected</code> won\'t be triggered in this situation), <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'datazoom\'</a> triggered while zooming the data area.</p>\n<h2 id="handling-the-mouse-events" tabindex="-1">Handling the Mouse Events</h2>\n<p>ECharts support general mouse events: <code>\'click\'</code>, <code>\'dblclick\'</code>, <code>\'mousedown\'</code>, <code>\'mousemove\'</code>, <code>\'mouseup\'</code>, <code>\'mouseover\'</code>, <code>\'mouseout\'</code>, <code>\'globalout\'</code>, <code>\'contextmenu\'</code>. This is an example of opening the search result page after clicking the bar chart.</p>\n<md-code-block lang="js" code="\'Ly8gSW5pdCB0aGUgRUNoYXJ0cyBiYXNlIG9uIERPTQp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCi8vIENvbmZpZwp2YXIgb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbCiAgICAgICdTaGlydCcsCiAgICAgICdXb29sIHN3ZWF0ZXInLAogICAgICAnQ2hpZmZvbiBzaGlydCcsCiAgICAgICdQYW50cycsCiAgICAgICdIaWdoLWhlZWxlZCBzaG9lcycsCiAgICAgICdzb2NrcycKICAgIF0KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1NhbGVzJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgICB9CiAgXQp9OwovLyBVc2UgdGhlIG9wdGlvbiBhbmQgZGF0YSB0byBkaXNwbGF5IHRoZSBjaGFydApteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwovLyBDbGljayBhbmQganVtcCB0byBCYWlkdSBzZWFyY2ggd2Vic2l0ZQpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKHBhcmFtcykgewogIHdpbmRvdy5vcGVuKAogICAgJ2h0dHBzOi8vd3d3Lmdvb2dsZS5jb20vc2VhcmNoP3E9JyArIGVuY29kZVVSSUNvbXBvbmVudChwYXJhbXMubmFtZSkKICApOwp9KTs\'" line-highlights="\'\'" />\n<p>All mouse events included <code>params</code> which contained the data of the object.</p>\n<p>Format:</p>\n<md-code-block lang="js" code="\'dHlwZSBFdmVudFBhcmFtcyA9IHsKICAvLyBUaGUgY29tcG9uZW50IG5hbWUgY2xpY2tlZCwKICAvLyBjb21wb25lbnQgdHlwZSwgY291bGQgYmUgJ3NlcmllcyfjgIEnbWFya0xpbmUn44CBJ21hcmtQb2ludCfjgIEndGltZUxpbmUnLCBldGMuLgogIGNvbXBvbmVudFR5cGU6IHN0cmluZywKICAvLyBzZXJpZXMgdHlwZSwgY291bGQgYmUgJ2xpbmUn44CBJ2JhcifjgIEncGllJywgZXRjLi4gV29ya3Mgd2hlbiBjb21wb25lbnRUeXBlIGlzICdzZXJpZXMnLgogIHNlcmllc1R5cGU6IHN0cmluZywKICAvLyB0aGUgaW5kZXggaW4gb3B0aW9uLnNlcmllcy4gV29ya3Mgd2hlbiBjb21wb25lbnRUeXBlIGlzICdzZXJpZXMnLgogIHNlcmllc0luZGV4OiBudW1iZXIsCiAgLy8gc2VyaWVzIG5hbWUsIHdvcmtzIHdoZW4gY29tcG9uZW50VHlwZSBpcyAnc2VyaWVzJy4KICBzZXJpZXNOYW1lOiBzdHJpbmcsCiAgLy8gbmFtZSBvZiBkYXRhIChjYXRlZ29yaWVzKS4KICBuYW1lOiBzdHJpbmcsCiAgLy8gdGhlIGluZGV4IGluICdkYXRhJyBhcnJheS4KICBkYXRhSW5kZXg6IG51bWJlciwKICAvLyBpbmNvbWluZyByYXcgZGF0YSBpdGVtCiAgZGF0YTogT2JqZWN0LAogIC8vIGNoYXJ0cyBsaWtlICdzYW5rZXknIGFuZCAnZ3JhcGgnIGluY2x1ZGVkIG5vZGVEYXRhIGFuZCBlZGdlRGF0YSBhcyB0aGUgc2FtZSB0aW1lLgogIC8vIGRhdGFUeXBlIGNhbiBiZSAnbm9kZScgb3IgJ2VkZ2UnLCBpbmRpY2F0ZXMgd2hldGhlciB0aGUgY3VycmVudCBjbGljayBpcyBvbiBub2RlIG9yIGVkZ2UuCiAgLy8gbW9zdCBvZiBjaGFydHMgaGF2ZSBvbmUga2luZCBvZiBkYXRhLCB0aGUgZGF0YVR5cGUgaXMgbWVhbmluZ2xlc3MKICBkYXRhVHlwZTogc3RyaW5nLAogIC8vIGluY29taW5nIGRhdGEgdmFsdWUKICB2YWx1ZTogbnVtYmVyIHwgQXJyYXksCiAgLy8gY29sb3Igb2YgdGhlIHNoYXBlLCB3b3JrcyB3aGVuIGNvbXBvbmVudFR5cGUgaXMgJ3NlcmllcycuCiAgY29sb3I6IHN0cmluZwp9Ow\'" line-highlights="\'\'" />\n<p>Identify where the mouse clicked.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdtYXJrUG9pbnQnKSB7CiAgICAvLyBDbGlja2VkIG9uIHRoZSBtYXJrUG9pbnQKICAgIGlmIChwYXJhbXMuc2VyaWVzSW5kZXggPT09IDUpIHsKICAgICAgLy8gY2xpY2tlZCBvbiB0aGUgbWFya1BvaW50IG9mIHRoZSBzZXJpZXMgd2l0aCBpbmRleCA9IDUKICAgIH0KICB9IGVsc2UgaWYgKHBhcmFtcy5jb21wb25lbnRUeXBlID09PSAnc2VyaWVzJykgewogICAgaWYgKHBhcmFtcy5zZXJpZXNUeXBlID09PSAnZ3JhcGgnKSB7CiAgICAgIGlmIChwYXJhbXMuZGF0YVR5cGUgPT09ICdlZGdlJykgewogICAgICAgIC8vIGNsaWNrZWQgYXQgdGhlIGVkZ2Ugb2YgZ3JhcGguCiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8gY2xpY2tlZCBhdCB0aGUgbm9kZSBvZiBncmFwaC4KICAgICAgfQogICAgfQogIH0KfSk7\'" line-highlights="\'\'" />\n<p>Use <code>query</code> to trigger callback of the specified component:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oZXZlbnROYW1lLCBxdWVyeSwgaGFuZGxlcik7\'" line-highlights="\'\'" />\n<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>\n<p>If it is <code>string</code>, the format can be <code>mainType</code> or <code>mainType.subType</code>, such as:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oJ2NsaWNrJywgJ3NlcmllcycsIGZ1bmN0aW9uICgpIHsuLi59KTsKY2hhcnQub24oJ2NsaWNrJywgJ3Nlcmllcy5saW5lJywgZnVuY3Rpb24gKCkgey4uLn0pOwpjaGFydC5vbignY2xpY2snLCAnZGF0YVpvb20nLCBmdW5jdGlvbiAoKSB7Li4ufSk7CmNoYXJ0Lm9uKCdjbGljaycsICd4QXhpcy5jYXRlZ29yeScsIGZ1bmN0aW9uICgpIHsuLi59KTs\'" line-highlights="\'\'" />\n<p>If it is <code>Object</code>, <code>query</code> can include more than one attribute:</p>\n<md-code-block lang="js" code="\'ewogICR7bWFpblR5cGV9SW5kZXg6IG51bWJlciAvLyBjb21wb25lbnQgaW5kZXgKICAke21haW5UeXBlfU5hbWU6IHN0cmluZyAvLyBjb21wb25lbnQgbmFtZQogICR7bWFpblR5cGV9SWQ6IHN0cmluZyAvLyBjb21wb25lbnQgaWQKICBkYXRhSW5kZXg6IG51bWJlciAvLyBkYXRhIGl0ZW0gaW5kZXgKICBuYW1lOiBzdHJpbmcgLy8gZGF0YSBpdGVtIG5hbWUKICBkYXRhVHlwZTogc3RyaW5nIC8vIGRhdGUgaXRlbSB0eXBlLCBzdWNoIGFzICdub2RlJywgJ2VkZ2UnCiAgZWxlbWVudDogc3RyaW5nIC8vIG5hbWUgb2YgZWxlbWVudCBpbiBjdXN0b20gc2VyaWVzLgp9\'" line-highlights="\'\'" />\n<p>Such as:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3V1dScKICAgICAgLy8gLi4uCiAgICB9CiAgXQp9KTsKY2hhcnQub24oJ21vdXNlb3ZlcicsIHsgc2VyaWVzTmFtZTogJ3V1dScgfSwgZnVuY3Rpb24oKSB7CiAgLy8gd2hlbiBlbGVtZW50cyBpbiBzZXJpZXMgbmFtZWQgJ3V1dScgdHJpZ2dlcmVkICdtb3VzZW92ZXInCn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyAuLi4KICAgICAgZGF0YTogWwogICAgICAgIHsgbmFtZTogJ3h4JywgdmFsdWU6IDEyMSB9LAogICAgICAgIHsgbmFtZTogJ3l5JywgdmFsdWU6IDMzIH0KICAgICAgXQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdtb3VzZW92ZXInLCB7IHNlcmllc0luZGV4OiAxLCBuYW1lOiAneHgnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHdoZW4gZGF0YSBuYW1lZCAneHgnIGluIHNlcmllcyBpbmRleCAxIHRyaWdnZXJlZCAnbW91c2VvdmVyJy4KfSk7\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2dyYXBoJywKICAgICAgbm9kZXM6IFsKICAgICAgICB7IG5hbWU6ICdhJywgdmFsdWU6IDEwIH0sCiAgICAgICAgeyBuYW1lOiAnYicsIHZhbHVlOiAyMCB9CiAgICAgIF0sCiAgICAgIGVkZ2VzOiBbeyBzb3VyY2U6IDAsIHRhcmdldDogMSB9XQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdub2RlJyB9LCBmdW5jdGlvbigpIHsKICAvLyBjYWxsIHRoaXMgbWV0aG9kIHdoaWxlIHRoZSBub2RlIG9mIGdyYXBoIHdhcyBjbGlja2VkLgp9KTsKY2hhcnQub24oJ2NsaWNrJywgeyBkYXRhVHlwZTogJ2VkZ2UnIH0sIGZ1bmN0aW9uKCkgewogIC8vIGNhbGwgdGhpcyBtZXRob2Qgd2hpbGUgdGhlIGVkZ2Ugb2YgZ3JhcGggd2FzIGNsaWNrZWQuCn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IHsKICAgIC8vIC4uLgogICAgdHlwZTogJ2N1c3RvbScsCiAgICByZW5kZXJJdGVtOiBmdW5jdGlvbihwYXJhbXMsIGFwaSkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICdncm91cCcsCiAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgIHsKICAgICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAgIG5hbWU6ICdteV9lbCcKICAgICAgICAgICAgLy8gLi4uCiAgICAgICAgICB9LAogICAgICAgICAgewogICAgICAgICAgICAvLyAuLi4KICAgICAgICAgIH0KICAgICAgICBdCiAgICAgIH07CiAgICB9LAogICAgZGF0YTogW1sxMiwgMzNdXQogIH0KfSk7CmNoYXJ0Lm9uKCdtb3VzZXVwJywgeyBlbGVtZW50OiAnbXlfZWwnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHdoZW4gZGF0YSBuYW1lZCAnbXlfZWwnIHRyaWdnZXJlZCAnbW91c2V1cCcuCn0pOw\'" line-highlights="\'\'" />\n<p>You can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJtYXMpIHsKICAkLmdldCgnZGV0YWlsP3E9JyArIHBhcmFtcy5uYW1lLCBmdW5jdGlvbihkZXRhaWwpIHsKICAgIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgICAgc2VyaWVzOiBbCiAgICAgICAgewogICAgICAgICAgbmFtZTogJ3BpZScsCiAgICAgICAgICAvLyB1c2luZyBwaWUgY2hhcnQgdG8gc2hvdyB0aGUgZGF0YSBkaXN0cmlidXRpb24gaW4gb25lIGNvbHVtbi4KICAgICAgICAgIGRhdGE6IFtkZXRhaWwuZGF0YV0KICAgICAgICB9CiAgICAgIF0KICAgIH0pOwogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="event-of-component-interaction" tabindex="-1">Event of Component Interaction</h2>\n<p>All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the <a href="https://echarts.apache.org//api.html#events">events</a> document.</p>\n<p>Here is an example of listening to legend event:</p>\n<md-code-block lang="js" code="\'Ly8gU2hvdy9oaWRlIHRoZSBsZWdlbmQgb25seSB0cmlnZ2VyIGxlZ2VuZHNlbGVjdGNoYW5nZWQgZXZlbnQKbXlDaGFydC5vbignbGVnZW5kc2VsZWN0Y2hhbmdlZCcsIGZ1bmN0aW9uKHBhcmFtcykgewogIC8vIFN0YXRlIGlmIGxlZ2VuZCBpcyBzZWxlY3RlZC4KICB2YXIgaXNTZWxlY3RlZCA9IHBhcmFtcy5zZWxlY3RlZFtwYXJhbXMubmFtZV07CiAgLy8gcHJpbnQgaW4gdGhlIGNvbnNvbGUuCiAgY29uc29sZS5sb2coCiAgICAoaXNTZWxlY3RlZCA_ICdTZWxlY3RlZCcgOiAnTm90IFNlbGVjdGVkJykgKyAnbGVnZW5kJyArIHBhcmFtcy5uYW1lCiAgKTsKICAvLyBwcmludCBmb3IgYWxsIGxlZ2VuZHMuCiAgY29uc29sZS5sb2cocGFyYW1zLnNlbGVjdGVkKTsKfSk7\'" line-highlights="\'\'" />\n<h2 id="writing-code-to-trigger-component-action-manually" tabindex="-1">Writing Code to Trigger Component Action Manually</h2>\n<p>You can trigger events such as <code>\'legendselectchanged\'</code> not only by the user but also with code manually. It can be used to display the tooltip, select the legend.</p>\n<p>In ECharts <code>myChart.dispatchAction({ type: \'\' })</code> is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.</p>\n<p>Commonly used behavior and corresponding parameters are listed in <a href="https://echarts.apache.org//api.html#action">action</a>.</p>\n<p>The following example shows how to highlight each sector one by one in the pie chart using <code>dispatchAction</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdpdGVtJywKICAgIGZvcm1hdHRlcjogJ3thfSA8YnIvPntifSA6IHtjfSAoe2R9JSknCiAgfSwKICBsZWdlbmQ6IHsKICAgIG9yaWVudDogJ3ZlcnRpY2FsJywKICAgIGxlZnQ6ICdsZWZ0JywKICAgIGRhdGE6IFsKICAgICAgJ0RpcmVjdCBBY2Nlc3MnLAogICAgICAnRW1haWwgTWFya2V0aW5nJywKICAgICAgJ0FmZmlsaWF0ZSBBZHMnLAogICAgICAnVmlkZW8gQWRzJywKICAgICAgJ1NlYXJjaCBFbmdpbmVzJwogICAgXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdBY2Nlc3MgU291cmNlJywKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogJzU1JScsCiAgICAgIGNlbnRlcjogWyc1MCUnLCAnNjAlJ10sCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdEaXJlY3QgQWNjZXNzJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ0VtYWlsIE1hcmtldGluZycgfSwKICAgICAgICB7IHZhbHVlOiAyMzQsIG5hbWU6ICdBZmZpbGlhdGUgQWRzJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ1ZpZGVvIEFkcycgfSwKICAgICAgICB7IHZhbHVlOiAxNTQ4LCBuYW1lOiAnU2VhcmNoIEVuZ2luZXMnIH0KICAgICAgXSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBpdGVtU3R5bGU6IHsKICAgICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgICAgc2hhZG93T2Zmc2V0WDogMCwKICAgICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgwLCAwLCAwLCAwLjUpJwogICAgICAgIH0KICAgICAgfQogICAgfQogIF0KfTsKCmxldCBjdXJyZW50SW5kZXggPSAtMTsKCnNldEludGVydmFsKGZ1bmN0aW9uKCkgewogIHZhciBkYXRhTGVuID0gb3B0aW9uLnNlcmllc1swXS5kYXRhLmxlbmd0aDsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdkb3ducGxheScsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogY3VycmVudEluZGV4CiAgfSk7CiAgY3VycmVudEluZGV4ID0gKGN1cnJlbnRJbmRleCArIDEpICUgZGF0YUxlbjsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdoaWdobGlnaHQnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwp9LCAxMDAwKTs\'" v-bind="{}" />\n<h2 id="listen-to-events-on-the-blank-area" tabindex="-1">Listen to Events on the Blank Area</h2>\n<p>Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.</p>\n<p>Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gVGhpcyBsaXN0ZW5lciBpcyBsaXN0ZW5pbmcgdG8gYSBgenJlbmRlciBldmVudGAuCn0pOwpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gVGhpcyBsaXN0ZW5lciBpcyBsaXN0ZW5pbmcgdG8gYSBgZWNoYXJ0cyBldmVudGAuCn0pOw\'" line-highlights="\'\'" />\n<p>zrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.</p>\n<p>Having zrender events, we can implement listen to events from the blank as follows:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gTm8gInRhcmdldCIgbWVhbnMgdGhhdCBtb3VzZS9wb2ludGVyIGlzIG5vdCBvbgogIC8vIGFueSBvZiB0aGUgZ3JhcGhpYyBlbGVtZW50cywgd2hpY2ggaXMgImJsYW5rIi4KICBpZiAoIWV2ZW50LnRhcmdldCkgewogICAgLy8gQ2xpY2sgb24gYmxhbmsuIERvIHNvbWV0aGluZy4KICB9Cn0pOw\'" line-highlights="\'\'" />\n',postPath:"en/concepts/event"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:c,draft:e},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:o},{title:"版本特性",dir:C,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:s}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:p,draft:e},{title:"系列",dir:Z,draft:e},{title:"样式",dir:m},{title:"数据集",dir:G},{title:"数据转换",dir:B},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:u},{title:"视觉映射",dir:i},{title:"图例",dir:W},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:Y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:V},{title:"动态排序柱状图",dir:K},{title:"极坐标系柱状图",dir:J,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:R},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:S}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:f},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:x}]}]},{title:Q,dir:t,draft:e},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:E,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:D,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:Q,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:a},{title:"Resources",dir:c,draft:e},{title:"Inspiration",dir:I},{title:"Get Help",dir:o},{title:"What's New",dir:C,children:[{title:"ECharts 5 Features",dir:r},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:s}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:p,draft:e},{title:"Series",dir:Z,draft:e},{title:"Style",dir:m},{title:"Dataset",dir:G},{title:"Data Transform",dir:B},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:u},{title:"Visual Mapping",dir:i},{title:"Legend",dir:W},{title:"Event and Action",dir:w}]},{title:"How To Guides",dir:X,children:[{title:"Common Charts",dir:Y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:V},{title:"Bar Racing",dir:K},{title:"Bar Polar",dir:J,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:R},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:S}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:f},{title:"Ring Style",dir:U},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:x}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:E,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:D,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/concepts/event",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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></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/en/concepts/event.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,g,l,d,n,a,c,I,o,C,r,h,s,b,A,p,Z,m,G,B,y,u,W,w,X,Y,v,V,K,J,H,L,k,R,N,F,S,f,U,z,j,x,Q,T,M,E,O,D,P,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="event-and-action" tabindex="-1">Event and Action</h1>\n<p>Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.</p>\n<p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyBQcmludCBuYW1lIGluIGNvbnNvbGUKICBjb25zb2xlLmxvZyhwYXJhbXMubmFtZSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'legendselectchanged\'</a> triggered while changing the legend selected (please notice that <code>legendselected</code> won\'t be triggered in this situation), <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'datazoom\'</a> triggered while zooming the data area.</p>\n<h2 id="handling-the-mouse-events" tabindex="-1">Handling the Mouse Events</h2>\n<p>ECharts support general mouse events: <code>\'click\'</code>, <code>\'dblclick\'</code>, <code>\'mousedown\'</code>, <code>\'mousemove\'</code>, <code>\'mouseup\'</code>, <code>\'mouseover\'</code>, <code>\'mouseout\'</code>, <code>\'globalout\'</code>, <code>\'contextmenu\'</code>. This is an example of opening the search result page after clicking the bar chart.</p>\n<md-code-block lang="js" code="\'Ly8gSW5pdCB0aGUgRUNoYXJ0cyBiYXNlIG9uIERPTQp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCi8vIENvbmZpZwp2YXIgb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbCiAgICAgICdTaGlydCcsCiAgICAgICdXb29sIHN3ZWF0ZXInLAogICAgICAnQ2hpZmZvbiBzaGlydCcsCiAgICAgICdQYW50cycsCiAgICAgICdIaWdoLWhlZWxlZCBzaG9lcycsCiAgICAgICdzb2NrcycKICAgIF0KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1NhbGVzJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgICB9CiAgXQp9OwovLyBVc2UgdGhlIG9wdGlvbiBhbmQgZGF0YSB0byBkaXNwbGF5IHRoZSBjaGFydApteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwovLyBDbGljayBhbmQganVtcCB0byBCYWlkdSBzZWFyY2ggd2Vic2l0ZQpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKHBhcmFtcykgewogIHdpbmRvdy5vcGVuKAogICAgJ2h0dHBzOi8vd3d3Lmdvb2dsZS5jb20vc2VhcmNoP3E9JyArIGVuY29kZVVSSUNvbXBvbmVudChwYXJhbXMubmFtZSkKICApOwp9KTs\'" line-highlights="\'\'" />\n<p>All mouse events included <code>params</code> which contained the data of the object.</p>\n<p>Format:</p>\n<md-code-block lang="js" code="\'dHlwZSBFdmVudFBhcmFtcyA9IHsKICAvLyBUaGUgY29tcG9uZW50IG5hbWUgY2xpY2tlZCwKICAvLyBjb21wb25lbnQgdHlwZSwgY291bGQgYmUgJ3NlcmllcyfjgIEnbWFya0xpbmUn44CBJ21hcmtQb2ludCfjgIEndGltZUxpbmUnLCBldGMuLgogIGNvbXBvbmVudFR5cGU6IHN0cmluZywKICAvLyBzZXJpZXMgdHlwZSwgY291bGQgYmUgJ2xpbmUn44CBJ2JhcifjgIEncGllJywgZXRjLi4gV29ya3Mgd2hlbiBjb21wb25lbnRUeXBlIGlzICdzZXJpZXMnLgogIHNlcmllc1R5cGU6IHN0cmluZywKICAvLyB0aGUgaW5kZXggaW4gb3B0aW9uLnNlcmllcy4gV29ya3Mgd2hlbiBjb21wb25lbnRUeXBlIGlzICdzZXJpZXMnLgogIHNlcmllc0luZGV4OiBudW1iZXIsCiAgLy8gc2VyaWVzIG5hbWUsIHdvcmtzIHdoZW4gY29tcG9uZW50VHlwZSBpcyAnc2VyaWVzJy4KICBzZXJpZXNOYW1lOiBzdHJpbmcsCiAgLy8gbmFtZSBvZiBkYXRhIChjYXRlZ29yaWVzKS4KICBuYW1lOiBzdHJpbmcsCiAgLy8gdGhlIGluZGV4IGluICdkYXRhJyBhcnJheS4KICBkYXRhSW5kZXg6IG51bWJlciwKICAvLyBpbmNvbWluZyByYXcgZGF0YSBpdGVtCiAgZGF0YTogT2JqZWN0LAogIC8vIGNoYXJ0cyBsaWtlICdzYW5rZXknIGFuZCAnZ3JhcGgnIGluY2x1ZGVkIG5vZGVEYXRhIGFuZCBlZGdlRGF0YSBhcyB0aGUgc2FtZSB0aW1lLgogIC8vIGRhdGFUeXBlIGNhbiBiZSAnbm9kZScgb3IgJ2VkZ2UnLCBpbmRpY2F0ZXMgd2hldGhlciB0aGUgY3VycmVudCBjbGljayBpcyBvbiBub2RlIG9yIGVkZ2UuCiAgLy8gbW9zdCBvZiBjaGFydHMgaGF2ZSBvbmUga2luZCBvZiBkYXRhLCB0aGUgZGF0YVR5cGUgaXMgbWVhbmluZ2xlc3MKICBkYXRhVHlwZTogc3RyaW5nLAogIC8vIGluY29taW5nIGRhdGEgdmFsdWUKICB2YWx1ZTogbnVtYmVyIHwgQXJyYXksCiAgLy8gY29sb3Igb2YgdGhlIHNoYXBlLCB3b3JrcyB3aGVuIGNvbXBvbmVudFR5cGUgaXMgJ3NlcmllcycuCiAgY29sb3I6IHN0cmluZwp9Ow\'" line-highlights="\'\'" />\n<p>Identify where the mouse clicked.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdtYXJrUG9pbnQnKSB7CiAgICAvLyBDbGlja2VkIG9uIHRoZSBtYXJrUG9pbnQKICAgIGlmIChwYXJhbXMuc2VyaWVzSW5kZXggPT09IDUpIHsKICAgICAgLy8gY2xpY2tlZCBvbiB0aGUgbWFya1BvaW50IG9mIHRoZSBzZXJpZXMgd2l0aCBpbmRleCA9IDUKICAgIH0KICB9IGVsc2UgaWYgKHBhcmFtcy5jb21wb25lbnRUeXBlID09PSAnc2VyaWVzJykgewogICAgaWYgKHBhcmFtcy5zZXJpZXNUeXBlID09PSAnZ3JhcGgnKSB7CiAgICAgIGlmIChwYXJhbXMuZGF0YVR5cGUgPT09ICdlZGdlJykgewogICAgICAgIC8vIGNsaWNrZWQgYXQgdGhlIGVkZ2Ugb2YgZ3JhcGguCiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8gY2xpY2tlZCBhdCB0aGUgbm9kZSBvZiBncmFwaC4KICAgICAgfQogICAgfQogIH0KfSk7\'" line-highlights="\'\'" />\n<p>Use <code>query</code> to trigger callback of the specified component:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oZXZlbnROYW1lLCBxdWVyeSwgaGFuZGxlcik7\'" line-highlights="\'\'" />\n<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>\n<p>If it is <code>string</code>, the format can be <code>mainType</code> or <code>mainType.subType</code>, such as:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oJ2NsaWNrJywgJ3NlcmllcycsIGZ1bmN0aW9uICgpIHsuLi59KTsKY2hhcnQub24oJ2NsaWNrJywgJ3Nlcmllcy5saW5lJywgZnVuY3Rpb24gKCkgey4uLn0pOwpjaGFydC5vbignY2xpY2snLCAnZGF0YVpvb20nLCBmdW5jdGlvbiAoKSB7Li4ufSk7CmNoYXJ0Lm9uKCdjbGljaycsICd4QXhpcy5jYXRlZ29yeScsIGZ1bmN0aW9uICgpIHsuLi59KTs\'" line-highlights="\'\'" />\n<p>If it is <code>Object</code>, <code>query</code> can include more than one attribute:</p>\n<md-code-block lang="js" code="\'ewogICR7bWFpblR5cGV9SW5kZXg6IG51bWJlciAvLyBjb21wb25lbnQgaW5kZXgKICAke21haW5UeXBlfU5hbWU6IHN0cmluZyAvLyBjb21wb25lbnQgbmFtZQogICR7bWFpblR5cGV9SWQ6IHN0cmluZyAvLyBjb21wb25lbnQgaWQKICBkYXRhSW5kZXg6IG51bWJlciAvLyBkYXRhIGl0ZW0gaW5kZXgKICBuYW1lOiBzdHJpbmcgLy8gZGF0YSBpdGVtIG5hbWUKICBkYXRhVHlwZTogc3RyaW5nIC8vIGRhdGUgaXRlbSB0eXBlLCBzdWNoIGFzICdub2RlJywgJ2VkZ2UnCiAgZWxlbWVudDogc3RyaW5nIC8vIG5hbWUgb2YgZWxlbWVudCBpbiBjdXN0b20gc2VyaWVzLgp9\'" line-highlights="\'\'" />\n<p>Such as:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3V1dScKICAgICAgLy8gLi4uCiAgICB9CiAgXQp9KTsKY2hhcnQub24oJ21vdXNlb3ZlcicsIHsgc2VyaWVzTmFtZTogJ3V1dScgfSwgZnVuY3Rpb24oKSB7CiAgLy8gd2hlbiBlbGVtZW50cyBpbiBzZXJpZXMgbmFtZWQgJ3V1dScgdHJpZ2dlcmVkICdtb3VzZW92ZXInCn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyAuLi4KICAgICAgZGF0YTogWwogICAgICAgIHsgbmFtZTogJ3h4JywgdmFsdWU6IDEyMSB9LAogICAgICAgIHsgbmFtZTogJ3l5JywgdmFsdWU6IDMzIH0KICAgICAgXQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdtb3VzZW92ZXInLCB7IHNlcmllc0luZGV4OiAxLCBuYW1lOiAneHgnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHdoZW4gZGF0YSBuYW1lZCAneHgnIGluIHNlcmllcyBpbmRleCAxIHRyaWdnZXJlZCAnbW91c2VvdmVyJy4KfSk7\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2dyYXBoJywKICAgICAgbm9kZXM6IFsKICAgICAgICB7IG5hbWU6ICdhJywgdmFsdWU6IDEwIH0sCiAgICAgICAgeyBuYW1lOiAnYicsIHZhbHVlOiAyMCB9CiAgICAgIF0sCiAgICAgIGVkZ2VzOiBbeyBzb3VyY2U6IDAsIHRhcmdldDogMSB9XQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdub2RlJyB9LCBmdW5jdGlvbigpIHsKICAvLyBjYWxsIHRoaXMgbWV0aG9kIHdoaWxlIHRoZSBub2RlIG9mIGdyYXBoIHdhcyBjbGlja2VkLgp9KTsKY2hhcnQub24oJ2NsaWNrJywgeyBkYXRhVHlwZTogJ2VkZ2UnIH0sIGZ1bmN0aW9uKCkgewogIC8vIGNhbGwgdGhpcyBtZXRob2Qgd2hpbGUgdGhlIGVkZ2Ugb2YgZ3JhcGggd2FzIGNsaWNrZWQuCn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IHsKICAgIC8vIC4uLgogICAgdHlwZTogJ2N1c3RvbScsCiAgICByZW5kZXJJdGVtOiBmdW5jdGlvbihwYXJhbXMsIGFwaSkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICdncm91cCcsCiAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgIHsKICAgICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAgIG5hbWU6ICdteV9lbCcKICAgICAgICAgICAgLy8gLi4uCiAgICAgICAgICB9LAogICAgICAgICAgewogICAgICAgICAgICAvLyAuLi4KICAgICAgICAgIH0KICAgICAgICBdCiAgICAgIH07CiAgICB9LAogICAgZGF0YTogW1sxMiwgMzNdXQogIH0KfSk7CmNoYXJ0Lm9uKCdtb3VzZXVwJywgeyBlbGVtZW50OiAnbXlfZWwnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHdoZW4gZGF0YSBuYW1lZCAnbXlfZWwnIHRyaWdnZXJlZCAnbW91c2V1cCcuCn0pOw\'" line-highlights="\'\'" />\n<p>You can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJtYXMpIHsKICAkLmdldCgnZGV0YWlsP3E9JyArIHBhcmFtcy5uYW1lLCBmdW5jdGlvbihkZXRhaWwpIHsKICAgIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgICAgc2VyaWVzOiBbCiAgICAgICAgewogICAgICAgICAgbmFtZTogJ3BpZScsCiAgICAgICAgICAvLyB1c2luZyBwaWUgY2hhcnQgdG8gc2hvdyB0aGUgZGF0YSBkaXN0cmlidXRpb24gaW4gb25lIGNvbHVtbi4KICAgICAgICAgIGRhdGE6IFtkZXRhaWwuZGF0YV0KICAgICAgICB9CiAgICAgIF0KICAgIH0pOwogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="event-of-component-interaction" tabindex="-1">Event of Component Interaction</h2>\n<p>All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the <a href="https://echarts.apache.org//api.html#events">events</a> document.</p>\n<p>Here is an example of listening to legend event:</p>\n<md-code-block lang="js" code="\'Ly8gU2hvdy9oaWRlIHRoZSBsZWdlbmQgb25seSB0cmlnZ2VyIGxlZ2VuZHNlbGVjdGNoYW5nZWQgZXZlbnQKbXlDaGFydC5vbignbGVnZW5kc2VsZWN0Y2hhbmdlZCcsIGZ1bmN0aW9uKHBhcmFtcykgewogIC8vIFN0YXRlIGlmIGxlZ2VuZCBpcyBzZWxlY3RlZC4KICB2YXIgaXNTZWxlY3RlZCA9IHBhcmFtcy5zZWxlY3RlZFtwYXJhbXMubmFtZV07CiAgLy8gcHJpbnQgaW4gdGhlIGNvbnNvbGUuCiAgY29uc29sZS5sb2coCiAgICAoaXNTZWxlY3RlZCA_ICdTZWxlY3RlZCcgOiAnTm90IFNlbGVjdGVkJykgKyAnbGVnZW5kJyArIHBhcmFtcy5uYW1lCiAgKTsKICAvLyBwcmludCBmb3IgYWxsIGxlZ2VuZHMuCiAgY29uc29sZS5sb2cocGFyYW1zLnNlbGVjdGVkKTsKfSk7\'" line-highlights="\'\'" />\n<h2 id="writing-code-to-trigger-component-action-manually" tabindex="-1">Writing Code to Trigger Component Action Manually</h2>\n<p>You can trigger events such as <code>\'legendselectchanged\'</code> not only by the user but also with code manually. It can be used to display the tooltip, select the legend.</p>\n<p>In ECharts <code>myChart.dispatchAction({ type: \'\' })</code> is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.</p>\n<p>Commonly used behavior and corresponding parameters are listed in <a href="https://echarts.apache.org//api.html#action">action</a>.</p>\n<p>The following example shows how to highlight each sector one by one in the pie chart using <code>dispatchAction</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdpdGVtJywKICAgIGZvcm1hdHRlcjogJ3thfSA8YnIvPntifSA6IHtjfSAoe2R9JSknCiAgfSwKICBsZWdlbmQ6IHsKICAgIG9yaWVudDogJ3ZlcnRpY2FsJywKICAgIGxlZnQ6ICdsZWZ0JywKICAgIGRhdGE6IFsKICAgICAgJ0RpcmVjdCBBY2Nlc3MnLAogICAgICAnRW1haWwgTWFya2V0aW5nJywKICAgICAgJ0FmZmlsaWF0ZSBBZHMnLAogICAgICAnVmlkZW8gQWRzJywKICAgICAgJ1NlYXJjaCBFbmdpbmVzJwogICAgXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdBY2Nlc3MgU291cmNlJywKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogJzU1JScsCiAgICAgIGNlbnRlcjogWyc1MCUnLCAnNjAlJ10sCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdEaXJlY3QgQWNjZXNzJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ0VtYWlsIE1hcmtldGluZycgfSwKICAgICAgICB7IHZhbHVlOiAyMzQsIG5hbWU6ICdBZmZpbGlhdGUgQWRzJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ1ZpZGVvIEFkcycgfSwKICAgICAgICB7IHZhbHVlOiAxNTQ4LCBuYW1lOiAnU2VhcmNoIEVuZ2luZXMnIH0KICAgICAgXSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBpdGVtU3R5bGU6IHsKICAgICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgICAgc2hhZG93T2Zmc2V0WDogMCwKICAgICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgwLCAwLCAwLCAwLjUpJwogICAgICAgIH0KICAgICAgfQogICAgfQogIF0KfTsKCmxldCBjdXJyZW50SW5kZXggPSAtMTsKCnNldEludGVydmFsKGZ1bmN0aW9uKCkgewogIHZhciBkYXRhTGVuID0gb3B0aW9uLnNlcmllc1swXS5kYXRhLmxlbmd0aDsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdkb3ducGxheScsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogY3VycmVudEluZGV4CiAgfSk7CiAgY3VycmVudEluZGV4ID0gKGN1cnJlbnRJbmRleCArIDEpICUgZGF0YUxlbjsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdoaWdobGlnaHQnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwp9LCAxMDAwKTs\'" v-bind="{}" />\n<h2 id="listen-to-events-on-the-blank-area" tabindex="-1">Listen to Events on the Blank Area</h2>\n<p>Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.</p>\n<p>Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gVGhpcyBsaXN0ZW5lciBpcyBsaXN0ZW5pbmcgdG8gYSBgenJlbmRlciBldmVudGAuCn0pOwpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gVGhpcyBsaXN0ZW5lciBpcyBsaXN0ZW5pbmcgdG8gYSBgZWNoYXJ0cyBldmVudGAuCn0pOw\'" line-highlights="\'\'" />\n<p>zrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.</p>\n<p>Having zrender events, we can implement listen to events from the blank as follows:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gTm8gInRhcmdldCIgbWVhbnMgdGhhdCBtb3VzZS9wb2ludGVyIGlzIG5vdCBvbgogIC8vIGFueSBvZiB0aGUgZ3JhcGhpYyBlbGVtZW50cywgd2hpY2ggaXMgImJsYW5rIi4KICBpZiAoIWV2ZW50LnRhcmdldCkgewogICAgLy8gQ2xpY2sgb24gYmxhbmsuIERvIHNvbWV0aGluZy4KICB9Cn0pOw\'" line-highlights="\'\'" />\n',postPath:"en/concepts/event"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:c,draft:e},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:o},{title:"版本特性",dir:C,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:s}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:p,draft:e},{title:"系列",dir:Z,draft:e},{title:"样式",dir:m},{title:"数据集",dir:G},{title:"数据转换",dir:B},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:u},{title:"视觉映射",dir:i},{title:"图例",dir:W},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:Y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:V},{title:"动态排序柱状图",dir:K},{title:"极坐标系柱状图",dir:J,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:R},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:S}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:f},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:x}]}]},{title:Q,dir:t,draft:e},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:E,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:D,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:Q,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:a},{title:"Resources",dir:c,draft:e},{title:"Inspiration",dir:I},{title:"Get Help",dir:o},{title:"What's New",dir:C,children:[{title:"ECharts 5 Features",dir:r},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:s}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:p,draft:e},{title:"Series",dir:Z,draft:e},{title:"Style",dir:m},{title:"Dataset",dir:G},{title:"Data Transform",dir:B},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:u},{title:"Visual Mapping",dir:i},{title:"Legend",dir:W},{title:"Event and Action",dir:w}]},{title:"How To Guides",dir:X,children:[{title:"Common Charts",dir:Y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:V},{title:"Bar Racing",dir:K},{title:"Bar Polar",dir:J,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:R},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:S}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:f},{title:"Ring Style",dir:U},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:x}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:E,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:D,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/concepts/event",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/concepts/legend/index.html b/handbook/en/concepts/legend/index.html
index 10fb424..5eed360 100644
--- a/handbook/en/concepts/legend/index.html
+++ b/handbook/en/concepts/legend/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="legend" tabindex="-1">Legend</h1> <p>Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart.</p> <h2 id="layout" tabindex="-1">Layout</h2> <p>Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="legend" tabindex="-1">Legend</h1> <p>Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart.</p> <h2 id="layout" tabindex="-1">Layout</h2> <p>Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
legend: {
// Try 'horizontal'
orient: 'vertical',
@@ -118,7 +118,8 @@
<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></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>While there is only one kind of data in the chart, use the chart title rather than the legend to explain it.</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/en/concepts/legend.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/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,d,r,l,a,g,n,o,s,c,h,C,I,A,p,u,b,m,w,y,f,Z,L,B,W,v,G,J,V,Q,D,M,x,S,k,H,K,N,T,E,j,Y,F,O,X,z,P,U,R,_,q,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="legend" tabindex="-1">Legend</h1>\n<p>Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart.</p>\n<h2 id="layout" tabindex="-1">Layout</h2>\n<p>Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgLy8gVHJ5ICdob3Jpem9udGFsJwogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgcmlnaHQ6IDEwLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDE1JywgJzIwMTYnLCAnMjAxNyddLAogICAgICBbJ01hdGNoYSBMYXR0ZScsIDQzLjMsIDg1LjgsIDkzLjddLAogICAgICBbJ01pbGsgVGVhJywgODMuMSwgNzMuNCwgNTUuMV0sCiAgICAgIFsnQ2hlZXNlIENvY29hJywgODYuNCwgNjUuMiwgODIuNV0sCiAgICAgIFsnV2FsbnV0IEJyb3duaWUnLCA3Mi40LCA1My45LCAzOS4xXQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>Use scrollable control if there are many legends.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgdHlwZTogJ3Njcm9sbCcsCiAgICBvcmllbnQ6ICd2ZXJ0aWNhbCcsCiAgICByaWdodDogMTAsCiAgICB0b3A6IDIwLAogICAgYm90dG9tOiAyMCwKICAgIGRhdGE6IFsnTGVnZW5kIEEnLCAnTGVnZW5kIEInLCAnTGVnZW5kIEMnIC8qIC4uLiAqLywgLCAnTGVnZW5kIHgnXQogICAgLy8gLi4uCiAgfQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<h2 id="style" tabindex="-1">Style</h2>\n<p>For dark color background, use a light color for the background layer and text while changing the background to translucent.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWydMZWdlbmQgQScsICdMZWdlbmQgQicsICdMZWdlbmQgQyddLAogICAgYmFja2dyb3VuZENvbG9yOiAnI2NjYycsCiAgICB0ZXh0U3R5bGU6IHsKICAgICAgY29sb3I6ICcjY2NjJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p>The color of legend has many ways to design. For different charts, the legend style can be different.</p>\n<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWydMZWdlbmQgQScsICdMZWdlbmQgQicsICdMZWdlbmQgQyddLAogICAgaWNvbjogJ3JlY3QnCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="interactive" tabindex="-1">Interactive</h2>\n<p>Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWydMZWdlbmQgQScsICdMZWdlbmQgQicsICdMZWdlbmQgQyddLAogICAgc2VsZWN0ZWQ6IHsKICAgICAgJ0xlZ2VuZCBBJzogdHJ1ZSwKICAgICAgJ0xlZ2VuZCBCJzogdHJ1ZSwKICAgICAgJ0xlZ2VuZCBDJzogZmFsc2UKICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="tips" tabindex="-1">Tips</h2>\n<p>The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWwogICAgICB7CiAgICAgICAgbmFtZTogJ0xlZ2VuZCBBJywKICAgICAgICBpY29uOiAncmVjdCcKICAgICAgfSwKICAgICAgewogICAgICAgIG5hbWU6ICdMZWdlbmQgQicsCiAgICAgICAgaWNvbjogJ2NpcmNsZScKICAgICAgfSwKICAgICAgewogICAgICAgIG5hbWU6ICdMZWdlbmQgQycsCiAgICAgICAgaWNvbjogJ3BpbicKICAgICAgfQogICAgXQogICAgLy8gIC4uLgogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdMZWdlbmQgQScKICAgICAgLy8gIC4uLgogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ0xlZ2VuZCBCJwogICAgICAvLyAgLi4uCiAgICB9LAogICAgewogICAgICBuYW1lOiAnTGVnZW5kIEMnCiAgICAgIC8vICAuLi4KICAgIH0KICBdCiAgLy8gIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>While there is only one kind of data in the chart, use the chart title rather than the legend to explain it.</p>\n',postPath:"en/concepts/legend"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:m},{title:"数据集",dir:w},{title:"数据转换",dir:y},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:i},{title:"图例",dir:L},{title:"事件与行为",dir:B}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:J},{title:"动态排序柱状图",dir:V},{title:"极坐标系柱状图",dir:Q,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:M,children:[{title:"基础折线图",dir:x},{title:"堆叠折线图",dir:S},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:T},{title:"南丁格尔图(玫瑰图)",dir:E}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:Y}]}]},{title:F,dir:e,draft:t},{title:"跨平台方案",dir:O,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:z,children:[{title:"动态的异步数据",dir:P},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:R}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:g},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:h},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:m},{title:"Dataset",dir:w},{title:"Data Transform",dir:y},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:i},{title:"Legend",dir:L},{title:"Event and Action",dir:B}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:J},{title:"Bar Racing",dir:V},{title:"Bar Polar",dir:Q,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:M,children:[{title:"Basic Line",dir:x},{title:"Stacked Line",dir:S},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:T},{title:"Rose Style",dir:E}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:O,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:z,children:[{title:"Dynamic Data",dir:P},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:R}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/concepts/legend",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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>While there is only one kind of data in the chart, use the chart title rather than the legend to explain it.</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/en/concepts/legend.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/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,d,r,l,a,g,n,o,s,c,h,C,I,A,p,u,b,m,w,y,f,Z,L,B,W,v,G,J,V,Q,D,M,x,S,k,H,K,N,T,E,j,Y,F,O,X,z,P,U,R,_,q,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="legend" tabindex="-1">Legend</h1>\n<p>Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart.</p>\n<h2 id="layout" tabindex="-1">Layout</h2>\n<p>Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgLy8gVHJ5ICdob3Jpem9udGFsJwogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgcmlnaHQ6IDEwLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDE1JywgJzIwMTYnLCAnMjAxNyddLAogICAgICBbJ01hdGNoYSBMYXR0ZScsIDQzLjMsIDg1LjgsIDkzLjddLAogICAgICBbJ01pbGsgVGVhJywgODMuMSwgNzMuNCwgNTUuMV0sCiAgICAgIFsnQ2hlZXNlIENvY29hJywgODYuNCwgNjUuMiwgODIuNV0sCiAgICAgIFsnV2FsbnV0IEJyb3duaWUnLCA3Mi40LCA1My45LCAzOS4xXQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>Use scrollable control if there are many legends.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgdHlwZTogJ3Njcm9sbCcsCiAgICBvcmllbnQ6ICd2ZXJ0aWNhbCcsCiAgICByaWdodDogMTAsCiAgICB0b3A6IDIwLAogICAgYm90dG9tOiAyMCwKICAgIGRhdGE6IFsnTGVnZW5kIEEnLCAnTGVnZW5kIEInLCAnTGVnZW5kIEMnIC8qIC4uLiAqLywgLCAnTGVnZW5kIHgnXQogICAgLy8gLi4uCiAgfQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<h2 id="style" tabindex="-1">Style</h2>\n<p>For dark color background, use a light color for the background layer and text while changing the background to translucent.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWydMZWdlbmQgQScsICdMZWdlbmQgQicsICdMZWdlbmQgQyddLAogICAgYmFja2dyb3VuZENvbG9yOiAnI2NjYycsCiAgICB0ZXh0U3R5bGU6IHsKICAgICAgY29sb3I6ICcjY2NjJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p>The color of legend has many ways to design. For different charts, the legend style can be different.</p>\n<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWydMZWdlbmQgQScsICdMZWdlbmQgQicsICdMZWdlbmQgQyddLAogICAgaWNvbjogJ3JlY3QnCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="interactive" tabindex="-1">Interactive</h2>\n<p>Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWydMZWdlbmQgQScsICdMZWdlbmQgQicsICdMZWdlbmQgQyddLAogICAgc2VsZWN0ZWQ6IHsKICAgICAgJ0xlZ2VuZCBBJzogdHJ1ZSwKICAgICAgJ0xlZ2VuZCBCJzogdHJ1ZSwKICAgICAgJ0xlZ2VuZCBDJzogZmFsc2UKICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="tips" tabindex="-1">Tips</h2>\n<p>The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWwogICAgICB7CiAgICAgICAgbmFtZTogJ0xlZ2VuZCBBJywKICAgICAgICBpY29uOiAncmVjdCcKICAgICAgfSwKICAgICAgewogICAgICAgIG5hbWU6ICdMZWdlbmQgQicsCiAgICAgICAgaWNvbjogJ2NpcmNsZScKICAgICAgfSwKICAgICAgewogICAgICAgIG5hbWU6ICdMZWdlbmQgQycsCiAgICAgICAgaWNvbjogJ3BpbicKICAgICAgfQogICAgXQogICAgLy8gIC4uLgogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdMZWdlbmQgQScKICAgICAgLy8gIC4uLgogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ0xlZ2VuZCBCJwogICAgICAvLyAgLi4uCiAgICB9LAogICAgewogICAgICBuYW1lOiAnTGVnZW5kIEMnCiAgICAgIC8vICAuLi4KICAgIH0KICBdCiAgLy8gIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>While there is only one kind of data in the chart, use the chart title rather than the legend to explain it.</p>\n',postPath:"en/concepts/legend"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:m},{title:"数据集",dir:w},{title:"数据转换",dir:y},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:i},{title:"图例",dir:L},{title:"事件与行为",dir:B}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:J},{title:"动态排序柱状图",dir:V},{title:"极坐标系柱状图",dir:Q,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:M,children:[{title:"基础折线图",dir:x},{title:"堆叠折线图",dir:S},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:T},{title:"南丁格尔图(玫瑰图)",dir:E}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:Y}]}]},{title:F,dir:e,draft:t},{title:"跨平台方案",dir:O,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:z,children:[{title:"动态的异步数据",dir:P},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:R}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:g},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:h},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:m},{title:"Dataset",dir:w},{title:"Data Transform",dir:y},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:i},{title:"Legend",dir:L},{title:"Event and Action",dir:B}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:J},{title:"Bar Racing",dir:V},{title:"Bar Polar",dir:Q,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:M,children:[{title:"Basic Line",dir:x},{title:"Stacked Line",dir:S},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:T},{title:"Rose Style",dir:E}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:O,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:z,children:[{title:"Dynamic Data",dir:P},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:R}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/concepts/legend",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/concepts/style/index.html b/handbook/en/concepts/style/index.html
index a935b13..557bb14 100644
--- a/handbook/en/concepts/style/index.html
+++ b/handbook/en/concepts/style/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="overview-of-style-customization" tabindex="-1">Overview of Style Customization</h1> <p>This article provides an overview of the different approaches about Apache ECharts<sup>TM</sup> style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p> <blockquote><p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p></blockquote> <p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p> <ul><li>Theme</li> <li>Color Palette</li> <li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li> <li>Visual encoding (visualMap component)</li></ul> <h2 id="theme" tabindex="-1">Theme</h2> <p>Setting a theme is the simplest way to change the color style. For example, in <a href="$%7BwebsitePath%7D/examples/en/index.html">Examples page</a>, we can switch to dark mode and see the result of a different theme.</p> <p>In our project, we can switch to dark theme like:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> <span class="token string">'dark'</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>Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the <a href="https://echarts.apache.org/en/theme-builder.html">theme builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p> <p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="overview-of-style-customization" tabindex="-1">Overview of Style Customization</h1> <p>This article provides an overview of the different approaches about Apache ECharts<sup>TM</sup> style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p> <blockquote><p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p></blockquote> <p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p> <ul><li>Theme</li> <li>Color Palette</li> <li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li> <li>Visual encoding (visualMap component)</li></ul> <h2 id="theme" tabindex="-1">Theme</h2> <p>Setting a theme is the simplest way to change the color style. For example, in <a href="$%7BwebsitePath%7D/examples/en/index.html">Examples page</a>, we can switch to dark mode and see the result of a different theme.</p> <p>In our project, we can switch to dark theme like:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> <span class="token string">'dark'</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>Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the <a href="https://echarts.apache.org/en/theme-builder.html">theme builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p> <p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// Assume the theme name is "vintage".</span>
$<span class="token punctuation">.</span><span class="token function">getJSON</span><span class="token punctuation">(</span><span class="token string">'xxx/xxx/vintage.json'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">themeJSON</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
echarts<span class="token punctuation">.</span><span class="token function">registerTheme</span><span class="token punctuation">(</span><span class="token string">'vintage'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>themeJSON<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -446,7 +446,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p> <h2 id="visual-encoding-by-visualmap-component" tabindex="-1">Visual Encoding by visualMap Component</h2> <p><a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href="~Visual%20Map%20of%20Data">Visual Map of Data</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/en/concepts/style.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,e,i,I,t,C,A,l,a,s,o,d,r,n,c,h,w,y,p,b,m,M,N,B,u,z,L,Z,T,S,D,G,Y,O,J,W,x,f,X,K,v,j,k,H,E,F,R,V,U,Q,P,q,_,$,gg,eg,ig){return{layout:"default",data:[{html:'<h1 id="overview-of-style-customization" tabindex="-1">Overview of Style Customization</h1>\n<p>This article provides an overview of the different approaches about Apache ECharts<sup>TM</sup> style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>\n<blockquote>\n<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>\n</blockquote>\n<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>\n<ul>\n<li>Theme</li>\n<li>Color Palette</li>\n<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>\n<li>Visual encoding (visualMap component)</li>\n</ul>\n<h2 id="theme" tabindex="-1">Theme</h2>\n<p>Setting a theme is the simplest way to change the color style. For example, in <a href="$%7BwebsitePath%7D/examples/en/index.html">Examples page</a>, we can switch to dark mode and see the result of a different theme.</p>\n<p>In our project, we can switch to dark theme like:</p>\n<md-code-block lang="js" code="\'dmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvbSwgJ2RhcmsnKTs\'" line-highlights="\'\'" />\n<p>Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the <a href="https://echarts.apache.org/en/theme-builder.html">theme builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>\n<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>\n<md-code-block lang="js" code="\'dmFyIHhociA9IG5ldyBYTUxIdHRwUmVxdWVzdCgpOwovLyBBc3N1bWUgdGhlIHRoZW1lIG5hbWUgaXMgInZpbnRhZ2UiLgokLmdldEpTT04oJ3h4eC94eHgvdmludGFnZS5qc29uJywgZnVuY3Rpb24odGhlbWVKU09OKSB7CiAgZWNoYXJ0cy5yZWdpc3RlclRoZW1lKCd2aW50YWdlJywgSlNPTi5wYXJzZSh0aGVtZUpTT04pKTsKICB2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tLCAndmludGFnZScpOwp9KTs\'" line-highlights="\'\'" />\n<p>If a theme is downloaded as a JS file, it will auto register itself:</p>\n<md-code-block lang="js" code="\'Ly8gSW1wb3J0IHRoZSBgdmludGFnZS5qc2AgZmlsZSBpbiBIVE1MLCB0aGVuOgp2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tLCAndmludGFnZScpOwovLyAuLi4\'" line-highlights="\'\'" />\n<h2 id="color-palette" tabindex="-1">Color Palette</h2>\n<p>Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIC8vIEdsb2JhbCBwYWxldHRlOgogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdLAoKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIEEgcGFsZXR0ZSBvbmx5IHdvcmsgZm9yIHRoZSBzZXJpZXM6CiAgICAgIGNvbG9yOiBbCiAgICAgICAgJyNkZDZiNjYnLAogICAgICAgICcjNzU5YWEwJywKICAgICAgICAnI2U2OWQ4NycsCiAgICAgICAgJyM4ZGMxYTknLAogICAgICAgICcjZWE3ZTUzJywKICAgICAgICAnI2VlZGQ3OCcsCiAgICAgICAgJyM3M2EzNzMnLAogICAgICAgICcjNzNiOWJjJywKICAgICAgICAnIzcyODlhYicsCiAgICAgICAgJyM5MWNhOGMnLAogICAgICAgICcjZjQ5ZjQyJwogICAgICBdCiAgICAgIC8vIC4uLgogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIEEgcGFsZXR0ZSBvbmx5IHdvcmsgZm9yIHRoZSBzZXJpZXM6CiAgICAgIGNvbG9yOiBbCiAgICAgICAgJyMzN0EyREEnLAogICAgICAgICcjMzJDNUU5JywKICAgICAgICAnIzY3RTBFMycsCiAgICAgICAgJyM5RkU2QjgnLAogICAgICAgICcjRkZEQjVDJywKICAgICAgICAnI2ZmOWY3ZicsCiAgICAgICAgJyNmYjcyOTMnLAogICAgICAgICcjRTA2MkFFJywKICAgICAgICAnI0U2OTBEMScsCiAgICAgICAgJyNlN2JjZjMnLAogICAgICAgICcjOWQ5NmY1JywKICAgICAgICAnIzgzNzhFQScsCiAgICAgICAgJyM5NkJGRkYnCiAgICAgIF0KICAgICAgLy8gLi4uCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<h2 id="customize-style-explicitly-(itemstyle%2C-linestyle%2C-areastyle%2C-label%2C-...)" tabindex="-1">Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)</h2>\n<p>It is a common way to set style explicitly. Throughout ECharts <a href="https://echarts.apache.org/option.html#">option</a>, style related options can be set in various place, including <a href="https://echarts.apache.org/option.html#series.itemStyle">itemStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.lineStyle">lineStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.areaStyle">areaStyle</a>, <a href="https://echarts.apache.org/option.html#series.label">label</a>, etc.</p>\n<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc, although they may occur in different place according to different series or components.</p>\n<p>In the following code we add shadow, gradient to bubble chart.</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbCiAgWwogICAgWzI4NjA0LCA3NywgMTcwOTY4NjksICdBdXN0cmFsaWEnLCAxOTkwXSwKICAgIFszMTE2MywgNzcuNCwgMjc2NjI0NDAsICdDYW5hZGEnLCAxOTkwXSwKICAgIFsxNTE2LCA2OCwgMTE1NDYwNTc3MywgJ0NoaW5hJywgMTk5MF0sCiAgICBbMTM2NzAsIDc0LjcsIDEwNTgyMDgyLCAnQ3ViYScsIDE5OTBdLAogICAgWzI4NTk5LCA3NSwgNDk4NjcwNSwgJ0ZpbmxhbmQnLCAxOTkwXSwKICAgIFsyOTQ3NiwgNzcuMSwgNTY5NDMyOTksICdGcmFuY2UnLCAxOTkwXSwKICAgIFszMTQ3NiwgNzUuNCwgNzg5NTgyMzcsICdHZXJtYW55JywgMTk5MF0sCiAgICBbMjg2NjYsIDc4LjEsIDI1NDgzMCwgJ0ljZWxhbmQnLCAxOTkwXSwKICAgIFsxNzc3LCA1Ny43LCA4NzA2MDE3NzYsICdJbmRpYScsIDE5OTBdLAogICAgWzI5NTUwLCA3OS4xLCAxMjIyNDkyODUsICdKYXBhbicsIDE5OTBdLAogICAgWzIwNzYsIDY3LjksIDIwMTk0MzU0LCAnTm9ydGggS29yZWEnLCAxOTkwXSwKICAgIFsxMjA4NywgNzIsIDQyOTcyMjU0LCAnU291dGggS29yZWEnLCAxOTkwXSwKICAgIFsyNDAyMSwgNzUuNCwgMzM5NzUzNCwgJ05ldyBaZWFsYW5kJywgMTk5MF0sCiAgICBbNDMyOTYsIDc2LjgsIDQyNDAzNzUsICdOb3J3YXknLCAxOTkwXSwKICAgIFsxMDA4OCwgNzAuOCwgMzgxOTUyNTgsICdQb2xhbmQnLCAxOTkwXSwKICAgIFsxOTM0OSwgNjkuNiwgMTQ3NTY4NTUyLCAnUnVzc2lhJywgMTk5MF0sCiAgICBbMTA2NzAsIDY3LjMsIDUzOTk0NjA1LCAnVHVya2V5JywgMTk5MF0sCiAgICBbMjY0MjQsIDc1LjcsIDU3MTEwMTE3LCAnVW5pdGVkIEtpbmdkb20nLCAxOTkwXSwKICAgIFszNzA2MiwgNzUuNCwgMjUyODQ3ODEwLCAnVW5pdGVkIFN0YXRlcycsIDE5OTBdCiAgXSwKICBbCiAgICBbNDQwNTYsIDgxLjgsIDIzOTY4OTczLCAnQXVzdHJhbGlhJywgMjAxNV0sCiAgICBbNDMyOTQsIDgxLjcsIDM1OTM5OTI3LCAnQ2FuYWRhJywgMjAxNV0sCiAgICBbMTMzMzQsIDc2LjksIDEzNzYwNDg5NDMsICdDaGluYScsIDIwMTVdLAogICAgWzIxMjkxLCA3OC41LCAxMTM4OTU2MiwgJ0N1YmEnLCAyMDE1XSwKICAgIFszODkyMywgODAuOCwgNTUwMzQ1NywgJ0ZpbmxhbmQnLCAyMDE1XSwKICAgIFszNzU5OSwgODEuOSwgNjQzOTUzNDUsICdGcmFuY2UnLCAyMDE1XSwKICAgIFs0NDA1MywgODEuMSwgODA2ODg1NDUsICdHZXJtYW55JywgMjAxNV0sCiAgICBbNDIxODIsIDgyLjgsIDMyOTQyNSwgJ0ljZWxhbmQnLCAyMDE1XSwKICAgIFs1OTAzLCA2Ni44LCAxMzExMDUwNTI3LCAnSW5kaWEnLCAyMDE1XSwKICAgIFszNjE2MiwgODMuNSwgMTI2NTczNDgxLCAnSmFwYW4nLCAyMDE1XSwKICAgIFsxMzkwLCA3MS40LCAyNTE1NTMxNywgJ05vcnRoIEtvcmVhJywgMjAxNV0sCiAgICBbMzQ2NDQsIDgwLjcsIDUwMjkzNDM5LCAnU291dGggS29yZWEnLCAyMDE1XSwKICAgIFszNDE4NiwgODAuNiwgNDUyODUyNiwgJ05ldyBaZWFsYW5kJywgMjAxNV0sCiAgICBbNjQzMDQsIDgxLjYsIDUyMTA5NjcsICdOb3J3YXknLCAyMDE1XSwKICAgIFsyNDc4NywgNzcuMywgMzg2MTE3OTQsICdQb2xhbmQnLCAyMDE1XSwKICAgIFsyMzAzOCwgNzMuMTMsIDE0MzQ1NjkxOCwgJ1J1c3NpYScsIDIwMTVdLAogICAgWzE5MzYwLCA3Ni41LCA3ODY2NTgzMCwgJ1R1cmtleScsIDIwMTVdLAogICAgWzM4MjI1LCA4MS40LCA2NDcxNTgxMCwgJ1VuaXRlZCBLaW5nZG9tJywgMjAxNV0sCiAgICBbNTMzNTQsIDc5LjEsIDMyMTc3MzYzMSwgJ1VuaXRlZCBTdGF0ZXMnLCAyMDE1XQogIF0KXTsKCm9wdGlvbiA9IHsKICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgIHR5cGU6ICdyYWRpYWwnLAogICAgeDogMC4zLAogICAgeTogMC4zLAogICAgcjogMC44LAogICAgY29sb3JTdG9wczogWwogICAgICB7CiAgICAgICAgb2Zmc2V0OiAwLAogICAgICAgIGNvbG9yOiAnI2Y3ZjhmYScKICAgICAgfSwKICAgICAgewogICAgICAgIG9mZnNldDogMSwKICAgICAgICBjb2xvcjogJyNjZGQwZDUnCiAgICAgIH0KICAgIF0KICB9LAogIGdyaWQ6IHsKICAgIGxlZnQ6IDEwLAogICAgY29udGFpbkxhYmVsOiB0cnVlLAogICAgYm90dG9tOiAxMCwKICAgIHRvcDogMTAsCiAgICByaWdodDogMzAKICB9LAogIHhBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0KICB9LAogIHlBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0sCiAgICBzY2FsZTogdHJ1ZQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICcxOTkwJywKICAgICAgZGF0YTogZGF0YVswXSwKICAgICAgdHlwZTogJ3NjYXR0ZXInLAogICAgICBzeW1ib2xTaXplOiBmdW5jdGlvbihkYXRhKSB7CiAgICAgICAgcmV0dXJuIE1hdGguc3FydChkYXRhWzJdKSAvIDVlMjsKICAgICAgfSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycsCiAgICAgICAgbGFiZWw6IHsKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IGZ1bmN0aW9uKHBhcmFtKSB7CiAgICAgICAgICAgIHJldHVybiBwYXJhbS5kYXRhWzNdOwogICAgICAgICAgfSwKICAgICAgICAgIHBvc2l0aW9uOiAndG9wJwogICAgICAgIH0KICAgICAgfSwKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgc2hhZG93Qmx1cjogMTAsCiAgICAgICAgc2hhZG93Q29sb3I6ICdyZ2JhKDEyMCwgMzYsIDUwLCAwLjUpJywKICAgICAgICBzaGFkb3dPZmZzZXRZOiA1LAogICAgICAgIGNvbG9yOiB7CiAgICAgICAgICB0eXBlOiAncmFkaWFsJywKICAgICAgICAgIHg6IDAuNCwKICAgICAgICAgIHk6IDAuMywKICAgICAgICAgIHI6IDEsCiAgICAgICAgICBjb2xvclN0b3BzOiBbCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDAsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjUxLCAxMTgsIDEyMyknCiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDEsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjA0LCA0NiwgNzIpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9LAogICAgewogICAgICBuYW1lOiAnMjAxNScsCiAgICAgIGRhdGE6IGRhdGFbMV0sCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgc3ltYm9sU2l6ZTogZnVuY3Rpb24oZGF0YSkgewogICAgICAgIHJldHVybiBNYXRoLnNxcnQoZGF0YVsyXSkgLyA1ZTI7CiAgICAgIH0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgZm9jdXM6ICdzZXJpZXMnLAogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbSkgewogICAgICAgICAgICByZXR1cm4gcGFyYW0uZGF0YVszXTsKICAgICAgICAgIH0sCiAgICAgICAgICBwb3NpdGlvbjogJ3RvcCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgyNSwgMTAwLCAxNTAsIDAuNSknLAogICAgICAgIHNoYWRvd09mZnNldFk6IDUsCiAgICAgICAgY29sb3I6IHsKICAgICAgICAgIHR5cGU6ICdyYWRpYWwnLAogICAgICAgICAgeDogMC40LAogICAgICAgICAgeTogMC4zLAogICAgICAgICAgcjogMSwKICAgICAgICAgIGNvbG9yU3RvcHM6IFsKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMCwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigxMjksIDIyNywgMjM4KScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMSwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigyNSwgMTgzLCAyMDcpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="style-of-emphasis-state" tabindex="-1">Style of Emphasis State</h2>\n<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> property. The options in <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> is the same as the ones for normal state, for example:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIC8vIFN0eWxlcyBmb3Igbm9ybWFsIHN0YXRlLgogICAgaXRlbVN0eWxlOiB7CiAgICAgIC8vIENvbG9yIG9mIHRoZSBwb2ludC4KICAgICAgY29sb3I6ICdyZWQnCiAgICB9LAogICAgbGFiZWw6IHsKICAgICAgc2hvdzogdHJ1ZSwKICAgICAgLy8gVGV4dCBvZiBsYWJlbHMuCiAgICAgIGZvcm1hdHRlcjogJ1RoaXMgaXMgYSBub3JtYWwgbGFiZWwuJwogICAgfSwKCiAgICAvLyBTdHlsZXMgZm9yIGVtcGhhc2lzIHN0YXRlLgogICAgZW1waGFzaXM6IHsKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgLy8gQ29sb3IgaW4gZW1waGFzaXMgc3RhdGUuCiAgICAgICAgY29sb3I6ICdibHVlJwogICAgICB9LAogICAgICBsYWJlbDogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgLy8gVGV4dCBpbiBlbXBoYXNpcy4KICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgZW1waGFzaXMgbGFiZWwuJwogICAgICB9CiAgICB9CiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIGl0ZW1TdHlsZTogewogICAgICAvLyBTdHlsZXMgZm9yIG5vcm1hbCBzdGF0ZS4KICAgICAgbm9ybWFsOiB7CiAgICAgICAgY29sb3I6ICdyZWQnCiAgICAgIH0sCiAgICAgIC8vIFN0eWxlcyBmb3IgZW1waGFzaXMgc3RhdGUuCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgY29sb3I6ICdibHVlJwogICAgICB9CiAgICB9LAoKICAgIGxhYmVsOiB7CiAgICAgIC8vIFN0eWxlcyBmb3Igbm9ybWFsIHN0YXRlLgogICAgICBub3JtYWw6IHsKICAgICAgICBzaG93OiB0cnVlLAogICAgICAgIGZvcm1hdHRlcjogJ1RoaXMgaXMgYSBub3JtYWwgbGFiZWwuJwogICAgICB9LAogICAgICAvLyBTdHlsZXMgZm9yIGVtcGhhc2lzIHN0YXRlLgogICAgICBlbXBoYXNpczogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIGVtcGhhc2lzIGxhYmVsLicKICAgICAgfQogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>\n<h2 id="visual-encoding-by-visualmap-component" tabindex="-1">Visual Encoding by visualMap Component</h2>\n<p><a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href="~Visual%20Map%20of%20Data">Visual Map of Data</a>.</p>\n',postPath:"en/concepts/style"}],fetch:{},error:I,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:t},{title:"入门篇",dir:C,children:[{title:"获取 ECharts",dir:A},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:a,draft:g},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:d,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"ECharts 5 升级指南",dir:n},{title:5.2,dir:c}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:y,draft:g},{title:"系列",dir:p,draft:g},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:M},{title:"坐标系",dir:N,draft:g},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:u},{title:"事件与行为",dir:z}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:Z,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:G,draft:g},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:i,draft:g}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:J},{title:"堆叠折线图",dir:W},{title:"区域面积图",dir:x},{title:"平滑曲线图",dir:f},{title:"阶梯线图",dir:X}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:j}]},{title:"散点图",dir:k,children:[{title:"基础散点图",dir:H}]}]},{title:E,dir:e,draft:g},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:R}]},{title:"数据处理",dir:V,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:E,dir:e,draft:g},{title:gg,dir:eg},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ig}]}],en:[{title:"Get Started",dir:t},{title:"Basics",dir:C,children:[{title:"Download ECharts",dir:A},{title:"Import ECharts",dir:l},{title:"Resources",dir:a,draft:g},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:d,children:[{title:"ECharts 5 Features",dir:r},{title:"ECharts 5 Upgrade Guide",dir:n},{title:5.2,dir:c}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:y,draft:g},{title:"Series",dir:p,draft:g},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:M},{title:"Coordinate",dir:N,draft:g},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:u},{title:"Event and Action",dir:z}]},{title:"How To Guides",dir:L,children:[{title:"Common Charts",dir:Z,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:G,draft:g},{title:"Waterfall",dir:Y}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:J},{title:"Stacked Line",dir:W},{title:"Area Chart",dir:x},{title:"Smoothed Line",dir:f},{title:"Step Line",dir:X}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:v},{title:"Rose Style",dir:j}]},{title:"Scatter",dir:k,children:[{title:"Basic Scatter",dir:H}]}]},{title:"Mobile",dir:e,draft:g},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:R}]},{title:"Data",dir:V,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:g},{title:gg,dir:eg},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ig}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/en/concepts/style",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:I}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p> <h2 id="visual-encoding-by-visualmap-component" tabindex="-1">Visual Encoding by visualMap Component</h2> <p><a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href="~Visual%20Map%20of%20Data">Visual Map of Data</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/en/concepts/style.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,e,i,I,t,C,A,l,a,s,o,d,r,n,c,h,w,y,p,b,m,M,N,B,u,z,L,Z,T,S,D,G,Y,O,J,W,x,f,X,K,v,j,k,H,E,F,R,V,U,Q,P,q,_,$,gg,eg,ig){return{layout:"default",data:[{html:'<h1 id="overview-of-style-customization" tabindex="-1">Overview of Style Customization</h1>\n<p>This article provides an overview of the different approaches about Apache ECharts<sup>TM</sup> style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>\n<blockquote>\n<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>\n</blockquote>\n<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>\n<ul>\n<li>Theme</li>\n<li>Color Palette</li>\n<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>\n<li>Visual encoding (visualMap component)</li>\n</ul>\n<h2 id="theme" tabindex="-1">Theme</h2>\n<p>Setting a theme is the simplest way to change the color style. For example, in <a href="$%7BwebsitePath%7D/examples/en/index.html">Examples page</a>, we can switch to dark mode and see the result of a different theme.</p>\n<p>In our project, we can switch to dark theme like:</p>\n<md-code-block lang="js" code="\'dmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvbSwgJ2RhcmsnKTs\'" line-highlights="\'\'" />\n<p>Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the <a href="https://echarts.apache.org/en/theme-builder.html">theme builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>\n<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>\n<md-code-block lang="js" code="\'dmFyIHhociA9IG5ldyBYTUxIdHRwUmVxdWVzdCgpOwovLyBBc3N1bWUgdGhlIHRoZW1lIG5hbWUgaXMgInZpbnRhZ2UiLgokLmdldEpTT04oJ3h4eC94eHgvdmludGFnZS5qc29uJywgZnVuY3Rpb24odGhlbWVKU09OKSB7CiAgZWNoYXJ0cy5yZWdpc3RlclRoZW1lKCd2aW50YWdlJywgSlNPTi5wYXJzZSh0aGVtZUpTT04pKTsKICB2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tLCAndmludGFnZScpOwp9KTs\'" line-highlights="\'\'" />\n<p>If a theme is downloaded as a JS file, it will auto register itself:</p>\n<md-code-block lang="js" code="\'Ly8gSW1wb3J0IHRoZSBgdmludGFnZS5qc2AgZmlsZSBpbiBIVE1MLCB0aGVuOgp2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tLCAndmludGFnZScpOwovLyAuLi4\'" line-highlights="\'\'" />\n<h2 id="color-palette" tabindex="-1">Color Palette</h2>\n<p>Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIC8vIEdsb2JhbCBwYWxldHRlOgogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdLAoKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIEEgcGFsZXR0ZSBvbmx5IHdvcmsgZm9yIHRoZSBzZXJpZXM6CiAgICAgIGNvbG9yOiBbCiAgICAgICAgJyNkZDZiNjYnLAogICAgICAgICcjNzU5YWEwJywKICAgICAgICAnI2U2OWQ4NycsCiAgICAgICAgJyM4ZGMxYTknLAogICAgICAgICcjZWE3ZTUzJywKICAgICAgICAnI2VlZGQ3OCcsCiAgICAgICAgJyM3M2EzNzMnLAogICAgICAgICcjNzNiOWJjJywKICAgICAgICAnIzcyODlhYicsCiAgICAgICAgJyM5MWNhOGMnLAogICAgICAgICcjZjQ5ZjQyJwogICAgICBdCiAgICAgIC8vIC4uLgogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIEEgcGFsZXR0ZSBvbmx5IHdvcmsgZm9yIHRoZSBzZXJpZXM6CiAgICAgIGNvbG9yOiBbCiAgICAgICAgJyMzN0EyREEnLAogICAgICAgICcjMzJDNUU5JywKICAgICAgICAnIzY3RTBFMycsCiAgICAgICAgJyM5RkU2QjgnLAogICAgICAgICcjRkZEQjVDJywKICAgICAgICAnI2ZmOWY3ZicsCiAgICAgICAgJyNmYjcyOTMnLAogICAgICAgICcjRTA2MkFFJywKICAgICAgICAnI0U2OTBEMScsCiAgICAgICAgJyNlN2JjZjMnLAogICAgICAgICcjOWQ5NmY1JywKICAgICAgICAnIzgzNzhFQScsCiAgICAgICAgJyM5NkJGRkYnCiAgICAgIF0KICAgICAgLy8gLi4uCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<h2 id="customize-style-explicitly-(itemstyle%2C-linestyle%2C-areastyle%2C-label%2C-...)" tabindex="-1">Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)</h2>\n<p>It is a common way to set style explicitly. Throughout ECharts <a href="https://echarts.apache.org/option.html#">option</a>, style related options can be set in various place, including <a href="https://echarts.apache.org/option.html#series.itemStyle">itemStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.lineStyle">lineStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.areaStyle">areaStyle</a>, <a href="https://echarts.apache.org/option.html#series.label">label</a>, etc.</p>\n<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc, although they may occur in different place according to different series or components.</p>\n<p>In the following code we add shadow, gradient to bubble chart.</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbCiAgWwogICAgWzI4NjA0LCA3NywgMTcwOTY4NjksICdBdXN0cmFsaWEnLCAxOTkwXSwKICAgIFszMTE2MywgNzcuNCwgMjc2NjI0NDAsICdDYW5hZGEnLCAxOTkwXSwKICAgIFsxNTE2LCA2OCwgMTE1NDYwNTc3MywgJ0NoaW5hJywgMTk5MF0sCiAgICBbMTM2NzAsIDc0LjcsIDEwNTgyMDgyLCAnQ3ViYScsIDE5OTBdLAogICAgWzI4NTk5LCA3NSwgNDk4NjcwNSwgJ0ZpbmxhbmQnLCAxOTkwXSwKICAgIFsyOTQ3NiwgNzcuMSwgNTY5NDMyOTksICdGcmFuY2UnLCAxOTkwXSwKICAgIFszMTQ3NiwgNzUuNCwgNzg5NTgyMzcsICdHZXJtYW55JywgMTk5MF0sCiAgICBbMjg2NjYsIDc4LjEsIDI1NDgzMCwgJ0ljZWxhbmQnLCAxOTkwXSwKICAgIFsxNzc3LCA1Ny43LCA4NzA2MDE3NzYsICdJbmRpYScsIDE5OTBdLAogICAgWzI5NTUwLCA3OS4xLCAxMjIyNDkyODUsICdKYXBhbicsIDE5OTBdLAogICAgWzIwNzYsIDY3LjksIDIwMTk0MzU0LCAnTm9ydGggS29yZWEnLCAxOTkwXSwKICAgIFsxMjA4NywgNzIsIDQyOTcyMjU0LCAnU291dGggS29yZWEnLCAxOTkwXSwKICAgIFsyNDAyMSwgNzUuNCwgMzM5NzUzNCwgJ05ldyBaZWFsYW5kJywgMTk5MF0sCiAgICBbNDMyOTYsIDc2LjgsIDQyNDAzNzUsICdOb3J3YXknLCAxOTkwXSwKICAgIFsxMDA4OCwgNzAuOCwgMzgxOTUyNTgsICdQb2xhbmQnLCAxOTkwXSwKICAgIFsxOTM0OSwgNjkuNiwgMTQ3NTY4NTUyLCAnUnVzc2lhJywgMTk5MF0sCiAgICBbMTA2NzAsIDY3LjMsIDUzOTk0NjA1LCAnVHVya2V5JywgMTk5MF0sCiAgICBbMjY0MjQsIDc1LjcsIDU3MTEwMTE3LCAnVW5pdGVkIEtpbmdkb20nLCAxOTkwXSwKICAgIFszNzA2MiwgNzUuNCwgMjUyODQ3ODEwLCAnVW5pdGVkIFN0YXRlcycsIDE5OTBdCiAgXSwKICBbCiAgICBbNDQwNTYsIDgxLjgsIDIzOTY4OTczLCAnQXVzdHJhbGlhJywgMjAxNV0sCiAgICBbNDMyOTQsIDgxLjcsIDM1OTM5OTI3LCAnQ2FuYWRhJywgMjAxNV0sCiAgICBbMTMzMzQsIDc2LjksIDEzNzYwNDg5NDMsICdDaGluYScsIDIwMTVdLAogICAgWzIxMjkxLCA3OC41LCAxMTM4OTU2MiwgJ0N1YmEnLCAyMDE1XSwKICAgIFszODkyMywgODAuOCwgNTUwMzQ1NywgJ0ZpbmxhbmQnLCAyMDE1XSwKICAgIFszNzU5OSwgODEuOSwgNjQzOTUzNDUsICdGcmFuY2UnLCAyMDE1XSwKICAgIFs0NDA1MywgODEuMSwgODA2ODg1NDUsICdHZXJtYW55JywgMjAxNV0sCiAgICBbNDIxODIsIDgyLjgsIDMyOTQyNSwgJ0ljZWxhbmQnLCAyMDE1XSwKICAgIFs1OTAzLCA2Ni44LCAxMzExMDUwNTI3LCAnSW5kaWEnLCAyMDE1XSwKICAgIFszNjE2MiwgODMuNSwgMTI2NTczNDgxLCAnSmFwYW4nLCAyMDE1XSwKICAgIFsxMzkwLCA3MS40LCAyNTE1NTMxNywgJ05vcnRoIEtvcmVhJywgMjAxNV0sCiAgICBbMzQ2NDQsIDgwLjcsIDUwMjkzNDM5LCAnU291dGggS29yZWEnLCAyMDE1XSwKICAgIFszNDE4NiwgODAuNiwgNDUyODUyNiwgJ05ldyBaZWFsYW5kJywgMjAxNV0sCiAgICBbNjQzMDQsIDgxLjYsIDUyMTA5NjcsICdOb3J3YXknLCAyMDE1XSwKICAgIFsyNDc4NywgNzcuMywgMzg2MTE3OTQsICdQb2xhbmQnLCAyMDE1XSwKICAgIFsyMzAzOCwgNzMuMTMsIDE0MzQ1NjkxOCwgJ1J1c3NpYScsIDIwMTVdLAogICAgWzE5MzYwLCA3Ni41LCA3ODY2NTgzMCwgJ1R1cmtleScsIDIwMTVdLAogICAgWzM4MjI1LCA4MS40LCA2NDcxNTgxMCwgJ1VuaXRlZCBLaW5nZG9tJywgMjAxNV0sCiAgICBbNTMzNTQsIDc5LjEsIDMyMTc3MzYzMSwgJ1VuaXRlZCBTdGF0ZXMnLCAyMDE1XQogIF0KXTsKCm9wdGlvbiA9IHsKICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgIHR5cGU6ICdyYWRpYWwnLAogICAgeDogMC4zLAogICAgeTogMC4zLAogICAgcjogMC44LAogICAgY29sb3JTdG9wczogWwogICAgICB7CiAgICAgICAgb2Zmc2V0OiAwLAogICAgICAgIGNvbG9yOiAnI2Y3ZjhmYScKICAgICAgfSwKICAgICAgewogICAgICAgIG9mZnNldDogMSwKICAgICAgICBjb2xvcjogJyNjZGQwZDUnCiAgICAgIH0KICAgIF0KICB9LAogIGdyaWQ6IHsKICAgIGxlZnQ6IDEwLAogICAgY29udGFpbkxhYmVsOiB0cnVlLAogICAgYm90dG9tOiAxMCwKICAgIHRvcDogMTAsCiAgICByaWdodDogMzAKICB9LAogIHhBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0KICB9LAogIHlBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0sCiAgICBzY2FsZTogdHJ1ZQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICcxOTkwJywKICAgICAgZGF0YTogZGF0YVswXSwKICAgICAgdHlwZTogJ3NjYXR0ZXInLAogICAgICBzeW1ib2xTaXplOiBmdW5jdGlvbihkYXRhKSB7CiAgICAgICAgcmV0dXJuIE1hdGguc3FydChkYXRhWzJdKSAvIDVlMjsKICAgICAgfSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycsCiAgICAgICAgbGFiZWw6IHsKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IGZ1bmN0aW9uKHBhcmFtKSB7CiAgICAgICAgICAgIHJldHVybiBwYXJhbS5kYXRhWzNdOwogICAgICAgICAgfSwKICAgICAgICAgIHBvc2l0aW9uOiAndG9wJwogICAgICAgIH0KICAgICAgfSwKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgc2hhZG93Qmx1cjogMTAsCiAgICAgICAgc2hhZG93Q29sb3I6ICdyZ2JhKDEyMCwgMzYsIDUwLCAwLjUpJywKICAgICAgICBzaGFkb3dPZmZzZXRZOiA1LAogICAgICAgIGNvbG9yOiB7CiAgICAgICAgICB0eXBlOiAncmFkaWFsJywKICAgICAgICAgIHg6IDAuNCwKICAgICAgICAgIHk6IDAuMywKICAgICAgICAgIHI6IDEsCiAgICAgICAgICBjb2xvclN0b3BzOiBbCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDAsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjUxLCAxMTgsIDEyMyknCiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDEsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjA0LCA0NiwgNzIpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9LAogICAgewogICAgICBuYW1lOiAnMjAxNScsCiAgICAgIGRhdGE6IGRhdGFbMV0sCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgc3ltYm9sU2l6ZTogZnVuY3Rpb24oZGF0YSkgewogICAgICAgIHJldHVybiBNYXRoLnNxcnQoZGF0YVsyXSkgLyA1ZTI7CiAgICAgIH0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgZm9jdXM6ICdzZXJpZXMnLAogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbSkgewogICAgICAgICAgICByZXR1cm4gcGFyYW0uZGF0YVszXTsKICAgICAgICAgIH0sCiAgICAgICAgICBwb3NpdGlvbjogJ3RvcCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgyNSwgMTAwLCAxNTAsIDAuNSknLAogICAgICAgIHNoYWRvd09mZnNldFk6IDUsCiAgICAgICAgY29sb3I6IHsKICAgICAgICAgIHR5cGU6ICdyYWRpYWwnLAogICAgICAgICAgeDogMC40LAogICAgICAgICAgeTogMC4zLAogICAgICAgICAgcjogMSwKICAgICAgICAgIGNvbG9yU3RvcHM6IFsKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMCwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigxMjksIDIyNywgMjM4KScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMSwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigyNSwgMTgzLCAyMDcpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="style-of-emphasis-state" tabindex="-1">Style of Emphasis State</h2>\n<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> property. The options in <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> is the same as the ones for normal state, for example:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIC8vIFN0eWxlcyBmb3Igbm9ybWFsIHN0YXRlLgogICAgaXRlbVN0eWxlOiB7CiAgICAgIC8vIENvbG9yIG9mIHRoZSBwb2ludC4KICAgICAgY29sb3I6ICdyZWQnCiAgICB9LAogICAgbGFiZWw6IHsKICAgICAgc2hvdzogdHJ1ZSwKICAgICAgLy8gVGV4dCBvZiBsYWJlbHMuCiAgICAgIGZvcm1hdHRlcjogJ1RoaXMgaXMgYSBub3JtYWwgbGFiZWwuJwogICAgfSwKCiAgICAvLyBTdHlsZXMgZm9yIGVtcGhhc2lzIHN0YXRlLgogICAgZW1waGFzaXM6IHsKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgLy8gQ29sb3IgaW4gZW1waGFzaXMgc3RhdGUuCiAgICAgICAgY29sb3I6ICdibHVlJwogICAgICB9LAogICAgICBsYWJlbDogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgLy8gVGV4dCBpbiBlbXBoYXNpcy4KICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgZW1waGFzaXMgbGFiZWwuJwogICAgICB9CiAgICB9CiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIGl0ZW1TdHlsZTogewogICAgICAvLyBTdHlsZXMgZm9yIG5vcm1hbCBzdGF0ZS4KICAgICAgbm9ybWFsOiB7CiAgICAgICAgY29sb3I6ICdyZWQnCiAgICAgIH0sCiAgICAgIC8vIFN0eWxlcyBmb3IgZW1waGFzaXMgc3RhdGUuCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgY29sb3I6ICdibHVlJwogICAgICB9CiAgICB9LAoKICAgIGxhYmVsOiB7CiAgICAgIC8vIFN0eWxlcyBmb3Igbm9ybWFsIHN0YXRlLgogICAgICBub3JtYWw6IHsKICAgICAgICBzaG93OiB0cnVlLAogICAgICAgIGZvcm1hdHRlcjogJ1RoaXMgaXMgYSBub3JtYWwgbGFiZWwuJwogICAgICB9LAogICAgICAvLyBTdHlsZXMgZm9yIGVtcGhhc2lzIHN0YXRlLgogICAgICBlbXBoYXNpczogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIGVtcGhhc2lzIGxhYmVsLicKICAgICAgfQogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>\n<h2 id="visual-encoding-by-visualmap-component" tabindex="-1">Visual Encoding by visualMap Component</h2>\n<p><a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href="~Visual%20Map%20of%20Data">Visual Map of Data</a>.</p>\n',postPath:"en/concepts/style"}],fetch:{},error:I,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:t},{title:"入门篇",dir:C,children:[{title:"获取 ECharts",dir:A},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:a,draft:g},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:d,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"ECharts 5 升级指南",dir:n},{title:5.2,dir:c}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:y,draft:g},{title:"系列",dir:p,draft:g},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:M},{title:"坐标系",dir:N,draft:g},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:u},{title:"事件与行为",dir:z}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:Z,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:G,draft:g},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:i,draft:g}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:J},{title:"堆叠折线图",dir:W},{title:"区域面积图",dir:x},{title:"平滑曲线图",dir:f},{title:"阶梯线图",dir:X}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:j}]},{title:"散点图",dir:k,children:[{title:"基础散点图",dir:H}]}]},{title:E,dir:e,draft:g},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:R}]},{title:"数据处理",dir:V,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:E,dir:e,draft:g},{title:gg,dir:eg},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ig}]}],en:[{title:"Get Started",dir:t},{title:"Basics",dir:C,children:[{title:"Download ECharts",dir:A},{title:"Import ECharts",dir:l},{title:"Resources",dir:a,draft:g},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:d,children:[{title:"ECharts 5 Features",dir:r},{title:"ECharts 5 Upgrade Guide",dir:n},{title:5.2,dir:c}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:y,draft:g},{title:"Series",dir:p,draft:g},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:M},{title:"Coordinate",dir:N,draft:g},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:u},{title:"Event and Action",dir:z}]},{title:"How To Guides",dir:L,children:[{title:"Common Charts",dir:Z,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:G,draft:g},{title:"Waterfall",dir:Y}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:J},{title:"Stacked Line",dir:W},{title:"Area Chart",dir:x},{title:"Smoothed Line",dir:f},{title:"Step Line",dir:X}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:v},{title:"Rose Style",dir:j}]},{title:"Scatter",dir:k,children:[{title:"Basic Scatter",dir:H}]}]},{title:"Mobile",dir:e,draft:g},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:R}]},{title:"Data",dir:V,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:g},{title:gg,dir:eg},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ig}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/en/concepts/style",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:I}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/concepts/visual-map/index.html b/handbook/en/concepts/visual-map/index.html
index ee624d7..c21b14c 100644
--- a/handbook/en/concepts/visual-map/index.html
+++ b/handbook/en/concepts/visual-map/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="visual-map-of-data" tabindex="-1">Visual Map of Data</h1> <p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels.</p> <p>Every type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into <em>lines</em>, bar chart map data into <em>height</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p> <p>Besides, ECharts provides <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:</p> <ul><li><code>symbol</code>, <code>symbolSize</code></li> <li><code>color</code>, <code>opacity</code>, <code>colorAlpha</code>,</li> <li><code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></li></ul> <p>Next, we are going to introduce how to use <code>visualMap</code> component.</p> <h2 id="data-and-dimension" tabindex="-1">Data and Dimension</h2> <p>Data are usually stored in <a href="https://echarts.apache.org/option.html#series.data">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p> <p>For example, <a href="https://echarts.apache.org/option.html#series.data">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="visual-map-of-data" tabindex="-1">Visual Map of Data</h1> <p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels.</p> <p>Every type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into <em>lines</em>, bar chart map data into <em>height</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p> <p>Besides, ECharts provides <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:</p> <ul><li><code>symbol</code>, <code>symbolSize</code></li> <li><code>color</code>, <code>opacity</code>, <code>colorAlpha</code>,</li> <li><code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></li></ul> <p>Next, we are going to introduce how to use <code>visualMap</code> component.</p> <h2 id="data-and-dimension" tabindex="-1">Data and Dimension</h2> <p>Data are usually stored in <a href="https://echarts.apache.org/option.html#series.data">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p> <p>For example, <a href="https://echarts.apache.org/option.html#series.data">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>series<span class="token operator">:</span> <span class="token punctuation">{</span>
data<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token comment">// every item here is a dataItem</span>
@@ -73,7 +73,8 @@
<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></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>where <a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> indicates the style used for data within the data mapping range; while <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> specifies the style for data outside the mapping range.</p> <p><a href="~visualMap.dimension">visualMap.dimension</a> specifies which dimension of the data will be visually mapped.</p> <h3 id="piecewise-visual-mapping" tabindex="-1">Piecewise Visual Mapping</h3> <p>The piecewise visual mapping component has three modes.</p> <ul><li>Continuous data average segmentation: based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> to automatically split the data into pieces equally.</li> <li>Continuous data custom segmentation: define the range of each piece based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a>.</li> <li>Discrete data (categorical data): categories are defined in <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a>.</li></ul> <p>To use segmented visual map, you need to set <code>type</code> to <code>'piecewise'</code> and choose one of the above three configuration items.</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/en/concepts/visual-map.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,a,l,d,r,o,n,s,g,c,h,p,I,m,C,u,B,b,A,v,y,G,W,Z,w,f,M,Y,X,S,L,V,R,F,z,H,x,N,k,J,U,E,T,D,Q,P,j,K,O,_,$,q,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="visual-map-of-data" tabindex="-1">Visual Map of Data</h1>\n<p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels.</p>\n<p>Every type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into <em>lines</em>, bar chart map data into <em>height</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>\n<p>Besides, ECharts provides <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:</p>\n<ul>\n<li><code>symbol</code>, <code>symbolSize</code></li>\n<li><code>color</code>, <code>opacity</code>, <code>colorAlpha</code>,</li>\n<li><code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></li>\n</ul>\n<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>\n<h2 id="data-and-dimension" tabindex="-1">Data and Dimension</h2>\n<p>Data are usually stored in <a href="https://echarts.apache.org/option.html#series.data">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p>\n<p>For example, <a href="https://echarts.apache.org/option.html#series.data">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyBldmVyeSBpdGVtIGhlcmUgaXMgYSBkYXRhSXRlbQogICAgICB2YWx1ZTogMjMyMywgLy8gdGhpcyBpcyBkYXRhIHZhbHVlCiAgICAgIGl0ZW1TdHlsZToge30KICAgIH0sCiAgICAxMjEyLCAvLyBpdCBjYW4gYWxzbyBiZSBhIHZhbHVlIG9mIGRhdGFJdGVtLCB3aGljaCBpcyBhIG1vcmUgY29tbW9uIGNhc2UKICAgIDIzMjMsIC8vIGV2ZXJ5IGRhdGEgdmFsdWUgaGVyZSBpcyBvbmUgZGltZW5zaW9uCiAgICA0MzQzLAogICAgMzQzNAogIF07Cn0\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyBldmVyeSBpdGVtIGhlcmUgaXMgYSBkYXRhSXRlbQogICAgICB2YWx1ZTogWzM0MzQsIDEyOSwgJ1NhbiBNYXJpbm8nXSwgLy8gdGhpcyBpcyBkYXRhIHZhbHVlCiAgICAgIGl0ZW1TdHlsZToge30KICAgIH0sCiAgICBbMTIxMiwgNTQ1NCwgJ1ZhdGljYW4nXSwgLy8gaXQgY2FuIGFsc28gYmUgYSB2YWx1ZSBvZiBkYXRhSXRlbSwgd2hpY2ggaXMgYSBtb3JlIGNvbW1vbiBjYXNlCiAgICBbMjMyMywgMzIyMywgJ05hdXJ1J10sIC8vIGV2ZXJ5IGRhdGEgdmFsdWUgaGVyZSBpcyB0aHJlZSBkaW1lbnNpb24KICAgIFs0MzQzLCAyMywgJ1R1dmFsdSddIC8vIElmIGlzIHNjYXR0ZXIgY2hhcnQsIHVzdWFsbHkgbWFwIHRoZSBmaXJzdCBkaW1lbnNpb24gdG8geCBheGlzLAogICAgLy8gdGhlIHNlY29uZCBkaW1lbnNpb24gdG8geSBheGlzLAogICAgLy8gYW5kIHRoZSB0aGlyZCBkaW1lbnNpb24gdG8gc3ltYm9sU2l6ZQogIF07Cn0\'" line-highlights="\'\'" />\n<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href="https://echarts.apache.org/option.html#series-scatter">scatter charts</a> use radius to represent the third dimension.</p>\n<h2 id="the-visualmap-component" tabindex="-1">The visualMap Component</h2>\n<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>\n<p>The following two types of visualMap components are supported, identified with <a href="https://echarts.apache.org/option.html#visualMap.type">visualMap.type</a>.</p>\n<p>Its structure is defined as:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgLy8gY2FuIGRlZmluZSBtdWx0aXBsZSB2aXN1YWxNYXAgY29tcG9uZW50cyBhdCB0aGUgc2FtZSB0aW1lCiAgICB7CiAgICAgIC8vIHRoZSBmaXJzdCB2aXN1YWxNYXAgY29tcG9uZW50CiAgICAgIHR5cGU6ICdjb250aW51b3VzJyAvLyBkZWZpbmVkIGFzIGNvbnRpbnVvdXMgdmlzdWFsTWFwCiAgICAgIC8vIC4uLgogICAgfSwKICAgIHsKICAgICAgLy8gdGhlIHNlY29uZCB2aXN1YWxNYXAgY29tcG9uZW50CiAgICAgIHR5cGU6ICdwaWVjZXdpc2UnIC8vIGRlZmluZWQgYXMgZGlzY3JldGUgdmlzdWFsTWFwCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="continuous-and-piecewise-visual-mapping-components" tabindex="-1">Continuous and Piecewise Visual Mapping Components</h2>\n<p>The visual mapping component of ECharts is divided into continuous (<a href="https://echarts.apache.org/option.html#visualMap-continuous">visualMapContinuous</a>) and piecewise (<a href="https://echarts.apache.org/option.html#visualMap-piecewise">visualMapPiecewise</a>).</p>\n<p>Continuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data.</p>\n<h3 id="continuous-visual-mapping" tabindex="-1">Continuous Visual Mapping</h3>\n<p>Continuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgewogICAgICB0eXBlOiAncGllY2V3aXNlJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDUwMDAsCiAgICAgIGRpbWVuc2lvbjogMywgLy8gdGhlIGZvdXJ0aCBkaW1lbnNpb24gb2Ygc2VyaWVzLmRhdGEgKGkuZS4gdmFsdWVbM10pIGlzIG1hcHBlZAogICAgICBzZXJpZXNJbmRleDogNCwgLy8gVGhlIGZvdXJ0aCBzZXJpZXMgaXMgbWFwcGVkLgogICAgICBpblJhbmdlOiB7CiAgICAgICAgLy8gVGhlIHZpc3VhbCBjb25maWd1cmF0aW9uIGluIHRoZSBzZWxlY3RlZCByYW5nZQogICAgICAgIGNvbG9yOiBbJ2JsdWUnLCAnIzEyMTEyMicsICdyZWQnXSwgLy8gQSBsaXN0IG9mIGNvbG9ycyB0aGF0IGRlZmluZXMgdGhlIGdyYXBoIGNvbG9yIG1hcHBpbmcKICAgICAgICAvLyB0aGUgbWluaW11bSB2YWx1ZSBvZiB0aGUgZGF0YSBpcyBtYXBwZWQgdG8gJ2JsdWUnLCBhbmQKICAgICAgICAvLyB0aGUgbWF4aW11bSB2YWx1ZSBpcyBtYXBwZWQgdG8gJ3JlZCcsIC8vIHRoZSBtYXhpbXVtIHZhbHVlIGlzIG1hcHBlZCB0byAncmVkJywgLy8gdGhlIG1heGltdW0gdmFsdWUgaXMgbWFwcGVkIHRvICdyZWQnLgogICAgICAgIC8vIFRoZSByZXN0IGlzIGF1dG9tYXRpY2FsbHkgY2FsY3VsYXRlZCBsaW5lYXJseS4KICAgICAgICBzeW1ib2xTaXplOiBbMzAsIDEwMF0gLy8gRGVmaW5lcyB0aGUgbWFwcGluZyByYW5nZSBmb3IgdGhlIGdyYXBoaWMgc2l6ZS4KICAgICAgICAvLyBUaGUgbWluaW11bSB2YWx1ZSBvZiB0aGUgZGF0YSBpcyBtYXBwZWQgdG8gMzAsIC8vIGFuZCB0aGUgbWF4aW11bSB2YWx1ZSBpcyBtYXBwZWQgdG8gMTAwLgogICAgICAgIC8vIFRoZSBtYXhpbXVtIHZhbHVlIGlzIG1hcHBlZCB0byAxMDAuCiAgICAgICAgLy8gVGhlIHJlc3QgaXMgY2FsY3VsYXRlZCBsaW5lYXJseSBhdXRvbWF0aWNhbGx5LgogICAgICB9LAogICAgICBvdXRPZlJhbmdlOiB7CiAgICAgICAgLy8gQ2hlY2sgdGhlIG91dCBvZiByYW5nZSB2aXN1YWwgY29uZmlndXJhdGlvbgogICAgICAgIHN5bWJvbFNpemU6IFszMCwgMTAwXQogICAgICB9CiAgICB9CiAgICAvLyAuLi4KICBdCn07\'" line-highlights="\'\'" />\n<p>where <a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> indicates the style used for data within the data mapping range; while <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> specifies the style for data outside the mapping range.</p>\n<p><a href="~visualMap.dimension">visualMap.dimension</a> specifies which dimension of the data will be visually mapped.</p>\n<h3 id="piecewise-visual-mapping" tabindex="-1">Piecewise Visual Mapping</h3>\n<p>The piecewise visual mapping component has three modes.</p>\n<ul>\n<li>Continuous data average segmentation: based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> to automatically split the data into pieces equally.</li>\n<li>Continuous data custom segmentation: define the range of each piece based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a>.</li>\n<li>Discrete data (categorical data): categories are defined in <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p>To use segmented visual map, you need to set <code>type</code> to <code>\'piecewise\'</code> and choose one of the above three configuration items.</p>\n',postPath:"en/concepts/visual-map"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:e},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:g},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:I}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:C},{title:"配置项",dir:u,draft:e},{title:"系列",dir:B,draft:e},{title:"样式",dir:b},{title:"数据集",dir:A},{title:"数据转换",dir:v},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:W},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:w,children:[{title:"常用图表类型",dir:f,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:M},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:S,draft:e},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:R},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:x}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:k},{title:"南丁格尔图(玫瑰图)",dir:J}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:E}]}]},{title:T,dir:i,draft:e},{title:"跨平台方案",dir:D,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:K,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:e}]}]},{title:"最佳实践",dir:q,children:[{title:T,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:e},{title:"Inspiration",dir:s},{title:"Get Help",dir:g},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:h},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:I}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:C},{title:"Chart Option",dir:u,draft:e},{title:"Series",dir:B,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:A},{title:"Data Transform",dir:v},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:W},{title:"Event and Action",dir:Z}]},{title:"How To Guides",dir:w,children:[{title:"Common Charts",dir:f,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:M},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:S,draft:e},{title:"Waterfall",dir:L}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:R},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:x}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:k},{title:"Rose Style",dir:J}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:E}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:D,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:K,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:e}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},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:e,routePath:"/en/concepts/visual-map",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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>where <a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> indicates the style used for data within the data mapping range; while <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> specifies the style for data outside the mapping range.</p> <p><a href="~visualMap.dimension">visualMap.dimension</a> specifies which dimension of the data will be visually mapped.</p> <h3 id="piecewise-visual-mapping" tabindex="-1">Piecewise Visual Mapping</h3> <p>The piecewise visual mapping component has three modes.</p> <ul><li>Continuous data average segmentation: based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> to automatically split the data into pieces equally.</li> <li>Continuous data custom segmentation: define the range of each piece based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a>.</li> <li>Discrete data (categorical data): categories are defined in <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a>.</li></ul> <p>To use segmented visual map, you need to set <code>type</code> to <code>'piecewise'</code> and choose one of the above three configuration items.</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/en/concepts/visual-map.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,a,l,d,r,o,n,s,g,c,h,p,I,m,C,u,B,b,A,v,y,G,W,Z,w,f,M,Y,X,S,L,V,R,F,z,H,x,N,k,J,U,E,T,D,Q,P,j,K,O,_,$,q,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="visual-map-of-data" tabindex="-1">Visual Map of Data</h1>\n<p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels.</p>\n<p>Every type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into <em>lines</em>, bar chart map data into <em>height</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>\n<p>Besides, ECharts provides <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:</p>\n<ul>\n<li><code>symbol</code>, <code>symbolSize</code></li>\n<li><code>color</code>, <code>opacity</code>, <code>colorAlpha</code>,</li>\n<li><code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></li>\n</ul>\n<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>\n<h2 id="data-and-dimension" tabindex="-1">Data and Dimension</h2>\n<p>Data are usually stored in <a href="https://echarts.apache.org/option.html#series.data">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p>\n<p>For example, <a href="https://echarts.apache.org/option.html#series.data">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyBldmVyeSBpdGVtIGhlcmUgaXMgYSBkYXRhSXRlbQogICAgICB2YWx1ZTogMjMyMywgLy8gdGhpcyBpcyBkYXRhIHZhbHVlCiAgICAgIGl0ZW1TdHlsZToge30KICAgIH0sCiAgICAxMjEyLCAvLyBpdCBjYW4gYWxzbyBiZSBhIHZhbHVlIG9mIGRhdGFJdGVtLCB3aGljaCBpcyBhIG1vcmUgY29tbW9uIGNhc2UKICAgIDIzMjMsIC8vIGV2ZXJ5IGRhdGEgdmFsdWUgaGVyZSBpcyBvbmUgZGltZW5zaW9uCiAgICA0MzQzLAogICAgMzQzNAogIF07Cn0\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyBldmVyeSBpdGVtIGhlcmUgaXMgYSBkYXRhSXRlbQogICAgICB2YWx1ZTogWzM0MzQsIDEyOSwgJ1NhbiBNYXJpbm8nXSwgLy8gdGhpcyBpcyBkYXRhIHZhbHVlCiAgICAgIGl0ZW1TdHlsZToge30KICAgIH0sCiAgICBbMTIxMiwgNTQ1NCwgJ1ZhdGljYW4nXSwgLy8gaXQgY2FuIGFsc28gYmUgYSB2YWx1ZSBvZiBkYXRhSXRlbSwgd2hpY2ggaXMgYSBtb3JlIGNvbW1vbiBjYXNlCiAgICBbMjMyMywgMzIyMywgJ05hdXJ1J10sIC8vIGV2ZXJ5IGRhdGEgdmFsdWUgaGVyZSBpcyB0aHJlZSBkaW1lbnNpb24KICAgIFs0MzQzLCAyMywgJ1R1dmFsdSddIC8vIElmIGlzIHNjYXR0ZXIgY2hhcnQsIHVzdWFsbHkgbWFwIHRoZSBmaXJzdCBkaW1lbnNpb24gdG8geCBheGlzLAogICAgLy8gdGhlIHNlY29uZCBkaW1lbnNpb24gdG8geSBheGlzLAogICAgLy8gYW5kIHRoZSB0aGlyZCBkaW1lbnNpb24gdG8gc3ltYm9sU2l6ZQogIF07Cn0\'" line-highlights="\'\'" />\n<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href="https://echarts.apache.org/option.html#series-scatter">scatter charts</a> use radius to represent the third dimension.</p>\n<h2 id="the-visualmap-component" tabindex="-1">The visualMap Component</h2>\n<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>\n<p>The following two types of visualMap components are supported, identified with <a href="https://echarts.apache.org/option.html#visualMap.type">visualMap.type</a>.</p>\n<p>Its structure is defined as:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgLy8gY2FuIGRlZmluZSBtdWx0aXBsZSB2aXN1YWxNYXAgY29tcG9uZW50cyBhdCB0aGUgc2FtZSB0aW1lCiAgICB7CiAgICAgIC8vIHRoZSBmaXJzdCB2aXN1YWxNYXAgY29tcG9uZW50CiAgICAgIHR5cGU6ICdjb250aW51b3VzJyAvLyBkZWZpbmVkIGFzIGNvbnRpbnVvdXMgdmlzdWFsTWFwCiAgICAgIC8vIC4uLgogICAgfSwKICAgIHsKICAgICAgLy8gdGhlIHNlY29uZCB2aXN1YWxNYXAgY29tcG9uZW50CiAgICAgIHR5cGU6ICdwaWVjZXdpc2UnIC8vIGRlZmluZWQgYXMgZGlzY3JldGUgdmlzdWFsTWFwCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="continuous-and-piecewise-visual-mapping-components" tabindex="-1">Continuous and Piecewise Visual Mapping Components</h2>\n<p>The visual mapping component of ECharts is divided into continuous (<a href="https://echarts.apache.org/option.html#visualMap-continuous">visualMapContinuous</a>) and piecewise (<a href="https://echarts.apache.org/option.html#visualMap-piecewise">visualMapPiecewise</a>).</p>\n<p>Continuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data.</p>\n<h3 id="continuous-visual-mapping" tabindex="-1">Continuous Visual Mapping</h3>\n<p>Continuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgewogICAgICB0eXBlOiAncGllY2V3aXNlJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDUwMDAsCiAgICAgIGRpbWVuc2lvbjogMywgLy8gdGhlIGZvdXJ0aCBkaW1lbnNpb24gb2Ygc2VyaWVzLmRhdGEgKGkuZS4gdmFsdWVbM10pIGlzIG1hcHBlZAogICAgICBzZXJpZXNJbmRleDogNCwgLy8gVGhlIGZvdXJ0aCBzZXJpZXMgaXMgbWFwcGVkLgogICAgICBpblJhbmdlOiB7CiAgICAgICAgLy8gVGhlIHZpc3VhbCBjb25maWd1cmF0aW9uIGluIHRoZSBzZWxlY3RlZCByYW5nZQogICAgICAgIGNvbG9yOiBbJ2JsdWUnLCAnIzEyMTEyMicsICdyZWQnXSwgLy8gQSBsaXN0IG9mIGNvbG9ycyB0aGF0IGRlZmluZXMgdGhlIGdyYXBoIGNvbG9yIG1hcHBpbmcKICAgICAgICAvLyB0aGUgbWluaW11bSB2YWx1ZSBvZiB0aGUgZGF0YSBpcyBtYXBwZWQgdG8gJ2JsdWUnLCBhbmQKICAgICAgICAvLyB0aGUgbWF4aW11bSB2YWx1ZSBpcyBtYXBwZWQgdG8gJ3JlZCcsIC8vIHRoZSBtYXhpbXVtIHZhbHVlIGlzIG1hcHBlZCB0byAncmVkJywgLy8gdGhlIG1heGltdW0gdmFsdWUgaXMgbWFwcGVkIHRvICdyZWQnLgogICAgICAgIC8vIFRoZSByZXN0IGlzIGF1dG9tYXRpY2FsbHkgY2FsY3VsYXRlZCBsaW5lYXJseS4KICAgICAgICBzeW1ib2xTaXplOiBbMzAsIDEwMF0gLy8gRGVmaW5lcyB0aGUgbWFwcGluZyByYW5nZSBmb3IgdGhlIGdyYXBoaWMgc2l6ZS4KICAgICAgICAvLyBUaGUgbWluaW11bSB2YWx1ZSBvZiB0aGUgZGF0YSBpcyBtYXBwZWQgdG8gMzAsIC8vIGFuZCB0aGUgbWF4aW11bSB2YWx1ZSBpcyBtYXBwZWQgdG8gMTAwLgogICAgICAgIC8vIFRoZSBtYXhpbXVtIHZhbHVlIGlzIG1hcHBlZCB0byAxMDAuCiAgICAgICAgLy8gVGhlIHJlc3QgaXMgY2FsY3VsYXRlZCBsaW5lYXJseSBhdXRvbWF0aWNhbGx5LgogICAgICB9LAogICAgICBvdXRPZlJhbmdlOiB7CiAgICAgICAgLy8gQ2hlY2sgdGhlIG91dCBvZiByYW5nZSB2aXN1YWwgY29uZmlndXJhdGlvbgogICAgICAgIHN5bWJvbFNpemU6IFszMCwgMTAwXQogICAgICB9CiAgICB9CiAgICAvLyAuLi4KICBdCn07\'" line-highlights="\'\'" />\n<p>where <a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> indicates the style used for data within the data mapping range; while <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> specifies the style for data outside the mapping range.</p>\n<p><a href="~visualMap.dimension">visualMap.dimension</a> specifies which dimension of the data will be visually mapped.</p>\n<h3 id="piecewise-visual-mapping" tabindex="-1">Piecewise Visual Mapping</h3>\n<p>The piecewise visual mapping component has three modes.</p>\n<ul>\n<li>Continuous data average segmentation: based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> to automatically split the data into pieces equally.</li>\n<li>Continuous data custom segmentation: define the range of each piece based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a>.</li>\n<li>Discrete data (categorical data): categories are defined in <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p>To use segmented visual map, you need to set <code>type</code> to <code>\'piecewise\'</code> and choose one of the above three configuration items.</p>\n',postPath:"en/concepts/visual-map"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:e},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:g},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:I}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:C},{title:"配置项",dir:u,draft:e},{title:"系列",dir:B,draft:e},{title:"样式",dir:b},{title:"数据集",dir:A},{title:"数据转换",dir:v},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:W},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:w,children:[{title:"常用图表类型",dir:f,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:M},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:S,draft:e},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:R},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:x}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:k},{title:"南丁格尔图(玫瑰图)",dir:J}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:E}]}]},{title:T,dir:i,draft:e},{title:"跨平台方案",dir:D,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:K,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:e}]}]},{title:"最佳实践",dir:q,children:[{title:T,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:e},{title:"Inspiration",dir:s},{title:"Get Help",dir:g},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:h},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:I}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:C},{title:"Chart Option",dir:u,draft:e},{title:"Series",dir:B,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:A},{title:"Data Transform",dir:v},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:W},{title:"Event and Action",dir:Z}]},{title:"How To Guides",dir:w,children:[{title:"Common Charts",dir:f,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:M},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:S,draft:e},{title:"Waterfall",dir:L}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:R},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:x}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:k},{title:"Rose Style",dir:J}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:E}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:D,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:K,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:e}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},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:e,routePath:"/en/concepts/visual-map",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/get-started/index.html b/handbook/en/get-started/index.html
index 24a0887..56e69cd 100644
--- a/handbook/en/get-started/index.html
+++ b/handbook/en/get-started/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="get-started" tabindex="-1">Get Started</h1> <h2 id="getting-apache-echarts" tabindex="-1">Getting Apache ECharts</h2> <p>Apache ECharts supports several download methods, which are further explained in the next tutorial <a href="en/basics/download">Installation</a>. Here, we take the example of getting it from the <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN and explain how to install it quickly.</p> <p>At <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> select <code>dist/echarts.js</code>, click and save it as <code>echarts.js</code> file.</p> <blockquote><p>More information about these files can be found in the next tutorial <a href="en/basics/download">Installation</a>.</p></blockquote> <h2 id="including-echarts" tabindex="-1">Including ECharts</h2> <p>Create a new <code>index.html</code> file in the directory where you just saved <code>echarts.js</code>, with the following content:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="get-started" tabindex="-1">Get Started</h1> <h2 id="getting-apache-echarts" tabindex="-1">Getting Apache ECharts</h2> <p>Apache ECharts supports several download methods, which are further explained in the next tutorial <a href="en/basics/download">Installation</a>. Here, we take the example of getting it from the <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN and explain how to install it quickly.</p> <p>At <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> select <code>dist/echarts.js</code>, click and save it as <code>echarts.js</code> file.</p> <blockquote><p>More information about these files can be found in the next tutorial <a href="en/basics/download">Installation</a>.</p></blockquote> <h2 id="including-echarts" tabindex="-1">Including ECharts</h2> <p>Create a new <code>index.html</code> file in the directory where you just saved <code>echarts.js</code>, with the following content:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
@@ -58,7 +58,8 @@
myChart.setOption(option);
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</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>And this is your first chart with Apache ECharts!</p> <p><iframe width="100%" height="350" src=""></iframe></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/en/get-started.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,d,r,a,l,n,h,o,g,c,s,C,I,p,A,m,G,b,w,u,f,B,Z,y,k,W,R,x,H,P,v,X,E,D,F,S,V,Y,N,j,z,L,M,J,U,Q,T,K,O,_,q,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="get-started" tabindex="-1">Get Started</h1>\n<h2 id="getting-apache-echarts" tabindex="-1">Getting Apache ECharts</h2>\n<p>Apache ECharts supports several download methods, which are further explained in the next tutorial <a href="en/basics/download">Installation</a>. Here, we take the example of getting it from the <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN and explain how to install it quickly.</p>\n<p>At <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> select <code>dist/echarts.js</code>, click and save it as <code>echarts.js</code> file.</p>\n<blockquote>\n<p>More information about these files can be found in the next tutorial <a href="en/basics/download">Installation</a>.</p>\n</blockquote>\n<h2 id="including-echarts" tabindex="-1">Including ECharts</h2>\n<p>Create a new <code>index.html</code> file in the directory where you just saved <code>echarts.js</code>, with the following content:</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8IS0tIEluY2x1ZGUgdGhlIEVDaGFydHMgZmlsZSB5b3UganVzdCBkb3dubG9hZGVkIC0tPgogICAgPHNjcmlwdCBzcmM9ImVjaGFydHMuanMiPjwvc2NyaXB0PgogIDwvaGVhZD4KPC9odG1sPg\'" line-highlights="\'\'" />\n<p>When you open this <code>index.html</code>, you will see an empty page. But don\'t worry. Open the console and make sure that no error message is reported, then you can proceed to the next step.</p>\n<h2 id="plotting-a-simple-chart" tabindex="-1">Plotting a Simple Chart</h2>\n<p>Before drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the <code></head></code> tag introduced earlier.</p>\n<md-code-block lang="html" code="\'PGJvZHk-CiAgPCEtLSBQcmVwYXJlIGEgRE9NIHdpdGggYSBkZWZpbmVkIHdpZHRoIGFuZCBoZWlnaHQgZm9yIEVDaGFydHMgLS0-CiAgPGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KPC9ib2R5Pg\'" line-highlights="\'\'" />\n<p>Then you can initialize an echarts instance with the <a href="https://echarts.apache.org/api.html#echarts.init">echarts.init</a> method and set the echarts instance with <a href="https://echarts.apache.org/api.html#echartsInstance.setOption">setOption</a> method to generate a simple bar chart. Here is the complete code.</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8dGl0bGU-RUNoYXJ0czwvdGl0bGU-CiAgICA8IS0tIEluY2x1ZGUgdGhlIEVDaGFydHMgZmlsZSB5b3UganVzdCBkb3dubG9hZGVkIC0tPgogICAgPHNjcmlwdCBzcmM9ImVjaGFydHMubWluLmpzIj48L3NjcmlwdD4KICA8L2hlYWQ-CiAgPGJvZHk-CiAgICA8IS0tIFByZXBhcmUgYSBET00gd2l0aCBhIGRlZmluZWQgd2lkdGggYW5kIGhlaWdodCBmb3IgRUNoYXJ0cyAtLT4KICAgIDxkaXYgaWQ9Im1haW4iIHN0eWxlPSJ3aWR0aDogNjAwcHg7aGVpZ2h0OjQwMHB4OyI-PC9kaXY-CiAgICA8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI-CiAgICAgIC8vIEluaXRpYWxpemUgdGhlIGVjaGFydHMgaW5zdGFuY2UgYmFzZWQgb24gdGhlIHByZXBhcmVkIGRvbQogICAgICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCiAgICAgIC8vIFNwZWNpZnkgdGhlIGNvbmZpZ3VyYXRpb24gaXRlbXMgYW5kIGRhdGEgZm9yIHRoZSBjaGFydAogICAgICB2YXIgb3B0aW9uID0gewogICAgICAgIHRpdGxlOiB7CiAgICAgICAgICB0ZXh0OiAnRUNoYXJ0cyBHZXR0aW5nIFN0YXJ0ZWQgRXhhbXBsZScKICAgICAgICB9LAogICAgICAgIHRvb2x0aXA6IHt9LAogICAgICAgIGxlZ2VuZDogewogICAgICAgICAgZGF0YTogWydzYWxlcyddCiAgICAgICAgfSwKICAgICAgICB4QXhpczogewogICAgICAgICAgZGF0YTogWydTaGlydHMnLCAnQ2FyZGlnYW5zJywgJ0NoaWZmb25zJywgJ1BhbnRzJywgJ0hlZWxzJywgJ1NvY2tzJ10KICAgICAgICB9LAogICAgICAgIHlBeGlzOiB7fSwKICAgICAgICBzZXJpZXM6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgbmFtZTogJ3NhbGVzJywKICAgICAgICAgICAgdHlwZTogJ2JhcicsCiAgICAgICAgICAgIGRhdGE6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgICAgICAgICB9CiAgICAgICAgXQogICAgICB9OwoKICAgICAgLy8gRGlzcGxheSB0aGUgY2hhcnQgdXNpbmcgdGhlIGNvbmZpZ3VyYXRpb24gaXRlbXMgYW5kIGRhdGEganVzdCBzcGVjaWZpZWQuCiAgICAgIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbik7CiAgICA8L3NjcmlwdD4KICA8L2JvZHk-CjwvaHRtbD4\'" line-highlights="\'\'" />\n<p>And this is your first chart with Apache ECharts!</p>\n<p><md-example src="doc-example/getting-started&reset=1&edit=1"></md-example></p>\n',postPath:"en/get-started"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:g},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:G,draft:t},{title:"样式",dir:b},{title:"数据集",dir:w},{title:"数据转换",dir:u},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:Z},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:H},{title:"极坐标系柱状图",dir:P,draft:t},{title:"阶梯瀑布图",dir:v},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:X,children:[{title:"基础折线图",dir:E},{title:"堆叠折线图",dir:D},{title:"区域面积图",dir:F},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Y},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:j}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:L}]}]},{title:M,dir:e,draft:t},{title:"跨平台方案",dir:J,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:M,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:g},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:G,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:w},{title:"Data Transform",dir:u},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:Z},{title:"Event and Action",dir:y}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:H},{title:"Bar Polar",dir:P,draft:t},{title:"Waterfall",dir:v}]},{title:"Line",dir:X,children:[{title:"Basic Line",dir:E},{title:"Stacked Line",dir:D},{title:"Area Chart",dir:F},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Y},{title:"Ring Style",dir:N},{title:"Rose Style",dir:j}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:L}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:J,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/get-started",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</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>And this is your first chart with Apache ECharts!</p> <p><iframe width="100%" height="350" src=""></iframe></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/en/get-started.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,d,r,a,l,n,h,o,g,c,s,C,I,p,A,m,G,b,w,u,f,B,Z,y,k,W,R,x,H,P,v,X,E,D,F,S,V,Y,N,j,z,L,M,J,U,Q,T,K,O,_,q,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="get-started" tabindex="-1">Get Started</h1>\n<h2 id="getting-apache-echarts" tabindex="-1">Getting Apache ECharts</h2>\n<p>Apache ECharts supports several download methods, which are further explained in the next tutorial <a href="en/basics/download">Installation</a>. Here, we take the example of getting it from the <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN and explain how to install it quickly.</p>\n<p>At <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> select <code>dist/echarts.js</code>, click and save it as <code>echarts.js</code> file.</p>\n<blockquote>\n<p>More information about these files can be found in the next tutorial <a href="en/basics/download">Installation</a>.</p>\n</blockquote>\n<h2 id="including-echarts" tabindex="-1">Including ECharts</h2>\n<p>Create a new <code>index.html</code> file in the directory where you just saved <code>echarts.js</code>, with the following content:</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8IS0tIEluY2x1ZGUgdGhlIEVDaGFydHMgZmlsZSB5b3UganVzdCBkb3dubG9hZGVkIC0tPgogICAgPHNjcmlwdCBzcmM9ImVjaGFydHMuanMiPjwvc2NyaXB0PgogIDwvaGVhZD4KPC9odG1sPg\'" line-highlights="\'\'" />\n<p>When you open this <code>index.html</code>, you will see an empty page. But don\'t worry. Open the console and make sure that no error message is reported, then you can proceed to the next step.</p>\n<h2 id="plotting-a-simple-chart" tabindex="-1">Plotting a Simple Chart</h2>\n<p>Before drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the <code></head></code> tag introduced earlier.</p>\n<md-code-block lang="html" code="\'PGJvZHk-CiAgPCEtLSBQcmVwYXJlIGEgRE9NIHdpdGggYSBkZWZpbmVkIHdpZHRoIGFuZCBoZWlnaHQgZm9yIEVDaGFydHMgLS0-CiAgPGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KPC9ib2R5Pg\'" line-highlights="\'\'" />\n<p>Then you can initialize an echarts instance with the <a href="https://echarts.apache.org/api.html#echarts.init">echarts.init</a> method and set the echarts instance with <a href="https://echarts.apache.org/api.html#echartsInstance.setOption">setOption</a> method to generate a simple bar chart. Here is the complete code.</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8dGl0bGU-RUNoYXJ0czwvdGl0bGU-CiAgICA8IS0tIEluY2x1ZGUgdGhlIEVDaGFydHMgZmlsZSB5b3UganVzdCBkb3dubG9hZGVkIC0tPgogICAgPHNjcmlwdCBzcmM9ImVjaGFydHMubWluLmpzIj48L3NjcmlwdD4KICA8L2hlYWQ-CiAgPGJvZHk-CiAgICA8IS0tIFByZXBhcmUgYSBET00gd2l0aCBhIGRlZmluZWQgd2lkdGggYW5kIGhlaWdodCBmb3IgRUNoYXJ0cyAtLT4KICAgIDxkaXYgaWQ9Im1haW4iIHN0eWxlPSJ3aWR0aDogNjAwcHg7aGVpZ2h0OjQwMHB4OyI-PC9kaXY-CiAgICA8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI-CiAgICAgIC8vIEluaXRpYWxpemUgdGhlIGVjaGFydHMgaW5zdGFuY2UgYmFzZWQgb24gdGhlIHByZXBhcmVkIGRvbQogICAgICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCiAgICAgIC8vIFNwZWNpZnkgdGhlIGNvbmZpZ3VyYXRpb24gaXRlbXMgYW5kIGRhdGEgZm9yIHRoZSBjaGFydAogICAgICB2YXIgb3B0aW9uID0gewogICAgICAgIHRpdGxlOiB7CiAgICAgICAgICB0ZXh0OiAnRUNoYXJ0cyBHZXR0aW5nIFN0YXJ0ZWQgRXhhbXBsZScKICAgICAgICB9LAogICAgICAgIHRvb2x0aXA6IHt9LAogICAgICAgIGxlZ2VuZDogewogICAgICAgICAgZGF0YTogWydzYWxlcyddCiAgICAgICAgfSwKICAgICAgICB4QXhpczogewogICAgICAgICAgZGF0YTogWydTaGlydHMnLCAnQ2FyZGlnYW5zJywgJ0NoaWZmb25zJywgJ1BhbnRzJywgJ0hlZWxzJywgJ1NvY2tzJ10KICAgICAgICB9LAogICAgICAgIHlBeGlzOiB7fSwKICAgICAgICBzZXJpZXM6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgbmFtZTogJ3NhbGVzJywKICAgICAgICAgICAgdHlwZTogJ2JhcicsCiAgICAgICAgICAgIGRhdGE6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgICAgICAgICB9CiAgICAgICAgXQogICAgICB9OwoKICAgICAgLy8gRGlzcGxheSB0aGUgY2hhcnQgdXNpbmcgdGhlIGNvbmZpZ3VyYXRpb24gaXRlbXMgYW5kIGRhdGEganVzdCBzcGVjaWZpZWQuCiAgICAgIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbik7CiAgICA8L3NjcmlwdD4KICA8L2JvZHk-CjwvaHRtbD4\'" line-highlights="\'\'" />\n<p>And this is your first chart with Apache ECharts!</p>\n<p><md-example src="doc-example/getting-started&reset=1&edit=1"></md-example></p>\n',postPath:"en/get-started"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:g},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:G,draft:t},{title:"样式",dir:b},{title:"数据集",dir:w},{title:"数据转换",dir:u},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:Z},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:H},{title:"极坐标系柱状图",dir:P,draft:t},{title:"阶梯瀑布图",dir:v},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:X,children:[{title:"基础折线图",dir:E},{title:"堆叠折线图",dir:D},{title:"区域面积图",dir:F},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Y},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:j}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:L}]}]},{title:M,dir:e,draft:t},{title:"跨平台方案",dir:J,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:M,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:g},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:G,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:w},{title:"Data Transform",dir:u},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:Z},{title:"Event and Action",dir:y}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:H},{title:"Bar Polar",dir:P,draft:t},{title:"Waterfall",dir:v}]},{title:"Line",dir:X,children:[{title:"Basic Line",dir:E},{title:"Stacked Line",dir:D},{title:"Area Chart",dir:F},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Y},{title:"Ring Style",dir:N},{title:"Rose Style",dir:j}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:L}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:J,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/get-started",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/bar/bar-race/index.html b/handbook/en/how-to/chart-types/bar/bar-race/index.html
index d0a4520..3b83051 100644
--- a/handbook/en/how-to/chart-types/bar/bar-race/index.html
+++ b/handbook/en/how-to/chart-types/bar/bar-race/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="dynamic-sorting-bar-chart" tabindex="-1">Dynamic Sorting Bar Chart</h1> <h2 id="related-options" tabindex="-1">Related Options</h2> <p>Bar race is a chart that shows changes in the ranking of data over time and it is supported by default sinde ECharts 5.</p> <blockquote><p>Bar race charts usually use horizontal bars. If you want to use vertical bars, just take the X axis and Y axis in this tutorial to the opposite.</p></blockquote> <ol><li>Set <code>yAxis.realtimeSort</code> to be <code>true</code> to enable bar race</li> <li>Set <code>yAxis.inverse</code> to be <code>true</code> to display longer bars at top</li> <li><code>yAxis.animationDuration</code> is suggested to be set to be <code>300</code> for bar reordering animation for the first time</li> <li><code>yAxis.animationDurationUpdate</code> is suggested to be set to be <code>300</code> for bar reordering animation for later times</li> <li>Set <code>yAxis.max</code> to be <em>n - 1</em> where <em>n</em> is the number of bars to be displayed; otherwise, all bars are displayed</li> <li><code>xAxis.max</code> is suggested to be set to be <code>'dataMax'</code> so that the maximum of data is used as X maximum.</li> <li>If realtime label changing is required, set <code>series.label.valueAnimation</code> to be <code>true</code></li> <li>Set <code>animationDuration</code> to be <code>0</code> so that the first animation doesn't start from 0; if you wish otherwise, set it to be the same value as <code>animationDurationUpdate</code></li> <li><code>animationDurationUpdate</code> is suggested to be set to be <code>3000</code> for animation update duration, which should be the same as the frequency of calling <code>setOption</code></li> <li>Call <code>setOption</code> to update data to be of next time with <code>setInterval</code> at the frequency of <code>animationDurationUpdate</code></li></ol> <h2 id="demo" tabindex="-1">Demo</h2> <p>A complete demo:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var data = [];
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="dynamic-sorting-bar-chart" tabindex="-1">Dynamic Sorting Bar Chart</h1> <h2 id="related-options" tabindex="-1">Related Options</h2> <p>Bar race is a chart that shows changes in the ranking of data over time and it is supported by default sinde ECharts 5.</p> <blockquote><p>Bar race charts usually use horizontal bars. If you want to use vertical bars, just take the X axis and Y axis in this tutorial to the opposite.</p></blockquote> <ol><li>Set <code>yAxis.realtimeSort</code> to be <code>true</code> to enable bar race</li> <li>Set <code>yAxis.inverse</code> to be <code>true</code> to display longer bars at top</li> <li><code>yAxis.animationDuration</code> is suggested to be set to be <code>300</code> for bar reordering animation for the first time</li> <li><code>yAxis.animationDurationUpdate</code> is suggested to be set to be <code>300</code> for bar reordering animation for later times</li> <li>Set <code>yAxis.max</code> to be <em>n - 1</em> where <em>n</em> is the number of bars to be displayed; otherwise, all bars are displayed</li> <li><code>xAxis.max</code> is suggested to be set to be <code>'dataMax'</code> so that the maximum of data is used as X maximum.</li> <li>If realtime label changing is required, set <code>series.label.valueAnimation</code> to be <code>true</code></li> <li>Set <code>animationDuration</code> to be <code>0</code> so that the first animation doesn't start from 0; if you wish otherwise, set it to be the same value as <code>animationDurationUpdate</code></li> <li><code>animationDurationUpdate</code> is suggested to be set to be <code>3000</code> for animation update duration, which should be the same as the frequency of calling <code>setOption</code></li> <li>Call <code>setOption</code> to update data to be of next time with <code>setInterval</code> at the frequency of <code>animationDurationUpdate</code></li></ol> <h2 id="demo" tabindex="-1">Demo</h2> <p>A complete demo:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var data = [];
for (let i = 0; i < 5; ++i) {
data.push(Math.round(Math.random() * 200));
}
@@ -119,7 +119,8 @@
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/bar/bar-race.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,o,n,s,c,h,g,p,b,C,m,I,A,u,f,y,B,w,W,G,S,R,v,Y,x,D,K,k,X,H,Z,F,V,L,E,O,P,J,M,U,z,T,N,Q,q,_,j,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="dynamic-sorting-bar-chart" tabindex="-1">Dynamic Sorting Bar Chart</h1>\n<h2 id="related-options" tabindex="-1">Related Options</h2>\n<p>Bar race is a chart that shows changes in the ranking of data over time and it is supported by default sinde ECharts 5.</p>\n<blockquote>\n<p>Bar race charts usually use horizontal bars. If you want to use vertical bars, just take the X axis and Y axis in this tutorial to the opposite.</p>\n</blockquote>\n<ol>\n<li>Set <code>yAxis.realtimeSort</code> to be <code>true</code> to enable bar race</li>\n<li>Set <code>yAxis.inverse</code> to be <code>true</code> to display longer bars at top</li>\n<li><code>yAxis.animationDuration</code> is suggested to be set to be <code>300</code> for bar reordering animation for the first time</li>\n<li><code>yAxis.animationDurationUpdate</code> is suggested to be set to be <code>300</code> for bar reordering animation for later times</li>\n<li>Set <code>yAxis.max</code> to be <em>n - 1</em> where <em>n</em> is the number of bars to be displayed; otherwise, all bars are displayed</li>\n<li><code>xAxis.max</code> is suggested to be set to be <code>\'dataMax\'</code> so that the maximum of data is used as X maximum.</li>\n<li>If realtime label changing is required, set <code>series.label.valueAnimation</code> to be <code>true</code></li>\n<li>Set <code>animationDuration</code> to be <code>0</code> so that the first animation doesn\'t start from 0; if you wish otherwise, set it to be the same value as <code>animationDurationUpdate</code></li>\n<li><code>animationDurationUpdate</code> is suggested to be set to be <code>3000</code> for animation update duration, which should be the same as the frequency of calling <code>setOption</code></li>\n<li>Call <code>setOption</code> to update data to be of next time with <code>setInterval</code> at the frequency of <code>animationDurationUpdate</code></li>\n</ol>\n<h2 id="demo" tabindex="-1">Demo</h2>\n<p>A complete demo:</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbXTsKZm9yIChsZXQgaSA9IDA7IGkgPCA1OyArK2kpIHsKICBkYXRhLnB1c2goTWF0aC5yb3VuZChNYXRoLnJhbmRvbSgpICogMjAwKSk7Cn0KCm9wdGlvbiA9IHsKICB4QXhpczogewogICAgbWF4OiAnZGF0YU1heCcKICB9LAogIHlBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXSwKICAgIGludmVyc2U6IHRydWUsCiAgICBhbmltYXRpb25EdXJhdGlvbjogMzAwLAogICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMCwKICAgIG1heDogMiAvLyBvbmx5IHRoZSBsYXJnZXN0IDMgYmFycyB3aWxsIGJlIGRpc3BsYXllZAogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHJlYWx0aW1lU29ydDogdHJ1ZSwKICAgICAgbmFtZTogJ1gnLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogZGF0YSwKICAgICAgbGFiZWw6IHsKICAgICAgICBzaG93OiB0cnVlLAogICAgICAgIHBvc2l0aW9uOiAncmlnaHQnLAogICAgICAgIHZhbHVlQW5pbWF0aW9uOiB0cnVlCiAgICAgIH0KICAgIH0KICBdLAogIGxlZ2VuZDogewogICAgc2hvdzogdHJ1ZQogIH0sCiAgYW5pbWF0aW9uRHVyYXRpb246IDAsCiAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMDAsCiAgYW5pbWF0aW9uRWFzaW5nOiAnbGluZWFyJywKICBhbmltYXRpb25FYXNpbmdVcGRhdGU6ICdsaW5lYXInCn07CgpmdW5jdGlvbiBydW4oKSB7CiAgdmFyIGRhdGEgPSBvcHRpb24uc2VyaWVzWzBdLmRhdGE7CiAgZm9yICh2YXIgaSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgICBpZiAoTWF0aC5yYW5kb20oKSA-IDAuOSkgewogICAgICBkYXRhW2ldICs9IE1hdGgucm91bmQoTWF0aC5yYW5kb20oKSAqIDIwMDApOwogICAgfSBlbHNlIHsKICAgICAgZGF0YVtpXSArPSBNYXRoLnJvdW5kKE1hdGgucmFuZG9tKCkgKiAyMDApOwogICAgfQogIH0KICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwp9CgpzZXRUaW1lb3V0KGZ1bmN0aW9uKCkgewogIHJ1bigpOwp9LCAwKTsKc2V0SW50ZXJ2YWwoZnVuY3Rpb24oKSB7CiAgcnVuKCk7Cn0sIDMwMDApOw\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/bar/bar-race"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:b}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:I,draft:t},{title:"系列",dir:A,draft:t},{title:"样式",dir:u},{title:"数据集",dir:f},{title:"数据转换",dir:y},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:G}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:D,draft:t},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:X},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:Z},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:L},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:P,children:[{title:"基础散点图",dir:J}]}]},{title:M,dir:i,draft:t},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:z}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:j,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:M,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:b}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:A,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:f},{title:"Data Transform",dir:y},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:G}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:D,draft:t},{title:"Waterfall",dir:K}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:X},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:Z},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:L},{title:"Ring Style",dir:E},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:P,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:z}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:j,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/bar/bar-race",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/bar/bar-race.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,o,n,s,c,h,g,p,b,C,m,I,A,u,f,y,B,w,W,G,S,R,v,Y,x,D,K,k,X,H,Z,F,V,L,E,O,P,J,M,U,z,T,N,Q,q,_,j,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="dynamic-sorting-bar-chart" tabindex="-1">Dynamic Sorting Bar Chart</h1>\n<h2 id="related-options" tabindex="-1">Related Options</h2>\n<p>Bar race is a chart that shows changes in the ranking of data over time and it is supported by default sinde ECharts 5.</p>\n<blockquote>\n<p>Bar race charts usually use horizontal bars. If you want to use vertical bars, just take the X axis and Y axis in this tutorial to the opposite.</p>\n</blockquote>\n<ol>\n<li>Set <code>yAxis.realtimeSort</code> to be <code>true</code> to enable bar race</li>\n<li>Set <code>yAxis.inverse</code> to be <code>true</code> to display longer bars at top</li>\n<li><code>yAxis.animationDuration</code> is suggested to be set to be <code>300</code> for bar reordering animation for the first time</li>\n<li><code>yAxis.animationDurationUpdate</code> is suggested to be set to be <code>300</code> for bar reordering animation for later times</li>\n<li>Set <code>yAxis.max</code> to be <em>n - 1</em> where <em>n</em> is the number of bars to be displayed; otherwise, all bars are displayed</li>\n<li><code>xAxis.max</code> is suggested to be set to be <code>\'dataMax\'</code> so that the maximum of data is used as X maximum.</li>\n<li>If realtime label changing is required, set <code>series.label.valueAnimation</code> to be <code>true</code></li>\n<li>Set <code>animationDuration</code> to be <code>0</code> so that the first animation doesn\'t start from 0; if you wish otherwise, set it to be the same value as <code>animationDurationUpdate</code></li>\n<li><code>animationDurationUpdate</code> is suggested to be set to be <code>3000</code> for animation update duration, which should be the same as the frequency of calling <code>setOption</code></li>\n<li>Call <code>setOption</code> to update data to be of next time with <code>setInterval</code> at the frequency of <code>animationDurationUpdate</code></li>\n</ol>\n<h2 id="demo" tabindex="-1">Demo</h2>\n<p>A complete demo:</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbXTsKZm9yIChsZXQgaSA9IDA7IGkgPCA1OyArK2kpIHsKICBkYXRhLnB1c2goTWF0aC5yb3VuZChNYXRoLnJhbmRvbSgpICogMjAwKSk7Cn0KCm9wdGlvbiA9IHsKICB4QXhpczogewogICAgbWF4OiAnZGF0YU1heCcKICB9LAogIHlBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXSwKICAgIGludmVyc2U6IHRydWUsCiAgICBhbmltYXRpb25EdXJhdGlvbjogMzAwLAogICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMCwKICAgIG1heDogMiAvLyBvbmx5IHRoZSBsYXJnZXN0IDMgYmFycyB3aWxsIGJlIGRpc3BsYXllZAogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHJlYWx0aW1lU29ydDogdHJ1ZSwKICAgICAgbmFtZTogJ1gnLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogZGF0YSwKICAgICAgbGFiZWw6IHsKICAgICAgICBzaG93OiB0cnVlLAogICAgICAgIHBvc2l0aW9uOiAncmlnaHQnLAogICAgICAgIHZhbHVlQW5pbWF0aW9uOiB0cnVlCiAgICAgIH0KICAgIH0KICBdLAogIGxlZ2VuZDogewogICAgc2hvdzogdHJ1ZQogIH0sCiAgYW5pbWF0aW9uRHVyYXRpb246IDAsCiAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMDAsCiAgYW5pbWF0aW9uRWFzaW5nOiAnbGluZWFyJywKICBhbmltYXRpb25FYXNpbmdVcGRhdGU6ICdsaW5lYXInCn07CgpmdW5jdGlvbiBydW4oKSB7CiAgdmFyIGRhdGEgPSBvcHRpb24uc2VyaWVzWzBdLmRhdGE7CiAgZm9yICh2YXIgaSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgICBpZiAoTWF0aC5yYW5kb20oKSA-IDAuOSkgewogICAgICBkYXRhW2ldICs9IE1hdGgucm91bmQoTWF0aC5yYW5kb20oKSAqIDIwMDApOwogICAgfSBlbHNlIHsKICAgICAgZGF0YVtpXSArPSBNYXRoLnJvdW5kKE1hdGgucmFuZG9tKCkgKiAyMDApOwogICAgfQogIH0KICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwp9CgpzZXRUaW1lb3V0KGZ1bmN0aW9uKCkgewogIHJ1bigpOwp9LCAwKTsKc2V0SW50ZXJ2YWwoZnVuY3Rpb24oKSB7CiAgcnVuKCk7Cn0sIDMwMDApOw\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/bar/bar-race"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:b}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:I,draft:t},{title:"系列",dir:A,draft:t},{title:"样式",dir:u},{title:"数据集",dir:f},{title:"数据转换",dir:y},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:G}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:D,draft:t},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:X},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:Z},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:L},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:P,children:[{title:"基础散点图",dir:J}]}]},{title:M,dir:i,draft:t},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:z}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:j,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:M,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:b}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:A,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:f},{title:"Data Transform",dir:y},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:G}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:D,draft:t},{title:"Waterfall",dir:K}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:X},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:Z},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:L},{title:"Ring Style",dir:E},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:P,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:z}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:j,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/bar/bar-race",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/bar/basic-bar/index.html b/handbook/en/how-to/chart-types/bar/basic-bar/index.html
index 26f30a1..f6de2ad 100644
--- a/handbook/en/how-to/chart-types/bar/basic-bar/index.html
+++ b/handbook/en/how-to/chart-types/bar/basic-bar/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="basic-bar-chart" tabindex="-1">Basic Bar Chart</h1> <p>Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportionally related to the categorical data.</p> <p>To set the bar chart, you need to set the <code>type</code> of <code>series</code> as <code>'bar'</code>.</p> <p><a href="https://echarts.apache.org/option.html#series-bar">[Option]</a></p> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>Let's begin with a basic bar chart:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">/*
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="basic-bar-chart" tabindex="-1">Basic Bar Chart</h1> <p>Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportionally related to the categorical data.</p> <p>To set the bar chart, you need to set the <code>type</code> of <code>series</code> as <code>'bar'</code>.</p> <p><a href="https://echarts.apache.org/option.html#series-bar">[Option]</a></p> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>Let's begin with a basic bar chart:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">/*
live
*/</span>
@@ -190,7 +190,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/bar/basic-bar.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/Hank" target="_blank" class="post-contributor"><img alt="Hank" src="https://avatars.githubusercontent.com/Hank?size=60"> <span>Hank</span></a><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,d,o,l,s,n,h,c,g,C,I,p,A,b,m,w,f,y,u,B,O,D,M,S,L,k,x,W,J,Y,G,H,R,v,X,K,F,z,T,E,U,V,j,Q,N,Z,P,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="basic-bar-chart" tabindex="-1">Basic Bar Chart</h1>\n<p>Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportionally related to the categorical data.</p>\n<p>To set the bar chart, you need to set the <code>type</code> of <code>series</code> as <code>\'bar\'</code>.</p>\n<p><a href="https://echarts.apache.org/option.html#series-bar">[Option]</a></p>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>Let\'s begin with a basic bar chart:</p>\n<md-code-block lang="js" code="\'LyoKbGl2ZQoKKi8Kb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<p>In this case, the x-axis is under the category type. Therefore, you should define some corresponding values for <code>\'xAxis\'</code>. Meanwhile, the data type of the y-axis is numerical. The range of the y-axis will be generated automatically by the <code>data</code> in <code>\'series\'</code>.</p>\n<h2 id="multi-series-bar-chart" tabindex="-1">Multi-series Bar Chart</h2>\n<p>You may use a series to represent a group of related data. To show multiple series in the same chart, you need to add one more array under the <code>series</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzI2LCAyNCwgMTgsIDIyLCAyMywgMjAsIDI3XQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="customized-bar-chart" tabindex="-1">Customized Bar Chart</h2>\n<h3 id="styles" tabindex="-1">Styles</h3>\n<p>It is a good idea to install the style of Bar Chart by using <a href="https://echarts.apache.org/option.html#series-bar.itemStyle">\'series.itemStyle\'</a>. Description of the SCI:</p>\n<ul>\n<li>Color of column(<code>\'color\'</code>);</li>\n<li>Outline color(<code>\'borderColor\'</code>), width(<code>\'borderWidth\'</code>), type(<code>\'borderType\'</code>) of column;</li>\n<li>Border radius of column(<code>\'barBorderRadius\'</code>);</li>\n<li>Transparency(<code>\'opacity\'</code>);</li>\n<li>Shadow type(<code>\'shadowBlur\'</code>, <code>\'shadowColor\'</code>, <code>\'shadowOffsetX\'</code>, <code>\'shadowOffsetY\'</code>)</li>\n</ul>\n<p>Here is a example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>In this case, we defined the style of the bar chart by <code>\'itemStyle\'</code> of corresponding <code>series</code>. For complete configuration items and their usage, please check the configuration item manual: <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a>。</p>\n<h3 id="width-and-height-of-column" tabindex="-1">Width and Height of Column</h3>\n<p>You can use <a href="https://echarts.apache.org/option.html##series-bar.barWidth"><code>barWidth</code></a> to change the width of the bar. For instance, the <code>\'barWidth\'</code> in the following case was set to <code>\'20%\'</code>. It indicates that width of each bar is 20% of the category width. As there are 5 data in every series, 20% <code>\'barWidth\'</code> means 4% for the entire x-axis.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>In addition, <a href="https://echarts.apache.org/option.html#series-bar.barMaxWidth"><code>barMaxWidth</code></a> has limited the maximum width of the bar. For some small value, you can declare a minimum height for the bar: <a href="https://echarts.apache.org/option.html#series-bar.barMinHeight"><code>barMinHeight</code></a>. When the corresponding height of data is smaller than the limit, ECharts will take \'barMinHeight\' as the replaced height.</p>\n<h3 id="column-spacing" tabindex="-1">Column Spacing</h3>\n<p>There are two kinds of column spacing. One is the spacing between different series under the same category: <a href="https://echarts.apache.org/option.html#series-bar.barWidth"><code>barWidth</code></a>. The other is the spacing between categories: <a href="https://echarts.apache.org/option.html#series-bar.barCategoryGap"><code>barCategoryGap</code></a>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDE4XSwKICAgICAgYmFyR2FwOiAnMjAlJywKICAgICAgYmFyQ2F0ZWdvcnlHYXA6ICc0MCUnCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzEyLCAxNCwgOSwgOSwgMTFdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>In this case, the <code>barGap</code> is <code>\'20%\'</code>. That means the distance between bars under the same category is 20% of the bar width. For instance, if we set the <code>barCategoryGap</code> to <code>\'40%\'</code>, the gap on each side of the bar will take 40% place in categories (compared with the width of the column).</p>\n<p>Usually, <code>barWidth</code> is not necessary to be clarified if <code>\'barGap\'</code> and <code>barCategoryGap</code> was set. If you need to make sure the bar is not too wide while the graph is large, try to use <code>barMaxWidth</code> to limit the maximum width of bars.</p>\n<blockquote>\n<p>In the same cartesian coordinate system, the property will be shared by several column series. To make sure it takes effect on the graph, please set the property on the last bar chart series of the system.</p>\n</blockquote>\n<h3 id="add-background-color-for-bars" tabindex="-1">Add Background Color for Bars</h3>\n<p>You might want to change the background color of bars sometimes. After ECharts v4.7.0, this function can be enabled by <a href="https://echarts.apache.org/option.html#series-bar.showBackground">\'showBackground\'</a> and configured by <a href="https://echarts.apache.org/option.html#series-bar.backgroundStyle">\'backgroundStyle\'</a>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzaG93QmFja2dyb3VuZDogdHJ1ZSwKICAgICAgYmFja2dyb3VuZFN0eWxlOiB7CiAgICAgICAgY29sb3I6ICdyZ2JhKDIyMCwgMjIwLCAyMjAsIDAuOCknCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/bar/basic-bar"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:s,draft:e},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:b,draft:e},{title:"系列",dir:m,draft:e},{title:"样式",dir:w},{title:"数据集",dir:f},{title:"数据转换",dir:y},{title:"坐标系",dir:u,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:O},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:S,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:k},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:W,draft:e},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:R},{title:"平滑曲线图",dir:v},{title:"阶梯线图",dir:X}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:F},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:E}]}]},{title:U,dir:t,draft:e},{title:"跨平台方案",dir:V,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:j}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:Z,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:U,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:l},{title:"Resources",dir:s,draft:e},{title:"Inspiration",dir:n},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:m,draft:e},{title:"Style",dir:w},{title:"Dataset",dir:f},{title:"Data Transform",dir:y},{title:"Coordinate",dir:u,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:O},{title:"Event and Action",dir:D}]},{title:"How To Guides",dir:M,children:[{title:"Common Charts",dir:S,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:k},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:W,draft:e},{title:"Waterfall",dir:J}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:R},{title:"Smoothed Line",dir:v},{title:"Step Line",dir:X}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:F},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:E}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:V,children:[{title:"Server Side Rendering",dir:j}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:Z,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/how-to/chart-types/bar/basic-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/bar/basic-bar.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/Hank" target="_blank" class="post-contributor"><img alt="Hank" src="https://avatars.githubusercontent.com/Hank?size=60"> <span>Hank</span></a><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,d,o,l,s,n,h,c,g,C,I,p,A,b,m,w,f,y,u,B,O,D,M,S,L,k,x,W,J,Y,G,H,R,v,X,K,F,z,T,E,U,V,j,Q,N,Z,P,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="basic-bar-chart" tabindex="-1">Basic Bar Chart</h1>\n<p>Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportionally related to the categorical data.</p>\n<p>To set the bar chart, you need to set the <code>type</code> of <code>series</code> as <code>\'bar\'</code>.</p>\n<p><a href="https://echarts.apache.org/option.html#series-bar">[Option]</a></p>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>Let\'s begin with a basic bar chart:</p>\n<md-code-block lang="js" code="\'LyoKbGl2ZQoKKi8Kb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<p>In this case, the x-axis is under the category type. Therefore, you should define some corresponding values for <code>\'xAxis\'</code>. Meanwhile, the data type of the y-axis is numerical. The range of the y-axis will be generated automatically by the <code>data</code> in <code>\'series\'</code>.</p>\n<h2 id="multi-series-bar-chart" tabindex="-1">Multi-series Bar Chart</h2>\n<p>You may use a series to represent a group of related data. To show multiple series in the same chart, you need to add one more array under the <code>series</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzI2LCAyNCwgMTgsIDIyLCAyMywgMjAsIDI3XQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="customized-bar-chart" tabindex="-1">Customized Bar Chart</h2>\n<h3 id="styles" tabindex="-1">Styles</h3>\n<p>It is a good idea to install the style of Bar Chart by using <a href="https://echarts.apache.org/option.html#series-bar.itemStyle">\'series.itemStyle\'</a>. Description of the SCI:</p>\n<ul>\n<li>Color of column(<code>\'color\'</code>);</li>\n<li>Outline color(<code>\'borderColor\'</code>), width(<code>\'borderWidth\'</code>), type(<code>\'borderType\'</code>) of column;</li>\n<li>Border radius of column(<code>\'barBorderRadius\'</code>);</li>\n<li>Transparency(<code>\'opacity\'</code>);</li>\n<li>Shadow type(<code>\'shadowBlur\'</code>, <code>\'shadowColor\'</code>, <code>\'shadowOffsetX\'</code>, <code>\'shadowOffsetY\'</code>)</li>\n</ul>\n<p>Here is a example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>In this case, we defined the style of the bar chart by <code>\'itemStyle\'</code> of corresponding <code>series</code>. For complete configuration items and their usage, please check the configuration item manual: <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a>。</p>\n<h3 id="width-and-height-of-column" tabindex="-1">Width and Height of Column</h3>\n<p>You can use <a href="https://echarts.apache.org/option.html##series-bar.barWidth"><code>barWidth</code></a> to change the width of the bar. For instance, the <code>\'barWidth\'</code> in the following case was set to <code>\'20%\'</code>. It indicates that width of each bar is 20% of the category width. As there are 5 data in every series, 20% <code>\'barWidth\'</code> means 4% for the entire x-axis.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>In addition, <a href="https://echarts.apache.org/option.html#series-bar.barMaxWidth"><code>barMaxWidth</code></a> has limited the maximum width of the bar. For some small value, you can declare a minimum height for the bar: <a href="https://echarts.apache.org/option.html#series-bar.barMinHeight"><code>barMinHeight</code></a>. When the corresponding height of data is smaller than the limit, ECharts will take \'barMinHeight\' as the replaced height.</p>\n<h3 id="column-spacing" tabindex="-1">Column Spacing</h3>\n<p>There are two kinds of column spacing. One is the spacing between different series under the same category: <a href="https://echarts.apache.org/option.html#series-bar.barWidth"><code>barWidth</code></a>. The other is the spacing between categories: <a href="https://echarts.apache.org/option.html#series-bar.barCategoryGap"><code>barCategoryGap</code></a>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDE4XSwKICAgICAgYmFyR2FwOiAnMjAlJywKICAgICAgYmFyQ2F0ZWdvcnlHYXA6ICc0MCUnCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzEyLCAxNCwgOSwgOSwgMTFdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>In this case, the <code>barGap</code> is <code>\'20%\'</code>. That means the distance between bars under the same category is 20% of the bar width. For instance, if we set the <code>barCategoryGap</code> to <code>\'40%\'</code>, the gap on each side of the bar will take 40% place in categories (compared with the width of the column).</p>\n<p>Usually, <code>barWidth</code> is not necessary to be clarified if <code>\'barGap\'</code> and <code>barCategoryGap</code> was set. If you need to make sure the bar is not too wide while the graph is large, try to use <code>barMaxWidth</code> to limit the maximum width of bars.</p>\n<blockquote>\n<p>In the same cartesian coordinate system, the property will be shared by several column series. To make sure it takes effect on the graph, please set the property on the last bar chart series of the system.</p>\n</blockquote>\n<h3 id="add-background-color-for-bars" tabindex="-1">Add Background Color for Bars</h3>\n<p>You might want to change the background color of bars sometimes. After ECharts v4.7.0, this function can be enabled by <a href="https://echarts.apache.org/option.html#series-bar.showBackground">\'showBackground\'</a> and configured by <a href="https://echarts.apache.org/option.html#series-bar.backgroundStyle">\'backgroundStyle\'</a>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzaG93QmFja2dyb3VuZDogdHJ1ZSwKICAgICAgYmFja2dyb3VuZFN0eWxlOiB7CiAgICAgICAgY29sb3I6ICdyZ2JhKDIyMCwgMjIwLCAyMjAsIDAuOCknCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/bar/basic-bar"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:s,draft:e},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:b,draft:e},{title:"系列",dir:m,draft:e},{title:"样式",dir:w},{title:"数据集",dir:f},{title:"数据转换",dir:y},{title:"坐标系",dir:u,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:O},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:S,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:k},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:W,draft:e},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:R},{title:"平滑曲线图",dir:v},{title:"阶梯线图",dir:X}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:F},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:E}]}]},{title:U,dir:t,draft:e},{title:"跨平台方案",dir:V,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:j}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:Z,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:U,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:l},{title:"Resources",dir:s,draft:e},{title:"Inspiration",dir:n},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:m,draft:e},{title:"Style",dir:w},{title:"Dataset",dir:f},{title:"Data Transform",dir:y},{title:"Coordinate",dir:u,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:O},{title:"Event and Action",dir:D}]},{title:"How To Guides",dir:M,children:[{title:"Common Charts",dir:S,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:k},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:W,draft:e},{title:"Waterfall",dir:J}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:R},{title:"Smoothed Line",dir:v},{title:"Step Line",dir:X}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:F},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:E}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:V,children:[{title:"Server Side Rendering",dir:j}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:Z,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/how-to/chart-types/bar/basic-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/bar/stacked-bar/index.html b/handbook/en/how-to/chart-types/bar/stacked-bar/index.html
index e1bf6ad..a85be43 100644
--- a/handbook/en/how-to/chart-types/bar/stacked-bar/index.html
+++ b/handbook/en/how-to/chart-types/bar/stacked-bar/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="stacked-bar-chart" tabindex="-1">Stacked Bar Chart</h1> <p>Sometimes, we hope to not only figure series separately but also the trend of the sum. It's a good choice to implement it by using the stacked bar chart. As the name suggests, in the stacked bar chart, data in the same category will be stacked up in one column. The overall height of the bar explained the change of total.</p> <p>There is a simple way to implement a stacked bar chart by ECharts. You need to set the same string type value for a group of series in <code>stack</code>. The series with the same <code>stack</code> value will be in the same category.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="stacked-bar-chart" tabindex="-1">Stacked Bar Chart</h1> <p>Sometimes, we hope to not only figure series separately but also the trend of the sum. It's a good choice to implement it by using the stacked bar chart. As the name suggests, in the stacked bar chart, data in the same category will be stacked up in one column. The overall height of the bar explained the change of total.</p> <p>There is a simple way to implement a stacked bar chart by ECharts. You need to set the same string type value for a group of series in <code>stack</code>. The series with the same <code>stack</code> value will be in the same category.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
@@ -41,7 +41,8 @@
stack<span class="token operator">:</span> <span class="token string">'x'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.</p> <blockquote><p>The value of <code>stack</code> explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.</p> <p>For instance, here is a chart with 4 series that counted the amount of male and female. "adult male" and "boy" need to be stacked while "adult female" and "girl" need to be stacked. In this case, the suggestive value of <code>stack</code> is <code>'male'</code> and <code>'female'</code>. Although meaningless strings like <code>'a'</code> and <code>'b'</code> can achieve the same effect but the code will have worse readability.</p></blockquote></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/en/how-to/chart-types/bar/stacked-bar.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,l,o,s,n,c,h,g,p,f,u,m,b,C,w,I,k,A,v,y,B,S,D,E,P,x,R,L,T,q,G,H,M,z,J,K,O,V,W,Y,_,F,N,U,X,Q,j,Z,$,tt,et,it){return{layout:"default",data:[{html:"<h1 id=\"stacked-bar-chart\" tabindex=\"-1\">Stacked Bar Chart</h1>\n<p>Sometimes, we hope to not only figure series separately but also the trend of the sum. It's a good choice to implement it by using the stacked bar chart. As the name suggests, in the stacked bar chart, data in the same category will be stacked up in one column. The overall height of the bar explained the change of total.</p>\n<p>There is a simple way to implement a stacked bar chart by ECharts. You need to set the same string type value for a group of series in <code>stack</code>. The series with the same <code>stack</code> value will be in the same category.</p>\n<md-live lang=\"js\" code=\"'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07'\" v-bind=\"{}\" />\n<p>In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.</p>\n<blockquote>\n<p>The value of <code>stack</code> explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.</p>\n<p>For instance, here is a chart with 4 series that counted the amount of male and female. "adult male" and "boy" need to be stacked while "adult female" and "girl" need to be stacked. In this case, the suggestive value of <code>stack</code> is <code>'male'</code> and <code>'female'</code>. Although meaningless strings like <code>'a'</code> and <code>'b'</code> can achieve the same effect but the code will have worse readability.</p>\n</blockquote>\n",postPath:"en/how-to/chart-types/bar/stacked-bar"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:f}]}]},{title:"概念篇",dir:u,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:b,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:w},{title:"数据集",dir:I},{title:"数据转换",dir:k},{title:"坐标系",dir:A,draft:t},{title:"坐标轴",dir:v},{title:"视觉映射",dir:i},{title:"图例",dir:y},{title:"事件与行为",dir:B}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:E},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:T,children:[{title:"基础折线图",dir:q},{title:"堆叠折线图",dir:G},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:J},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:V,children:[{title:"基础散点图",dir:W}]}]},{title:Y,dir:e,draft:t},{title:"跨平台方案",dir:_,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:F}]},{title:"数据处理",dir:N,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:X,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Z,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:Y,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:f}]}]},{title:"Concepts",dir:u,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:w},{title:"Dataset",dir:I},{title:"Data Transform",dir:k},{title:"Coordinate",dir:A,draft:t},{title:"Axis",dir:v},{title:"Visual Mapping",dir:i},{title:"Legend",dir:y},{title:"Event and Action",dir:B}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:E},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:T,children:[{title:"Basic Line",dir:q},{title:"Stacked Line",dir:G},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:J},{title:"Ring Style",dir:K},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:V,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:_,children:[{title:"Server Side Rendering",dir:F}]},{title:"Data",dir:N,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:X,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Z,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/how-to/chart-types/bar/stacked-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.</p> <blockquote><p>The value of <code>stack</code> explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.</p> <p>For instance, here is a chart with 4 series that counted the amount of male and female. "adult male" and "boy" need to be stacked while "adult female" and "girl" need to be stacked. In this case, the suggestive value of <code>stack</code> is <code>'male'</code> and <code>'female'</code>. Although meaningless strings like <code>'a'</code> and <code>'b'</code> can achieve the same effect but the code will have worse readability.</p></blockquote></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/en/how-to/chart-types/bar/stacked-bar.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,l,o,s,n,c,h,g,p,f,u,m,b,C,w,I,k,A,v,y,B,S,D,E,P,x,R,L,T,q,G,H,M,z,J,K,O,V,W,Y,_,F,N,U,X,Q,j,Z,$,tt,et,it){return{layout:"default",data:[{html:"<h1 id=\"stacked-bar-chart\" tabindex=\"-1\">Stacked Bar Chart</h1>\n<p>Sometimes, we hope to not only figure series separately but also the trend of the sum. It's a good choice to implement it by using the stacked bar chart. As the name suggests, in the stacked bar chart, data in the same category will be stacked up in one column. The overall height of the bar explained the change of total.</p>\n<p>There is a simple way to implement a stacked bar chart by ECharts. You need to set the same string type value for a group of series in <code>stack</code>. The series with the same <code>stack</code> value will be in the same category.</p>\n<md-live lang=\"js\" code=\"'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07'\" v-bind=\"{}\" />\n<p>In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.</p>\n<blockquote>\n<p>The value of <code>stack</code> explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.</p>\n<p>For instance, here is a chart with 4 series that counted the amount of male and female. "adult male" and "boy" need to be stacked while "adult female" and "girl" need to be stacked. In this case, the suggestive value of <code>stack</code> is <code>'male'</code> and <code>'female'</code>. Although meaningless strings like <code>'a'</code> and <code>'b'</code> can achieve the same effect but the code will have worse readability.</p>\n</blockquote>\n",postPath:"en/how-to/chart-types/bar/stacked-bar"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:f}]}]},{title:"概念篇",dir:u,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:b,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:w},{title:"数据集",dir:I},{title:"数据转换",dir:k},{title:"坐标系",dir:A,draft:t},{title:"坐标轴",dir:v},{title:"视觉映射",dir:i},{title:"图例",dir:y},{title:"事件与行为",dir:B}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:E},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:T,children:[{title:"基础折线图",dir:q},{title:"堆叠折线图",dir:G},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:J},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:V,children:[{title:"基础散点图",dir:W}]}]},{title:Y,dir:e,draft:t},{title:"跨平台方案",dir:_,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:F}]},{title:"数据处理",dir:N,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:X,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Z,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:Y,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:f}]}]},{title:"Concepts",dir:u,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:w},{title:"Dataset",dir:I},{title:"Data Transform",dir:k},{title:"Coordinate",dir:A,draft:t},{title:"Axis",dir:v},{title:"Visual Mapping",dir:i},{title:"Legend",dir:y},{title:"Event and Action",dir:B}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:E},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:T,children:[{title:"Basic Line",dir:q},{title:"Stacked Line",dir:G},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:J},{title:"Ring Style",dir:K},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:V,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:_,children:[{title:"Server Side Rendering",dir:F}]},{title:"Data",dir:N,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:X,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Z,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/how-to/chart-types/bar/stacked-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/bar/waterfall/index.html b/handbook/en/how-to/chart-types/bar/waterfall/index.html
index 80f9e2b..3b98435 100644
--- a/handbook/en/how-to/chart-types/bar/waterfall/index.html
+++ b/handbook/en/how-to/chart-types/bar/waterfall/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="waterfall" tabindex="-1">Waterfall</h1> <p>There is no waterfall series in Apache ECharts, but we can simulate the effect using a stacked bar chart.</p> <p>Assuming that the values in the data array represent an increase or decrease from the previous value.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">900</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">393</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">108</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">154</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">178</span><span class="token punctuation">,</span> <span class="token number">286</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">119</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">361</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">203</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>That is, the first data is <code>900</code> and the second data <code>345</code> represents the addition of <code>345</code> to <code>900</code>, etc. When presenting this data as a stepped waterfall chart, we can use three series: the first is a non-interactive transparent series to implement the suspension bar effect; the second series is used to represent positive numbers; and the second series is used to represent negative numbers.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="waterfall" tabindex="-1">Waterfall</h1> <p>There is no waterfall series in Apache ECharts, but we can simulate the effect using a stacked bar chart.</p> <p>Assuming that the values in the data array represent an increase or decrease from the previous value.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">900</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">393</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">108</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">154</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">178</span><span class="token punctuation">,</span> <span class="token number">286</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">119</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">361</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">203</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>That is, the first data is <code>900</code> and the second data <code>345</code> represents the addition of <code>345</code> to <code>900</code>, etc. When presenting this data as a stepped waterfall chart, we can use three series: the first is a non-interactive transparent series to implement the suspension bar effect; the second series is used to represent positive numbers; and the second series is used to represent negative numbers.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
var help = [];
var positive = [];
var negative = [];
@@ -169,7 +169,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/bar/waterfall.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,g,s,n,C,o,c,I,h,A,p,w,b,B,m,G,f,S,u,H,Z,K,L,y,R,T,X,v,D,M,V,k,z,N,Y,x,E,J,O,P,W,F,U,j,Q,_,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="waterfall" tabindex="-1">Waterfall</h1>\n<p>There is no waterfall series in Apache ECharts, but we can simulate the effect using a stacked bar chart.</p>\n<p>Assuming that the values in the data array represent an increase or decrease from the previous value.</p>\n<md-code-block lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107\'" line-highlights="\'\'" />\n<p>That is, the first data is <code>900</code> and the second data <code>345</code> represents the addition of <code>345</code> to <code>900</code>, etc. When presenting this data as a stepped waterfall chart, we can use three series: the first is a non-interactive transparent series to implement the suspension bar effect; the second series is used to represent positive numbers; and the second series is used to represent negative numbers.</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107CnZhciBoZWxwID0gW107CnZhciBwb3NpdGl2ZSA9IFtdOwp2YXIgbmVnYXRpdmUgPSBbXTsKZm9yICh2YXIgaSA9IDAsIHN1bSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgaWYgKGRhdGFbaV0gPj0gMCkgewogICAgcG9zaXRpdmUucHVzaChkYXRhW2ldKTsKICAgIG5lZ2F0aXZlLnB1c2goJy0nKTsKICB9IGVsc2UgewogICAgcG9zaXRpdmUucHVzaCgnLScpOwogICAgbmVnYXRpdmUucHVzaCgtZGF0YVtpXSk7CiAgfQoKICBpZiAoaSA9PT0gMCkgewogICAgaGVscC5wdXNoKDApOwogIH0gZWxzZSB7CiAgICBzdW0gKz0gZGF0YVtpIC0gMV07CiAgICBpZiAoZGF0YVtpXSA8IDApIHsKICAgICAgaGVscC5wdXNoKHN1bSArIGRhdGFbaV0pOwogICAgfSBlbHNlIHsKICAgICAgaGVscC5wdXNoKHN1bSk7CiAgICB9CiAgfQp9CgpvcHRpb24gPSB7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICdXYXRlcmZhbGwnCiAgfSwKICBncmlkOiB7CiAgICBsZWZ0OiAnMyUnLAogICAgcmlnaHQ6ICc0JScsCiAgICBib3R0b206ICczJScsCiAgICBjb250YWluTGFiZWw6IHRydWUKICB9LAogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgc3BsaXRMaW5lOiB7IHNob3c6IGZhbHNlIH0sCiAgICBkYXRhOiAoZnVuY3Rpb24oKSB7CiAgICAgIHZhciBsaXN0ID0gW107CiAgICAgIGZvciAodmFyIGkgPSAxOyBpIDw9IDExOyBpKyspIHsKICAgICAgICBsaXN0LnB1c2goJ09jdC8nICsgaSk7CiAgICAgIH0KICAgICAgcmV0dXJuIGxpc3Q7CiAgICB9KSgpCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgYmFyQm9yZGVyQ29sb3I6ICdyZ2JhKDAsMCwwLDApJywKICAgICAgICAgIGNvbG9yOiAncmdiYSgwLDAsMCwwKScKICAgICAgICB9LAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBiYXJCb3JkZXJDb2xvcjogJ3JnYmEoMCwwLDAsMCknLAogICAgICAgICAgY29sb3I6ICdyZ2JhKDAsMCwwLDApJwogICAgICAgIH0KICAgICAgfSwKICAgICAgZGF0YTogaGVscAogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ3Bvc2l0aXZlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAnYWxsJywKICAgICAgZGF0YTogcG9zaXRpdmUKICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICduZWdhdGl2ZScsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGRhdGE6IG5lZ2F0aXZlLAogICAgICBpdGVtU3R5bGU6IHsKICAgICAgICBjb2xvcjogJyNmMzMnCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/bar/waterfall"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:C},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"ECharts 5 升级指南",dir:I},{title:5.2,dir:h}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:w,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:m},{title:"数据转换",dir:G},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:u},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:y},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:T,draft:t},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:v,children:[{title:"基础折线图",dir:D},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:Y},{title:"南丁格尔图(玫瑰图)",dir:x}]},{title:"散点图",dir:E,children:[{title:"基础散点图",dir:J}]}]},{title:O,dir:i,draft:t},{title:"跨平台方案",dir:P,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:W}]},{title:"数据处理",dir:F,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:O,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:g},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:C},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:c},{title:"ECharts 5 Upgrade Guide",dir:I},{title:5.2,dir:h}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:w,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:m},{title:"Data Transform",dir:G},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:u},{title:"Event and Action",dir:H}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:y},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:T,draft:t},{title:"Waterfall",dir:X}]},{title:"Line",dir:v,children:[{title:"Basic Line",dir:D},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:Y},{title:"Rose Style",dir:x}]},{title:"Scatter",dir:E,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:P,children:[{title:"Server Side Rendering",dir:W}]},{title:"Data",dir:F,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/bar/waterfall",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/bar/waterfall.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,g,s,n,C,o,c,I,h,A,p,w,b,B,m,G,f,S,u,H,Z,K,L,y,R,T,X,v,D,M,V,k,z,N,Y,x,E,J,O,P,W,F,U,j,Q,_,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="waterfall" tabindex="-1">Waterfall</h1>\n<p>There is no waterfall series in Apache ECharts, but we can simulate the effect using a stacked bar chart.</p>\n<p>Assuming that the values in the data array represent an increase or decrease from the previous value.</p>\n<md-code-block lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107\'" line-highlights="\'\'" />\n<p>That is, the first data is <code>900</code> and the second data <code>345</code> represents the addition of <code>345</code> to <code>900</code>, etc. When presenting this data as a stepped waterfall chart, we can use three series: the first is a non-interactive transparent series to implement the suspension bar effect; the second series is used to represent positive numbers; and the second series is used to represent negative numbers.</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107CnZhciBoZWxwID0gW107CnZhciBwb3NpdGl2ZSA9IFtdOwp2YXIgbmVnYXRpdmUgPSBbXTsKZm9yICh2YXIgaSA9IDAsIHN1bSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgaWYgKGRhdGFbaV0gPj0gMCkgewogICAgcG9zaXRpdmUucHVzaChkYXRhW2ldKTsKICAgIG5lZ2F0aXZlLnB1c2goJy0nKTsKICB9IGVsc2UgewogICAgcG9zaXRpdmUucHVzaCgnLScpOwogICAgbmVnYXRpdmUucHVzaCgtZGF0YVtpXSk7CiAgfQoKICBpZiAoaSA9PT0gMCkgewogICAgaGVscC5wdXNoKDApOwogIH0gZWxzZSB7CiAgICBzdW0gKz0gZGF0YVtpIC0gMV07CiAgICBpZiAoZGF0YVtpXSA8IDApIHsKICAgICAgaGVscC5wdXNoKHN1bSArIGRhdGFbaV0pOwogICAgfSBlbHNlIHsKICAgICAgaGVscC5wdXNoKHN1bSk7CiAgICB9CiAgfQp9CgpvcHRpb24gPSB7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICdXYXRlcmZhbGwnCiAgfSwKICBncmlkOiB7CiAgICBsZWZ0OiAnMyUnLAogICAgcmlnaHQ6ICc0JScsCiAgICBib3R0b206ICczJScsCiAgICBjb250YWluTGFiZWw6IHRydWUKICB9LAogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgc3BsaXRMaW5lOiB7IHNob3c6IGZhbHNlIH0sCiAgICBkYXRhOiAoZnVuY3Rpb24oKSB7CiAgICAgIHZhciBsaXN0ID0gW107CiAgICAgIGZvciAodmFyIGkgPSAxOyBpIDw9IDExOyBpKyspIHsKICAgICAgICBsaXN0LnB1c2goJ09jdC8nICsgaSk7CiAgICAgIH0KICAgICAgcmV0dXJuIGxpc3Q7CiAgICB9KSgpCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgYmFyQm9yZGVyQ29sb3I6ICdyZ2JhKDAsMCwwLDApJywKICAgICAgICAgIGNvbG9yOiAncmdiYSgwLDAsMCwwKScKICAgICAgICB9LAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBiYXJCb3JkZXJDb2xvcjogJ3JnYmEoMCwwLDAsMCknLAogICAgICAgICAgY29sb3I6ICdyZ2JhKDAsMCwwLDApJwogICAgICAgIH0KICAgICAgfSwKICAgICAgZGF0YTogaGVscAogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ3Bvc2l0aXZlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAnYWxsJywKICAgICAgZGF0YTogcG9zaXRpdmUKICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICduZWdhdGl2ZScsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGRhdGE6IG5lZ2F0aXZlLAogICAgICBpdGVtU3R5bGU6IHsKICAgICAgICBjb2xvcjogJyNmMzMnCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/bar/waterfall"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:C},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"ECharts 5 升级指南",dir:I},{title:5.2,dir:h}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:w,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:m},{title:"数据转换",dir:G},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:u},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:y},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:T,draft:t},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:v,children:[{title:"基础折线图",dir:D},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:Y},{title:"南丁格尔图(玫瑰图)",dir:x}]},{title:"散点图",dir:E,children:[{title:"基础散点图",dir:J}]}]},{title:O,dir:i,draft:t},{title:"跨平台方案",dir:P,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:W}]},{title:"数据处理",dir:F,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:O,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:g},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:C},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:c},{title:"ECharts 5 Upgrade Guide",dir:I},{title:5.2,dir:h}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:w,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:m},{title:"Data Transform",dir:G},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:u},{title:"Event and Action",dir:H}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:y},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:T,draft:t},{title:"Waterfall",dir:X}]},{title:"Line",dir:v,children:[{title:"Basic Line",dir:D},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:Y},{title:"Rose Style",dir:x}]},{title:"Scatter",dir:E,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:P,children:[{title:"Server Side Rendering",dir:W}]},{title:"Data",dir:F,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/bar/waterfall",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/line/area-line/index.html b/handbook/en/how-to/chart-types/line/area-line/index.html
index 3b96309..1633161 100644
--- a/handbook/en/how-to/chart-types/line/area-line/index.html
+++ b/handbook/en/how-to/chart-types/line/area-line/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="area-chart" tabindex="-1">Area Chart</h1> <p>The area chart fills the space between the line and axis with the background color, to express the data by the size of the area. Compared with the normal line chart, the area chart has more intuitive visual effects. It is especially suitable for the scenario with a few series.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="area-chart" tabindex="-1">Area Chart</h1> <p>The area chart fills the space between the line and axis with the background color, to express the data by the size of the area. Compared with the normal line chart, the area chart has more intuitive visual effects. It is especially suitable for the scenario with a few series.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
@@ -47,7 +47,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>If you want to change the area style of the line chart, try to use <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a>. Set <code>'areaStyle'</code> to <code>{}</code> to use the default type: use the color of series to fill the area in translucent. If you want to change the style, try to override the configuration items in <code>'areaStyle'</code>. For example, the color of the second series was changed to yellow with 50% opacity.</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/en/how-to/chart-types/line/area-line.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/Hank" target="_blank" class="post-contributor"><img alt="Hank" src="https://avatars.githubusercontent.com/Hank?size=60"> <span>Hank</span></a><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,n,o,s,h,c,g,p,C,f,I,b,u,A,m,w,y,B,S,v,G,x,E,P,L,k,R,T,D,M,z,H,F,O,V,Z,W,_,N,X,K,Q,J,U,j,Y,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="area-chart" tabindex="-1">Area Chart</h1>\n<p>The area chart fills the space between the line and axis with the background color, to express the data by the size of the area. Compared with the normal line chart, the area chart has more intuitive visual effects. It is especially suitable for the scenario with a few series.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFsyNSwgMTQsIDIzLCAzNSwgMTBdLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZTogewogICAgICAgIGNvbG9yOiAnI2ZmMCcsCiAgICAgICAgb3BhY2l0eTogMC41CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>If you want to change the area style of the line chart, try to use <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a>. Set <code>\'areaStyle\'</code> to <code>{}</code> to use the default type: use the color of series to fill the area in translucent. If you want to change the style, try to override the configuration items in <code>\'areaStyle\'</code>. For example, the color of the second series was changed to yellow with 50% opacity.</p>\n',postPath:"en/how-to/chart-types/line/area-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:C}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:b,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:A},{title:"数据集",dir:m},{title:"数据转换",dir:w},{title:"坐标系",dir:y,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:E},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:k,draft:t},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:T,children:[{title:"基础折线图",dir:D},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:Z}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:_}]}]},{title:N,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:Y,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:N,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:C}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:A},{title:"Dataset",dir:m},{title:"Data Transform",dir:w},{title:"Coordinate",dir:y,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:E},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:k,draft:t},{title:"Waterfall",dir:R}]},{title:"Line",dir:T,children:[{title:"Basic Line",dir:D},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:Z}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:Y,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/line/area-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>If you want to change the area style of the line chart, try to use <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a>. Set <code>'areaStyle'</code> to <code>{}</code> to use the default type: use the color of series to fill the area in translucent. If you want to change the style, try to override the configuration items in <code>'areaStyle'</code>. For example, the color of the second series was changed to yellow with 50% opacity.</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/en/how-to/chart-types/line/area-line.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/Hank" target="_blank" class="post-contributor"><img alt="Hank" src="https://avatars.githubusercontent.com/Hank?size=60"> <span>Hank</span></a><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,n,o,s,h,c,g,p,C,f,I,b,u,A,m,w,y,B,S,v,G,x,E,P,L,k,R,T,D,M,z,H,F,O,V,Z,W,_,N,X,K,Q,J,U,j,Y,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="area-chart" tabindex="-1">Area Chart</h1>\n<p>The area chart fills the space between the line and axis with the background color, to express the data by the size of the area. Compared with the normal line chart, the area chart has more intuitive visual effects. It is especially suitable for the scenario with a few series.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFsyNSwgMTQsIDIzLCAzNSwgMTBdLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZTogewogICAgICAgIGNvbG9yOiAnI2ZmMCcsCiAgICAgICAgb3BhY2l0eTogMC41CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>If you want to change the area style of the line chart, try to use <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a>. Set <code>\'areaStyle\'</code> to <code>{}</code> to use the default type: use the color of series to fill the area in translucent. If you want to change the style, try to override the configuration items in <code>\'areaStyle\'</code>. For example, the color of the second series was changed to yellow with 50% opacity.</p>\n',postPath:"en/how-to/chart-types/line/area-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:C}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:b,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:A},{title:"数据集",dir:m},{title:"数据转换",dir:w},{title:"坐标系",dir:y,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:E},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:k,draft:t},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:T,children:[{title:"基础折线图",dir:D},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:Z}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:_}]}]},{title:N,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:Y,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:N,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:C}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:A},{title:"Dataset",dir:m},{title:"Data Transform",dir:w},{title:"Coordinate",dir:y,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:E},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:k,draft:t},{title:"Waterfall",dir:R}]},{title:"Line",dir:T,children:[{title:"Basic Line",dir:D},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:Z}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:Y,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/line/area-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/line/basic-line/index.html b/handbook/en/how-to/chart-types/line/basic-line/index.html
index c88795a..1af85b8 100644
--- a/handbook/en/how-to/chart-types/line/basic-line/index.html
+++ b/handbook/en/how-to/chart-types/line/basic-line/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="basic-line-chart" tabindex="-1">Basic Line Chart</h1> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>We can use the following code to build a line chart which has x-axis as <code>category</code>, y-axis as <code>value</code>:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="basic-line-chart" tabindex="-1">Basic Line Chart</h1> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>We can use the following code to build a line chart which has x-axis as <code>category</code>, y-axis as <code>value</code>:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C']
@@ -155,7 +155,8 @@
type<span class="token operator">:</span> <span class="token string">'line'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>Please note the difference between the empty data and 0.</p></blockquote></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/en/how-to/chart-types/line/basic-line.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,d,a,r,l,o,n,s,c,h,g,C,p,I,A,b,w,y,m,f,B,u,x,v,S,G,L,D,E,O,R,W,z,M,k,H,T,V,J,Q,X,P,K,F,Z,j,U,Y,N,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="basic-line-chart" tabindex="-1">Basic Line Chart</h1>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>We can use the following code to build a line chart which has x-axis as <code>category</code>, y-axis as <code>value</code>:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQyddCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMjAsIDIwMCwgMTUwXSwKICAgICAgdHlwZTogJ2xpbmUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>In this case, we set the type of axis to <code>category</code> and <code>value</code> under <code>xAxis</code> and <code>yAxis</code>. We also clarified the content on the x-axis through <code>data</code>. In <code>series</code>, we set the type to <code>line</code>, and specify the values of three points through <code>data</code>. In this way, we got a simple line chart.</p>\n<blockquote>\n<p>The <code>type</code> here can be omitted because the defaults of the axis are <code>value</code> while <code>xAxis</code> has specified the category\'s <code>data</code>. In this case, <code>ECharts</code> can recognize that this is a category axis.</p>\n</blockquote>\n<h2 id="line-chart-in-cartesian-coordinate-system" tabindex="-1">Line Chart in Cartesian Coordinate System</h2>\n<p>How to implement if we want the line chart to be continuous? The answer is simple, as long as every value in <code>data</code> of the <code>series</code> is represented by an array containing two elements.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsKICAgICAgICBbMjAsIDEyMF0sCiAgICAgICAgWzUwLCAyMDBdLAogICAgICAgIFs0MCwgNTBdCiAgICAgIF0sCiAgICAgIHR5cGU6ICdsaW5lJwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="customized-line-chart" tabindex="-1">Customized Line Chart</h2>\n<h3 id="line-style" tabindex="-1">Line Style</h3>\n<p>Line style can be changed by <code>lineStyle</code> setting. You can specify color, line width, polyline type and opacity etc.. For details, please see the handbook <a href="https://echarts.apache.org/option.html#series-line.lineStyle"><code>series.lineStyle</code></a> to figure out.</p>\n<p>Here is an example of setting color, line width and type.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgY29sb3I6ICdncmVlbicsCiAgICAgICAgICB3aWR0aDogNCwKICAgICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>When we set the line width here, the line width of items will not change. The line style of items needs to be set separately.</p>\n<h3 id="item-style" tabindex="-1">Item Style</h3>\n<p>Item style can be change by <a href="https://echarts.apache.org/option.html#series-line.itemStyle"><code>series.itemStyle</code></a>. It included <code>color</code>, <code>borderColor</code>, <code>borderStyle</code>, <code>borderWidth</code>, <code>borderType</code>, <code>shadowColor</code>, <code>opacity</code> and so on. It works the same as the <code>lineType</code>, so we will not do further discuss.</p>\n<h2 id="display-value-on-items." tabindex="-1">Display Value on Items.</h2>\n<p>In the series, the label of the item was specified by <a href="https://echarts.apache.org/option.html#series-line.label"><code>series.label</code></a>. If we change the <code>show</code> under <code>label</code> to <code>true</code>, the value will be displayed by default. Otherwise, if <a href="https://echarts.apache.org/option.html#series-line.emphasis.label.show"><code>series.emphasis.label.show</code></a> is <code>true</code>, the label will show only if the mouse moved across the item.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICBwb3NpdGlvbjogJ2JvdHRvbScsCiAgICAgICAgdGV4dFN0eWxlOiB7CiAgICAgICAgICBmb250U2l6ZTogMjAKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="empty-data" tabindex="-1">Empty Data</h2>\n<p>In a <code>series</code>, there are empty data. It has some difference with <code>0</code>. While there are empty elements, the lines chart will ignore that point without pass through it----empty elements will not be connected by the points next by.</p>\n<p>In ECharts, we use <code>\'-\'</code> to represent null data, It is applicable for data in other series.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFswLCAyMiwgJy0nLCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScKICAgIH0KICBdCn07\'" v-bind="{}" />\n<blockquote>\n<p>Please note the difference between the empty data and 0.</p>\n</blockquote>\n',postPath:"en/how-to/chart-types/line/basic-line"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:e},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:b,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:y},{title:"数据集",dir:m},{title:"数据转换",dir:f},{title:"坐标系",dir:B,draft:e},{title:"坐标轴",dir:u},{title:"视觉映射",dir:i},{title:"图例",dir:x},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:E},{title:"极坐标系柱状图",dir:O,draft:e},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:P}]}]},{title:K,dir:t,draft:e},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Y,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:e},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:y},{title:"Dataset",dir:m},{title:"Data Transform",dir:f},{title:"Coordinate",dir:B,draft:e},{title:"Axis",dir:u},{title:"Visual Mapping",dir:i},{title:"Legend",dir:x},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:E},{title:"Bar Polar",dir:O,draft:e},{title:"Waterfall",dir:R}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:J},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:P}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Y,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/how-to/chart-types/line/basic-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>Please note the difference between the empty data and 0.</p></blockquote></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/en/how-to/chart-types/line/basic-line.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,d,a,r,l,o,n,s,c,h,g,C,p,I,A,b,w,y,m,f,B,u,x,v,S,G,L,D,E,O,R,W,z,M,k,H,T,V,J,Q,X,P,K,F,Z,j,U,Y,N,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="basic-line-chart" tabindex="-1">Basic Line Chart</h1>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>We can use the following code to build a line chart which has x-axis as <code>category</code>, y-axis as <code>value</code>:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQyddCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMjAsIDIwMCwgMTUwXSwKICAgICAgdHlwZTogJ2xpbmUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>In this case, we set the type of axis to <code>category</code> and <code>value</code> under <code>xAxis</code> and <code>yAxis</code>. We also clarified the content on the x-axis through <code>data</code>. In <code>series</code>, we set the type to <code>line</code>, and specify the values of three points through <code>data</code>. In this way, we got a simple line chart.</p>\n<blockquote>\n<p>The <code>type</code> here can be omitted because the defaults of the axis are <code>value</code> while <code>xAxis</code> has specified the category\'s <code>data</code>. In this case, <code>ECharts</code> can recognize that this is a category axis.</p>\n</blockquote>\n<h2 id="line-chart-in-cartesian-coordinate-system" tabindex="-1">Line Chart in Cartesian Coordinate System</h2>\n<p>How to implement if we want the line chart to be continuous? The answer is simple, as long as every value in <code>data</code> of the <code>series</code> is represented by an array containing two elements.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsKICAgICAgICBbMjAsIDEyMF0sCiAgICAgICAgWzUwLCAyMDBdLAogICAgICAgIFs0MCwgNTBdCiAgICAgIF0sCiAgICAgIHR5cGU6ICdsaW5lJwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="customized-line-chart" tabindex="-1">Customized Line Chart</h2>\n<h3 id="line-style" tabindex="-1">Line Style</h3>\n<p>Line style can be changed by <code>lineStyle</code> setting. You can specify color, line width, polyline type and opacity etc.. For details, please see the handbook <a href="https://echarts.apache.org/option.html#series-line.lineStyle"><code>series.lineStyle</code></a> to figure out.</p>\n<p>Here is an example of setting color, line width and type.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgY29sb3I6ICdncmVlbicsCiAgICAgICAgICB3aWR0aDogNCwKICAgICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>When we set the line width here, the line width of items will not change. The line style of items needs to be set separately.</p>\n<h3 id="item-style" tabindex="-1">Item Style</h3>\n<p>Item style can be change by <a href="https://echarts.apache.org/option.html#series-line.itemStyle"><code>series.itemStyle</code></a>. It included <code>color</code>, <code>borderColor</code>, <code>borderStyle</code>, <code>borderWidth</code>, <code>borderType</code>, <code>shadowColor</code>, <code>opacity</code> and so on. It works the same as the <code>lineType</code>, so we will not do further discuss.</p>\n<h2 id="display-value-on-items." tabindex="-1">Display Value on Items.</h2>\n<p>In the series, the label of the item was specified by <a href="https://echarts.apache.org/option.html#series-line.label"><code>series.label</code></a>. If we change the <code>show</code> under <code>label</code> to <code>true</code>, the value will be displayed by default. Otherwise, if <a href="https://echarts.apache.org/option.html#series-line.emphasis.label.show"><code>series.emphasis.label.show</code></a> is <code>true</code>, the label will show only if the mouse moved across the item.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICBwb3NpdGlvbjogJ2JvdHRvbScsCiAgICAgICAgdGV4dFN0eWxlOiB7CiAgICAgICAgICBmb250U2l6ZTogMjAKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="empty-data" tabindex="-1">Empty Data</h2>\n<p>In a <code>series</code>, there are empty data. It has some difference with <code>0</code>. While there are empty elements, the lines chart will ignore that point without pass through it----empty elements will not be connected by the points next by.</p>\n<p>In ECharts, we use <code>\'-\'</code> to represent null data, It is applicable for data in other series.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFswLCAyMiwgJy0nLCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScKICAgIH0KICBdCn07\'" v-bind="{}" />\n<blockquote>\n<p>Please note the difference between the empty data and 0.</p>\n</blockquote>\n',postPath:"en/how-to/chart-types/line/basic-line"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:e},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:b,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:y},{title:"数据集",dir:m},{title:"数据转换",dir:f},{title:"坐标系",dir:B,draft:e},{title:"坐标轴",dir:u},{title:"视觉映射",dir:i},{title:"图例",dir:x},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:E},{title:"极坐标系柱状图",dir:O,draft:e},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:P}]}]},{title:K,dir:t,draft:e},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Y,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:e},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:y},{title:"Dataset",dir:m},{title:"Data Transform",dir:f},{title:"Coordinate",dir:B,draft:e},{title:"Axis",dir:u},{title:"Visual Mapping",dir:i},{title:"Legend",dir:x},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:E},{title:"Bar Polar",dir:O,draft:e},{title:"Waterfall",dir:R}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:J},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:P}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Y,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/how-to/chart-types/line/basic-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/line/smooth-line/index.html b/handbook/en/how-to/chart-types/line/smooth-line/index.html
index 2865d01..baf98de 100644
--- a/handbook/en/how-to/chart-types/line/smooth-line/index.html
+++ b/handbook/en/how-to/chart-types/line/smooth-line/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="smooth-line-chart" tabindex="-1">Smooth Line Chart</h1> <p>The smooth line chart is also a variant of the basic line graph. It is a better choice for you to perform a comfort visual experience. While using the ECharts, you only need to change the <code>smooth</code> to <code>true</code> to achieve this effect.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="smooth-line-chart" tabindex="-1">Smooth Line Chart</h1> <p>The smooth line chart is also a variant of the basic line graph. It is a better choice for you to perform a comfort visual experience. While using the ECharts, you only need to change the <code>smooth</code> to <code>true</code> to achieve this effect.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
@@ -31,7 +31,8 @@
smooth<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/line/smooth-line.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,h,s,c,p,g,f,C,m,b,u,B,I,v,w,A,S,y,E,P,x,L,k,D,R,G,M,T,V,z,H,O,_,Q,W,J,X,F,N,U,j,K,Z,$,Y,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="smooth-line-chart" tabindex="-1">Smooth Line Chart</h1>\n<p>The smooth line chart is also a variant of the basic line graph. It is a better choice for you to perform a comfort visual experience. While using the ECharts, you only need to change the <code>smooth</code> to <code>true</code> to achieve this effect.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/line/smooth-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:b,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:B},{title:"数据集",dir:I},{title:"数据转换",dir:v},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:E,children:[{title:"常用图表类型",dir:P,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:x},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:k},{title:"极坐标系柱状图",dir:D,draft:t},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:_},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:J}]}]},{title:X,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:X,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:I},{title:"Data Transform",dir:v},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:y}]},{title:"How To Guides",dir:E,children:[{title:"Common Charts",dir:P,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:x},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:k},{title:"Bar Polar",dir:D,draft:t},{title:"Waterfall",dir:R}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:_},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/line/smooth-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/line/smooth-line.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,h,s,c,p,g,f,C,m,b,u,B,I,v,w,A,S,y,E,P,x,L,k,D,R,G,M,T,V,z,H,O,_,Q,W,J,X,F,N,U,j,K,Z,$,Y,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="smooth-line-chart" tabindex="-1">Smooth Line Chart</h1>\n<p>The smooth line chart is also a variant of the basic line graph. It is a better choice for you to perform a comfort visual experience. While using the ECharts, you only need to change the <code>smooth</code> to <code>true</code> to achieve this effect.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/line/smooth-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:b,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:B},{title:"数据集",dir:I},{title:"数据转换",dir:v},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:E,children:[{title:"常用图表类型",dir:P,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:x},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:k},{title:"极坐标系柱状图",dir:D,draft:t},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:_},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:J}]}]},{title:X,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:X,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:I},{title:"Data Transform",dir:v},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:y}]},{title:"How To Guides",dir:E,children:[{title:"Common Charts",dir:P,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:x},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:k},{title:"Bar Polar",dir:D,draft:t},{title:"Waterfall",dir:R}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:_},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/line/smooth-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/line/stacked-line/index.html b/handbook/en/how-to/chart-types/line/stacked-line/index.html
index 65f569c..deaaeb5 100644
--- a/handbook/en/how-to/chart-types/line/stacked-line/index.html
+++ b/handbook/en/how-to/chart-types/line/stacked-line/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="stacked-line-chart" tabindex="-1">Stacked Line Chart</h1> <p>Similar to the <a href="en/application/chart-types/bar/stacked-bar">Stacked Bar Chart</a>, Stacked Line Chart use the <code>'stack'</code> in <code>series</code> to decide which series should be stacked together.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="stacked-line-chart" tabindex="-1">Stacked Line Chart</h1> <p>Similar to the <a href="en/application/chart-types/bar/stacked-bar">Stacked Bar Chart</a>, Stacked Line Chart use the <code>'stack'</code> in <code>series</code> to decide which series should be stacked together.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
@@ -79,7 +79,8 @@
areaStyle<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/line/stacked-line.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,s,c,o,h,C,g,I,A,p,f,b,B,u,m,w,L,S,k,y,G,R,v,E,x,D,P,H,O,M,W,z,F,J,V,K,N,Q,T,X,Y,_,j,U,Z,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="stacked-line-chart" tabindex="-1">Stacked Line Chart</h1>\n<p>Similar to the <a href="en/application/chart-types/bar/stacked-bar">Stacked Bar Chart</a>, Stacked Line Chart use the <code>\'stack\'</code> in <code>series</code> to decide which series should be stacked together.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcKICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>However, without clarification, it is hard for us to judge whether it is a stacked line chart or normal line chart. Therefore, filling color for the area under the line is recommended to indicate for a stacked bar chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JywKICAgICAgYXJlYVN0eWxlOiB7fQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/line/stacked-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:u},{title:"数据转换",dir:m},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:L},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:y,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:E},{title:"极坐标系柱状图",dir:x,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:P,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:O},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:N}]}]},{title:Q,dir:i,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:_},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:Z,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:Q,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:u},{title:"Data Transform",dir:m},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:L},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:y,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:E},{title:"Bar Polar",dir:x,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:P,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:O},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:J},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:_},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:Z,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/line/stacked-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/line/stacked-line.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,s,c,o,h,C,g,I,A,p,f,b,B,u,m,w,L,S,k,y,G,R,v,E,x,D,P,H,O,M,W,z,F,J,V,K,N,Q,T,X,Y,_,j,U,Z,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="stacked-line-chart" tabindex="-1">Stacked Line Chart</h1>\n<p>Similar to the <a href="en/application/chart-types/bar/stacked-bar">Stacked Bar Chart</a>, Stacked Line Chart use the <code>\'stack\'</code> in <code>series</code> to decide which series should be stacked together.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcKICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>However, without clarification, it is hard for us to judge whether it is a stacked line chart or normal line chart. Therefore, filling color for the area under the line is recommended to indicate for a stacked bar chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JywKICAgICAgYXJlYVN0eWxlOiB7fQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/line/stacked-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:u},{title:"数据转换",dir:m},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:L},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:y,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:E},{title:"极坐标系柱状图",dir:x,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:P,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:O},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:N}]}]},{title:Q,dir:i,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:_},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:Z,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:Q,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:u},{title:"Data Transform",dir:m},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:L},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:y,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:E},{title:"Bar Polar",dir:x,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:P,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:O},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:J},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:_},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:Z,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/line/stacked-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/line/step-line/index.html b/handbook/en/how-to/chart-types/line/step-line/index.html
index 5ff7553..2528a82 100644
--- a/handbook/en/how-to/chart-types/line/step-line/index.html
+++ b/handbook/en/how-to/chart-types/line/step-line/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="step-line-chart" tabindex="-1">Step Line Chart</h1> <p>The normal line chart connects two points by straight line directly, while the step line chart, also known as square wave chart, uses only horizontal and vertical lines to connect the nearby items together. Compared with the normal line chart, the step line chart significantly shows the sudden changes of analyzed data.</p> <p>In ECharts, <code>step</code> is used to characterize the connection type of the step line chart. It has three available values: <code>'start'</code>, <code>'end'</code>, and <code>'middle'</code>. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="step-line-chart" tabindex="-1">Step Line Chart</h1> <p>The normal line chart connects two points by straight line directly, while the step line chart, also known as square wave chart, uses only horizontal and vertical lines to connect the nearby items together. Compared with the normal line chart, the step line chart significantly shows the sudden changes of analyzed data.</p> <p>In ECharts, <code>step</code> is used to characterize the connection type of the step line chart. It has three available values: <code>'start'</code>, <code>'end'</code>, and <code>'middle'</code>. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
legend: {},
xAxis: {
type: 'category',
@@ -65,7 +65,8 @@
data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">450</span><span class="token punctuation">,</span> <span class="token number">432</span><span class="token punctuation">,</span> <span class="token number">401</span><span class="token punctuation">,</span> <span class="token number">454</span><span class="token punctuation">,</span> <span class="token number">590</span><span class="token punctuation">,</span> <span class="token number">530</span><span class="token punctuation">,</span> <span class="token number">510</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>Please focus on the difference of line between three separate types.</p></blockquote></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/en/how-to/chart-types/line/step-line.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,s,c,h,g,C,p,I,A,w,b,f,m,u,B,y,k,L,M,v,S,R,D,E,G,x,P,T,z,J,U,V,H,Z,O,W,X,N,K,F,Y,Q,_,j,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="step-line-chart" tabindex="-1">Step Line Chart</h1>\n<p>The normal line chart connects two points by straight line directly, while the step line chart, also known as square wave chart, uses only horizontal and vertical lines to connect the nearby items together. Compared with the normal line chart, the step line chart significantly shows the sudden changes of analyzed data.</p>\n<p>In ECharts, <code>step</code> is used to characterize the connection type of the step line chart. It has three available values: <code>\'start\'</code>, <code>\'end\'</code>, and <code>\'middle\'</code>. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdTdGVwIFN0YXJ0JywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzdGVwOiAnc3RhcnQnLAogICAgICBkYXRhOiBbMTIwLCAxMzIsIDEwMSwgMTM0LCA5MCwgMjMwLCAyMTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcCBNaWRkbGUnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0ZXA6ICdtaWRkbGUnLAogICAgICBkYXRhOiBbMjIwLCAyODIsIDIwMSwgMjM0LCAyOTAsIDQzMCwgNDEwXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1N0ZXAgRW5kJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzdGVwOiAnZW5kJywKICAgICAgZGF0YTogWzQ1MCwgNDMyLCA0MDEsIDQ1NCwgNTkwLCA1MzAsIDUxMF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<blockquote>\n<p>Please focus on the difference of line between three separate types.</p>\n</blockquote>\n',postPath:"en/how-to/chart-types/line/step-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:w,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:f},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:E,draft:t},{title:"阶梯瀑布图",dir:G},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:x,children:[{title:"基础折线图",dir:P},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:U}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:Z}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:X,dir:i,draft:t},{title:"跨平台方案",dir:N,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:F,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:X,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:w,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:f},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:M,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:E,draft:t},{title:"Waterfall",dir:G}]},{title:"Line",dir:x,children:[{title:"Basic Line",dir:P},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:U}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:H},{title:"Rose Style",dir:Z}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:N,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:F,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/line/step-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>Please focus on the difference of line between three separate types.</p></blockquote></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/en/how-to/chart-types/line/step-line.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,s,c,h,g,C,p,I,A,w,b,f,m,u,B,y,k,L,M,v,S,R,D,E,G,x,P,T,z,J,U,V,H,Z,O,W,X,N,K,F,Y,Q,_,j,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="step-line-chart" tabindex="-1">Step Line Chart</h1>\n<p>The normal line chart connects two points by straight line directly, while the step line chart, also known as square wave chart, uses only horizontal and vertical lines to connect the nearby items together. Compared with the normal line chart, the step line chart significantly shows the sudden changes of analyzed data.</p>\n<p>In ECharts, <code>step</code> is used to characterize the connection type of the step line chart. It has three available values: <code>\'start\'</code>, <code>\'end\'</code>, and <code>\'middle\'</code>. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdTdGVwIFN0YXJ0JywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzdGVwOiAnc3RhcnQnLAogICAgICBkYXRhOiBbMTIwLCAxMzIsIDEwMSwgMTM0LCA5MCwgMjMwLCAyMTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcCBNaWRkbGUnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0ZXA6ICdtaWRkbGUnLAogICAgICBkYXRhOiBbMjIwLCAyODIsIDIwMSwgMjM0LCAyOTAsIDQzMCwgNDEwXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1N0ZXAgRW5kJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzdGVwOiAnZW5kJywKICAgICAgZGF0YTogWzQ1MCwgNDMyLCA0MDEsIDQ1NCwgNTkwLCA1MzAsIDUxMF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<blockquote>\n<p>Please focus on the difference of line between three separate types.</p>\n</blockquote>\n',postPath:"en/how-to/chart-types/line/step-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:w,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:f},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:E,draft:t},{title:"阶梯瀑布图",dir:G},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:x,children:[{title:"基础折线图",dir:P},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:U}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:Z}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:X,dir:i,draft:t},{title:"跨平台方案",dir:N,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:F,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:X,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:w,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:f},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:M,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:E,draft:t},{title:"Waterfall",dir:G}]},{title:"Line",dir:x,children:[{title:"Basic Line",dir:P},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:U}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:H},{title:"Rose Style",dir:Z}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:N,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:F,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/line/step-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/pie/basic-pie/index.html b/handbook/en/how-to/chart-types/pie/basic-pie/index.html
index 4a2011c..00ca1ab 100644
--- a/handbook/en/how-to/chart-types/pie/basic-pie/index.html
+++ b/handbook/en/how-to/chart-types/pie/basic-pie/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="basic-pie-chart" tabindex="-1">Basic Pie Chart</h1> <p>Pie charts are mainly used to show the proportion of several categories compared with the total. The radians represent the proportion of each category.</p> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>The config of the pie chart is not completely the same as the line chart and bar chart. There is no need to configure the axis. The name and value of data need to be defined in the series. Let's begin with a basic pie chart:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="basic-pie-chart" tabindex="-1">Basic Pie Chart</h1> <p>Pie charts are mainly used to show the proportion of several categories compared with the total. The radians represent the proportion of each category.</p> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>The config of the pie chart is not completely the same as the line chart and bar chart. There is no need to configure the axis. The name and value of data need to be defined in the series. Let's begin with a basic pie chart:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
series: [
{
type: 'pie',
@@ -167,7 +167,8 @@
name<span class="token operator">:</span> <span class="token string">'Search Engine'</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/pie/basic-pie.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,r,d,a,l,g,o,C,I,n,s,h,A,c,p,b,m,f,w,u,B,v,W,H,Z,y,G,x,V,S,T,U,K,L,N,O,F,P,E,R,z,D,X,Y,J,Q,k,M,j,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="basic-pie-chart" tabindex="-1">Basic Pie Chart</h1>\n<p>Pie charts are mainly used to show the proportion of several categories compared with the total. The radians represent the proportion of each category.</p>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>The config of the pie chart is not completely the same as the line chart and bar chart. There is no need to configure the axis. The name and value of data need to be defined in the series. Let\'s begin with a basic pie chart:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAnRGlyZWN0IFZpc2l0JwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxNTQ4LAogICAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>To be mentioned, the <code>value</code> here does not need to be percentage data. ECharts will proportionately distribute their corresponding radians in the pie chart depending on all the data.</p>\n<h2 id="customized-pie-chart" tabindex="-1">Customized Pie Chart</h2>\n<h3 id="radius-of-pie-chart" tabindex="-1">Radius of Pie Chart</h3>\n<p>The radius of pie chart can be defined by <a href="https://echarts.apache.org/option.html#series-pie.radius"><code>series.radius</code></a>. Both percent string(<code>\'60%\'</code>) and absolute pixel string(<code>\'200\'</code>) are available. While it is a percent string, it is proportional related to the shorter container(<code>\'div\'</code>) edge.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAnRGlyZWN0IFZpc2l0JwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxNTQ4LAogICAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgICAgfQogICAgICBdLAogICAgICByYWRpdXM6ICc1MCUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="hide-chart-while-data-sum-is-0" tabindex="-1">Hide Chart While Data Sum is 0</h2>\n<p>By default, if the data sum is 0, the series will divide the shape equally. For instance, if you don\'t want to show any shape while all 4 series have value equals 0, you could define <a href="https://echarts.apache.org/option.html#series-pie.stillShowZeroSum"><code>series.stillShowZeroSum</code></a> to <code>false</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgc3RpbGxTaG93WmVyb1N1bTogZmFsc2UsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICdEaXJlY3QgVmlzaXQnCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>If you are willing to hide the label as well, define the <a href="https://echarts.apache.org/option.html#series-pie.label.show"><code>series.label.show</code></a> to <code>false</code> as well.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogICAgc2VyaWVzOiBbewogICAgICAgIHR5cGU6ICdwaWUnLAogICAgICAgIHN0aWxsU2hvd1plcm9TdW06IGZhbHNlLAogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICAgIHNob3c6IGZhbHNlCiAgICAgICAgfQogICAgICAgIGRhdGE6IFt7CiAgICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgICBuYW1lOiAnRGlyZWN0IFZpc2l0JwogICAgICAgIH0sIHsKICAgICAgICAgICAgdmFsdWU6IDAsCiAgICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LCB7CiAgICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgICBuYW1lOiAnU2VhcmNoIEVuZ2luZScKICAgICAgICB9XQogICAgfV0KfTs\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/pie/basic-pie"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:o,draft:i},{title:"获取灵感",dir:C},{title:"寻求帮助",dir:I},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:A}]}]},{title:"概念篇",dir:c,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:b,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:f},{title:"数据集",dir:w},{title:"数据转换",dir:u},{title:"坐标系",dir:B,draft:i},{title:"坐标轴",dir:v},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:V},{title:"极坐标系柱状图",dir:S,draft:i},{title:"阶梯瀑布图",dir:T},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:U,children:[{title:"基础折线图",dir:K},{title:"堆叠折线图",dir:L},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:O},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:P},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:R}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:D}]}]},{title:X,dir:t,draft:i},{title:"跨平台方案",dir:Y,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:k},{title:"数据下钻",dir:M,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:X,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:g},{title:"Resources",dir:o,draft:i},{title:"Inspiration",dir:C},{title:"Get Help",dir:I},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:A}]}]},{title:"Concepts",dir:c,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:b,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:f},{title:"Dataset",dir:w},{title:"Data Transform",dir:u},{title:"Coordinate",dir:B,draft:i},{title:"Axis",dir:v},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:H}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:V},{title:"Bar Polar",dir:S,draft:i},{title:"Waterfall",dir:T}]},{title:"Line",dir:U,children:[{title:"Basic Line",dir:K},{title:"Stacked Line",dir:L},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:O},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:P},{title:"Ring Style",dir:E},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:Y,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:k},{title:"Drilldown",dir:M,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/en/how-to/chart-types/pie/basic-pie",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/pie/basic-pie.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,r,d,a,l,g,o,C,I,n,s,h,A,c,p,b,m,f,w,u,B,v,W,H,Z,y,G,x,V,S,T,U,K,L,N,O,F,P,E,R,z,D,X,Y,J,Q,k,M,j,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="basic-pie-chart" tabindex="-1">Basic Pie Chart</h1>\n<p>Pie charts are mainly used to show the proportion of several categories compared with the total. The radians represent the proportion of each category.</p>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>The config of the pie chart is not completely the same as the line chart and bar chart. There is no need to configure the axis. The name and value of data need to be defined in the series. Let\'s begin with a basic pie chart:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAnRGlyZWN0IFZpc2l0JwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxNTQ4LAogICAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>To be mentioned, the <code>value</code> here does not need to be percentage data. ECharts will proportionately distribute their corresponding radians in the pie chart depending on all the data.</p>\n<h2 id="customized-pie-chart" tabindex="-1">Customized Pie Chart</h2>\n<h3 id="radius-of-pie-chart" tabindex="-1">Radius of Pie Chart</h3>\n<p>The radius of pie chart can be defined by <a href="https://echarts.apache.org/option.html#series-pie.radius"><code>series.radius</code></a>. Both percent string(<code>\'60%\'</code>) and absolute pixel string(<code>\'200\'</code>) are available. While it is a percent string, it is proportional related to the shorter container(<code>\'div\'</code>) edge.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAnRGlyZWN0IFZpc2l0JwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxNTQ4LAogICAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgICAgfQogICAgICBdLAogICAgICByYWRpdXM6ICc1MCUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="hide-chart-while-data-sum-is-0" tabindex="-1">Hide Chart While Data Sum is 0</h2>\n<p>By default, if the data sum is 0, the series will divide the shape equally. For instance, if you don\'t want to show any shape while all 4 series have value equals 0, you could define <a href="https://echarts.apache.org/option.html#series-pie.stillShowZeroSum"><code>series.stillShowZeroSum</code></a> to <code>false</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgc3RpbGxTaG93WmVyb1N1bTogZmFsc2UsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICdEaXJlY3QgVmlzaXQnCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>If you are willing to hide the label as well, define the <a href="https://echarts.apache.org/option.html#series-pie.label.show"><code>series.label.show</code></a> to <code>false</code> as well.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogICAgc2VyaWVzOiBbewogICAgICAgIHR5cGU6ICdwaWUnLAogICAgICAgIHN0aWxsU2hvd1plcm9TdW06IGZhbHNlLAogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICAgIHNob3c6IGZhbHNlCiAgICAgICAgfQogICAgICAgIGRhdGE6IFt7CiAgICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgICBuYW1lOiAnRGlyZWN0IFZpc2l0JwogICAgICAgIH0sIHsKICAgICAgICAgICAgdmFsdWU6IDAsCiAgICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LCB7CiAgICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgICBuYW1lOiAnU2VhcmNoIEVuZ2luZScKICAgICAgICB9XQogICAgfV0KfTs\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/pie/basic-pie"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:o,draft:i},{title:"获取灵感",dir:C},{title:"寻求帮助",dir:I},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:A}]}]},{title:"概念篇",dir:c,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:b,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:f},{title:"数据集",dir:w},{title:"数据转换",dir:u},{title:"坐标系",dir:B,draft:i},{title:"坐标轴",dir:v},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:V},{title:"极坐标系柱状图",dir:S,draft:i},{title:"阶梯瀑布图",dir:T},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:U,children:[{title:"基础折线图",dir:K},{title:"堆叠折线图",dir:L},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:O},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:P},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:R}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:D}]}]},{title:X,dir:t,draft:i},{title:"跨平台方案",dir:Y,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:k},{title:"数据下钻",dir:M,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:X,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:g},{title:"Resources",dir:o,draft:i},{title:"Inspiration",dir:C},{title:"Get Help",dir:I},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:A}]}]},{title:"Concepts",dir:c,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:b,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:f},{title:"Dataset",dir:w},{title:"Data Transform",dir:u},{title:"Coordinate",dir:B,draft:i},{title:"Axis",dir:v},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:H}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:V},{title:"Bar Polar",dir:S,draft:i},{title:"Waterfall",dir:T}]},{title:"Line",dir:U,children:[{title:"Basic Line",dir:K},{title:"Stacked Line",dir:L},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:O},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:P},{title:"Ring Style",dir:E},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:Y,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:k},{title:"Drilldown",dir:M,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/en/how-to/chart-types/pie/basic-pie",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/pie/doughnut/index.html b/handbook/en/how-to/chart-types/pie/doughnut/index.html
index c1d5b22..43fd71e 100644
--- a/handbook/en/how-to/chart-types/pie/doughnut/index.html
+++ b/handbook/en/how-to/chart-types/pie/doughnut/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="doughnut-chart" tabindex="-1">Doughnut Chart</h1> <p>Doughnut charts are also used to show the proportion of values compared with the total. Different from the pie chart, the blank in the middle of the chart can be used to provide some extra info. It makes a doughnut chart commonly used chart type.</p> <h2 id="basic-doughnut-chart" tabindex="-1">Basic Doughnut Chart</h2> <p>In ECharts, the radius of the pie chart could also be an array with 2 elements. Every element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius.</p> <p>The bar chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="doughnut-chart" tabindex="-1">Doughnut Chart</h1> <p>Doughnut charts are also used to show the proportion of values compared with the total. Different from the pie chart, the blank in the middle of the chart can be used to provide some extra info. It makes a doughnut chart commonly used chart type.</p> <h2 id="basic-doughnut-chart" tabindex="-1">Basic Doughnut Chart</h2> <p>In ECharts, the radius of the pie chart could also be an array with 2 elements. Every element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius.</p> <p>The bar chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
title: {
text: 'A Case of Doughnut Chart',
left: 'center',
@@ -133,7 +133,8 @@
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In this case, <code>avoidLabelOverlap</code> is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of <code>avoidLabelOverlap</code> is <code>true</code>. We want the label to be fixed in the middle so that we need to define it as <code>false</code>.</p> <p>Therefore, the middle of doughnut chart will show the <code>name</code> of the highlighted sector.</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/en/how-to/chart-types/pie/doughnut.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,d,a,l,o,n,h,g,s,c,C,I,A,p,u,m,b,f,w,B,y,v,x,G,W,D,E,L,U,H,V,Z,O,z,J,S,F,R,Y,T,M,P,k,K,N,X,Q,j,_,$,q,tt,et,it){return{layout:"default",data:[{html:'<h1 id="doughnut-chart" tabindex="-1">Doughnut Chart</h1>\n<p>Doughnut charts are also used to show the proportion of values compared with the total. Different from the pie chart, the blank in the middle of the chart can be used to provide some extra info. It makes a doughnut chart commonly used chart type.</p>\n<h2 id="basic-doughnut-chart" tabindex="-1">Basic Doughnut Chart</h2>\n<p>In ECharts, the radius of the pie chart could also be an array with 2 elements. Every element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius.</p>\n<p>The bar chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRpdGxlOiB7CiAgICB0ZXh0OiAnQSBDYXNlIG9mIERvdWdobnV0IENoYXJ0JywKICAgIGxlZnQ6ICdjZW50ZXInLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICBkYXRhOiBbCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDMzNSwKICAgICAgICAgIG5hbWU6ICdBJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdCJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJhZGl1czogWyc0MCUnLCAnNzAlJ10KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>If we set one radius to string of a percentage value, while the other to a value, the inner radius will be smaller than the outer radius in some resolution. ECharts will choose the smaller element for the inner radius automatically. However, it will still cause not an unexpected outcome.</p>\n<h2 id="show-text-in-middle-of-doughnut-from-highlighted-sector" tabindex="-1">Show Text In Middle Of Doughnut From Highlighted Sector</h2>\n<p>The previous case gives you a way to show fixed text in the middle of doughnut chart. The next case will show you how to display the corresponding text of the sector highlighted by the mouse. The general idea is to fix <code>label</code> in the middle of the chart while hiding <code>label</code> in default.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgeDogJ2xlZnQnLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IFsnNTAlJywgJzcwJSddLAogICAgICBhdm9pZExhYmVsT3ZlcmxhcDogZmFsc2UsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UsCiAgICAgICAgcG9zaXRpb246ICdjZW50ZXInLAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBzaG93OiB0cnVlCiAgICAgICAgfQogICAgICB9LAogICAgICBsYWJlbExpbmU6IHsKICAgICAgICBzaG93OiBmYWxzZQogICAgICB9LAogICAgICBlbXBoYXNpczogewogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9udFNpemU6ICczMCcsCiAgICAgICAgICBmb250V2VpZ2h0OiAnYm9sZCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdBJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ0InIH0sCiAgICAgICAgeyB2YWx1ZTogMjM0LCBuYW1lOiAnQycgfSwKICAgICAgICB7IHZhbHVlOiAxMzUsIG5hbWU6ICdEJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICdFJyB9CiAgICAgIF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>In this case, <code>avoidLabelOverlap</code> is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of <code>avoidLabelOverlap</code> is <code>true</code>. We want the label to be fixed in the middle so that we need to define it as <code>false</code>.</p>\n<p>Therefore, the middle of doughnut chart will show the <code>name</code> of the highlighted sector.</p>\n',postPath:"en/how-to/chart-types/pie/doughnut"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:g},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:t},{title:"系列",dir:m,draft:t},{title:"样式",dir:b},{title:"数据集",dir:f},{title:"数据转换",dir:w},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:i},{title:"图例",dir:v},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:U,draft:t},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:O},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:S}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:R},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:M}]}]},{title:P,dir:e,draft:t},{title:"跨平台方案",dir:k,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:N,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:P,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:g},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:c},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:m,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:f},{title:"Data Transform",dir:w},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:i},{title:"Legend",dir:v},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:U,draft:t},{title:"Waterfall",dir:H}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:O},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:S}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:R},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:M}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:k,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:N,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/how-to/chart-types/pie/doughnut",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In this case, <code>avoidLabelOverlap</code> is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of <code>avoidLabelOverlap</code> is <code>true</code>. We want the label to be fixed in the middle so that we need to define it as <code>false</code>.</p> <p>Therefore, the middle of doughnut chart will show the <code>name</code> of the highlighted sector.</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/en/how-to/chart-types/pie/doughnut.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,d,a,l,o,n,h,g,s,c,C,I,A,p,u,m,b,f,w,B,y,v,x,G,W,D,E,L,U,H,V,Z,O,z,J,S,F,R,Y,T,M,P,k,K,N,X,Q,j,_,$,q,tt,et,it){return{layout:"default",data:[{html:'<h1 id="doughnut-chart" tabindex="-1">Doughnut Chart</h1>\n<p>Doughnut charts are also used to show the proportion of values compared with the total. Different from the pie chart, the blank in the middle of the chart can be used to provide some extra info. It makes a doughnut chart commonly used chart type.</p>\n<h2 id="basic-doughnut-chart" tabindex="-1">Basic Doughnut Chart</h2>\n<p>In ECharts, the radius of the pie chart could also be an array with 2 elements. Every element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius.</p>\n<p>The bar chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRpdGxlOiB7CiAgICB0ZXh0OiAnQSBDYXNlIG9mIERvdWdobnV0IENoYXJ0JywKICAgIGxlZnQ6ICdjZW50ZXInLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICBkYXRhOiBbCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDMzNSwKICAgICAgICAgIG5hbWU6ICdBJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdCJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJhZGl1czogWyc0MCUnLCAnNzAlJ10KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>If we set one radius to string of a percentage value, while the other to a value, the inner radius will be smaller than the outer radius in some resolution. ECharts will choose the smaller element for the inner radius automatically. However, it will still cause not an unexpected outcome.</p>\n<h2 id="show-text-in-middle-of-doughnut-from-highlighted-sector" tabindex="-1">Show Text In Middle Of Doughnut From Highlighted Sector</h2>\n<p>The previous case gives you a way to show fixed text in the middle of doughnut chart. The next case will show you how to display the corresponding text of the sector highlighted by the mouse. The general idea is to fix <code>label</code> in the middle of the chart while hiding <code>label</code> in default.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgeDogJ2xlZnQnLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IFsnNTAlJywgJzcwJSddLAogICAgICBhdm9pZExhYmVsT3ZlcmxhcDogZmFsc2UsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UsCiAgICAgICAgcG9zaXRpb246ICdjZW50ZXInLAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBzaG93OiB0cnVlCiAgICAgICAgfQogICAgICB9LAogICAgICBsYWJlbExpbmU6IHsKICAgICAgICBzaG93OiBmYWxzZQogICAgICB9LAogICAgICBlbXBoYXNpczogewogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9udFNpemU6ICczMCcsCiAgICAgICAgICBmb250V2VpZ2h0OiAnYm9sZCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdBJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ0InIH0sCiAgICAgICAgeyB2YWx1ZTogMjM0LCBuYW1lOiAnQycgfSwKICAgICAgICB7IHZhbHVlOiAxMzUsIG5hbWU6ICdEJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICdFJyB9CiAgICAgIF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>In this case, <code>avoidLabelOverlap</code> is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of <code>avoidLabelOverlap</code> is <code>true</code>. We want the label to be fixed in the middle so that we need to define it as <code>false</code>.</p>\n<p>Therefore, the middle of doughnut chart will show the <code>name</code> of the highlighted sector.</p>\n',postPath:"en/how-to/chart-types/pie/doughnut"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:g},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:t},{title:"系列",dir:m,draft:t},{title:"样式",dir:b},{title:"数据集",dir:f},{title:"数据转换",dir:w},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:i},{title:"图例",dir:v},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:U,draft:t},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:O},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:S}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:R},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:M}]}]},{title:P,dir:e,draft:t},{title:"跨平台方案",dir:k,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:N,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:P,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:g},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:c},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:m,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:f},{title:"Data Transform",dir:w},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:i},{title:"Legend",dir:v},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:U,draft:t},{title:"Waterfall",dir:H}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:O},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:S}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:R},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:M}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:k,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:N,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/how-to/chart-types/pie/doughnut",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/pie/rose/index.html b/handbook/en/how-to/chart-types/pie/rose/index.html
index 629dea7..1ebc424 100644
--- a/handbook/en/how-to/chart-types/pie/rose/index.html
+++ b/handbook/en/how-to/chart-types/pie/rose/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="rose-chart%EF%BC%88nightingale-chart%EF%BC%89" tabindex="-1">Rose Chart(Nightingale Chart)</h1> <p>Rose Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius.</p> <p>ECharts can implement Rose Chart by defining <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> of pie chart to <code>'area'</code>. All other configs are the same as a basic pie chart.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="rose-chart%EF%BC%88nightingale-chart%EF%BC%89" tabindex="-1">Rose Chart(Nightingale Chart)</h1> <p>Rose Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius.</p> <p>ECharts can implement Rose Chart by defining <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> of pie chart to <code>'area'</code>. All other configs are the same as a basic pie chart.</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
series: [
{
type: 'pie',
@@ -65,7 +65,8 @@
roseType<span class="token operator">:</span> <span class="token string">'area'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/pie/rose.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,s,o,c,h,g,C,A,I,p,f,b,u,m,B,w,H,v,y,S,E,P,D,O,R,K,x,L,k,V,W,M,G,Y,T,Z,_,z,F,N,U,X,J,Q,$,j,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="rose-chart%EF%BC%88nightingale-chart%EF%BC%89" tabindex="-1">Rose Chart(Nightingale Chart)</h1>\n<p>Rose Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius.</p>\n<p>ECharts can implement Rose Chart by defining <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> of pie chart to <code>\'area\'</code>. All other configs are the same as a basic pie chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxMDAsCiAgICAgICAgICBuYW1lOiAnQScKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAyMDAsCiAgICAgICAgICBuYW1lOiAnQicKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMDAsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA0MDAsCiAgICAgICAgICBuYW1lOiAnRCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA1MDAsCiAgICAgICAgICBuYW1lOiAnRScKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJvc2VUeXBlOiAnYXJlYScKICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/pie/rose"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:u},{title:"数据集",dir:m},{title:"数据转换",dir:B},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:H},{title:"视觉映射",dir:e},{title:"图例",dir:v},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:E,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:P},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:x,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:G},{title:"圆环图",dir:Y},{title:"南丁格尔图(玫瑰图)",dir:T}]},{title:"散点图",dir:Z,children:[{title:"基础散点图",dir:_}]}]},{title:z,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:j,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:z,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:m},{title:"Data Transform",dir:B},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:H},{title:"Visual Mapping",dir:e},{title:"Legend",dir:v},{title:"Event and Action",dir:y}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:E,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:P},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:K}]},{title:"Line",dir:x,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:G},{title:"Ring Style",dir:Y},{title:"Rose Style",dir:T}]},{title:"Scatter",dir:Z,children:[{title:"Basic Scatter",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:j,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/pie/rose",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/pie/rose.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,s,o,c,h,g,C,A,I,p,f,b,u,m,B,w,H,v,y,S,E,P,D,O,R,K,x,L,k,V,W,M,G,Y,T,Z,_,z,F,N,U,X,J,Q,$,j,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="rose-chart%EF%BC%88nightingale-chart%EF%BC%89" tabindex="-1">Rose Chart(Nightingale Chart)</h1>\n<p>Rose Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius.</p>\n<p>ECharts can implement Rose Chart by defining <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> of pie chart to <code>\'area\'</code>. All other configs are the same as a basic pie chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxMDAsCiAgICAgICAgICBuYW1lOiAnQScKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAyMDAsCiAgICAgICAgICBuYW1lOiAnQicKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMDAsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA0MDAsCiAgICAgICAgICBuYW1lOiAnRCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA1MDAsCiAgICAgICAgICBuYW1lOiAnRScKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJvc2VUeXBlOiAnYXJlYScKICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/pie/rose"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:u},{title:"数据集",dir:m},{title:"数据转换",dir:B},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:H},{title:"视觉映射",dir:e},{title:"图例",dir:v},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:E,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:P},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:x,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:G},{title:"圆环图",dir:Y},{title:"南丁格尔图(玫瑰图)",dir:T}]},{title:"散点图",dir:Z,children:[{title:"基础散点图",dir:_}]}]},{title:z,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:j,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:z,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:m},{title:"Data Transform",dir:B},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:H},{title:"Visual Mapping",dir:e},{title:"Legend",dir:v},{title:"Event and Action",dir:y}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:E,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:P},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:K}]},{title:"Line",dir:x,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:G},{title:"Ring Style",dir:Y},{title:"Rose Style",dir:T}]},{title:"Scatter",dir:Z,children:[{title:"Basic Scatter",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:j,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/chart-types/pie/rose",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/chart-types/scatter/basic-scatter/index.html b/handbook/en/how-to/chart-types/scatter/basic-scatter/index.html
index 5f81f71..7119b97 100644
--- a/handbook/en/how-to/chart-types/scatter/basic-scatter/index.html
+++ b/handbook/en/how-to/chart-types/scatter/basic-scatter/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="basic-scatter-chart" tabindex="-1">Basic Scatter Chart</h1> <p>Scatter Chart, a frequently used chart type, was constructed with several "points". These points sometimes represent the position of the value in the coordinate system (cartesian coordinate system, geo coordinate system, etc.), sometimes the size and color of items can be mapped to the value, represent high-dimensional data.</p> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>The following example is a basic scatter chart configuration with the x-axis as category and the y-axis as value:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="basic-scatter-chart" tabindex="-1">Basic Scatter Chart</h1> <p>Scatter Chart, a frequently used chart type, was constructed with several "points". These points sometimes represent the position of the value in the coordinate system (cartesian coordinate system, geo coordinate system, etc.), sometimes the size and color of items can be mapped to the value, represent high-dimensional data.</p> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>The following example is a basic scatter chart configuration with the x-axis as category and the y-axis as value:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
@@ -118,7 +118,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/scatter/basic-scatter.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,d,r,l,o,s,n,c,h,g,C,I,p,w,M,u,b,m,y,L,A,N,x,f,T,z,S,j,B,D,E,O,v,k,G,H,V,J,Q,W,Y,F,U,Z,P,R,K,X,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="basic-scatter-chart" tabindex="-1">Basic Scatter Chart</h1>\n<p>Scatter Chart, a frequently used chart type, was constructed with several "points". These points sometimes represent the position of the value in the coordinate system (cartesian coordinate system, geo coordinate system, etc.), sometimes the size and color of items can be mapped to the value, represent high-dimensional data.</p>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>The following example is a basic scatter chart configuration with the x-axis as category and the y-axis as value:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="scatter-chart-in-cartesian-coordinate-system" tabindex="-1">Scatter Chart in Cartesian Coordinate System</h2>\n<p>In the previous case, the x-axis of the scatter chart is a discrete category axis and the y-axis is a continuous value axis. However, the normal scene for the scatter chart is to have 2 continuous value axis (also called the cartesian coordinate system). The series type is different in that both x-axis and y-axis value are included in <code>data</code>, but not in <code>xAxis</code> and <code>yAxis</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWwogICAgICAgIFsxMCwgNV0sCiAgICAgICAgWzAsIDhdLAogICAgICAgIFs2LCAxMF0sCiAgICAgICAgWzIsIDEyXSwKICAgICAgICBbOCwgOV0KICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="customized-scatter-chart" tabindex="-1">Customized Scatter Chart</h2>\n<h3 id="symbol-style" tabindex="-1">Symbol Style</h3>\n<p>Symbol refers to the item shape in a scatter chart. There are three types of config available. The first is ECharts built-in shape, the second is image, the last is the SVG path.</p>\n<p>The built-in shape in ECharts included: <code>\'circle\'</code>, <code>\'rect\'</code>(rectangle), <code>\'roundRect\'</code>(rounded rectangle), <code>\'triangle\'</code>, <code>\'diamond\'</code>, <code>\'pin\'</code> and <code>\'arrow\'</code>. To use built-in shapes, you need to state the <code>symbol</code> to the corresponding string.</p>\n<p>If you want to define the shape as any image, try to use <code>\'image\'</code> following by the path, eg. <code>\'image://http://example.com/xxx.png\'</code> or <code>\'image://./xxx.png\'</code>.</p>\n<p>ECharts <code>symbol</code> also supports SVG vector graphics. You can define <code>symbol</code> as an SVG file path that starts with <code>\'path://\'</code> to locate the vector graphics. The advantages of vector graphics are smaller size and no jagged or blurred.</p>\n<p>Method to find the SVG path: Open an <code>SVG</code> path; Find the path similar as <code><path d="M… L…"></path></code>; Add <code>d</code>\'s value after <code>\'path://\'</code>. Let\'s check how to define an item to vector shape of heart.</p>\n<p>Firstly, we need an <code>SVG</code> file of a heart. You can draw one by vector editing software, or download one from the internet. Here is the content:</p>\n<md-code-block lang="xml" code="\'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI_Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MS45OTcgNTEuOTk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MS45OTcgNTEuOTk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI-CiAgICA8cGF0aCBkPSJNNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6Ii8-Cjwvc3ZnPg\'" line-highlights="\'\'" />\n<p>In ECharts, define config <code>symbol</code> as a path of d:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IDIwLAogICAgICBzeW1ib2w6CiAgICAgICAgJ3BhdGg6Ly9NNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>In this way, we have a heart vector of the item.</p>\n<h3 id="symbol-size" tabindex="-1">Symbol Size</h3>\n<p>The size of symbol is defined by <a href="https://echarts.apache.org/option.html#series-scatter.symbolSize"><code>series.symbolSize</code></a>. It can be s pixel value of the item size, or an array included two numbers, to define the width and height.</p>\n<p>Besides, it can be defined as a call back function. Here is an example of the format:</p>\n<md-code-block lang="ts" code="\'KHZhbHVlOiBBcnJheSB8IG51bWJlciwgcGFyYW1zOiBPYmplY3QpID0-IG51bWJlciB8IEFycmF5Ow\'" line-highlights="\'\'" />\n<p>The first argument is the data value, and the second argument included other arguments of the data item. In the following instance, we define the size of the item proportional related to the data value.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IGZ1bmN0aW9uKHZhbHVlKSB7CiAgICAgICAgcmV0dXJuIHZhbHVlIC8gMTA7CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/scatter/basic-scatter"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:s,draft:e},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:M,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:y},{title:"坐标系",dir:L,draft:e},{title:"坐标轴",dir:A},{title:"视觉映射",dir:i},{title:"图例",dir:N},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:f,children:[{title:"常用图表类型",dir:T,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:z},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:j},{title:"极坐标系柱状图",dir:B,draft:e},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:E,children:[{title:"基础折线图",dir:O},{title:"堆叠折线图",dir:v},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:G},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:Y}]}]},{title:F,dir:t,draft:e},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:R},{title:"数据下钻",dir:K,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:X}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:s,draft:e},{title:"Inspiration",dir:n},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:M,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:y},{title:"Coordinate",dir:L,draft:e},{title:"Axis",dir:A},{title:"Visual Mapping",dir:i},{title:"Legend",dir:N},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:f,children:[{title:"Common Charts",dir:T,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:z},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:j},{title:"Bar Polar",dir:B,draft:e},{title:"Waterfall",dir:D}]},{title:"Line",dir:E,children:[{title:"Basic Line",dir:O},{title:"Stacked Line",dir:v},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:G},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:J},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:R},{title:"Drilldown",dir:K,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:X}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/how-to/chart-types/scatter/basic-scatter",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/en/how-to/chart-types/scatter/basic-scatter.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,d,r,l,o,s,n,c,h,g,C,I,p,w,M,u,b,m,y,L,A,N,x,f,T,z,S,j,B,D,E,O,v,k,G,H,V,J,Q,W,Y,F,U,Z,P,R,K,X,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="basic-scatter-chart" tabindex="-1">Basic Scatter Chart</h1>\n<p>Scatter Chart, a frequently used chart type, was constructed with several "points". These points sometimes represent the position of the value in the coordinate system (cartesian coordinate system, geo coordinate system, etc.), sometimes the size and color of items can be mapped to the value, represent high-dimensional data.</p>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>The following example is a basic scatter chart configuration with the x-axis as category and the y-axis as value:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="scatter-chart-in-cartesian-coordinate-system" tabindex="-1">Scatter Chart in Cartesian Coordinate System</h2>\n<p>In the previous case, the x-axis of the scatter chart is a discrete category axis and the y-axis is a continuous value axis. However, the normal scene for the scatter chart is to have 2 continuous value axis (also called the cartesian coordinate system). The series type is different in that both x-axis and y-axis value are included in <code>data</code>, but not in <code>xAxis</code> and <code>yAxis</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWwogICAgICAgIFsxMCwgNV0sCiAgICAgICAgWzAsIDhdLAogICAgICAgIFs2LCAxMF0sCiAgICAgICAgWzIsIDEyXSwKICAgICAgICBbOCwgOV0KICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="customized-scatter-chart" tabindex="-1">Customized Scatter Chart</h2>\n<h3 id="symbol-style" tabindex="-1">Symbol Style</h3>\n<p>Symbol refers to the item shape in a scatter chart. There are three types of config available. The first is ECharts built-in shape, the second is image, the last is the SVG path.</p>\n<p>The built-in shape in ECharts included: <code>\'circle\'</code>, <code>\'rect\'</code>(rectangle), <code>\'roundRect\'</code>(rounded rectangle), <code>\'triangle\'</code>, <code>\'diamond\'</code>, <code>\'pin\'</code> and <code>\'arrow\'</code>. To use built-in shapes, you need to state the <code>symbol</code> to the corresponding string.</p>\n<p>If you want to define the shape as any image, try to use <code>\'image\'</code> following by the path, eg. <code>\'image://http://example.com/xxx.png\'</code> or <code>\'image://./xxx.png\'</code>.</p>\n<p>ECharts <code>symbol</code> also supports SVG vector graphics. You can define <code>symbol</code> as an SVG file path that starts with <code>\'path://\'</code> to locate the vector graphics. The advantages of vector graphics are smaller size and no jagged or blurred.</p>\n<p>Method to find the SVG path: Open an <code>SVG</code> path; Find the path similar as <code><path d="M… L…"></path></code>; Add <code>d</code>\'s value after <code>\'path://\'</code>. Let\'s check how to define an item to vector shape of heart.</p>\n<p>Firstly, we need an <code>SVG</code> file of a heart. You can draw one by vector editing software, or download one from the internet. Here is the content:</p>\n<md-code-block lang="xml" code="\'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI_Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MS45OTcgNTEuOTk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MS45OTcgNTEuOTk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI-CiAgICA8cGF0aCBkPSJNNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6Ii8-Cjwvc3ZnPg\'" line-highlights="\'\'" />\n<p>In ECharts, define config <code>symbol</code> as a path of d:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IDIwLAogICAgICBzeW1ib2w6CiAgICAgICAgJ3BhdGg6Ly9NNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>In this way, we have a heart vector of the item.</p>\n<h3 id="symbol-size" tabindex="-1">Symbol Size</h3>\n<p>The size of symbol is defined by <a href="https://echarts.apache.org/option.html#series-scatter.symbolSize"><code>series.symbolSize</code></a>. It can be s pixel value of the item size, or an array included two numbers, to define the width and height.</p>\n<p>Besides, it can be defined as a call back function. Here is an example of the format:</p>\n<md-code-block lang="ts" code="\'KHZhbHVlOiBBcnJheSB8IG51bWJlciwgcGFyYW1zOiBPYmplY3QpID0-IG51bWJlciB8IEFycmF5Ow\'" line-highlights="\'\'" />\n<p>The first argument is the data value, and the second argument included other arguments of the data item. In the following instance, we define the size of the item proportional related to the data value.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IGZ1bmN0aW9uKHZhbHVlKSB7CiAgICAgICAgcmV0dXJuIHZhbHVlIC8gMTA7CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/how-to/chart-types/scatter/basic-scatter"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:s,draft:e},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:M,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:y},{title:"坐标系",dir:L,draft:e},{title:"坐标轴",dir:A},{title:"视觉映射",dir:i},{title:"图例",dir:N},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:f,children:[{title:"常用图表类型",dir:T,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:z},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:j},{title:"极坐标系柱状图",dir:B,draft:e},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:E,children:[{title:"基础折线图",dir:O},{title:"堆叠折线图",dir:v},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:G},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:Y}]}]},{title:F,dir:t,draft:e},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:R},{title:"数据下钻",dir:K,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:X}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:s,draft:e},{title:"Inspiration",dir:n},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:M,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:y},{title:"Coordinate",dir:L,draft:e},{title:"Axis",dir:A},{title:"Visual Mapping",dir:i},{title:"Legend",dir:N},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:f,children:[{title:"Common Charts",dir:T,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:z},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:j},{title:"Bar Polar",dir:B,draft:e},{title:"Waterfall",dir:D}]},{title:"Line",dir:E,children:[{title:"Basic Line",dir:O},{title:"Stacked Line",dir:v},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:G},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:J},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:R},{title:"Drilldown",dir:K,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:X}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},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:e,routePath:"/en/how-to/chart-types/scatter/basic-scatter",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/cross-platform/server/index.html b/handbook/en/how-to/cross-platform/server/index.html
index b995080..b2c7586 100644
--- a/handbook/en/how-to/cross-platform/server/index.html
+++ b/handbook/en/how-to/cross-platform/server/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="server-side-rendering" tabindex="-1">Server Side Rendering</h1> <p>Apache ECharts<sup>TM</sup> can be rendered at server-side. For example, the thumbnails in the <a href="https://echarts.apache.org/examples/en/index.html">official examples page</a> are generated at a server.</p> <p>Commonly used headless tool is required, for example, <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>, <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>, <a href="https://github.com/Automattic/node-canvas">node-canvas</a>, <a href="https://github.com/jsdom/jsdom">jsdom</a>, <a href="http://phantomjs.org/">PhantomJS</a>, etc.</p> <p>Some solutions contributed by the community are list as follows:</p> <ul><li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li> <li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li> <li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li> <li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li></ul> <p>Notice: if server-side rendering result is different from browser-side rendering, please set <a href="option.html#animation">animation</a> as <code>false</code> and try again.</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/en/how-to/cross-platform/server.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,l,s,h,o,n,c,p,m,f,g,u,b,v,C,w,S,x,y,P,E,B,k,R,D,j,A,L,_,G,M,T,V,z,H,I,N,U,F,O,W,$,q,J,X,K,Q,Y,Z,tt,et,it){return{layout:"default",data:[{html:'<h1 id="server-side-rendering" tabindex="-1">Server Side Rendering</h1>\n<p>Apache ECharts<sup>TM</sup> can be rendered at server-side. For example, the thumbnails in the <a href="https://echarts.apache.org/examples/en/index.html">official examples page</a> are generated at a server.</p>\n<p>Commonly used headless tool is required, for example, <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>, <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>, <a href="https://github.com/Automattic/node-canvas">node-canvas</a>, <a href="https://github.com/jsdom/jsdom">jsdom</a>, <a href="http://phantomjs.org/">PhantomJS</a>, etc.</p>\n<p>Some solutions contributed by the community are list as follows:</p>\n<ul>\n<li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n<li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li>\n</ul>\n<p>Notice: if server-side rendering result is different from browser-side rendering, please set <a href="option.html#animation">animation</a> as <code>false</code> and try again.</p>\n',postPath:"en/how-to/cross-platform/server"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:n},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:f}]}]},{title:"概念篇",dir:g,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:b,draft:t},{title:"系列",dir:v,draft:t},{title:"样式",dir:C},{title:"数据集",dir:w},{title:"数据转换",dir:S},{title:"坐标系",dir:x,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:i},{title:"图例",dir:P},{title:"事件与行为",dir:E}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:j},{title:"极坐标系柱状图",dir:A,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:_,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:I},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:F}]}]},{title:O,dir:e,draft:t},{title:"跨平台方案",dir:W,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:$}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:X,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:O,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:s},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:n},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:f}]}]},{title:"Concepts",dir:g,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:v,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:w},{title:"Data Transform",dir:S},{title:"Coordinate",dir:x,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:i},{title:"Legend",dir:P},{title:"Event and Action",dir:E}]},{title:"How To Guides",dir:B,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:j},{title:"Bar Polar",dir:A,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:_,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:I},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:W,children:[{title:"Server Side Rendering",dir:$}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:X,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/how-to/cross-platform/server",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="server-side-rendering" tabindex="-1">Server Side Rendering</h1> <p>Apache ECharts<sup>TM</sup> can be rendered at server-side. For example, the thumbnails in the <a href="https://echarts.apache.org/examples/en/index.html">official examples page</a> are generated at a server.</p> <p>Commonly used headless tool is required, for example, <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>, <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>, <a href="https://github.com/Automattic/node-canvas">node-canvas</a>, <a href="https://github.com/jsdom/jsdom">jsdom</a>, <a href="http://phantomjs.org/">PhantomJS</a>, etc.</p> <p>Some solutions contributed by the community are list as follows:</p> <ul><li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li> <li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li> <li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li> <li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li></ul> <p>Notice: if server-side rendering result is different from browser-side rendering, please set <a href="option.html#animation">animation</a> as <code>false</code> and try again.</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/en/how-to/cross-platform/server.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,l,s,h,o,n,c,p,m,f,g,u,b,v,C,w,S,x,y,P,E,B,k,R,D,j,A,L,_,G,M,T,V,z,H,I,N,U,F,O,W,$,q,J,X,K,Q,Y,Z,tt,et,it){return{layout:"default",data:[{html:'<h1 id="server-side-rendering" tabindex="-1">Server Side Rendering</h1>\n<p>Apache ECharts<sup>TM</sup> can be rendered at server-side. For example, the thumbnails in the <a href="https://echarts.apache.org/examples/en/index.html">official examples page</a> are generated at a server.</p>\n<p>Commonly used headless tool is required, for example, <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>, <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>, <a href="https://github.com/Automattic/node-canvas">node-canvas</a>, <a href="https://github.com/jsdom/jsdom">jsdom</a>, <a href="http://phantomjs.org/">PhantomJS</a>, etc.</p>\n<p>Some solutions contributed by the community are list as follows:</p>\n<ul>\n<li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n<li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li>\n</ul>\n<p>Notice: if server-side rendering result is different from browser-side rendering, please set <a href="option.html#animation">animation</a> as <code>false</code> and try again.</p>\n',postPath:"en/how-to/cross-platform/server"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:n},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:f}]}]},{title:"概念篇",dir:g,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:b,draft:t},{title:"系列",dir:v,draft:t},{title:"样式",dir:C},{title:"数据集",dir:w},{title:"数据转换",dir:S},{title:"坐标系",dir:x,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:i},{title:"图例",dir:P},{title:"事件与行为",dir:E}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:j},{title:"极坐标系柱状图",dir:A,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:_,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:I},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:F}]}]},{title:O,dir:e,draft:t},{title:"跨平台方案",dir:W,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:$}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:X,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:O,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:s},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:n},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:f}]}]},{title:"Concepts",dir:g,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:v,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:w},{title:"Data Transform",dir:S},{title:"Coordinate",dir:x,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:i},{title:"Legend",dir:P},{title:"Event and Action",dir:E}]},{title:"How To Guides",dir:B,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:j},{title:"Bar Polar",dir:A,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:_,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:I},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:W,children:[{title:"Server Side Rendering",dir:$}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:X,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:"/en/how-to/cross-platform/server",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/data/dynamic-data/index.html b/handbook/en/how-to/data/dynamic-data/index.html
index 053de91..59dd82c 100644
--- a/handbook/en/how-to/data/dynamic-data/index.html
+++ b/handbook/en/how-to/data/dynamic-data/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="asynchronous-data-loading-and-dynamic-update" tabindex="-1">Asynchronous Data Loading and Dynamic Update</h1> <h2 id="asynchronous-loading" tabindex="-1">Asynchronous Loading</h2> <p>Data in <a href="en/get-started">Getting Started Example</a> is directly updated by using <code>setOption</code>. But in many cases, data need to be filled by asynchronous loading frequently. <code>ECharts</code> can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use <code>setOption</code> to fill in data and configs after the chart initialized.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="asynchronous-data-loading-and-dynamic-update" tabindex="-1">Asynchronous Data Loading and Dynamic Update</h1> <h2 id="asynchronous-loading" tabindex="-1">Asynchronous Loading</h2> <p>Data in <a href="en/get-started">Getting Started Example</a> is directly updated by using <code>setOption</code>. But in many cases, data need to be filled by asynchronous loading frequently. <code>ECharts</code> can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use <code>setOption</code> to fill in data and configs after the chart initialized.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'data.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Structure of data:</span>
@@ -75,7 +75,8 @@
$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'data.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
myChart<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Here is the effect:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <h2 id="dynamic-update" tabindex="-1">Dynamic Update</h2> <p>ECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It's surprisingly simple to implement a dynamic update.</p> <p>All data's update was implemented by <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a>. You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation.</p> <p>Check the following example.</p> <p><iframe width="100%" height="350" src=""></iframe></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/en/how-to/data/dynamic-data.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,a,d,r,l,n,o,h,c,s,g,p,C,I,m,u,b,A,y,G,f,w,B,Z,R,x,v,S,X,W,E,L,k,Y,F,z,K,V,H,J,Q,O,P,D,M,T,N,j,U,_,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="asynchronous-data-loading-and-dynamic-update" tabindex="-1">Asynchronous Data Loading and Dynamic Update</h1>\n<h2 id="asynchronous-loading" tabindex="-1">Asynchronous Loading</h2>\n<p>Data in <a href="en/get-started">Getting Started Example</a> is directly updated by using <code>setOption</code>. But in many cases, data need to be filled by asynchronous loading frequently. <code>ECharts</code> can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use <code>setOption</code> to fill in data and configs after the chart initialized.</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CgokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbihkYXRhKSB7CiAgLy8gU3RydWN0dXJlIG9mIGRhdGE6CiAgLy8gewogIC8vICAgICBjYXRlZ29yaWVzOiBbIlNoaXJ0IiwiV29vbCBzd2VhdGVyIiwiQ2hpZmZvbiBzaGlydCIsIlBhbnRzIiwiSGlnaC1oZWVsZWQgc2hvZXMiLCJzb2NrcyJdLAogIC8vICAgICB2YWx1ZXM6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgLy8gfQogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHRpdGxlOiB7CiAgICAgIHRleHQ6ICdBc3luY2hyb25vdXMgTG9hZGluZyBFeGFtcGxlJwogICAgfSwKICAgIHRvb2x0aXA6IHt9LAogICAgbGVnZW5kOiB7fSwKICAgIHhBeGlzOiB7CiAgICAgIGRhdGE6IGRhdGEuY2F0ZWdvcmllcwogICAgfSwKICAgIHlBeGlzOiB7fSwKICAgIHNlcmllczogWwogICAgICB7CiAgICAgICAgbmFtZTogJ1NhbGVzJywKICAgICAgICB0eXBlOiAnYmFyJywKICAgICAgICBkYXRhOiBkYXRhLnZhbHVlcwogICAgICB9CiAgICBdCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>Or display empty axes with all styles defined before fill in the data:</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIFNob3cgdGl0bGUsIGxlZ2VuZHMgYW5kIGVtcHR5IGF4ZXMKbXlDaGFydC5zZXRPcHRpb24oewogIHRpdGxlOiB7CiAgICB0ZXh0OiAnQXN5bmNocm9ub3VzIExvYWRpbmcgRXhhbXBsZScKICB9LAogIHRvb2x0aXA6IHt9LAogIGxlZ2VuZDogewogICAgZGF0YTogWydTYWxlcyddCiAgfSwKICB4QXhpczogewogICAgZGF0YTogW10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1NhbGVzJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFtdCiAgICB9CiAgXQp9KTsKCi8vIEFzeW5jaHJvbm91cyBEYXRhIExvYWRpbmcKJC5nZXQoJ2RhdGEuanNvbicpLmRvbmUoZnVuY3Rpb24oZGF0YSkgewogIC8vIEZpbGwgaW4gdGhlIGRhdGEKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICB4QXhpczogewogICAgICBkYXRhOiBkYXRhLmNhdGVnb3JpZXMKICAgIH0sCiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIC8vIEZpbmQgc2VyaWVzIGJ5IG5hbWUKICAgICAgICBuYW1lOiAnU2FsZXMnLAogICAgICAgIGRhdGE6IGRhdGEuZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<p><md-example src="doc-example/tutorial-async"></md-example></p>\n<p>You need to use <code>name</code> to "navigate" ECharts when updating data. In the previous example, the chart can update normally depending on the order of series, but we recommend you to add the <code>name</code> data while updating data.</p>\n<h2 id="loading-animation" tabindex="-1">loading Animation</h2>\n<p>When it takes a long time to load the data, the user is facing the empty chart with only axes will wonder if there are bugs appear.</p>\n<p>ECharts have a simple loading animation by default. You can call <a href="https://echarts.apache.org//api.html#echartsInstance.showLoading">showLoading</a> to display. When the data loading was completed, call <a href="https://echarts.apache.org//api.html#echartsInstance.hideLoading">hideLoading</a> to hide the animation.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zaG93TG9hZGluZygpOwokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbiAoZGF0YSkgewogICAgbXlDaGFydC5oaWRlTG9hZGluZygpOwogICAgbXlDaGFydC5zZXRPcHRpb24oLi4uKTsKfSk7\'" line-highlights="\'\'" />\n<p>Here is the effect:</p>\n<p><md-example src="doc-example/tutorial-loading"></md-example></p>\n<h2 id="dynamic-update" tabindex="-1">Dynamic Update</h2>\n<p>ECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It\'s surprisingly simple to implement a dynamic update.</p>\n<p>All data\'s update was implemented by <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a>. You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation.</p>\n<p>Check the following example.</p>\n<p><md-example src="doc-example/tutorial-dynamic-data"></md-example></p>\n',postPath:"en/how-to/data/dynamic-data"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:c},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:C}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:A},{title:"数据集",dir:y},{title:"数据转换",dir:G},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:B},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:W,draft:t},{title:"阶梯瀑布图",dir:E},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:Y},{title:"区域面积图",dir:F},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:J}]},{title:"散点图",dir:Q,children:[{title:"基础散点图",dir:O}]}]},{title:P,dir:i,draft:t},{title:"跨平台方案",dir:D,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:c},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:C}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:A},{title:"Dataset",dir:y},{title:"Data Transform",dir:G},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:B},{title:"Event and Action",dir:Z}]},{title:"How To Guides",dir:R,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:W,draft:t},{title:"Waterfall",dir:E}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:Y},{title:"Area Chart",dir:F},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:H},{title:"Rose Style",dir:J}]},{title:"Scatter",dir:Q,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:D,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/data/dynamic-data",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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>Here is the effect:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <h2 id="dynamic-update" tabindex="-1">Dynamic Update</h2> <p>ECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It's surprisingly simple to implement a dynamic update.</p> <p>All data's update was implemented by <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a>. You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation.</p> <p>Check the following example.</p> <p><iframe width="100%" height="350" src=""></iframe></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/en/how-to/data/dynamic-data.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,a,d,r,l,n,o,h,c,s,g,p,C,I,m,u,b,A,y,G,f,w,B,Z,R,x,v,S,X,W,E,L,k,Y,F,z,K,V,H,J,Q,O,P,D,M,T,N,j,U,_,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="asynchronous-data-loading-and-dynamic-update" tabindex="-1">Asynchronous Data Loading and Dynamic Update</h1>\n<h2 id="asynchronous-loading" tabindex="-1">Asynchronous Loading</h2>\n<p>Data in <a href="en/get-started">Getting Started Example</a> is directly updated by using <code>setOption</code>. But in many cases, data need to be filled by asynchronous loading frequently. <code>ECharts</code> can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use <code>setOption</code> to fill in data and configs after the chart initialized.</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CgokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbihkYXRhKSB7CiAgLy8gU3RydWN0dXJlIG9mIGRhdGE6CiAgLy8gewogIC8vICAgICBjYXRlZ29yaWVzOiBbIlNoaXJ0IiwiV29vbCBzd2VhdGVyIiwiQ2hpZmZvbiBzaGlydCIsIlBhbnRzIiwiSGlnaC1oZWVsZWQgc2hvZXMiLCJzb2NrcyJdLAogIC8vICAgICB2YWx1ZXM6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgLy8gfQogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHRpdGxlOiB7CiAgICAgIHRleHQ6ICdBc3luY2hyb25vdXMgTG9hZGluZyBFeGFtcGxlJwogICAgfSwKICAgIHRvb2x0aXA6IHt9LAogICAgbGVnZW5kOiB7fSwKICAgIHhBeGlzOiB7CiAgICAgIGRhdGE6IGRhdGEuY2F0ZWdvcmllcwogICAgfSwKICAgIHlBeGlzOiB7fSwKICAgIHNlcmllczogWwogICAgICB7CiAgICAgICAgbmFtZTogJ1NhbGVzJywKICAgICAgICB0eXBlOiAnYmFyJywKICAgICAgICBkYXRhOiBkYXRhLnZhbHVlcwogICAgICB9CiAgICBdCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>Or display empty axes with all styles defined before fill in the data:</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIFNob3cgdGl0bGUsIGxlZ2VuZHMgYW5kIGVtcHR5IGF4ZXMKbXlDaGFydC5zZXRPcHRpb24oewogIHRpdGxlOiB7CiAgICB0ZXh0OiAnQXN5bmNocm9ub3VzIExvYWRpbmcgRXhhbXBsZScKICB9LAogIHRvb2x0aXA6IHt9LAogIGxlZ2VuZDogewogICAgZGF0YTogWydTYWxlcyddCiAgfSwKICB4QXhpczogewogICAgZGF0YTogW10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1NhbGVzJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFtdCiAgICB9CiAgXQp9KTsKCi8vIEFzeW5jaHJvbm91cyBEYXRhIExvYWRpbmcKJC5nZXQoJ2RhdGEuanNvbicpLmRvbmUoZnVuY3Rpb24oZGF0YSkgewogIC8vIEZpbGwgaW4gdGhlIGRhdGEKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICB4QXhpczogewogICAgICBkYXRhOiBkYXRhLmNhdGVnb3JpZXMKICAgIH0sCiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIC8vIEZpbmQgc2VyaWVzIGJ5IG5hbWUKICAgICAgICBuYW1lOiAnU2FsZXMnLAogICAgICAgIGRhdGE6IGRhdGEuZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<p><md-example src="doc-example/tutorial-async"></md-example></p>\n<p>You need to use <code>name</code> to "navigate" ECharts when updating data. In the previous example, the chart can update normally depending on the order of series, but we recommend you to add the <code>name</code> data while updating data.</p>\n<h2 id="loading-animation" tabindex="-1">loading Animation</h2>\n<p>When it takes a long time to load the data, the user is facing the empty chart with only axes will wonder if there are bugs appear.</p>\n<p>ECharts have a simple loading animation by default. You can call <a href="https://echarts.apache.org//api.html#echartsInstance.showLoading">showLoading</a> to display. When the data loading was completed, call <a href="https://echarts.apache.org//api.html#echartsInstance.hideLoading">hideLoading</a> to hide the animation.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zaG93TG9hZGluZygpOwokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbiAoZGF0YSkgewogICAgbXlDaGFydC5oaWRlTG9hZGluZygpOwogICAgbXlDaGFydC5zZXRPcHRpb24oLi4uKTsKfSk7\'" line-highlights="\'\'" />\n<p>Here is the effect:</p>\n<p><md-example src="doc-example/tutorial-loading"></md-example></p>\n<h2 id="dynamic-update" tabindex="-1">Dynamic Update</h2>\n<p>ECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It\'s surprisingly simple to implement a dynamic update.</p>\n<p>All data\'s update was implemented by <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a>. You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation.</p>\n<p>Check the following example.</p>\n<p><md-example src="doc-example/tutorial-dynamic-data"></md-example></p>\n',postPath:"en/how-to/data/dynamic-data"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:c},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:C}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:A},{title:"数据集",dir:y},{title:"数据转换",dir:G},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:B},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:W,draft:t},{title:"阶梯瀑布图",dir:E},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:Y},{title:"区域面积图",dir:F},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:J}]},{title:"散点图",dir:Q,children:[{title:"基础散点图",dir:O}]}]},{title:P,dir:i,draft:t},{title:"跨平台方案",dir:D,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:c},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:C}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:A},{title:"Dataset",dir:y},{title:"Data Transform",dir:G},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:B},{title:"Event and Action",dir:Z}]},{title:"How To Guides",dir:R,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:W,draft:t},{title:"Waterfall",dir:E}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:Y},{title:"Area Chart",dir:F},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:H},{title:"Rose Style",dir:J}]},{title:"Scatter",dir:Q,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:D,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en/how-to/data/dynamic-data",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/interaction/drag/index.html b/handbook/en/how-to/interaction/drag/index.html
index 021a4ec..345ef5b 100644
--- a/handbook/en/how-to/interaction/drag/index.html
+++ b/handbook/en/how-to/interaction/drag/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="an-example%3A-implement-dragging" tabindex="-1">An Example: Implement Dragging</h1> <p>This is a tiny example, introducing how to implement dragging of graphic elements in Apache ECharts<sup>TM</sup>. From this example, we will see how to make an application with rich intractivity based on echarts API.</p> <p><iframe width="100%" height="400" src=""></iframe></p> <p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.</p> <h2 id="implement-basic-dragging" tabindex="-1">Implement basic dragging</h2> <p>First of all, we create a basic <a href="https://echarts.apache.org/option.html#series-line">line chart (line series)</a>:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> symbolSize <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="an-example%3A-implement-dragging" tabindex="-1">An Example: Implement Dragging</h1> <p>This is a tiny example, introducing how to implement dragging of graphic elements in Apache ECharts<sup>TM</sup>. From this example, we will see how to make an application with rich intractivity based on echarts API.</p> <p><iframe width="100%" height="400" src=""></iframe></p> <p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.</p> <h2 id="implement-basic-dragging" tabindex="-1">Implement basic dragging</h2> <p>First of all, we create a basic <a href="https://echarts.apache.org/option.html#series-line">line chart (line series)</a>:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> symbolSize <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">[</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
@@ -211,7 +211,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>With knowledge introduced above, more feature can be implemented. For example, <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</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/en/how-to/interaction/drag.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,l,a,d,g,o,c,I,r,n,h,C,s,G,p,b,A,m,Z,B,y,X,w,u,R,Y,W,v,F,K,H,V,S,J,U,L,N,k,f,z,x,j,T,M,Q,E,D,P,O,q,_,$,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="an-example%3A-implement-dragging" tabindex="-1">An Example: Implement Dragging</h1>\n<p>This is a tiny example, introducing how to implement dragging of graphic elements in Apache ECharts<sup>TM</sup>. From this example, we will see how to make an application with rich intractivity based on echarts API.</p>\n<p><md-example src="line-draggable" height="400"></md-example></p>\n<p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let\'s get started from this simple example.</p>\n<h2 id="implement-basic-dragging" tabindex="-1">Implement basic dragging</h2>\n<p>First of all, we create a basic <a href="https://echarts.apache.org/option.html#series-line">line chart (line series)</a>:</p>\n<md-code-block lang="js" code="\'dmFyIHN5bWJvbFNpemUgPSAyMDsKdmFyIGRhdGEgPSBbCiAgWzE1LCAwXSwKICBbLTUwLCAxMF0sCiAgWy01Ni41LCAyMF0sCiAgWy00Ni41LCAzMF0sCiAgWy0yMi4xLCA0MF0KXTsKCm15Q2hhcnQuc2V0T3B0aW9uKHsKICB4QXhpczogewogICAgbWluOiAtMTAwLAogICAgbWF4OiA4MCwKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBheGlzTGluZTogeyBvblplcm86IGZhbHNlIH0KICB9LAogIHlBeGlzOiB7CiAgICBtaW46IC0zMCwKICAgIG1heDogNjAsCiAgICB0eXBlOiAndmFsdWUnLAogICAgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9CiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgaWQ6ICdhJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzbW9vdGg6IHRydWUsCiAgICAgIC8vIFNldCBhIGJpZyBzeW1ib2xTaXplIGZvciBkcmFnZ2luZyBjb252ZW5pZW5jZS4KICAgICAgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwKICAgICAgZGF0YTogZGF0YQogICAgfQogIF0KfSk7\'" line-highlights="\'\'" />\n<p>Since the symbols in line is not draggable, we make them draggable by using <a href="https://echarts.apache.org/option.html#graphic">graphic component</a> to add draggable circular elements to symbols respectively.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIERlY2xhcmUgYSBncmFwaGljIGNvbXBvbmVudCwgd2hpY2ggY29udGFpbnMgc29tZSBncmFwaGljIGVsZW1lbnRzCiAgLy8gd2l0aCB0aGUgdHlwZSBvZiAnY2lyY2xlJy4KICAvLyBIZXJlIHdlIGhhdmUgdXNlZCB0aGUgbWV0aG9kIGBlY2hhcnRzLnV0aWwubWFwYCwgd2hpY2ggaGFzIHRoZSBzYW1lCiAgLy8gYmVoYXZpb3IgYXMgQXJyYXkucHJvdG90eXBlLm1hcCwgYW5kIGlzIGNvbXBhdGlibGUgd2l0aCBFUzUtLgogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oZGF0YUl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgLy8gJ2NpcmNsZScgbWVhbnMgdGhpcyBncmFwaGljIGVsZW1lbnQgaXMgYSBzaGFwZSBvZiBjaXJjbGUuCiAgICAgIHR5cGU6ICdjaXJjbGUnLAoKICAgICAgc2hhcGU6IHsKICAgICAgICAvLyBUaGUgcmFkaXVzIG9mIHRoZSBjaXJjbGUuCiAgICAgICAgcjogc3ltYm9sU2l6ZSAvIDIKICAgICAgfSwKICAgICAgLy8gVHJhbnNmb3JtIGlzIHVzZWQgdG8gbG9jYXRlZCB0aGUgY2lyY2xlLiBwb3NpdGlvbjoKICAgICAgLy8gW3gsIHldIG1lYW5zIHRyYW5zbGF0ZSB0aGUgY2lyY2xlIHRvIHRoZSBwb3NpdGlvbiBbeCwgeV0uCiAgICAgIC8vIFRoZSBBUEkgYGNvbnZlcnRUb1BpeGVsYCBpcyB1c2VkIHRvIGdldCB0aGUgcG9zaXRpb24gb2YKICAgICAgLy8gdGhlIGNpcmNsZSwgd2hpY2ggd2lsbCBpbnRyb2R1Y2VkIGxhdGVyLgogICAgICBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGRhdGFJdGVtKSwKCiAgICAgIC8vIE1ha2UgdGhlIGNpcmNsZSBpbnZpc2libGUgKGJ1dCBtb3VzZSBldmVudCB3b3JrcyBhcyBub3JtYWwpLgogICAgICBpbnZpc2libGU6IHRydWUsCiAgICAgIC8vIE1ha2UgdGhlIGNpcmNsZSBkcmFnZ2FibGUuCiAgICAgIGRyYWdnYWJsZTogdHJ1ZSwKICAgICAgLy8gR2l2ZSBhIGJpZyB6IHZhbHVlLCB3aGljaCBtYWtlcyB0aGUgY2lyY2xlIGNvdmVyIHRoZSBzeW1ib2wKICAgICAgLy8gaW4gbGluZSBzZXJpZXMuCiAgICAgIHo6IDEwMCwKICAgICAgLy8gVGhpcyBpcyB0aGUgZXZlbnQgaGFuZGxlciBvZiBkcmFnZ2luZywgd2hpY2ggd2lsbCBiZSB0cmlnZ2VyZWQKICAgICAgLy8gcmVwZWF0bHkgd2hpbGUgZHJhZ2dpbmcuIFNlZSBtb3JlIGRldGFpbHMgYmVsb3cuCiAgICAgIC8vIEEgdXRpbCBtZXRob2QgYGVjaGFydHMudXRpbC5jdXJyeWAgaXMgdXNlZCBoZXJlIHRvIGdlbmVyYXRlIGEKICAgICAgLy8gbmV3IGZ1bmN0aW9uIHRoZSBzYW1lIGFzIGBvblBvaW50RHJhZ2dpbmdgLCBleGNlcHQgdGhhdCB0aGUKICAgICAgLy8gZmlyc3QgcGFyYW1ldGVyIGlzIGZpeGVkIHRvIGJlIHRoZSBgZGF0YUluZGV4YCBoZXJlLgogICAgICBvbmRyYWc6IGVjaGFydHMudXRpbC5jdXJyeShvblBvaW50RHJhZ2dpbmcsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7\'" line-highlights="\'\'" />\n<p>In the code above, API <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel(\'grid\', dataItem)</code>, the first parameter <code>\'grid\'</code> indicates that <code>dataItem</code> should be converted in the first <a href="https://echarts.apache.org/option.html#grid">grid component (cartesian)</a>.</p>\n<p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p>\n<p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p>\n<md-code-block lang="js" code="\'Ly8gVGhpcyBmdW5jdGlvbiB3aWxsIGJlIGNhbGxlZCByZXBlYXRseSB3aGlsZSBkcmFnZ2luZy4KLy8gVGhlIG1pc3Npb24gb2YgdGhpcyBmdW5jdGlvbiBpcyB0byB1cGRhdGUgYHNlcmllcy5kYXRhYCBiYXNlZCBvbgovLyB0aGUgbmV3IHBvaW50cyB1cGRhdGVkIGJ5IGRyYWdnaW5nLCBhbmQgdG8gcmUtcmVuZGVyIHRoZSBsaW5lCi8vIHNlcmllcyBiYXNlZCBvbiB0aGUgbmV3IGRhdGEsIGJ5IHdoaWNoIHRoZSBncmFwaGljIGVsZW1lbnRzIG9mIHRoZQovLyBsaW5lIHNlcmllcyBjYW4gYmUgc3luY2hyb25pemVkIHdpdGggZHJhZ2dpbmcuCmZ1bmN0aW9uIG9uUG9pbnREcmFnZ2luZyhkYXRhSW5kZXgpIHsKICAvLyBIZXJlIHRoZSBgZGF0YWAgaXMgZGVjbGFyZWQgaW4gdGhlIGNvZGUgYmxvY2sgaW4gdGhlIGJlZ2lubmluZwogIC8vIG9mIHRoaXMgYXJ0aWNsZS4gVGhlIGB0aGlzYCByZWZlcnMgdG8gdGhlIGRyYWdnZWQgY2lyY2xlLgogIC8vIGB0aGlzLnBvc2l0aW9uYCBpcyB0aGUgY3VycmVudCBwb3NpdGlvbiBvZiB0aGUgY2lyY2xlLgogIGRhdGFbZGF0YUluZGV4XSA9IG15Q2hhcnQuY29udmVydEZyb21QaXhlbCgnZ3JpZCcsIHRoaXMucG9zaXRpb24pOwogIC8vIFJlLXJlbmRlciB0aGUgY2hhcnQgYmFzZWQgb24gdGhlIHVwZGF0ZWQgYGRhdGFgLgogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogWwogICAgICB7CiAgICAgICAgaWQ6ICdhJywKICAgICAgICBkYXRhOiBkYXRhCiAgICAgIH0KICAgIF0KICB9KTsKfQ\'" line-highlights="\'\'" />\n<p>In the code above, API <a href="api.html#echartsInstance.convertFromPixel">convertFromPixel</a> is used, which is the reversed process of <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a>. <code>myChart.convertFromPixel(\'grid\', this.position)</code> converts a pixel coordinate to data item in <a href="https://echarts.apache.org/option.html#grid">grid (cartesian)</a>.</p>\n<p>Finally, add those code to make graphic elements responsive to change of canvas size.</p>\n<md-code-block lang="js" code="\'d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIGZ1bmN0aW9uKCkgewogIC8vIFJlLWNhbGN1bGF0ZSB0aGUgcG9zaXRpb24gb2YgZWFjaCBjaXJjbGUgYW5kIHVwZGF0ZSBjaGFydCB1c2luZyBgc2V0T3B0aW9uYC4KICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4gewogICAgICAgIHBvc2l0aW9uOiBteUNoYXJ0LmNvbnZlcnRUb1BpeGVsKCdncmlkJywgaXRlbSkKICAgICAgfTsKICAgIH0pCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<h2 id="add-tooltip-component" tabindex="-1">Add tooltip component</h2>\n<p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href="https://echarts.apache.org/option.html#tooltip">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p>\n<p>Add these snippets to the code block above:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLiwKICB0b29sdGlwOiB7CiAgICAvLyBNZWFucyBkaXNhYmxlIGRlZmF1bHQgInNob3cvaGlkZSBydWxlIi4KICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxicj5ZOiAnICsKICAgICAgICBwYXJhbXMuZGF0YVsxXS50b0ZpeGVkKDIpCiAgICAgICk7CiAgICB9CiAgfQp9KTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGRhdGEubWFwKGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgIC8vIC4uLiwKICAgICAgLy8gQ3VzdG9taXplICJzaG93L2hpZGUgcnVsZSIsIHNob3cgd2hlbiBtb3VzZSBvdmVyLCBoaWRlIHdoZW4gbW91c2Ugb3V0LgogICAgICBvbm1vdXNlbW92ZTogZWNoYXJ0cy51dGlsLmN1cnJ5KHNob3dUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICBvbm1vdXNlb3V0OiBlY2hhcnRzLnV0aWwuY3VycnkoaGlkZVRvb2x0aXAsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7CgpmdW5jdGlvbiBzaG93VG9vbHRpcChkYXRhSW5kZXgpIHsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdzaG93VGlwJywKICAgIHNlcmllc0luZGV4OiAwLAogICAgZGF0YUluZGV4OiBkYXRhSW5kZXgKICB9KTsKfQoKZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnaGlkZVRpcCcKICB9KTsKfQ\'" line-highlights="\'\'" />\n<p>The API <a href="https://echarts.apache.org//api.html#echartsInstance.dispatchAction">dispatchAction</a> is used to show/hide tooltip content, where actions <a href="https://echarts.apache.org//api.html#action.tooltip.showTip">showTip</a> and <a href="api.html#action.tooltip.hideTip">hideTip</a> is dispatched.</p>\n<h2 id="full-code" tabindex="-1">Full code</h2>\n<p>Full code is shown as follow:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Cgp2YXIgc3ltYm9sU2l6ZSA9IDIwOwp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxiciAvPlk6ICcgKwogICAgICAgIHBhcmFtcy5kYXRhWzFdLnRvRml4ZWQoMikKICAgICAgKTsKICAgIH0KICB9LAogIHhBeGlzOiB7IG1pbjogLTEwMCwgbWF4OiA4MCwgdHlwZTogJ3ZhbHVlJywgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9IH0sCiAgeUF4aXM6IHsgbWluOiAtMzAsIG1heDogNjAsIHR5cGU6ICd2YWx1ZScsIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfSB9LAogIHNlcmllczogWwogICAgeyBpZDogJ2EnLCB0eXBlOiAnbGluZScsIHNtb290aDogdHJ1ZSwgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgZGF0YTogZGF0YSB9CiAgXQp9KTsKbXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oaXRlbSwgZGF0YUluZGV4KSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnY2lyY2xlJywKICAgICAgcG9zaXRpb246IG15Q2hhcnQuY29udmVydFRvUGl4ZWwoJ2dyaWQnLCBpdGVtKSwKICAgICAgc2hhcGU6IHsgcjogc3ltYm9sU2l6ZSAvIDIgfSwKICAgICAgaW52aXNpYmxlOiB0cnVlLAogICAgICBkcmFnZ2FibGU6IHRydWUsCiAgICAgIG9uZHJhZzogZWNoYXJ0cy51dGlsLmN1cnJ5KG9uUG9pbnREcmFnZ2luZywgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW1vdmU6IGVjaGFydHMudXRpbC5jdXJyeShzaG93VG9vbHRpcCwgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW91dDogZWNoYXJ0cy51dGlsLmN1cnJ5KGhpZGVUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICB6OiAxMDAKICAgIH07CiAgfSkKfSk7CndpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCBmdW5jdGlvbigpIHsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4geyBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pIH07CiAgICB9KQogIH0pOwp9KTsKZnVuY3Rpb24gc2hvd1Rvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnc2hvd1RpcCcsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogZGF0YUluZGV4CiAgfSk7Cn0KZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7IHR5cGU6ICdoaWRlVGlwJyB9KTsKfQpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4LCBkeCwgZHkpIHsKICBkYXRhW2RhdGFJbmRleF0gPSBteUNoYXJ0LmNvbnZlcnRGcm9tUGl4ZWwoJ2dyaWQnLCB0aGlzLnBvc2l0aW9uKTsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIGlkOiAnYScsCiAgICAgICAgZGF0YTogZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0\'" line-highlights="\'\'" />\n<p>With knowledge introduced above, more feature can be implemented. For example, <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p>\n',postPath:"en/how-to/interaction/drag"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:c,draft:e},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:r},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:s}]}]},{title:"概念篇",dir:G,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:b,draft:e},{title:"系列",dir:A,draft:e},{title:"样式",dir:m},{title:"数据集",dir:Z},{title:"数据转换",dir:B},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:X},{title:"视觉映射",dir:t},{title:"图例",dir:w},{title:"事件与行为",dir:u}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:Y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:F},{title:"极坐标系柱状图",dir:K,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:U},{title:"平滑曲线图",dir:L},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:f},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:x,children:[{title:"基础散点图",dir:j}]}]},{title:T,dir:i,draft:e},{title:"跨平台方案",dir:M,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:E,children:[{title:"动态的异步数据",dir:D},{title:"数据下钻",dir:P,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:T,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:o},{title:"Resources",dir:c,draft:e},{title:"Inspiration",dir:I},{title:"Get Help",dir:r},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:h},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:s}]}]},{title:"Concepts",dir:G,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:A,draft:e},{title:"Style",dir:m},{title:"Dataset",dir:Z},{title:"Data Transform",dir:B},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:X},{title:"Visual Mapping",dir:t},{title:"Legend",dir:w},{title:"Event and Action",dir:u}]},{title:"How To Guides",dir:R,children:[{title:"Common Charts",dir:Y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:F},{title:"Bar Polar",dir:K,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:U},{title:"Smoothed Line",dir:L},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:f},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:x,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:M,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:E,children:[{title:"Dynamic Data",dir:D},{title:"Drilldown",dir:P,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},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:e,routePath:"/en/how-to/interaction/drag",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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>With knowledge introduced above, more feature can be implemented. For example, <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</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/en/how-to/interaction/drag.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,l,a,d,g,o,c,I,r,n,h,C,s,G,p,b,A,m,Z,B,y,X,w,u,R,Y,W,v,F,K,H,V,S,J,U,L,N,k,f,z,x,j,T,M,Q,E,D,P,O,q,_,$,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="an-example%3A-implement-dragging" tabindex="-1">An Example: Implement Dragging</h1>\n<p>This is a tiny example, introducing how to implement dragging of graphic elements in Apache ECharts<sup>TM</sup>. From this example, we will see how to make an application with rich intractivity based on echarts API.</p>\n<p><md-example src="line-draggable" height="400"></md-example></p>\n<p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let\'s get started from this simple example.</p>\n<h2 id="implement-basic-dragging" tabindex="-1">Implement basic dragging</h2>\n<p>First of all, we create a basic <a href="https://echarts.apache.org/option.html#series-line">line chart (line series)</a>:</p>\n<md-code-block lang="js" code="\'dmFyIHN5bWJvbFNpemUgPSAyMDsKdmFyIGRhdGEgPSBbCiAgWzE1LCAwXSwKICBbLTUwLCAxMF0sCiAgWy01Ni41LCAyMF0sCiAgWy00Ni41LCAzMF0sCiAgWy0yMi4xLCA0MF0KXTsKCm15Q2hhcnQuc2V0T3B0aW9uKHsKICB4QXhpczogewogICAgbWluOiAtMTAwLAogICAgbWF4OiA4MCwKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBheGlzTGluZTogeyBvblplcm86IGZhbHNlIH0KICB9LAogIHlBeGlzOiB7CiAgICBtaW46IC0zMCwKICAgIG1heDogNjAsCiAgICB0eXBlOiAndmFsdWUnLAogICAgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9CiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgaWQ6ICdhJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzbW9vdGg6IHRydWUsCiAgICAgIC8vIFNldCBhIGJpZyBzeW1ib2xTaXplIGZvciBkcmFnZ2luZyBjb252ZW5pZW5jZS4KICAgICAgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwKICAgICAgZGF0YTogZGF0YQogICAgfQogIF0KfSk7\'" line-highlights="\'\'" />\n<p>Since the symbols in line is not draggable, we make them draggable by using <a href="https://echarts.apache.org/option.html#graphic">graphic component</a> to add draggable circular elements to symbols respectively.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIERlY2xhcmUgYSBncmFwaGljIGNvbXBvbmVudCwgd2hpY2ggY29udGFpbnMgc29tZSBncmFwaGljIGVsZW1lbnRzCiAgLy8gd2l0aCB0aGUgdHlwZSBvZiAnY2lyY2xlJy4KICAvLyBIZXJlIHdlIGhhdmUgdXNlZCB0aGUgbWV0aG9kIGBlY2hhcnRzLnV0aWwubWFwYCwgd2hpY2ggaGFzIHRoZSBzYW1lCiAgLy8gYmVoYXZpb3IgYXMgQXJyYXkucHJvdG90eXBlLm1hcCwgYW5kIGlzIGNvbXBhdGlibGUgd2l0aCBFUzUtLgogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oZGF0YUl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgLy8gJ2NpcmNsZScgbWVhbnMgdGhpcyBncmFwaGljIGVsZW1lbnQgaXMgYSBzaGFwZSBvZiBjaXJjbGUuCiAgICAgIHR5cGU6ICdjaXJjbGUnLAoKICAgICAgc2hhcGU6IHsKICAgICAgICAvLyBUaGUgcmFkaXVzIG9mIHRoZSBjaXJjbGUuCiAgICAgICAgcjogc3ltYm9sU2l6ZSAvIDIKICAgICAgfSwKICAgICAgLy8gVHJhbnNmb3JtIGlzIHVzZWQgdG8gbG9jYXRlZCB0aGUgY2lyY2xlLiBwb3NpdGlvbjoKICAgICAgLy8gW3gsIHldIG1lYW5zIHRyYW5zbGF0ZSB0aGUgY2lyY2xlIHRvIHRoZSBwb3NpdGlvbiBbeCwgeV0uCiAgICAgIC8vIFRoZSBBUEkgYGNvbnZlcnRUb1BpeGVsYCBpcyB1c2VkIHRvIGdldCB0aGUgcG9zaXRpb24gb2YKICAgICAgLy8gdGhlIGNpcmNsZSwgd2hpY2ggd2lsbCBpbnRyb2R1Y2VkIGxhdGVyLgogICAgICBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGRhdGFJdGVtKSwKCiAgICAgIC8vIE1ha2UgdGhlIGNpcmNsZSBpbnZpc2libGUgKGJ1dCBtb3VzZSBldmVudCB3b3JrcyBhcyBub3JtYWwpLgogICAgICBpbnZpc2libGU6IHRydWUsCiAgICAgIC8vIE1ha2UgdGhlIGNpcmNsZSBkcmFnZ2FibGUuCiAgICAgIGRyYWdnYWJsZTogdHJ1ZSwKICAgICAgLy8gR2l2ZSBhIGJpZyB6IHZhbHVlLCB3aGljaCBtYWtlcyB0aGUgY2lyY2xlIGNvdmVyIHRoZSBzeW1ib2wKICAgICAgLy8gaW4gbGluZSBzZXJpZXMuCiAgICAgIHo6IDEwMCwKICAgICAgLy8gVGhpcyBpcyB0aGUgZXZlbnQgaGFuZGxlciBvZiBkcmFnZ2luZywgd2hpY2ggd2lsbCBiZSB0cmlnZ2VyZWQKICAgICAgLy8gcmVwZWF0bHkgd2hpbGUgZHJhZ2dpbmcuIFNlZSBtb3JlIGRldGFpbHMgYmVsb3cuCiAgICAgIC8vIEEgdXRpbCBtZXRob2QgYGVjaGFydHMudXRpbC5jdXJyeWAgaXMgdXNlZCBoZXJlIHRvIGdlbmVyYXRlIGEKICAgICAgLy8gbmV3IGZ1bmN0aW9uIHRoZSBzYW1lIGFzIGBvblBvaW50RHJhZ2dpbmdgLCBleGNlcHQgdGhhdCB0aGUKICAgICAgLy8gZmlyc3QgcGFyYW1ldGVyIGlzIGZpeGVkIHRvIGJlIHRoZSBgZGF0YUluZGV4YCBoZXJlLgogICAgICBvbmRyYWc6IGVjaGFydHMudXRpbC5jdXJyeShvblBvaW50RHJhZ2dpbmcsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7\'" line-highlights="\'\'" />\n<p>In the code above, API <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel(\'grid\', dataItem)</code>, the first parameter <code>\'grid\'</code> indicates that <code>dataItem</code> should be converted in the first <a href="https://echarts.apache.org/option.html#grid">grid component (cartesian)</a>.</p>\n<p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p>\n<p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p>\n<md-code-block lang="js" code="\'Ly8gVGhpcyBmdW5jdGlvbiB3aWxsIGJlIGNhbGxlZCByZXBlYXRseSB3aGlsZSBkcmFnZ2luZy4KLy8gVGhlIG1pc3Npb24gb2YgdGhpcyBmdW5jdGlvbiBpcyB0byB1cGRhdGUgYHNlcmllcy5kYXRhYCBiYXNlZCBvbgovLyB0aGUgbmV3IHBvaW50cyB1cGRhdGVkIGJ5IGRyYWdnaW5nLCBhbmQgdG8gcmUtcmVuZGVyIHRoZSBsaW5lCi8vIHNlcmllcyBiYXNlZCBvbiB0aGUgbmV3IGRhdGEsIGJ5IHdoaWNoIHRoZSBncmFwaGljIGVsZW1lbnRzIG9mIHRoZQovLyBsaW5lIHNlcmllcyBjYW4gYmUgc3luY2hyb25pemVkIHdpdGggZHJhZ2dpbmcuCmZ1bmN0aW9uIG9uUG9pbnREcmFnZ2luZyhkYXRhSW5kZXgpIHsKICAvLyBIZXJlIHRoZSBgZGF0YWAgaXMgZGVjbGFyZWQgaW4gdGhlIGNvZGUgYmxvY2sgaW4gdGhlIGJlZ2lubmluZwogIC8vIG9mIHRoaXMgYXJ0aWNsZS4gVGhlIGB0aGlzYCByZWZlcnMgdG8gdGhlIGRyYWdnZWQgY2lyY2xlLgogIC8vIGB0aGlzLnBvc2l0aW9uYCBpcyB0aGUgY3VycmVudCBwb3NpdGlvbiBvZiB0aGUgY2lyY2xlLgogIGRhdGFbZGF0YUluZGV4XSA9IG15Q2hhcnQuY29udmVydEZyb21QaXhlbCgnZ3JpZCcsIHRoaXMucG9zaXRpb24pOwogIC8vIFJlLXJlbmRlciB0aGUgY2hhcnQgYmFzZWQgb24gdGhlIHVwZGF0ZWQgYGRhdGFgLgogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogWwogICAgICB7CiAgICAgICAgaWQ6ICdhJywKICAgICAgICBkYXRhOiBkYXRhCiAgICAgIH0KICAgIF0KICB9KTsKfQ\'" line-highlights="\'\'" />\n<p>In the code above, API <a href="api.html#echartsInstance.convertFromPixel">convertFromPixel</a> is used, which is the reversed process of <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a>. <code>myChart.convertFromPixel(\'grid\', this.position)</code> converts a pixel coordinate to data item in <a href="https://echarts.apache.org/option.html#grid">grid (cartesian)</a>.</p>\n<p>Finally, add those code to make graphic elements responsive to change of canvas size.</p>\n<md-code-block lang="js" code="\'d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIGZ1bmN0aW9uKCkgewogIC8vIFJlLWNhbGN1bGF0ZSB0aGUgcG9zaXRpb24gb2YgZWFjaCBjaXJjbGUgYW5kIHVwZGF0ZSBjaGFydCB1c2luZyBgc2V0T3B0aW9uYC4KICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4gewogICAgICAgIHBvc2l0aW9uOiBteUNoYXJ0LmNvbnZlcnRUb1BpeGVsKCdncmlkJywgaXRlbSkKICAgICAgfTsKICAgIH0pCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<h2 id="add-tooltip-component" tabindex="-1">Add tooltip component</h2>\n<p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href="https://echarts.apache.org/option.html#tooltip">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p>\n<p>Add these snippets to the code block above:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLiwKICB0b29sdGlwOiB7CiAgICAvLyBNZWFucyBkaXNhYmxlIGRlZmF1bHQgInNob3cvaGlkZSBydWxlIi4KICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxicj5ZOiAnICsKICAgICAgICBwYXJhbXMuZGF0YVsxXS50b0ZpeGVkKDIpCiAgICAgICk7CiAgICB9CiAgfQp9KTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGRhdGEubWFwKGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgIC8vIC4uLiwKICAgICAgLy8gQ3VzdG9taXplICJzaG93L2hpZGUgcnVsZSIsIHNob3cgd2hlbiBtb3VzZSBvdmVyLCBoaWRlIHdoZW4gbW91c2Ugb3V0LgogICAgICBvbm1vdXNlbW92ZTogZWNoYXJ0cy51dGlsLmN1cnJ5KHNob3dUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICBvbm1vdXNlb3V0OiBlY2hhcnRzLnV0aWwuY3VycnkoaGlkZVRvb2x0aXAsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7CgpmdW5jdGlvbiBzaG93VG9vbHRpcChkYXRhSW5kZXgpIHsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdzaG93VGlwJywKICAgIHNlcmllc0luZGV4OiAwLAogICAgZGF0YUluZGV4OiBkYXRhSW5kZXgKICB9KTsKfQoKZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnaGlkZVRpcCcKICB9KTsKfQ\'" line-highlights="\'\'" />\n<p>The API <a href="https://echarts.apache.org//api.html#echartsInstance.dispatchAction">dispatchAction</a> is used to show/hide tooltip content, where actions <a href="https://echarts.apache.org//api.html#action.tooltip.showTip">showTip</a> and <a href="api.html#action.tooltip.hideTip">hideTip</a> is dispatched.</p>\n<h2 id="full-code" tabindex="-1">Full code</h2>\n<p>Full code is shown as follow:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Cgp2YXIgc3ltYm9sU2l6ZSA9IDIwOwp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxiciAvPlk6ICcgKwogICAgICAgIHBhcmFtcy5kYXRhWzFdLnRvRml4ZWQoMikKICAgICAgKTsKICAgIH0KICB9LAogIHhBeGlzOiB7IG1pbjogLTEwMCwgbWF4OiA4MCwgdHlwZTogJ3ZhbHVlJywgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9IH0sCiAgeUF4aXM6IHsgbWluOiAtMzAsIG1heDogNjAsIHR5cGU6ICd2YWx1ZScsIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfSB9LAogIHNlcmllczogWwogICAgeyBpZDogJ2EnLCB0eXBlOiAnbGluZScsIHNtb290aDogdHJ1ZSwgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgZGF0YTogZGF0YSB9CiAgXQp9KTsKbXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oaXRlbSwgZGF0YUluZGV4KSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnY2lyY2xlJywKICAgICAgcG9zaXRpb246IG15Q2hhcnQuY29udmVydFRvUGl4ZWwoJ2dyaWQnLCBpdGVtKSwKICAgICAgc2hhcGU6IHsgcjogc3ltYm9sU2l6ZSAvIDIgfSwKICAgICAgaW52aXNpYmxlOiB0cnVlLAogICAgICBkcmFnZ2FibGU6IHRydWUsCiAgICAgIG9uZHJhZzogZWNoYXJ0cy51dGlsLmN1cnJ5KG9uUG9pbnREcmFnZ2luZywgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW1vdmU6IGVjaGFydHMudXRpbC5jdXJyeShzaG93VG9vbHRpcCwgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW91dDogZWNoYXJ0cy51dGlsLmN1cnJ5KGhpZGVUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICB6OiAxMDAKICAgIH07CiAgfSkKfSk7CndpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCBmdW5jdGlvbigpIHsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4geyBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pIH07CiAgICB9KQogIH0pOwp9KTsKZnVuY3Rpb24gc2hvd1Rvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnc2hvd1RpcCcsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogZGF0YUluZGV4CiAgfSk7Cn0KZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7IHR5cGU6ICdoaWRlVGlwJyB9KTsKfQpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4LCBkeCwgZHkpIHsKICBkYXRhW2RhdGFJbmRleF0gPSBteUNoYXJ0LmNvbnZlcnRGcm9tUGl4ZWwoJ2dyaWQnLCB0aGlzLnBvc2l0aW9uKTsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIGlkOiAnYScsCiAgICAgICAgZGF0YTogZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0\'" line-highlights="\'\'" />\n<p>With knowledge introduced above, more feature can be implemented. For example, <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p>\n',postPath:"en/how-to/interaction/drag"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:c,draft:e},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:r},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:s}]}]},{title:"概念篇",dir:G,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:b,draft:e},{title:"系列",dir:A,draft:e},{title:"样式",dir:m},{title:"数据集",dir:Z},{title:"数据转换",dir:B},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:X},{title:"视觉映射",dir:t},{title:"图例",dir:w},{title:"事件与行为",dir:u}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:Y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:F},{title:"极坐标系柱状图",dir:K,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:U},{title:"平滑曲线图",dir:L},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:f},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:x,children:[{title:"基础散点图",dir:j}]}]},{title:T,dir:i,draft:e},{title:"跨平台方案",dir:M,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:E,children:[{title:"动态的异步数据",dir:D},{title:"数据下钻",dir:P,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:T,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:o},{title:"Resources",dir:c,draft:e},{title:"Inspiration",dir:I},{title:"Get Help",dir:r},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:h},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:s}]}]},{title:"Concepts",dir:G,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:A,draft:e},{title:"Style",dir:m},{title:"Dataset",dir:Z},{title:"Data Transform",dir:B},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:X},{title:"Visual Mapping",dir:t},{title:"Legend",dir:w},{title:"Event and Action",dir:u}]},{title:"How To Guides",dir:R,children:[{title:"Common Charts",dir:Y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:F},{title:"Bar Polar",dir:K,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:U},{title:"Smoothed Line",dir:L},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:f},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:x,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:M,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:E,children:[{title:"Dynamic Data",dir:D},{title:"Drilldown",dir:P,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},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:e,routePath:"/en/how-to/interaction/drag",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/how-to/label/rich-text/index.html b/handbook/en/how-to/label/rich-text/index.html
index 2039695..e7b8780 100644
--- a/handbook/en/how-to/label/rich-text/index.html
+++ b/handbook/en/how-to/label/rich-text/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="rich-text" tabindex="-1">Rich Text</h1> <p>Rich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:</p> <ul><li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li> <li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.</li> <li>Image can be used in text as icon or background.</li> <li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li></ul> <p>At the beginning, the meanings of two terms that will be used below should be clarified:</p> <ul><li>Text Block: The whole block of label text.</li> <li>Text fragment: Some piece of text in a text block.</li></ul> <p>For example:</p> <p><iframe width="400" height="300" src=""></iframe></p> <h2 id="options-about-text" tabindex="-1">Options about Text</h2> <p>echarts provides plenty of text options, including:</p> <ul><li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li> <li>Fill of text: <code>color</code>.</li> <li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li> <li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li> <li>Box size of text block or text fragment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li> <li>Alignment of text block or text fragment: <code>align</code>, <code>verticalAlign</code>.</li> <li>Border, background (color or image) of text block or text fragment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li> <li>Shadow of text block or text fragment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li> <li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li></ul> <p>User can defined styles for text fragment in <code>rich</code> property. For example, <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p> <p>For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="rich-text" tabindex="-1">Rich Text</h1> <p>Rich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:</p> <ul><li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li> <li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.</li> <li>Image can be used in text as icon or background.</li> <li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li></ul> <p>At the beginning, the meanings of two terms that will be used below should be clarified:</p> <ul><li>Text Block: The whole block of label text.</li> <li>Text fragment: Some piece of text in a text block.</li></ul> <p>For example:</p> <p><iframe width="400" height="300" src=""></iframe></p> <h2 id="options-about-text" tabindex="-1">Options about Text</h2> <p>echarts provides plenty of text options, including:</p> <ul><li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li> <li>Fill of text: <code>color</code>.</li> <li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li> <li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li> <li>Box size of text block or text fragment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li> <li>Alignment of text block or text fragment: <code>align</code>, <code>verticalAlign</code>.</li> <li>Border, background (color or image) of text block or text fragment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li> <li>Shadow of text block or text fragment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li> <li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li></ul> <p>User can defined styles for text fragment in <code>rich</code> property. For example, <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p> <p>For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// Styles defined in 'rich' can be applied to some fragments</span>
<span class="token comment">// of text by adding some markers to those fragment, like</span>
<span class="token comment">// `{styleName|text content text content}`.</span>
@@ -673,7 +673,8 @@
width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
color<span class="token operator">:</span> <span class="token string">'#eee'</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>Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text">example</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/en/how-to/label/rich-text.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,e,A,i,t,o,d,l,c,n,a,r,s,h,b,m,p,B,Z,G,y,w,f,H,W,x,J,R,u,v,K,V,Y,z,X,k,N,S,L,M,F,O,D,U,T,j,E,Q,P,q,_,$,gg,Ig,Cg){return{layout:"default",data:[{html:'<h1 id="rich-text" tabindex="-1">Rich Text</h1>\n<p>Rich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:</p>\n<ul>\n<li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li>\n<li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.</li>\n<li>Image can be used in text as icon or background.</li>\n<li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li>\n</ul>\n<p>At the beginning, the meanings of two terms that will be used below should be clarified:</p>\n<ul>\n<li>Text Block: The whole block of label text.</li>\n<li>Text fragment: Some piece of text in a text block.</li>\n</ul>\n<p>For example:</p>\n<p><md-example src="doc-example/text-block-fragment" width="400" height="300"></md-example></p>\n<h2 id="options-about-text" tabindex="-1">Options about Text</h2>\n<p>echarts provides plenty of text options, including:</p>\n<ul>\n<li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li>\n<li>Fill of text: <code>color</code>.</li>\n<li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li>\n<li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li>\n<li>Box size of text block or text fragment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li>\n<li>Alignment of text block or text fragment: <code>align</code>, <code>verticalAlign</code>.</li>\n<li>Border, background (color or image) of text block or text fragment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li>\n<li>Shadow of text block or text fragment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li>\n<li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li>\n</ul>\n<p>User can defined styles for text fragment in <code>rich</code> property. For example, <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p>\n<p>For example:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8gU3R5bGVzIGRlZmluZWQgaW4gJ3JpY2gnIGNhbiBiZSBhcHBsaWVkIHRvIHNvbWUgZnJhZ21lbnRzCiAgLy8gb2YgdGV4dCBieSBhZGRpbmcgc29tZSBtYXJrZXJzIHRvIHRob3NlIGZyYWdtZW50LCBsaWtlCiAgLy8gYHtzdHlsZU5hbWV8dGV4dCBjb250ZW50IHRleHQgY29udGVudH1gLgogIC8vIGAnXG4nYCBpcyB0aGUgbmV3bGluZSBjaGFyYWN0ZXIuCiAgZm9ybWF0dGVyOiBbCiAgICAne2F8U3R5bGUgImEiIGlzIGFwcGxpZWQgdG8gdGhpcyBmcmFnbWVudH0nLAogICAgJ3tifFN0eWxlICJiIiBpcyBhcHBsaWVkIHRvIHRoaXMgZnJhZ21lbnR9VGhpcyBmcmFnbWVudCB1c2UgZGVmYXVsdCBzdHlsZXt4fHVzZSBzdHlsZSAieCJ9JwogIF0uam9pbignXG4nKSwKCiAgLy8gU3R5bGVzIGZvciB0aGUgd2hvbGUgdGV4dCBibG9jayBhcmUgZGVmaW5lZCBoZXJlOgogIGNvbG9yOiAnIzMzMycsCiAgZm9udFNpemU6IDUsCiAgZm9udEZhbWlseTogJ0FyaWFsJywKICBib3JkZXJXaWR0aDogMywKICBiYWNrZ3JvdW5kQ29sb3I6ICcjOTg0NDU1JywKICBwYWRkaW5nOiBbMywgMTAsIDEwLCA1XSwKICBsaW5lSGVpZ2h0OiAyMCwKCiAgLy8gU3R5bGVzIGZvciB0ZXh0IGZyYWdtZW50cyBhcmUgZGVmaW5lZCBoZXJlOgogIHJpY2g6IHsKICAgIGE6IHsKICAgICAgY29sb3I6ICdyZWQnLAogICAgICBsaW5lSGVpZ2h0OiAxMAogICAgfSwKICAgIGI6IHsKICAgICAgYmFja2dyb3VuZENvbG9yOiB7CiAgICAgICAgaW1hZ2U6ICd4eHgveHh4LmpwZycKICAgICAgfSwKICAgICAgaGVpZ2h0OiA0MAogICAgfSwKICAgIHg6IHsKICAgICAgZm9udFNpemU6IDE4LAogICAgICBmb250RmFtaWx5OiAnTWljcm9zb2Z0IFlhSGVpJywKICAgICAgYm9yZGVyQ29sb3I6ICcjNDQ5OTMzJywKICAgICAgYm9yZGVyUmFkaXVzOiA0CiAgICB9CiAgICAvLyAuLi4KICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p>\n</blockquote>\n<h2 id="basic-styles-of-text%2C-text-block-and-text-fragment" tabindex="-1">Basic Styles of Text, Text Block and Text Fragment</h2>\n<p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p>\n<p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p>\n<p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>Border style and background style can be set to text fragment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>For example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICdQbGFpbiB0ZXh0JywKICAgICAgICAgICAgICAgICd7dGV4dEJvcmRlcnx0ZXh0Qm9yZGVyQ29sb3IgKyB0ZXh0Qm9yZGVyV2lkdGh9JywKICAgICAgICAgICAgICAgICd7dGV4dFNoYWRvd3x0ZXh0U2hhZG93Q29sb3IgKyB0ZXh0U2hhZG93Qmx1ciArIHRleHRTaGFkb3dPZmZzZXRYICsgdGV4dFNoYWRvd09mZnNldFl9JywKICAgICAgICAgICAgICAgICd7Ymd8YmFja2dyb3VuZENvbG9yICsgYm9yZGVyUmFkaXVzICsgcGFkZGluZ30nLAogICAgICAgICAgICAgICAgJ3tib3JkZXJ8Ym9yZGVyQ29sb3IgKyBib3JkZXJXaWR0aCArIGJvcmRlclJhZGl1cyArIHBhZGRpbmd9JywKICAgICAgICAgICAgICAgICd7c2hhZG93fHNoYWRvd0NvbG9yICsgc2hhZG93Qmx1ciArIHNoYWRvd09mZnNldFggKyBzaGFkb3dPZmZzZXRZfScKICAgICAgICAgICAgICBdLmpvaW4oJ1xuJyksCiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICcjMzMzJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICAgICAgcGFkZGluZzogMTAsCiAgICAgICAgICAgICAgY29sb3I6ICcjMDAwJywKICAgICAgICAgICAgICBmb250U2l6ZTogMTQsCiAgICAgICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgICAgICBzaGFkb3dDb2xvcjogJyM4ODgnLAogICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICBsaW5lSGVpZ2h0OiAzMCwKICAgICAgICAgICAgICByaWNoOiB7CiAgICAgICAgICAgICAgICB0ZXh0Qm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGZvbnRTaXplOiAyMCwKICAgICAgICAgICAgICAgICAgdGV4dEJvcmRlckNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIHRleHRTaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgZm9udFNpemU6IDE2LAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93Qmx1cjogNSwKICAgICAgICAgICAgICAgICAgdGV4dFNoYWRvd0NvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRTaGFkb3dPZmZzZXRYOiAzLAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIGJnOiB7CiAgICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMzMzk5MTEnLAogICAgICAgICAgICAgICAgICBjb2xvcjogJyNmZmYnLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDE1LAogICAgICAgICAgICAgICAgICBwYWRkaW5nOiA1CiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgYm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzQ0OTkxMScsCiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDMsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICBzaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzk5MjIzMycsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUsCiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnI2ZmZicsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0JsdXI6IDUsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzMzNjY5OScsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDYsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFk6IDYKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9LAogIHlBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9Cn07\'" v-bind="{}" />\n<h2 id="label-position" tabindex="-1">Label Position</h2>\n<p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a>.</p>\n<p>Try to modify the <code>position</code> and <code>distance</code> option in the following example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDE2MCwKICAgICAgc3ltYm9sOiAncm91bmRSZWN0JywKICAgICAgZGF0YTogW1sxLCAxXV0sCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAvLyBPcHRpb25zOiAnbGVmdCcsICdyaWdodCcsICd0b3AnLCAnYm90dG9tJywgJ2luc2lkZScsICdpbnNpZGVUb3AnLCAnaW5zaWRlTGVmdCcsICdpbnNpZGVSaWdodCcsICdpbnNpZGVCb3R0b20nLCAnaW5zaWRlVG9wTGVmdCcsICdpbnNpZGVUb3BSaWdodCcsICdpbnNpZGVCb3R0b21MZWZ0JywgJ2luc2lkZUJvdHRvbVJpZ2h0JwogICAgICAgICAgcG9zaXRpb246ICd0b3AnLAogICAgICAgICAgZGlzdGFuY2U6IDEwLAoKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IFsnTGFiZWwgVGV4dCddLmpvaW4oJ1xuJyksCiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICcjZWVlJywKICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzU1NScsCiAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgIGJvcmRlclJhZGl1czogNSwKICAgICAgICAgIHBhZGRpbmc6IDEwLAogICAgICAgICAgZm9udFNpemU6IDE4LAogICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzg4OCcsCiAgICAgICAgICBzaGFkb3dPZmZzZXRYOiAwLAogICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgIHRleHRCb3JkZXJDb2xvcjogJyMwMDAnLAogICAgICAgICAgdGV4dEJvcmRlcldpZHRoOiAzLAogICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgIH0KICAgICAgfQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIG1heDogMgogIH0sCiAgeUF4aXM6IHsKICAgIG1heDogMgogIH0KfTs\'" v-bind="{}" />\n<blockquote>\n<p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href="https://echarts.apache.org/option.html">option doc</a>.</p>\n</blockquote>\n<h2 id="label-rotation" tabindex="-1">Label Rotation</h2>\n<p>Sometimes label is needed to be rotated. For example:</p>\n<md-live lang="js" code="\'Y29uc3QgbGFiZWxPcHRpb24gPSB7CiAgc2hvdzogdHJ1ZSwKICByb3RhdGU6IDkwLAogIGZvcm1hdHRlcjogJ3tjfSAge25hbWV8e2F9fScsCiAgZm9udFNpemU6IDE2LAogIHJpY2g6IHsKICAgIG5hbWU6IHt9CiAgfQp9OwoKb3B0aW9uID0gewogIHhBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICAgIGRhdGE6IFsnMjAxMicsICcyMDEzJywgJzIwMTQnLCAnMjAxNScsICcyMDE2J10KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScKICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRm9yZXN0JywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGJhckdhcDogMCwKICAgICAgbGFiZWw6IGxhYmVsT3B0aW9uLAogICAgICBlbXBoYXNpczogewogICAgICAgIGZvY3VzOiAnc2VyaWVzJwogICAgICB9LAogICAgICBkYXRhOiBbMzIwLCAzMzIsIDMwMSwgMzM0LCAzOTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcHBlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGxhYmVsOiBsYWJlbE9wdGlvbiwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycKICAgICAgfSwKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwXQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p><a href="option.html#series-bar.label.align">align</a> and<a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> can be used to adjust location of label in this scenario.</p>\n<p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p>\n<h2 id="layout-and-alignment-of-text-fragment" tabindex="-1">Layout and Alignment of Text fragment</h2>\n<p>To understand the layout rule, every text fragment can be imagined as a <code>inline-block</code> dom element in CSS.</p>\n<p><code>content box size</code> of a text fragment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fragment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p>\n<p>Only <code>\'\\n\'</code> is the newline character, which breaks a line.</p>\n<p>Multiple text fragment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fragments. <code>lineHeight</code> of a text fragment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fragment.</p>\n<p>Having <code>lineHeight</code> determined, the vertical position of text fragments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p>\n<ul>\n<li><code>\'bottom\'</code>: The bottom edge of the text fragment sticks to the bottom edge of the line.</li>\n<li><code>\'top\'</code>: The top edge of the text fragment sticks to the top edge of the line.</li>\n<li><code>\'middle\'</code>: In the middle of the line.</li>\n</ul>\n<p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its <code>align</code>.</p>\n<ul>\n<li>Firstly, place text fragments whose <code>align</code> is <code>\'left\'</code> from left to right continuously.</li>\n<li>Secondly, place text fragments whose <code>align</code> is <code>\'right\'</code> from right to left continuously.</li>\n<li>Finally, the text fragments remained will be sticked and placed in the center of the rest of space.</li>\n</ul>\n<p>The position of text in a text fragment:</p>\n<ul>\n<li>If <code>align</code> is <code>\'center\'</code>, text aligns at the center of the text fragment box.</li>\n<li>If <code>align</code> is <code>\'left\'</code>, text aligns at the left of the text fragment box.</li>\n<li>If <code>align</code> is <code>\'right\'</code>, text aligns at the right of the text fragment box.</li>\n</ul>\n<h2 id="effects%3A-icon%2C-horizontal-rule%2C-title-block%2C-simple-table" tabindex="-1">Effects: Icon, Horizontal Rule, Title Block, Simple Table</h2>\n<p>See example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiBbMCwgMV0sCiAgICAgICAgICBsYWJlbDogewogICAgICAgICAgICBub3JtYWw6IHsKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICd7dGl0bGVCZ3xMZWZ0IFRpdGxlfScsCiAgICAgICAgICAgICAgICAnICBDb250ZW50IHRleHQgeHh4eHh4eHgge3N1bm55fH0geHh4eHh4eHgge2Nsb3VkeXx9ICAnLAogICAgICAgICAgICAgICAgJ3tocnx9JywKICAgICAgICAgICAgICAgICcgIHh4eHh4IHtzaG93ZXJzfH0geHh4eHh4eHggIHh4eHh4eHh4eCAgJwogICAgICAgICAgICAgIF0uam9pbignXG4nKQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDJdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RpdGxlQmd8UmlnaHQgVGl0bGV9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0sCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2RkZCcsCiAgICAgICAgICBib3JkZXJDb2xvcjogJyM1NTUnLAogICAgICAgICAgYm9yZGVyV2lkdGg6IDEsCiAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICBjb2xvcjogJyMwMDAnLAogICAgICAgICAgZm9udFNpemU6IDE0LAogICAgICAgICAgcmljaDogewogICAgICAgICAgICB0aXRsZUJnOiB7CiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgICAgICAgIGNvbG9yOiAnI2VlZScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgdGM6IHsKICAgICAgICAgICAgICBhbGlnbjogJ2NlbnRlcicsCiAgICAgICAgICAgICAgY29sb3I6ICcjZWVlJwogICAgICAgICAgICB9LAogICAgICAgICAgICBocjogewogICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzc3NycsCiAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMC41LAogICAgICAgICAgICAgIGhlaWdodDogMAogICAgICAgICAgICB9LAogICAgICAgICAgICBzdW5ueTogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zdW5ueV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgY2xvdWR5OiB7CiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBhbGlnbjogJ2xlZnQnLAogICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogewogICAgICAgICAgICAgICAgaW1hZ2U6CiAgICAgICAgICAgICAgICAgICdodHRwczovL2VjaGFydHMuYXBhY2hlLm9yZy9leGFtcGxlcy9kYXRhL2Fzc2V0L2ltZy93ZWF0aGVyL2Nsb3VkeV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgc2hvd2VyczogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zaG93ZXJzXzEyOC5wbmcnCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IC0xLAogICAgbWF4OiAxCiAgfSwKICB5QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IDAsCiAgICBtYXg6IDIsCiAgICBpbnZlcnNlOiB0cnVlCiAgfQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<p>Icon is implemented by using image in <code>backgroundColor</code>.</p>\n<md-code-block lang="js" code="\'cmljaDogewogICAgU3Vubnk6IHsKICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgaW1hZ2U6ICcuL2RhdGEvYXNzZXQvaW1nL3dlYXRoZXIvc3VubnlfMTI4LnBuZycKICAgICAgICB9LAogICAgICAgIC8vIENhbiBvbmx5IGhlaWdodCBzcGVjaWZpZWQsIGJ1dCBsZWF2ZSB3aWR0aCBhdXRvIG9idGFpbmVkCiAgICAgICAgLy8gZnJvbSB0aGUgaW1hZ2UsIHdoZXJlIHRoZSBhc3BlY3QgcmF0aW8ga2VwdC4KICAgICAgICBoZWlnaHQ6IDMwCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Horizontal rule (like HTML <hr> tag) can be implemented by border:</p>\n<md-code-block lang="js" code="\'cmljaDogewogICAgaHI6IHsKICAgICAgICBib3JkZXJDb2xvcjogJyM3NzcnLAogICAgICAgIC8vIHdpZHRoIGlzIHNldCBhcyAnMTAwJScgdG8gZnVsbGZpbGwgdGhlIHRleHQgYmxvY2suCiAgICAgICAgLy8gTm90aWNlLCB0aGUgcGVyY2VudGFnZSBpcyBiYXNlZCBvbiB0aGUgY29udGVudCBib3gsIHdpdGhvdXQKICAgICAgICAvLyBwYWRkaW5nLiBBbHRob3VnaCBpdCBpcyBhIGxpdHRsZSBkaWZmZXJlbnQgZnJvbSBDU1MgcnVsZSwKICAgICAgICAvLyBpdCBpcyBjb252aW5lbnQgaW4gbW9zdCBjYXNlcy4KICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgIGJvcmRlcldpZHRoOiAwLjUsCiAgICAgICAgaGVpZ2h0OiAwCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Title block can be implemented by <code>backgroundColor</code>:</p>\n<md-code-block lang="js" code="\'Ly8gVGl0bGUgaXMgYXQgbGVmdC4KZm9ybWF0dGVyOiAne3RpdGxlQmd8TGVmdCBUaXRsZX0nLApyaWNoOiB7CiAgICB0aXRsZUJnOiB7CiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgIGNvbG9yOiAnI2VlZScKICAgIH0KfQoKLy8gVGl0bGUgaXMgaW4gdGhlIGNlbnRlciBvZiB0aGUgbGluZS4KLy8gVGhpcyBpbXBsZW1lbnRhdGlvbiBpcyBhIGxpdHRsZSB0cmlja3ksIGJ1dCBpcyB3b3JrcwovLyB3aXRob3V0IG1vcmUgY29tcGxpY2F0ZWQgbGF5b3V0IG1lY2hhbmlzbSBpbnZvbHZlZC4KZm9ybWF0dGVyOiAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKcmljaDogewogICAgdGl0bGVCZzogewogICAgICAgIGFsaWduOiAncmlnaHQnLAogICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMwMDAnLAogICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgYm9yZGVyUmFkaXVzOiBbNSwgNSwgMCwgMF0sCiAgICAgICAgcGFkZGluZzogWzAsIDEwLCAwLCAxMF0sCiAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICBjb2xvcjogJyNlZWUnCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text">example</a>.</p>\n',postPath:"en/how-to/label/rich-text"}],fetch:{},error:e,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:A},{title:"入门篇",dir:i,children:[{title:"获取 ECharts",dir:t},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:d,draft:g},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:c},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:a},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:g},{title:"系列",dir:p,draft:g},{title:"样式",dir:B},{title:"数据集",dir:Z},{title:"数据转换",dir:G},{title:"坐标系",dir:y,draft:g},{title:"坐标轴",dir:w},{title:"视觉映射",dir:C},{title:"图例",dir:f},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:u},{title:"极坐标系柱状图",dir:v,draft:g},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:L},{title:"南丁格尔图(玫瑰图)",dir:M}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:O}]}]},{title:D,dir:I,draft:g},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:T}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:E},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:D,dir:I,draft:g},{title:gg,dir:Ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Cg}]}],en:[{title:"Get Started",dir:A},{title:"Basics",dir:i,children:[{title:"Download ECharts",dir:t},{title:"Import ECharts",dir:o},{title:"Resources",dir:d,draft:g},{title:"Inspiration",dir:l},{title:"Get Help",dir:c},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:a},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:g},{title:"Series",dir:p,draft:g},{title:"Style",dir:B},{title:"Dataset",dir:Z},{title:"Data Transform",dir:G},{title:"Coordinate",dir:y,draft:g},{title:"Axis",dir:w},{title:"Visual Mapping",dir:C},{title:"Legend",dir:f},{title:"Event and Action",dir:H}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:u},{title:"Bar Polar",dir:v,draft:g},{title:"Waterfall",dir:K}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:L},{title:"Rose Style",dir:M}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:T}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:E},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:gg,dir:Ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Cg}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/en/how-to/label/rich-text",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:e}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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>Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text">example</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/en/how-to/label/rich-text.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,e,A,i,t,o,d,l,c,n,a,r,s,h,b,m,p,B,Z,G,y,w,f,H,W,x,J,R,u,v,K,V,Y,z,X,k,N,S,L,M,F,O,D,U,T,j,E,Q,P,q,_,$,gg,Ig,Cg){return{layout:"default",data:[{html:'<h1 id="rich-text" tabindex="-1">Rich Text</h1>\n<p>Rich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:</p>\n<ul>\n<li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li>\n<li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.</li>\n<li>Image can be used in text as icon or background.</li>\n<li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li>\n</ul>\n<p>At the beginning, the meanings of two terms that will be used below should be clarified:</p>\n<ul>\n<li>Text Block: The whole block of label text.</li>\n<li>Text fragment: Some piece of text in a text block.</li>\n</ul>\n<p>For example:</p>\n<p><md-example src="doc-example/text-block-fragment" width="400" height="300"></md-example></p>\n<h2 id="options-about-text" tabindex="-1">Options about Text</h2>\n<p>echarts provides plenty of text options, including:</p>\n<ul>\n<li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li>\n<li>Fill of text: <code>color</code>.</li>\n<li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li>\n<li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li>\n<li>Box size of text block or text fragment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li>\n<li>Alignment of text block or text fragment: <code>align</code>, <code>verticalAlign</code>.</li>\n<li>Border, background (color or image) of text block or text fragment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li>\n<li>Shadow of text block or text fragment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li>\n<li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li>\n</ul>\n<p>User can defined styles for text fragment in <code>rich</code> property. For example, <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p>\n<p>For example:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8gU3R5bGVzIGRlZmluZWQgaW4gJ3JpY2gnIGNhbiBiZSBhcHBsaWVkIHRvIHNvbWUgZnJhZ21lbnRzCiAgLy8gb2YgdGV4dCBieSBhZGRpbmcgc29tZSBtYXJrZXJzIHRvIHRob3NlIGZyYWdtZW50LCBsaWtlCiAgLy8gYHtzdHlsZU5hbWV8dGV4dCBjb250ZW50IHRleHQgY29udGVudH1gLgogIC8vIGAnXG4nYCBpcyB0aGUgbmV3bGluZSBjaGFyYWN0ZXIuCiAgZm9ybWF0dGVyOiBbCiAgICAne2F8U3R5bGUgImEiIGlzIGFwcGxpZWQgdG8gdGhpcyBmcmFnbWVudH0nLAogICAgJ3tifFN0eWxlICJiIiBpcyBhcHBsaWVkIHRvIHRoaXMgZnJhZ21lbnR9VGhpcyBmcmFnbWVudCB1c2UgZGVmYXVsdCBzdHlsZXt4fHVzZSBzdHlsZSAieCJ9JwogIF0uam9pbignXG4nKSwKCiAgLy8gU3R5bGVzIGZvciB0aGUgd2hvbGUgdGV4dCBibG9jayBhcmUgZGVmaW5lZCBoZXJlOgogIGNvbG9yOiAnIzMzMycsCiAgZm9udFNpemU6IDUsCiAgZm9udEZhbWlseTogJ0FyaWFsJywKICBib3JkZXJXaWR0aDogMywKICBiYWNrZ3JvdW5kQ29sb3I6ICcjOTg0NDU1JywKICBwYWRkaW5nOiBbMywgMTAsIDEwLCA1XSwKICBsaW5lSGVpZ2h0OiAyMCwKCiAgLy8gU3R5bGVzIGZvciB0ZXh0IGZyYWdtZW50cyBhcmUgZGVmaW5lZCBoZXJlOgogIHJpY2g6IHsKICAgIGE6IHsKICAgICAgY29sb3I6ICdyZWQnLAogICAgICBsaW5lSGVpZ2h0OiAxMAogICAgfSwKICAgIGI6IHsKICAgICAgYmFja2dyb3VuZENvbG9yOiB7CiAgICAgICAgaW1hZ2U6ICd4eHgveHh4LmpwZycKICAgICAgfSwKICAgICAgaGVpZ2h0OiA0MAogICAgfSwKICAgIHg6IHsKICAgICAgZm9udFNpemU6IDE4LAogICAgICBmb250RmFtaWx5OiAnTWljcm9zb2Z0IFlhSGVpJywKICAgICAgYm9yZGVyQ29sb3I6ICcjNDQ5OTMzJywKICAgICAgYm9yZGVyUmFkaXVzOiA0CiAgICB9CiAgICAvLyAuLi4KICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p>\n</blockquote>\n<h2 id="basic-styles-of-text%2C-text-block-and-text-fragment" tabindex="-1">Basic Styles of Text, Text Block and Text Fragment</h2>\n<p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p>\n<p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p>\n<p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>Border style and background style can be set to text fragment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>For example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICdQbGFpbiB0ZXh0JywKICAgICAgICAgICAgICAgICd7dGV4dEJvcmRlcnx0ZXh0Qm9yZGVyQ29sb3IgKyB0ZXh0Qm9yZGVyV2lkdGh9JywKICAgICAgICAgICAgICAgICd7dGV4dFNoYWRvd3x0ZXh0U2hhZG93Q29sb3IgKyB0ZXh0U2hhZG93Qmx1ciArIHRleHRTaGFkb3dPZmZzZXRYICsgdGV4dFNoYWRvd09mZnNldFl9JywKICAgICAgICAgICAgICAgICd7Ymd8YmFja2dyb3VuZENvbG9yICsgYm9yZGVyUmFkaXVzICsgcGFkZGluZ30nLAogICAgICAgICAgICAgICAgJ3tib3JkZXJ8Ym9yZGVyQ29sb3IgKyBib3JkZXJXaWR0aCArIGJvcmRlclJhZGl1cyArIHBhZGRpbmd9JywKICAgICAgICAgICAgICAgICd7c2hhZG93fHNoYWRvd0NvbG9yICsgc2hhZG93Qmx1ciArIHNoYWRvd09mZnNldFggKyBzaGFkb3dPZmZzZXRZfScKICAgICAgICAgICAgICBdLmpvaW4oJ1xuJyksCiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICcjMzMzJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICAgICAgcGFkZGluZzogMTAsCiAgICAgICAgICAgICAgY29sb3I6ICcjMDAwJywKICAgICAgICAgICAgICBmb250U2l6ZTogMTQsCiAgICAgICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgICAgICBzaGFkb3dDb2xvcjogJyM4ODgnLAogICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICBsaW5lSGVpZ2h0OiAzMCwKICAgICAgICAgICAgICByaWNoOiB7CiAgICAgICAgICAgICAgICB0ZXh0Qm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGZvbnRTaXplOiAyMCwKICAgICAgICAgICAgICAgICAgdGV4dEJvcmRlckNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIHRleHRTaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgZm9udFNpemU6IDE2LAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93Qmx1cjogNSwKICAgICAgICAgICAgICAgICAgdGV4dFNoYWRvd0NvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRTaGFkb3dPZmZzZXRYOiAzLAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIGJnOiB7CiAgICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMzMzk5MTEnLAogICAgICAgICAgICAgICAgICBjb2xvcjogJyNmZmYnLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDE1LAogICAgICAgICAgICAgICAgICBwYWRkaW5nOiA1CiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgYm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzQ0OTkxMScsCiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDMsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICBzaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzk5MjIzMycsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUsCiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnI2ZmZicsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0JsdXI6IDUsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzMzNjY5OScsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDYsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFk6IDYKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9LAogIHlBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9Cn07\'" v-bind="{}" />\n<h2 id="label-position" tabindex="-1">Label Position</h2>\n<p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a>.</p>\n<p>Try to modify the <code>position</code> and <code>distance</code> option in the following example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDE2MCwKICAgICAgc3ltYm9sOiAncm91bmRSZWN0JywKICAgICAgZGF0YTogW1sxLCAxXV0sCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAvLyBPcHRpb25zOiAnbGVmdCcsICdyaWdodCcsICd0b3AnLCAnYm90dG9tJywgJ2luc2lkZScsICdpbnNpZGVUb3AnLCAnaW5zaWRlTGVmdCcsICdpbnNpZGVSaWdodCcsICdpbnNpZGVCb3R0b20nLCAnaW5zaWRlVG9wTGVmdCcsICdpbnNpZGVUb3BSaWdodCcsICdpbnNpZGVCb3R0b21MZWZ0JywgJ2luc2lkZUJvdHRvbVJpZ2h0JwogICAgICAgICAgcG9zaXRpb246ICd0b3AnLAogICAgICAgICAgZGlzdGFuY2U6IDEwLAoKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IFsnTGFiZWwgVGV4dCddLmpvaW4oJ1xuJyksCiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICcjZWVlJywKICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzU1NScsCiAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgIGJvcmRlclJhZGl1czogNSwKICAgICAgICAgIHBhZGRpbmc6IDEwLAogICAgICAgICAgZm9udFNpemU6IDE4LAogICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzg4OCcsCiAgICAgICAgICBzaGFkb3dPZmZzZXRYOiAwLAogICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgIHRleHRCb3JkZXJDb2xvcjogJyMwMDAnLAogICAgICAgICAgdGV4dEJvcmRlcldpZHRoOiAzLAogICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgIH0KICAgICAgfQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIG1heDogMgogIH0sCiAgeUF4aXM6IHsKICAgIG1heDogMgogIH0KfTs\'" v-bind="{}" />\n<blockquote>\n<p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href="https://echarts.apache.org/option.html">option doc</a>.</p>\n</blockquote>\n<h2 id="label-rotation" tabindex="-1">Label Rotation</h2>\n<p>Sometimes label is needed to be rotated. For example:</p>\n<md-live lang="js" code="\'Y29uc3QgbGFiZWxPcHRpb24gPSB7CiAgc2hvdzogdHJ1ZSwKICByb3RhdGU6IDkwLAogIGZvcm1hdHRlcjogJ3tjfSAge25hbWV8e2F9fScsCiAgZm9udFNpemU6IDE2LAogIHJpY2g6IHsKICAgIG5hbWU6IHt9CiAgfQp9OwoKb3B0aW9uID0gewogIHhBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICAgIGRhdGE6IFsnMjAxMicsICcyMDEzJywgJzIwMTQnLCAnMjAxNScsICcyMDE2J10KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScKICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRm9yZXN0JywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGJhckdhcDogMCwKICAgICAgbGFiZWw6IGxhYmVsT3B0aW9uLAogICAgICBlbXBoYXNpczogewogICAgICAgIGZvY3VzOiAnc2VyaWVzJwogICAgICB9LAogICAgICBkYXRhOiBbMzIwLCAzMzIsIDMwMSwgMzM0LCAzOTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcHBlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGxhYmVsOiBsYWJlbE9wdGlvbiwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycKICAgICAgfSwKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwXQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p><a href="option.html#series-bar.label.align">align</a> and<a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> can be used to adjust location of label in this scenario.</p>\n<p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p>\n<h2 id="layout-and-alignment-of-text-fragment" tabindex="-1">Layout and Alignment of Text fragment</h2>\n<p>To understand the layout rule, every text fragment can be imagined as a <code>inline-block</code> dom element in CSS.</p>\n<p><code>content box size</code> of a text fragment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fragment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p>\n<p>Only <code>\'\\n\'</code> is the newline character, which breaks a line.</p>\n<p>Multiple text fragment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fragments. <code>lineHeight</code> of a text fragment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fragment.</p>\n<p>Having <code>lineHeight</code> determined, the vertical position of text fragments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p>\n<ul>\n<li><code>\'bottom\'</code>: The bottom edge of the text fragment sticks to the bottom edge of the line.</li>\n<li><code>\'top\'</code>: The top edge of the text fragment sticks to the top edge of the line.</li>\n<li><code>\'middle\'</code>: In the middle of the line.</li>\n</ul>\n<p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its <code>align</code>.</p>\n<ul>\n<li>Firstly, place text fragments whose <code>align</code> is <code>\'left\'</code> from left to right continuously.</li>\n<li>Secondly, place text fragments whose <code>align</code> is <code>\'right\'</code> from right to left continuously.</li>\n<li>Finally, the text fragments remained will be sticked and placed in the center of the rest of space.</li>\n</ul>\n<p>The position of text in a text fragment:</p>\n<ul>\n<li>If <code>align</code> is <code>\'center\'</code>, text aligns at the center of the text fragment box.</li>\n<li>If <code>align</code> is <code>\'left\'</code>, text aligns at the left of the text fragment box.</li>\n<li>If <code>align</code> is <code>\'right\'</code>, text aligns at the right of the text fragment box.</li>\n</ul>\n<h2 id="effects%3A-icon%2C-horizontal-rule%2C-title-block%2C-simple-table" tabindex="-1">Effects: Icon, Horizontal Rule, Title Block, Simple Table</h2>\n<p>See example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiBbMCwgMV0sCiAgICAgICAgICBsYWJlbDogewogICAgICAgICAgICBub3JtYWw6IHsKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICd7dGl0bGVCZ3xMZWZ0IFRpdGxlfScsCiAgICAgICAgICAgICAgICAnICBDb250ZW50IHRleHQgeHh4eHh4eHgge3N1bm55fH0geHh4eHh4eHgge2Nsb3VkeXx9ICAnLAogICAgICAgICAgICAgICAgJ3tocnx9JywKICAgICAgICAgICAgICAgICcgIHh4eHh4IHtzaG93ZXJzfH0geHh4eHh4eHggIHh4eHh4eHh4eCAgJwogICAgICAgICAgICAgIF0uam9pbignXG4nKQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDJdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RpdGxlQmd8UmlnaHQgVGl0bGV9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0sCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2RkZCcsCiAgICAgICAgICBib3JkZXJDb2xvcjogJyM1NTUnLAogICAgICAgICAgYm9yZGVyV2lkdGg6IDEsCiAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICBjb2xvcjogJyMwMDAnLAogICAgICAgICAgZm9udFNpemU6IDE0LAogICAgICAgICAgcmljaDogewogICAgICAgICAgICB0aXRsZUJnOiB7CiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgICAgICAgIGNvbG9yOiAnI2VlZScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgdGM6IHsKICAgICAgICAgICAgICBhbGlnbjogJ2NlbnRlcicsCiAgICAgICAgICAgICAgY29sb3I6ICcjZWVlJwogICAgICAgICAgICB9LAogICAgICAgICAgICBocjogewogICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzc3NycsCiAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMC41LAogICAgICAgICAgICAgIGhlaWdodDogMAogICAgICAgICAgICB9LAogICAgICAgICAgICBzdW5ueTogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zdW5ueV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgY2xvdWR5OiB7CiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBhbGlnbjogJ2xlZnQnLAogICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogewogICAgICAgICAgICAgICAgaW1hZ2U6CiAgICAgICAgICAgICAgICAgICdodHRwczovL2VjaGFydHMuYXBhY2hlLm9yZy9leGFtcGxlcy9kYXRhL2Fzc2V0L2ltZy93ZWF0aGVyL2Nsb3VkeV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgc2hvd2VyczogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zaG93ZXJzXzEyOC5wbmcnCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IC0xLAogICAgbWF4OiAxCiAgfSwKICB5QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IDAsCiAgICBtYXg6IDIsCiAgICBpbnZlcnNlOiB0cnVlCiAgfQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<p>Icon is implemented by using image in <code>backgroundColor</code>.</p>\n<md-code-block lang="js" code="\'cmljaDogewogICAgU3Vubnk6IHsKICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgaW1hZ2U6ICcuL2RhdGEvYXNzZXQvaW1nL3dlYXRoZXIvc3VubnlfMTI4LnBuZycKICAgICAgICB9LAogICAgICAgIC8vIENhbiBvbmx5IGhlaWdodCBzcGVjaWZpZWQsIGJ1dCBsZWF2ZSB3aWR0aCBhdXRvIG9idGFpbmVkCiAgICAgICAgLy8gZnJvbSB0aGUgaW1hZ2UsIHdoZXJlIHRoZSBhc3BlY3QgcmF0aW8ga2VwdC4KICAgICAgICBoZWlnaHQ6IDMwCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Horizontal rule (like HTML <hr> tag) can be implemented by border:</p>\n<md-code-block lang="js" code="\'cmljaDogewogICAgaHI6IHsKICAgICAgICBib3JkZXJDb2xvcjogJyM3NzcnLAogICAgICAgIC8vIHdpZHRoIGlzIHNldCBhcyAnMTAwJScgdG8gZnVsbGZpbGwgdGhlIHRleHQgYmxvY2suCiAgICAgICAgLy8gTm90aWNlLCB0aGUgcGVyY2VudGFnZSBpcyBiYXNlZCBvbiB0aGUgY29udGVudCBib3gsIHdpdGhvdXQKICAgICAgICAvLyBwYWRkaW5nLiBBbHRob3VnaCBpdCBpcyBhIGxpdHRsZSBkaWZmZXJlbnQgZnJvbSBDU1MgcnVsZSwKICAgICAgICAvLyBpdCBpcyBjb252aW5lbnQgaW4gbW9zdCBjYXNlcy4KICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgIGJvcmRlcldpZHRoOiAwLjUsCiAgICAgICAgaGVpZ2h0OiAwCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Title block can be implemented by <code>backgroundColor</code>:</p>\n<md-code-block lang="js" code="\'Ly8gVGl0bGUgaXMgYXQgbGVmdC4KZm9ybWF0dGVyOiAne3RpdGxlQmd8TGVmdCBUaXRsZX0nLApyaWNoOiB7CiAgICB0aXRsZUJnOiB7CiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgIGNvbG9yOiAnI2VlZScKICAgIH0KfQoKLy8gVGl0bGUgaXMgaW4gdGhlIGNlbnRlciBvZiB0aGUgbGluZS4KLy8gVGhpcyBpbXBsZW1lbnRhdGlvbiBpcyBhIGxpdHRsZSB0cmlja3ksIGJ1dCBpcyB3b3JrcwovLyB3aXRob3V0IG1vcmUgY29tcGxpY2F0ZWQgbGF5b3V0IG1lY2hhbmlzbSBpbnZvbHZlZC4KZm9ybWF0dGVyOiAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKcmljaDogewogICAgdGl0bGVCZzogewogICAgICAgIGFsaWduOiAncmlnaHQnLAogICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMwMDAnLAogICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgYm9yZGVyUmFkaXVzOiBbNSwgNSwgMCwgMF0sCiAgICAgICAgcGFkZGluZzogWzAsIDEwLCAwLCAxMF0sCiAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICBjb2xvcjogJyNlZWUnCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text">example</a>.</p>\n',postPath:"en/how-to/label/rich-text"}],fetch:{},error:e,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:A},{title:"入门篇",dir:i,children:[{title:"获取 ECharts",dir:t},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:d,draft:g},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:c},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:a},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:g},{title:"系列",dir:p,draft:g},{title:"样式",dir:B},{title:"数据集",dir:Z},{title:"数据转换",dir:G},{title:"坐标系",dir:y,draft:g},{title:"坐标轴",dir:w},{title:"视觉映射",dir:C},{title:"图例",dir:f},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:u},{title:"极坐标系柱状图",dir:v,draft:g},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:L},{title:"南丁格尔图(玫瑰图)",dir:M}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:O}]}]},{title:D,dir:I,draft:g},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:T}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:E},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:D,dir:I,draft:g},{title:gg,dir:Ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Cg}]}],en:[{title:"Get Started",dir:A},{title:"Basics",dir:i,children:[{title:"Download ECharts",dir:t},{title:"Import ECharts",dir:o},{title:"Resources",dir:d,draft:g},{title:"Inspiration",dir:l},{title:"Get Help",dir:c},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:a},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:g},{title:"Series",dir:p,draft:g},{title:"Style",dir:B},{title:"Dataset",dir:Z},{title:"Data Transform",dir:G},{title:"Coordinate",dir:y,draft:g},{title:"Axis",dir:w},{title:"Visual Mapping",dir:C},{title:"Legend",dir:f},{title:"Event and Action",dir:H}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:u},{title:"Bar Polar",dir:v,draft:g},{title:"Waterfall",dir:K}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:L},{title:"Rose Style",dir:M}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:T}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:E},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:gg,dir:Ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Cg}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/en/how-to/label/rich-text",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:e}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/index.html b/handbook/en/index.html
index c20f68c..e9bbbf9 100644
--- a/handbook/en/index.html
+++ b/handbook/en/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,s,o,h,p,f,g,b,m,u,C,v,S,P,w,B,E,k,x,R,y,D,L,G,_,A,V,M,T,z,H,I,U,N,O,W,$,F,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:v},{title:"数据集",dir:S},{title:"数据转换",dir:P},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:E},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:G,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:A,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:$,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:$,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:S},{title:"Data Transform",dir:P},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:E},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:G,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:A,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:U},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,s,o,h,p,f,g,b,m,u,C,v,S,P,w,B,E,k,x,R,y,D,L,G,_,A,V,M,T,z,H,I,U,N,O,W,$,F,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:v},{title:"数据集",dir:S},{title:"数据转换",dir:P},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:E},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:G,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:A,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:$,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:$,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:S},{title:"Data Transform",dir:P},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:E},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:G,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:A,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:U},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/en",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/en/meta/edit-guide/index.html b/handbook/en/meta/edit-guide/index.html
index c49ef9c..d5bc4ed 100644
--- a/handbook/en/meta/edit-guide/index.html
+++ b/handbook/en/meta/edit-guide/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Edit Guide</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="document-editing-guidelines" tabindex="-1">Document Editing Guidelines</h1> <h2 id="adding-a-markdown-file" tabindex="-1">Adding a Markdown File</h2> <p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p> <p>Lowercase markdown file names.</p> <h2 id="using-prettier-to-automatically-format-code" tabindex="-1">Using Prettier to Automatically Format Code</h2> <p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p> <p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token comment"><!-- prettier-ignore-start --></span>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Edit Guide</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="document-editing-guidelines" tabindex="-1">Document Editing Guidelines</h1> <h2 id="adding-a-markdown-file" tabindex="-1">Adding a Markdown File</h2> <p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p> <p>Lowercase markdown file names.</p> <h2 id="using-prettier-to-automatically-format-code" tabindex="-1">Using Prettier to Automatically Format Code</h2> <p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p> <p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token comment"><!-- prettier-ignore-start --></span>
<span class="token comment"><!-- prettier-ignore-end --></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>If you find blocks of code that are not formatted, check first for syntax errors in the code.</p> <h2 id="built-in-variables" tabindex="-1">Built-in Variables</h2> <ul><li><code>optionPath</code></li> <li><code>mainSitePath</code></li> <li><code>exampleViewPath</code></li> <li><code>exampleEditorPath</code></li> <li><code>lang</code></li></ul> <p>Usage:</p> <pre><code>${xxxxx}
</code></pre> <h2 id="link-to-other-articles" tabindex="-1">Link to Other Articles</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token url">[<span class="token content">Get Apache ECharts</span>](<span class="token url">${lang}/basics/download</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><a href="en/basics/download">Get Apache ECharts</a></p> <h2 id="embedding-code" tabindex="-1">Embedding Code</h2> <h3 id="basic-usage" tabindex="-1">Basic Usage</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>```js
option = {
@@ -147,7 +147,8 @@
This is a danger alert.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-alert</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> <blockquote class="md-alert md-alert-danger" data-v-a47f983e><p data-v-a47f983e>
This is a danger alert.
-</p></blockquote></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/en/meta/edit-guide.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,d,n,l,a,r,o,c,h,g,s,p,m,C,I,b,w,k,u,U,B,G,y,W,A,f,S,Z,x,L,V,J,N,Q,M,P,Y,R,v,F,D,j,z,X,E,H,O,T,K,q,_,$,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="document-editing-guidelines" tabindex="-1">Document Editing Guidelines</h1>\n<h2 id="adding-a-markdown-file" tabindex="-1">Adding a Markdown File</h2>\n<p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p>\n<p>Lowercase markdown file names.</p>\n<h2 id="using-prettier-to-automatically-format-code" tabindex="-1">Using Prettier to Automatically Format Code</h2>\n<p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p>\n<p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p>\n<md-code-block lang="markdown" code="\'PCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-CjwhLS0gcHJldHRpZXItaWdub3JlLWVuZCAtLT4\'" line-highlights="\'\'" />\n<p>If you find blocks of code that are not formatted, check first for syntax errors in the code.</p>\n<h2 id="built-in-variables" tabindex="-1">Built-in Variables</h2>\n<ul>\n<li><code>optionPath</code></li>\n<li><code>mainSitePath</code></li>\n<li><code>exampleViewPath</code></li>\n<li><code>exampleEditorPath</code></li>\n<li><code>lang</code></li>\n</ul>\n<p>Usage:</p>\n<pre><code>${xxxxx}\n</code></pre>\n<h2 id="link-to-other-articles" tabindex="-1">Link to Other Articles</h2>\n<md-code-block lang="markdown" code="\'W0dldCBBcGFjaGUgRUNoYXJ0c10oJHtsYW5nfS9iYXNpY3MvZG93bmxvYWQp\'" line-highlights="\'\'" />\n<p><a href="en/basics/download">Get Apache ECharts</a></p>\n<h2 id="embedding-code" tabindex="-1">Embedding Code</h2>\n<h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'YGBganMKb3B0aW9uID0gewogICAgc2VyaWVzOiBbewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGRhdGE6IFsyMywgMjQsIDE4LCAyNSwgMjcsIDI4LCAyNV0KICAgIH1dCn07ClxgYGA\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h3 id="recommended-way-of-writing-code" tabindex="-1">Recommended Way of Writing Code</h3>\n<p>In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.</p>\n<p>For example, the comment <code>...</code></p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJwogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h3 id="live-preview-and-editing" tabindex="-1">Live Preview and Editing</h3>\n<blockquote>\n<p>Currently only preview of Option code is supported</p>\n</blockquote>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUKb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h3 id="more-preview-layouts" tabindex="-1">More Preview Layouts</h3>\n<h4 id="left-to-right" tabindex="-1">Left to Right</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<p><md-code-block lang="markdown" code="\'PG1kLWxpdmUgbGFuZz0ianMiIGNvZGU9IidiM0IwYVc5dUlEMGdld29nSUM0dUxncDlPd3BjWUdCZyciIHYtYmluZD0ie2xheW91dDogJ2xyJ30iIC8-Cgo8IS0tIHByZXR0aWVyLWlnbm9yZS1lbmQgLS0-Cgo8bWQtbGl2ZSBsYW5nPSJqcyIgY29kZT0iJ2IzQjBhVzl1SUQwZ2V3b2dJSGhCZUdsek9pQjdDaUFnSUNCa1lYUmhPaUJiSjAxdmJpY3NJQ2RVZFdVbkxDQW5WMlZrSnl3Z0oxUm9kU2NzSUNkR2Nta25MQ0FuVTJGMEp5d2dKMU4xYmlkZENpQWdmU3dLSUNCNVFYaHBjem9nZTMwc0NpQWdjMlZ5YVdWek9pQmJDaUFnSUNCN0NpQWdJQ0FnSUhSNWNHVTZJQ2RpWVhJbkxBb2dJQ0FnSUNCa1lYUmhPaUJiTWpNc0lESTBMQ0F4T0N3Z01qVXNJREkzTENBeU9Dd2dNalZkQ2lBZ0lDQjlDaUFnWFFwOU93JyIgdi1iaW5kPSJ7bGF5b3V0OiAnbHInfSIgLz4KCiMjIyMgUmlnaHQgdG8gbGVmdAoKPCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-\'" line-highlights="\'\'" />markdown\n<md-live lang="js" code="\'b3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" v-bind="{layout: \'rl\'}" /></p>\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'rl\'}" />\n<h4 id="down-to-up" tabindex="-1">Down to Up</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<p><md-code-block lang="markdown" code="\'PG1kLWxpdmUgbGFuZz0ianMiIGNvZGU9IidiM0IwYVc5dUlEMGdld29nSUM0dUxncDlPd3BjWUdCZyciIHYtYmluZD0ie2xheW91dDogJ2J0J30iIC8-Cgo8IS0tIHByZXR0aWVyLWlnbm9yZS1lbmQgLS0-Cgo8bWQtbGl2ZSBsYW5nPSJqcyIgY29kZT0iJ2IzQjBhVzl1SUQwZ2V3b2dJSGhCZUdsek9pQjdDaUFnSUNCa1lYUmhPaUJiSjAxdmJpY3NJQ2RVZFdVbkxDQW5WMlZrSnl3Z0oxUm9kU2NzSUNkR2Nta25MQ0FuVTJGMEp5d2dKMU4xYmlkZENpQWdmU3dLSUNCNVFYaHBjem9nZTMwc0NpQWdjMlZ5YVdWek9pQmJDaUFnSUNCN0NpQWdJQ0FnSUhSNWNHVTZJQ2RpWVhJbkxBb2dJQ0FnSUNCa1lYUmhPaUJiTWpNc0lESTBMQ0F4T0N3Z01qVXNJREkzTENBeU9Dd2dNalZkQ2lBZ0lDQjlDaUFnWFFwOU93JyIgdi1iaW5kPSJ7bGF5b3V0OiAnYnQnfSIgLz4KCiMjIyBIaWdobGlnaHRpbmcgTGluZXMgb2YgQ29kZSBhbmQgQWRkaW5nIEZpbGVuYW1lcwoKVXNlLgoKPCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-\'" line-highlights="\'\'" />markdown</p>\n<pre><code class="language-js{1,3-5}[option.js]">option = {\n series: [\n {\n type: \'bar\',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n</code></pre>\n\x3c!-- prettier-ignore-end --\x3e\n<p>Effects.</p>\n<pre><code class="language-js{1,3-5}[option.js]">option = {\n series: [\n {\n type: \'bar\',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n</code></pre>\n<h2 id="embedding-images" tabindex="-1">Embedding Images</h2>\n<p>Source images are stored under <code>static/images/</code>.</p>\n<md-code-block lang="markdown" code="\'IVtpbWFnZSBkZXNjcmlwdGlvbl0oaW1hZ2VzL2RlbW8ucG5nKQ\'" line-highlights="\'\'" />\n<h3 id="set-the-image-height-and-width" tabindex="-1">Set the Image Height and Width</h3>\n<p>For the temporary style of the current page, you can just write html.</p>\n<md-code-block lang="markdown" code="\'PGltZyBkYXRhLXNyYz0iaW1hZ2VzL2RlbW8ucG5nIiBzdHlsZT0id2lkdGg6IDUwcHgiIC8-\'" line-highlights="\'\'" />\n<h2 id="add-example-iframe" tabindex="-1">Add Example Iframe</h2>\n<p><code>src</code> is the string after <code>?c=</code> in the <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple">https://echarts.apache.org/examples/en/editor.html?c=line-simple</a> address</p>\n<p>Use:</p>\n<md-code-block lang="markdown" code="\'PG1kLWV4YW1wbGUgc3JjPSJkb2MtZXhhbXBsZS9nZXR0aW5nLXN0YXJ0ZWQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjMwMCI-PC9tZC1leGFtcGxlPg\'" line-highlights="\'\'" />\n<p>Result:\n<md-example src="doc-example/getting-started" width="100%" height="300"></md-example></p>\n<h2 id="add-link-to-option-item" tabindex="-1">Add Link to Option Item</h2>\n<p>Use:</p>\n<md-code-block lang="markdown" code="\'PG1kLW9wdGlvbiBsaW5rPSJzZXJpZXMtYmFyLml0ZW1TdHlsZS5jb2xvciI-PC9tZC1vcHRpb24-\'" line-highlights="\'\'" />\n<p>Result:\n<md-option link="series-bar.itemStyle.color"></md-option></p>\n<h2 id="more-component-usage" tabindex="-1">More Component Usage</h2>\n<p>The documentation supports the use of globally registered <code>markdown</code> components. In addition to the <code>md-example</code> component just described, the following components are also available</p>\n<h3 id="md-alert" tabindex="-1">md-alert</h3>\n<p>Prompt components</p>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9ImluZm8iPgpUaGlzIGlzIGFuIGluZm8gYWxlcnQuCjwvbWQtYWxlcnQ-\'" line-highlights="\'\'" />\n<md-alert type="info">\nThis is an info alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9InN1Y2Nlc3MiPgpUaGlzIGlzIGEgc3VjY2VzcyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="success">\nThis is a success alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgd2FybmluZyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="warning">\nThis is a warning alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgZGFuZ2VyIGFsZXJ0Lgo8L21kLWFsZXJ0Pg\'" line-highlights="\'\'" />\n<md-alert type="danger">\nThis is a danger alert.\n</md-alert>\n',postPath:"en/meta/edit-guide"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:n},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:r},{title:"资源列表",dir:o,draft:e},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:m}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:b,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:k},{title:"数据集",dir:u},{title:"数据转换",dir:U},{title:"坐标系",dir:B,draft:e},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:y},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:A,children:[{title:"常用图表类型",dir:f,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:L,draft:e},{title:"阶梯瀑布图",dir:V},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:N},{title:"堆叠折线图",dir:Q},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:P},{title:"阶梯线图",dir:Y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:R},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:D,children:[{title:"基础散点图",dir:j}]}]},{title:z,dir:i,draft:e},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:E}]},{title:"数据处理",dir:H,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:T,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:z,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:n},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:r},{title:"Resources",dir:o,draft:e},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:m}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:k},{title:"Dataset",dir:u},{title:"Data Transform",dir:U},{title:"Coordinate",dir:B,draft:e},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:y},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:A,children:[{title:"Common Charts",dir:f,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:L,draft:e},{title:"Waterfall",dir:V}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:N},{title:"Stacked Line",dir:Q},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:P},{title:"Step Line",dir:Y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:R},{title:"Ring Style",dir:v},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:D,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:E}]},{title:"Data",dir:H,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:T,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},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:e,routePath:"/en/meta/edit-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+</p></blockquote></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/en/meta/edit-guide.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,d,n,l,a,r,o,c,h,g,s,p,m,C,I,b,w,k,u,U,B,G,y,W,A,f,S,Z,x,L,V,J,N,Q,M,P,Y,R,v,F,D,j,z,X,E,H,O,T,K,q,_,$,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="document-editing-guidelines" tabindex="-1">Document Editing Guidelines</h1>\n<h2 id="adding-a-markdown-file" tabindex="-1">Adding a Markdown File</h2>\n<p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p>\n<p>Lowercase markdown file names.</p>\n<h2 id="using-prettier-to-automatically-format-code" tabindex="-1">Using Prettier to Automatically Format Code</h2>\n<p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p>\n<p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p>\n<md-code-block lang="markdown" code="\'PCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-CjwhLS0gcHJldHRpZXItaWdub3JlLWVuZCAtLT4\'" line-highlights="\'\'" />\n<p>If you find blocks of code that are not formatted, check first for syntax errors in the code.</p>\n<h2 id="built-in-variables" tabindex="-1">Built-in Variables</h2>\n<ul>\n<li><code>optionPath</code></li>\n<li><code>mainSitePath</code></li>\n<li><code>exampleViewPath</code></li>\n<li><code>exampleEditorPath</code></li>\n<li><code>lang</code></li>\n</ul>\n<p>Usage:</p>\n<pre><code>${xxxxx}\n</code></pre>\n<h2 id="link-to-other-articles" tabindex="-1">Link to Other Articles</h2>\n<md-code-block lang="markdown" code="\'W0dldCBBcGFjaGUgRUNoYXJ0c10oJHtsYW5nfS9iYXNpY3MvZG93bmxvYWQp\'" line-highlights="\'\'" />\n<p><a href="en/basics/download">Get Apache ECharts</a></p>\n<h2 id="embedding-code" tabindex="-1">Embedding Code</h2>\n<h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'YGBganMKb3B0aW9uID0gewogICAgc2VyaWVzOiBbewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGRhdGE6IFsyMywgMjQsIDE4LCAyNSwgMjcsIDI4LCAyNV0KICAgIH1dCn07ClxgYGA\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h3 id="recommended-way-of-writing-code" tabindex="-1">Recommended Way of Writing Code</h3>\n<p>In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.</p>\n<p>For example, the comment <code>...</code></p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJwogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h3 id="live-preview-and-editing" tabindex="-1">Live Preview and Editing</h3>\n<blockquote>\n<p>Currently only preview of Option code is supported</p>\n</blockquote>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUKb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h3 id="more-preview-layouts" tabindex="-1">More Preview Layouts</h3>\n<h4 id="left-to-right" tabindex="-1">Left to Right</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<p><md-code-block lang="markdown" code="\'PG1kLWxpdmUgbGFuZz0ianMiIGNvZGU9IidiM0IwYVc5dUlEMGdld29nSUM0dUxncDlPd3BjWUdCZyciIHYtYmluZD0ie2xheW91dDogJ2xyJ30iIC8-Cgo8IS0tIHByZXR0aWVyLWlnbm9yZS1lbmQgLS0-Cgo8bWQtbGl2ZSBsYW5nPSJqcyIgY29kZT0iJ2IzQjBhVzl1SUQwZ2V3b2dJSGhCZUdsek9pQjdDaUFnSUNCa1lYUmhPaUJiSjAxdmJpY3NJQ2RVZFdVbkxDQW5WMlZrSnl3Z0oxUm9kU2NzSUNkR2Nta25MQ0FuVTJGMEp5d2dKMU4xYmlkZENpQWdmU3dLSUNCNVFYaHBjem9nZTMwc0NpQWdjMlZ5YVdWek9pQmJDaUFnSUNCN0NpQWdJQ0FnSUhSNWNHVTZJQ2RpWVhJbkxBb2dJQ0FnSUNCa1lYUmhPaUJiTWpNc0lESTBMQ0F4T0N3Z01qVXNJREkzTENBeU9Dd2dNalZkQ2lBZ0lDQjlDaUFnWFFwOU93JyIgdi1iaW5kPSJ7bGF5b3V0OiAnbHInfSIgLz4KCiMjIyMgUmlnaHQgdG8gbGVmdAoKPCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-\'" line-highlights="\'\'" />markdown\n<md-live lang="js" code="\'b3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" v-bind="{layout: \'rl\'}" /></p>\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'rl\'}" />\n<h4 id="down-to-up" tabindex="-1">Down to Up</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<p><md-code-block lang="markdown" code="\'PG1kLWxpdmUgbGFuZz0ianMiIGNvZGU9IidiM0IwYVc5dUlEMGdld29nSUM0dUxncDlPd3BjWUdCZyciIHYtYmluZD0ie2xheW91dDogJ2J0J30iIC8-Cgo8IS0tIHByZXR0aWVyLWlnbm9yZS1lbmQgLS0-Cgo8bWQtbGl2ZSBsYW5nPSJqcyIgY29kZT0iJ2IzQjBhVzl1SUQwZ2V3b2dJSGhCZUdsek9pQjdDaUFnSUNCa1lYUmhPaUJiSjAxdmJpY3NJQ2RVZFdVbkxDQW5WMlZrSnl3Z0oxUm9kU2NzSUNkR2Nta25MQ0FuVTJGMEp5d2dKMU4xYmlkZENpQWdmU3dLSUNCNVFYaHBjem9nZTMwc0NpQWdjMlZ5YVdWek9pQmJDaUFnSUNCN0NpQWdJQ0FnSUhSNWNHVTZJQ2RpWVhJbkxBb2dJQ0FnSUNCa1lYUmhPaUJiTWpNc0lESTBMQ0F4T0N3Z01qVXNJREkzTENBeU9Dd2dNalZkQ2lBZ0lDQjlDaUFnWFFwOU93JyIgdi1iaW5kPSJ7bGF5b3V0OiAnYnQnfSIgLz4KCiMjIyBIaWdobGlnaHRpbmcgTGluZXMgb2YgQ29kZSBhbmQgQWRkaW5nIEZpbGVuYW1lcwoKVXNlLgoKPCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-\'" line-highlights="\'\'" />markdown</p>\n<pre><code class="language-js{1,3-5}[option.js]">option = {\n series: [\n {\n type: \'bar\',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n</code></pre>\n\x3c!-- prettier-ignore-end --\x3e\n<p>Effects.</p>\n<pre><code class="language-js{1,3-5}[option.js]">option = {\n series: [\n {\n type: \'bar\',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n</code></pre>\n<h2 id="embedding-images" tabindex="-1">Embedding Images</h2>\n<p>Source images are stored under <code>static/images/</code>.</p>\n<md-code-block lang="markdown" code="\'IVtpbWFnZSBkZXNjcmlwdGlvbl0oaW1hZ2VzL2RlbW8ucG5nKQ\'" line-highlights="\'\'" />\n<h3 id="set-the-image-height-and-width" tabindex="-1">Set the Image Height and Width</h3>\n<p>For the temporary style of the current page, you can just write html.</p>\n<md-code-block lang="markdown" code="\'PGltZyBkYXRhLXNyYz0iaW1hZ2VzL2RlbW8ucG5nIiBzdHlsZT0id2lkdGg6IDUwcHgiIC8-\'" line-highlights="\'\'" />\n<h2 id="add-example-iframe" tabindex="-1">Add Example Iframe</h2>\n<p><code>src</code> is the string after <code>?c=</code> in the <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple">https://echarts.apache.org/examples/en/editor.html?c=line-simple</a> address</p>\n<p>Use:</p>\n<md-code-block lang="markdown" code="\'PG1kLWV4YW1wbGUgc3JjPSJkb2MtZXhhbXBsZS9nZXR0aW5nLXN0YXJ0ZWQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjMwMCI-PC9tZC1leGFtcGxlPg\'" line-highlights="\'\'" />\n<p>Result:\n<md-example src="doc-example/getting-started" width="100%" height="300"></md-example></p>\n<h2 id="add-link-to-option-item" tabindex="-1">Add Link to Option Item</h2>\n<p>Use:</p>\n<md-code-block lang="markdown" code="\'PG1kLW9wdGlvbiBsaW5rPSJzZXJpZXMtYmFyLml0ZW1TdHlsZS5jb2xvciI-PC9tZC1vcHRpb24-\'" line-highlights="\'\'" />\n<p>Result:\n<md-option link="series-bar.itemStyle.color"></md-option></p>\n<h2 id="more-component-usage" tabindex="-1">More Component Usage</h2>\n<p>The documentation supports the use of globally registered <code>markdown</code> components. In addition to the <code>md-example</code> component just described, the following components are also available</p>\n<h3 id="md-alert" tabindex="-1">md-alert</h3>\n<p>Prompt components</p>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9ImluZm8iPgpUaGlzIGlzIGFuIGluZm8gYWxlcnQuCjwvbWQtYWxlcnQ-\'" line-highlights="\'\'" />\n<md-alert type="info">\nThis is an info alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9InN1Y2Nlc3MiPgpUaGlzIGlzIGEgc3VjY2VzcyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="success">\nThis is a success alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgd2FybmluZyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="warning">\nThis is a warning alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgZGFuZ2VyIGFsZXJ0Lgo8L21kLWFsZXJ0Pg\'" line-highlights="\'\'" />\n<md-alert type="danger">\nThis is a danger alert.\n</md-alert>\n',postPath:"en/meta/edit-guide"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:n},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:r},{title:"资源列表",dir:o,draft:e},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:m}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:b,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:k},{title:"数据集",dir:u},{title:"数据转换",dir:U},{title:"坐标系",dir:B,draft:e},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:y},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:A,children:[{title:"常用图表类型",dir:f,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:L,draft:e},{title:"阶梯瀑布图",dir:V},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:N},{title:"堆叠折线图",dir:Q},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:P},{title:"阶梯线图",dir:Y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:R},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:D,children:[{title:"基础散点图",dir:j}]}]},{title:z,dir:i,draft:e},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:E}]},{title:"数据处理",dir:H,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:T,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:z,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:n},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:r},{title:"Resources",dir:o,draft:e},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:m}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:k},{title:"Dataset",dir:u},{title:"Data Transform",dir:U},{title:"Coordinate",dir:B,draft:e},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:y},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:A,children:[{title:"Common Charts",dir:f,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:L,draft:e},{title:"Waterfall",dir:V}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:N},{title:"Stacked Line",dir:Q},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:P},{title:"Step Line",dir:Y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:R},{title:"Ring Style",dir:v},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:D,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:E}]},{title:"Data",dir:H,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:T,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},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:e,routePath:"/en/meta/edit-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/index.html b/handbook/index.html
index 8cbf480..7767fb1 100644
--- a/handbook/index.html
+++ b/handbook/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,s,o,h,p,f,g,b,m,u,C,v,S,P,w,B,E,k,x,R,y,D,L,G,_,A,V,M,T,z,H,I,U,N,O,W,$,F,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:v},{title:"数据集",dir:S},{title:"数据转换",dir:P},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:E},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:G,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:A,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:$,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:$,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:S},{title:"Data Transform",dir:P},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:E},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:G,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:A,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:U},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,s,o,h,p,f,g,b,m,u,C,v,S,P,w,B,E,k,x,R,y,D,L,G,_,A,V,M,T,z,H,I,U,N,O,W,$,F,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:v},{title:"数据集",dir:S},{title:"数据转换",dir:P},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:E},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:G,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:A,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:$,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:$,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:S},{title:"Data Transform",dir:P},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:E},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:G,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:A,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:U},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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:"/",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/basics/download/index.html b/handbook/zh/basics/download/index.html
index c564128..413d2fa 100644
--- a/handbook/zh/basics/download/index.html
+++ b/handbook/zh/basics/download/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h1> <p>Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。</p> <ul><li>从 GitHub 获取</li> <li>从 npm 获取</li> <li>从 CDN 获取</li> <li>在线定制</li></ul> <p>接下来我们将分别介绍这些安装方式,以及下载后的目录结构。</p> <h2 id="%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F" tabindex="-1">安装方式</h2> <h3 id="%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96" tabindex="-1">从 npm 获取</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>详见<a href="zh/basics/import">在项目中引入 Apache ECharts</a>。</p> <h3 id="%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96" tabindex="-1">从 CDN 获取</h3> <p>推荐从 jsDelivr 引用 <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a>。</p> <h3 id="%E4%BB%8E-github-%E8%8E%B7%E5%8F%96" tabindex="-1">从 GitHub 获取</h3> <p><a href="https://github.com/apache/echarts">apache/echarts</a> 项目的 <a href="https://github.com/apache/echarts/releases">release</a> 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 <code>dist</code> 目录下的 <code>echarts.js</code> 即为包含完整 ECharts 功能的文件。</p> <h3 id="%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6" tabindex="-1">在线定制</h3> <p>如果只想引入部分模块以减少包体积,可以使用 <a href="https://echarts.apache.org//builder.html">ECharts 在线定制</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/download.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,h,n,s,c,o,p,b,E,f,m,g,u,B,C,w,v,x,A,S,P,k,D,G,R,y,L,F,z,N,_,H,V,I,M,T,U,j,W,X,O,$,J,Y,Z,q,K,Q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h1>\n<p>Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。</p>\n<ul>\n<li>从 GitHub 获取</li>\n<li>从 npm 获取</li>\n<li>从 CDN 获取</li>\n<li>在线定制</li>\n</ul>\n<p>接下来我们将分别介绍这些安装方式,以及下载后的目录结构。</p>\n<h2 id="%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F" tabindex="-1">安装方式</h2>\n<h3 id="%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96" tabindex="-1">从 npm 获取</h3>\n<md-code-block lang="sh" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<p>详见<a href="zh/basics/import">在项目中引入 Apache ECharts</a>。</p>\n<h3 id="%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96" tabindex="-1">从 CDN 获取</h3>\n<p>推荐从 jsDelivr 引用 <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a>。</p>\n<h3 id="%E4%BB%8E-github-%E8%8E%B7%E5%8F%96" tabindex="-1">从 GitHub 获取</h3>\n<p><a href="https://github.com/apache/echarts">apache/echarts</a> 项目的 <a href="https://github.com/apache/echarts/releases">release</a> 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 <code>dist</code> 目录下的 <code>echarts.js</code> 即为包含完整 ECharts 功能的文件。</p>\n<h3 id="%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6" tabindex="-1">在线定制</h3>\n<p>如果只想引入部分模块以减少包体积,可以使用 <a href="https://echarts.apache.org//builder.html">ECharts 在线定制</a>功能。</p>\n',postPath:"zh/basics/download"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:b},{title:5.2,dir:E}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:g,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:B},{title:"数据集",dir:C},{title:"数据转换",dir:w},{title:"坐标系",dir:v,draft:t},{title:"坐标轴",dir:x},{title:"视觉映射",dir:e},{title:"图例",dir:A},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:y,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:F,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:N},{title:"区域面积图",dir:_},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:M},{title:"南丁格尔图(玫瑰图)",dir:T}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:j}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:O}]},{title:"数据处理",dir:$,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:Y,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:K,draft:t}]}]},{title:"最佳实践",dir:Q,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:b},{title:5.2,dir:E}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:C},{title:"Data Transform",dir:w},{title:"Coordinate",dir:v,draft:t},{title:"Axis",dir:x},{title:"Visual Mapping",dir:e},{title:"Legend",dir:A},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:P,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:y,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:F,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:N},{title:"Area Chart",dir:_},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:M},{title:"Rose Style",dir:T}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:O}]},{title:"Data",dir:$,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:Y,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:K,draft:t}]}]},{title:"Best Practices",dir:Q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/download",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h1> <p>Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。</p> <ul><li>从 GitHub 获取</li> <li>从 npm 获取</li> <li>从 CDN 获取</li> <li>在线定制</li></ul> <p>接下来我们将分别介绍这些安装方式,以及下载后的目录结构。</p> <h2 id="%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F" tabindex="-1">安装方式</h2> <h3 id="%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96" tabindex="-1">从 npm 获取</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>详见<a href="zh/basics/import">在项目中引入 Apache ECharts</a>。</p> <h3 id="%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96" tabindex="-1">从 CDN 获取</h3> <p>推荐从 jsDelivr 引用 <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a>。</p> <h3 id="%E4%BB%8E-github-%E8%8E%B7%E5%8F%96" tabindex="-1">从 GitHub 获取</h3> <p><a href="https://github.com/apache/echarts">apache/echarts</a> 项目的 <a href="https://github.com/apache/echarts/releases">release</a> 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 <code>dist</code> 目录下的 <code>echarts.js</code> 即为包含完整 ECharts 功能的文件。</p> <h3 id="%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6" tabindex="-1">在线定制</h3> <p>如果只想引入部分模块以减少包体积,可以使用 <a href="https://echarts.apache.org//builder.html">ECharts 在线定制</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/download.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,h,n,s,c,o,p,b,E,f,m,g,u,B,C,w,v,x,A,S,P,k,D,G,R,y,L,F,z,N,_,H,V,I,M,T,U,j,W,X,O,$,J,Y,Z,q,K,Q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h1>\n<p>Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。</p>\n<ul>\n<li>从 GitHub 获取</li>\n<li>从 npm 获取</li>\n<li>从 CDN 获取</li>\n<li>在线定制</li>\n</ul>\n<p>接下来我们将分别介绍这些安装方式,以及下载后的目录结构。</p>\n<h2 id="%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F" tabindex="-1">安装方式</h2>\n<h3 id="%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96" tabindex="-1">从 npm 获取</h3>\n<md-code-block lang="sh" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<p>详见<a href="zh/basics/import">在项目中引入 Apache ECharts</a>。</p>\n<h3 id="%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96" tabindex="-1">从 CDN 获取</h3>\n<p>推荐从 jsDelivr 引用 <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a>。</p>\n<h3 id="%E4%BB%8E-github-%E8%8E%B7%E5%8F%96" tabindex="-1">从 GitHub 获取</h3>\n<p><a href="https://github.com/apache/echarts">apache/echarts</a> 项目的 <a href="https://github.com/apache/echarts/releases">release</a> 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 <code>dist</code> 目录下的 <code>echarts.js</code> 即为包含完整 ECharts 功能的文件。</p>\n<h3 id="%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6" tabindex="-1">在线定制</h3>\n<p>如果只想引入部分模块以减少包体积,可以使用 <a href="https://echarts.apache.org//builder.html">ECharts 在线定制</a>功能。</p>\n',postPath:"zh/basics/download"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:b},{title:5.2,dir:E}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:g,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:B},{title:"数据集",dir:C},{title:"数据转换",dir:w},{title:"坐标系",dir:v,draft:t},{title:"坐标轴",dir:x},{title:"视觉映射",dir:e},{title:"图例",dir:A},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:y,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:F,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:N},{title:"区域面积图",dir:_},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:M},{title:"南丁格尔图(玫瑰图)",dir:T}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:j}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:O}]},{title:"数据处理",dir:$,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:Y,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:K,draft:t}]}]},{title:"最佳实践",dir:Q,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:b},{title:5.2,dir:E}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:C},{title:"Data Transform",dir:w},{title:"Coordinate",dir:v,draft:t},{title:"Axis",dir:x},{title:"Visual Mapping",dir:e},{title:"Legend",dir:A},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:P,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:y,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:F,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:N},{title:"Area Chart",dir:_},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:M},{title:"Rose Style",dir:T}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:O}]},{title:"Data",dir:$,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:Y,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:K,draft:t}]}]},{title:"Best Practices",dir:Q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/download",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/basics/help/index.html b/handbook/zh/basics/help/index.html
index e2e3bda..f950367 100644
--- a/handbook/zh/basics/help/index.html
+++ b/handbook/zh/basics/help/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%AF%BB%E6%B1%82%E5%B8%AE%E5%8A%A9" tabindex="-1">寻求帮助</h1> <h2 id="%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98" tabindex="-1">技术问题</h2> <h3 id="%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98" tabindex="-1">确保现有文档等资料无法解决你的问题</h3> <p>ECharts 有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。</p> <p>因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:</p> <ul><li><a href="https://echarts.apache.org//api.html">API</a></li> <li><a href="https://echarts.apache.org//option.html">配置项手册</a>:可以尝试使用搜索功能</li> <li>本手册的文章</li> <li><a href="https://echarts.apache.org//faq.html">常见问题</a></li> <li>在 <a href="https://github.com/apache/echarts/issues">GitHub issue</a> 中搜索关键字</li> <li>使用搜索引擎搜索关键字</li></ul> <h3 id="%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90" tabindex="-1">创建一个最简单可复现的例子</h3> <p>使用 <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>、<a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a> 或者 <a href="https://www.makeapie.com/">makeapie.com</a> 创建一个例子,这将使得他人更方便地复现你的问题。</p> <p>例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to create a Minimal, Reproducible Example</a>。</p> <h3 id="%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug" tabindex="-1">判断是否是 bug</h3> <h4 id="%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD" tabindex="-1">报告 bug 或请求新功能</h4> <p>如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 <a href="https://ecomfe.github.io/echarts-issue-helper/">issue 模板</a> 中新建一个 issue 并按照提示详细描述。</p> <h4 id="%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">咨询类问题</h4> <p>如果不是 bug,而是不知道如何实现某种效果,可以尝试在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问。</p> <p>如果没能得到答复,也可以发送邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。</p> <h2 id="%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">非技术类问题</h2> <p>其他问题可以发送英文邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</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/help.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,h,n,s,o,c,p,E,f,A,b,m,g,u,B,C,v,w,x,D,k,P,S,F,y,R,L,G,z,M,_,H,V,I,T,W,O,U,q,N,X,$,Y,j,J,K,Q,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%AF%BB%E6%B1%82%E5%B8%AE%E5%8A%A9" tabindex="-1">寻求帮助</h1>\n<h2 id="%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98" tabindex="-1">技术问题</h2>\n<h3 id="%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98" tabindex="-1">确保现有文档等资料无法解决你的问题</h3>\n<p>ECharts 有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。</p>\n<p>因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:</p>\n<ul>\n<li><a href="https://echarts.apache.org//api.html">API</a></li>\n<li><a href="https://echarts.apache.org//option.html">配置项手册</a>:可以尝试使用搜索功能</li>\n<li>本手册的文章</li>\n<li><a href="https://echarts.apache.org//faq.html">常见问题</a></li>\n<li>在 <a href="https://github.com/apache/echarts/issues">GitHub issue</a> 中搜索关键字</li>\n<li>使用搜索引擎搜索关键字</li>\n</ul>\n<h3 id="%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90" tabindex="-1">创建一个最简单可复现的例子</h3>\n<p>使用 <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>、<a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a> 或者 <a href="https://www.makeapie.com/">makeapie.com</a> 创建一个例子,这将使得他人更方便地复现你的问题。</p>\n<p>例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to create a Minimal, Reproducible Example</a>。</p>\n<h3 id="%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug" tabindex="-1">判断是否是 bug</h3>\n<h4 id="%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD" tabindex="-1">报告 bug 或请求新功能</h4>\n<p>如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 <a href="https://ecomfe.github.io/echarts-issue-helper/">issue 模板</a> 中新建一个 issue 并按照提示详细描述。</p>\n<h4 id="%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">咨询类问题</h4>\n<p>如果不是 bug,而是不知道如何实现某种效果,可以尝试在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问。</p>\n<p>如果没能得到答复,也可以发送邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。</p>\n<h2 id="%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">非技术类问题</h2>\n<p>其他问题可以发送英文邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。</p>\n',postPath:"zh/basics/help"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:E},{title:5.2,dir:f}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:t},{title:"系列",dir:g,draft:t},{title:"样式",dir:u},{title:"数据集",dir:B},{title:"数据转换",dir:C},{title:"坐标系",dir:v,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:x},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:P,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:F},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:_},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:T},{title:"南丁格尔图(玫瑰图)",dir:W}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:U}]}]},{title:q,dir:i,draft:t},{title:"跨平台方案",dir:N,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:$,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:J}]},{title:"交互",dir:K,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:q,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:E},{title:5.2,dir:f}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:g,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:B},{title:"Data Transform",dir:C},{title:"Coordinate",dir:v,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:x},{title:"Event and Action",dir:D}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:P,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:F},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:_},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:T},{title:"Rose Style",dir:W}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:N,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:$,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:J}]},{title:"Interaction",dir:K,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/help",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%AF%BB%E6%B1%82%E5%B8%AE%E5%8A%A9" tabindex="-1">寻求帮助</h1> <h2 id="%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98" tabindex="-1">技术问题</h2> <h3 id="%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98" tabindex="-1">确保现有文档等资料无法解决你的问题</h3> <p>ECharts 有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。</p> <p>因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:</p> <ul><li><a href="https://echarts.apache.org//api.html">API</a></li> <li><a href="https://echarts.apache.org//option.html">配置项手册</a>:可以尝试使用搜索功能</li> <li>本手册的文章</li> <li><a href="https://echarts.apache.org//faq.html">常见问题</a></li> <li>在 <a href="https://github.com/apache/echarts/issues">GitHub issue</a> 中搜索关键字</li> <li>使用搜索引擎搜索关键字</li></ul> <h3 id="%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90" tabindex="-1">创建一个最简单可复现的例子</h3> <p>使用 <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>、<a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a> 或者 <a href="https://www.makeapie.com/">makeapie.com</a> 创建一个例子,这将使得他人更方便地复现你的问题。</p> <p>例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to create a Minimal, Reproducible Example</a>。</p> <h3 id="%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug" tabindex="-1">判断是否是 bug</h3> <h4 id="%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD" tabindex="-1">报告 bug 或请求新功能</h4> <p>如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 <a href="https://ecomfe.github.io/echarts-issue-helper/">issue 模板</a> 中新建一个 issue 并按照提示详细描述。</p> <h4 id="%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">咨询类问题</h4> <p>如果不是 bug,而是不知道如何实现某种效果,可以尝试在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问。</p> <p>如果没能得到答复,也可以发送邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。</p> <h2 id="%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">非技术类问题</h2> <p>其他问题可以发送英文邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</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/help.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,h,n,s,o,c,p,E,f,A,b,m,g,u,B,C,v,w,x,D,k,P,S,F,y,R,L,G,z,M,_,H,V,I,T,W,O,U,q,N,X,$,Y,j,J,K,Q,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%AF%BB%E6%B1%82%E5%B8%AE%E5%8A%A9" tabindex="-1">寻求帮助</h1>\n<h2 id="%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98" tabindex="-1">技术问题</h2>\n<h3 id="%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98" tabindex="-1">确保现有文档等资料无法解决你的问题</h3>\n<p>ECharts 有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。</p>\n<p>因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:</p>\n<ul>\n<li><a href="https://echarts.apache.org//api.html">API</a></li>\n<li><a href="https://echarts.apache.org//option.html">配置项手册</a>:可以尝试使用搜索功能</li>\n<li>本手册的文章</li>\n<li><a href="https://echarts.apache.org//faq.html">常见问题</a></li>\n<li>在 <a href="https://github.com/apache/echarts/issues">GitHub issue</a> 中搜索关键字</li>\n<li>使用搜索引擎搜索关键字</li>\n</ul>\n<h3 id="%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90" tabindex="-1">创建一个最简单可复现的例子</h3>\n<p>使用 <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>、<a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a> 或者 <a href="https://www.makeapie.com/">makeapie.com</a> 创建一个例子,这将使得他人更方便地复现你的问题。</p>\n<p>例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to create a Minimal, Reproducible Example</a>。</p>\n<h3 id="%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug" tabindex="-1">判断是否是 bug</h3>\n<h4 id="%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD" tabindex="-1">报告 bug 或请求新功能</h4>\n<p>如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 <a href="https://ecomfe.github.io/echarts-issue-helper/">issue 模板</a> 中新建一个 issue 并按照提示详细描述。</p>\n<h4 id="%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">咨询类问题</h4>\n<p>如果不是 bug,而是不知道如何实现某种效果,可以尝试在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问。</p>\n<p>如果没能得到答复,也可以发送邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。</p>\n<h2 id="%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">非技术类问题</h2>\n<p>其他问题可以发送英文邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。</p>\n',postPath:"zh/basics/help"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:E},{title:5.2,dir:f}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:t},{title:"系列",dir:g,draft:t},{title:"样式",dir:u},{title:"数据集",dir:B},{title:"数据转换",dir:C},{title:"坐标系",dir:v,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:x},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:P,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:F},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:_},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:T},{title:"南丁格尔图(玫瑰图)",dir:W}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:U}]}]},{title:q,dir:i,draft:t},{title:"跨平台方案",dir:N,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:$,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:J}]},{title:"交互",dir:K,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:q,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:E},{title:5.2,dir:f}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:g,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:B},{title:"Data Transform",dir:C},{title:"Coordinate",dir:v,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:x},{title:"Event and Action",dir:D}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:P,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:F},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:_},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:T},{title:"Rose Style",dir:W}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:N,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:$,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:J}]},{title:"Interaction",dir:K,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/help",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/basics/import/index.html b/handbook/zh/basics/import/index.html
index 3457eb3..c672d34 100644
--- a/handbook/zh/basics/import/index.html
+++ b/handbook/zh/basics/import/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">在项目中引入 Apache ECharts</h1> <p>假如你的开发环境使用了<code>npm</code>或者<code>yarn</code>等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 特性只打包需要的模块。</p> <h2 id="npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1">NPM 安装 ECharts</h2> <p>你可以使用如下命令通过 npm 安装 ECharts</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%BC%95%E5%85%A5-echarts" tabindex="-1">引入 ECharts</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">在项目中引入 Apache ECharts</h1> <p>假如你的开发环境使用了<code>npm</code>或者<code>yarn</code>等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 特性只打包需要的模块。</p> <h2 id="npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1">NPM 安装 ECharts</h2> <p>你可以使用如下命令通过 npm 安装 ECharts</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%BC%95%E5%85%A5-echarts" tabindex="-1">引入 ECharts</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
<span class="token comment">// 基于准备好的dom,初始化echarts实例</span>
<span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -90,7 +90,8 @@
<span class="token keyword">var</span> option<span class="token operator">:</span> ECOption <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</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></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/import.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,l,r,d,a,n,c,h,o,s,b,g,p,C,m,I,u,G,E,v,y,A,B,L,Z,J,W,X,w,R,V,Y,N,f,O,S,k,H,K,z,j,D,P,Q,M,F,q,x,T,U,_,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">在项目中引入 Apache ECharts</h1>\n<p>假如你的开发环境使用了<code>npm</code>或者<code>yarn</code>等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 特性只打包需要的模块。</p>\n<h2 id="npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1">NPM 安装 ECharts</h2>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<md-code-block lang="shell" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<h2 id="%E5%BC%95%E5%85%A5-echarts" tabindex="-1">引入 ECharts</h2>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKCi8vIOWfuuS6juWHhuWkh-WlveeahGRvbe-8jOWIneWni-WMlmVjaGFydHPlrp7kvosKdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIOe7mOWItuWbvuihqApteUNoYXJ0LnNldE9wdGlvbih7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICdFQ2hhcnRzIOWFpemXqOekuuS-iycKICB9LAogIHRvb2x0aXA6IHt9LAogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgfQogIF0KfSk7\'" line-highlights="\'\'" />\n<h2 id="%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6" tabindex="-1">按需引入 ECharts 图表和组件</h2>\n<p>上面的代码会引入所有 ECharts 中所有的图表和组件,但是假如你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。</p>\n<md-code-block lang="js" code="\'Ly8g5byV5YWlIGVjaGFydHMg5qC45b-D5qih5Z2X77yM5qC45b-D5qih5Z2X5o-Q5L6b5LqGIGVjaGFydHMg5L2_55So5b-F6aG76KaB55qE5o6l5Y-j44CCCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9jb3JlJzsKLy8g5byV5YWl5p-x54q25Zu-5Zu-6KGo77yM5Zu-6KGo5ZCO57yA6YO95Li6IENoYXJ0CmltcG9ydCB7IEJhckNoYXJ0IH0gZnJvbSAnZWNoYXJ0cy9jaGFydHMnOwovLyDlvJXlhaXmj5DnpLrmoYbvvIzmoIfpopjvvIznm7Top5LlnZDmoIfns7vnu4Tku7bvvIznu4Tku7blkI7nvIDpg73kuLogQ29tcG9uZW50CmltcG9ydCB7CiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50Cn0gZnJvbSAnZWNoYXJ0cy9jb21wb25lbnRzJzsKLy8g5byV5YWlIENhbnZhcyDmuLLmn5PlmajvvIzms6jmhI_lvJXlhaUgQ2FudmFzUmVuZGVyZXIg5oiW6ICFIFNWR1JlbmRlcmVyIOaYr-W_hemhu-eahOS4gOatpQppbXBvcnQgeyBDYW52YXNSZW5kZXJlciB9IGZyb20gJ2VjaGFydHMvcmVuZGVyZXJzJzsKCi8vIOazqOWGjOW_hemhu-eahOe7hOS7tgplY2hhcnRzLnVzZShbCiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50LAogIEJhckNoYXJ0LAogIENhbnZhc1JlbmRlcmVyCl0pOwoKLy8g5o6l5LiL5p2l55qE5L2_55So5bCx6Lef5LmL5YmN5LiA5qC377yM5Yid5aeL5YyW5Zu-6KGo77yM6K6-572u6YWN572u6aG5CnZhciBteUNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwpteUNoYXJ0LnNldE9wdGlvbih7CiAgLy8gLi4uCn0pOw\'" line-highlights="\'\'" />\n<blockquote>\n<p>需要注意的是注意为了保证打包的体积是最小的,ECharts 按需引入的时候不再提供任何渲染器,所以需要选择引入<code>CanvasRenderer</code>或者<code>SVGRenderer</code>作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式,打包的结果中就不会再包含无需使用的<code>CanvasRenderer</code>模块。</p>\n</blockquote>\n<p>我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。</p>\n<h2 id="%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">在 TypeScript 中按需引入</h2>\n<p>对于使用了 TypeScript 来开发 ECharts 的开发者,我们提供了类型接口来组合出最小的<code>EChartsOption</code>类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。</p>\n<md-code-block lang="ts" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgewogIEJhckNoYXJ0LAogIC8vIOezu-WIl-exu-Wei-eahOWumuS5ieWQjue8gOmDveS4uiBTZXJpZXNPcHRpb24KICBCYXJTZXJpZXNPcHRpb24sCiAgTGluZUNoYXJ0LAogIExpbmVTZXJpZXNPcHRpb24KfSBmcm9tICdlY2hhcnRzL2NoYXJ0cyc7CmltcG9ydCB7CiAgVGl0bGVDb21wb25lbnQsCiAgLy8g57uE5Lu257G75Z6L55qE5a6a5LmJ5ZCO57yA6YO95Li6IENvbXBvbmVudE9wdGlvbgogIFRpdGxlQ29tcG9uZW50T3B0aW9uLAogIEdyaWRDb21wb25lbnQsCiAgR3JpZENvbXBvbmVudE9wdGlvbgp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmltcG9ydCB7IENhbnZhc1JlbmRlcmVyIH0gZnJvbSAnZWNoYXJ0cy9yZW5kZXJlcnMnOwoKLy8g6YCa6L-HIENvbXBvc2VPcHRpb24g5p2l57uE5ZCI5Ye65LiA5Liq5Y-q5pyJ5b-F6aG757uE5Lu25ZKM5Zu-6KGo55qEIE9wdGlvbiDnsbvlnosKdHlwZSBFQ09wdGlvbiA9IGVjaGFydHMuQ29tcG9zZU9wdGlvbjwKICB8IEJhclNlcmllc09wdGlvbgogIHwgTGluZVNlcmllc09wdGlvbgogIHwgVGl0bGVDb21wb25lbnRPcHRpb24KICB8IEdyaWRDb21wb25lbnRPcHRpb24KPjsKCi8vIOazqOWGjOW_hemhu-eahOe7hOS7tgplY2hhcnRzLnVzZShbCiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50LAogIEJhckNoYXJ0LAogIENhbnZhc1JlbmRlcmVyCl0pOwoKdmFyIG9wdGlvbjogRUNPcHRpb24gPSB7CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n',postPath:"zh/basics/import"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:o},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:b},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:p}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:I,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:G},{title:"数据集",dir:E},{title:"数据转换",dir:v},{title:"坐标系",dir:y,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:e},{title:"图例",dir:B},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:X},{title:"动态排序柱状图",dir:w},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:V},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:N},{title:"堆叠折线图",dir:f},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:D}]}]},{title:P,dir:i,draft:t},{title:"跨平台方案",dir:Q,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:F,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:x,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:T}]},{title:"交互",dir:U,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:o},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:b},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:p}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:G},{title:"Dataset",dir:E},{title:"Data Transform",dir:v},{title:"Coordinate",dir:y,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:e},{title:"Legend",dir:B},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:X},{title:"Bar Racing",dir:w},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:V}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:N},{title:"Stacked Line",dir:f},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:K},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:Q,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:F,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:x,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:T}]},{title:"Interaction",dir:U,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/import",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/import.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,l,r,d,a,n,c,h,o,s,b,g,p,C,m,I,u,G,E,v,y,A,B,L,Z,J,W,X,w,R,V,Y,N,f,O,S,k,H,K,z,j,D,P,Q,M,F,q,x,T,U,_,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">在项目中引入 Apache ECharts</h1>\n<p>假如你的开发环境使用了<code>npm</code>或者<code>yarn</code>等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 特性只打包需要的模块。</p>\n<h2 id="npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1">NPM 安装 ECharts</h2>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<md-code-block lang="shell" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<h2 id="%E5%BC%95%E5%85%A5-echarts" tabindex="-1">引入 ECharts</h2>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKCi8vIOWfuuS6juWHhuWkh-WlveeahGRvbe-8jOWIneWni-WMlmVjaGFydHPlrp7kvosKdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIOe7mOWItuWbvuihqApteUNoYXJ0LnNldE9wdGlvbih7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICdFQ2hhcnRzIOWFpemXqOekuuS-iycKICB9LAogIHRvb2x0aXA6IHt9LAogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgfQogIF0KfSk7\'" line-highlights="\'\'" />\n<h2 id="%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6" tabindex="-1">按需引入 ECharts 图表和组件</h2>\n<p>上面的代码会引入所有 ECharts 中所有的图表和组件,但是假如你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。</p>\n<md-code-block lang="js" code="\'Ly8g5byV5YWlIGVjaGFydHMg5qC45b-D5qih5Z2X77yM5qC45b-D5qih5Z2X5o-Q5L6b5LqGIGVjaGFydHMg5L2_55So5b-F6aG76KaB55qE5o6l5Y-j44CCCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9jb3JlJzsKLy8g5byV5YWl5p-x54q25Zu-5Zu-6KGo77yM5Zu-6KGo5ZCO57yA6YO95Li6IENoYXJ0CmltcG9ydCB7IEJhckNoYXJ0IH0gZnJvbSAnZWNoYXJ0cy9jaGFydHMnOwovLyDlvJXlhaXmj5DnpLrmoYbvvIzmoIfpopjvvIznm7Top5LlnZDmoIfns7vnu4Tku7bvvIznu4Tku7blkI7nvIDpg73kuLogQ29tcG9uZW50CmltcG9ydCB7CiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50Cn0gZnJvbSAnZWNoYXJ0cy9jb21wb25lbnRzJzsKLy8g5byV5YWlIENhbnZhcyDmuLLmn5PlmajvvIzms6jmhI_lvJXlhaUgQ2FudmFzUmVuZGVyZXIg5oiW6ICFIFNWR1JlbmRlcmVyIOaYr-W_hemhu-eahOS4gOatpQppbXBvcnQgeyBDYW52YXNSZW5kZXJlciB9IGZyb20gJ2VjaGFydHMvcmVuZGVyZXJzJzsKCi8vIOazqOWGjOW_hemhu-eahOe7hOS7tgplY2hhcnRzLnVzZShbCiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50LAogIEJhckNoYXJ0LAogIENhbnZhc1JlbmRlcmVyCl0pOwoKLy8g5o6l5LiL5p2l55qE5L2_55So5bCx6Lef5LmL5YmN5LiA5qC377yM5Yid5aeL5YyW5Zu-6KGo77yM6K6-572u6YWN572u6aG5CnZhciBteUNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwpteUNoYXJ0LnNldE9wdGlvbih7CiAgLy8gLi4uCn0pOw\'" line-highlights="\'\'" />\n<blockquote>\n<p>需要注意的是注意为了保证打包的体积是最小的,ECharts 按需引入的时候不再提供任何渲染器,所以需要选择引入<code>CanvasRenderer</code>或者<code>SVGRenderer</code>作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式,打包的结果中就不会再包含无需使用的<code>CanvasRenderer</code>模块。</p>\n</blockquote>\n<p>我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。</p>\n<h2 id="%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">在 TypeScript 中按需引入</h2>\n<p>对于使用了 TypeScript 来开发 ECharts 的开发者,我们提供了类型接口来组合出最小的<code>EChartsOption</code>类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。</p>\n<md-code-block lang="ts" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgewogIEJhckNoYXJ0LAogIC8vIOezu-WIl-exu-Wei-eahOWumuS5ieWQjue8gOmDveS4uiBTZXJpZXNPcHRpb24KICBCYXJTZXJpZXNPcHRpb24sCiAgTGluZUNoYXJ0LAogIExpbmVTZXJpZXNPcHRpb24KfSBmcm9tICdlY2hhcnRzL2NoYXJ0cyc7CmltcG9ydCB7CiAgVGl0bGVDb21wb25lbnQsCiAgLy8g57uE5Lu257G75Z6L55qE5a6a5LmJ5ZCO57yA6YO95Li6IENvbXBvbmVudE9wdGlvbgogIFRpdGxlQ29tcG9uZW50T3B0aW9uLAogIEdyaWRDb21wb25lbnQsCiAgR3JpZENvbXBvbmVudE9wdGlvbgp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmltcG9ydCB7IENhbnZhc1JlbmRlcmVyIH0gZnJvbSAnZWNoYXJ0cy9yZW5kZXJlcnMnOwoKLy8g6YCa6L-HIENvbXBvc2VPcHRpb24g5p2l57uE5ZCI5Ye65LiA5Liq5Y-q5pyJ5b-F6aG757uE5Lu25ZKM5Zu-6KGo55qEIE9wdGlvbiDnsbvlnosKdHlwZSBFQ09wdGlvbiA9IGVjaGFydHMuQ29tcG9zZU9wdGlvbjwKICB8IEJhclNlcmllc09wdGlvbgogIHwgTGluZVNlcmllc09wdGlvbgogIHwgVGl0bGVDb21wb25lbnRPcHRpb24KICB8IEdyaWRDb21wb25lbnRPcHRpb24KPjsKCi8vIOazqOWGjOW_hemhu-eahOe7hOS7tgplY2hhcnRzLnVzZShbCiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50LAogIEJhckNoYXJ0LAogIENhbnZhc1JlbmRlcmVyCl0pOwoKdmFyIG9wdGlvbjogRUNPcHRpb24gPSB7CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n',postPath:"zh/basics/import"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:o},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:b},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:p}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:I,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:G},{title:"数据集",dir:E},{title:"数据转换",dir:v},{title:"坐标系",dir:y,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:e},{title:"图例",dir:B},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:X},{title:"动态排序柱状图",dir:w},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:V},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:N},{title:"堆叠折线图",dir:f},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:D}]}]},{title:P,dir:i,draft:t},{title:"跨平台方案",dir:Q,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:F,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:x,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:T}]},{title:"交互",dir:U,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:o},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:b},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:p}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:G},{title:"Dataset",dir:E},{title:"Data Transform",dir:v},{title:"Coordinate",dir:y,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:e},{title:"Legend",dir:B},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:X},{title:"Bar Racing",dir:w},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:V}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:N},{title:"Stacked Line",dir:f},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:K},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:Q,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:F,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:x,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:T}]},{title:"Interaction",dir:U,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/import",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/basics/inspiration/index.html b/handbook/zh/basics/inspiration/index.html
index 29454c3..89558f8 100644
--- a/handbook/zh/basics/inspiration/index.html
+++ b/handbook/zh/basics/inspiration/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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="%E8%8E%B7%E5%8F%96%E7%81%B5%E6%84%9F" tabindex="-1">获取灵感</h1> <p>当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候,以下列表可以提供一些思路。</p> <ul><li><a href="https://echarts.apache.org//examples">ECharts 官方实例</a></li> <li>本手册的“应用篇 - 常用图表类型”</li> <li><a href="https://www.makeapie.com/">makeapie.com</a> 社区用户的作品集</li></ul></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/inspiration.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,s,h,c,o,p,f,m,b,g,u,C,E,w,v,B,P,S,k,x,R,y,D,L,G,_,z,A,V,M,T,F,H,I,U,N,O,W,$,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E8%8E%B7%E5%8F%96%E7%81%B5%E6%84%9F" tabindex="-1">获取灵感</h1>\n<p>当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候,以下列表可以提供一些思路。</p>\n<ul>\n<li><a href="https://echarts.apache.org//examples">ECharts 官方实例</a></li>\n<li>本手册的“应用篇 - 常用图表类型”</li>\n<li><a href="https://www.makeapie.com/">makeapie.com</a> 社区用户的作品集</li>\n</ul>\n',postPath:"zh/basics/inspiration"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:c},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:m}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:g},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:E},{title:"数据集",dir:w},{title:"数据转换",dir:v},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:P},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:G,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:A},{title:"堆叠折线图",dir:V},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:T},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:I},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:O}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:$,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:c},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:m}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:g},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:E},{title:"Dataset",dir:w},{title:"Data Transform",dir:v},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:P},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:G,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:A},{title:"Stacked Line",dir:V},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:T},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:I},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:$,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/inspiration",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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="%E8%8E%B7%E5%8F%96%E7%81%B5%E6%84%9F" tabindex="-1">获取灵感</h1> <p>当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候,以下列表可以提供一些思路。</p> <ul><li><a href="https://echarts.apache.org//examples">ECharts 官方实例</a></li> <li>本手册的“应用篇 - 常用图表类型”</li> <li><a href="https://www.makeapie.com/">makeapie.com</a> 社区用户的作品集</li></ul></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/inspiration.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,s,h,c,o,p,f,m,b,g,u,C,E,w,v,B,P,S,k,x,R,y,D,L,G,_,z,A,V,M,T,F,H,I,U,N,O,W,$,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E8%8E%B7%E5%8F%96%E7%81%B5%E6%84%9F" tabindex="-1">获取灵感</h1>\n<p>当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候,以下列表可以提供一些思路。</p>\n<ul>\n<li><a href="https://echarts.apache.org//examples">ECharts 官方实例</a></li>\n<li>本手册的“应用篇 - 常用图表类型”</li>\n<li><a href="https://www.makeapie.com/">makeapie.com</a> 社区用户的作品集</li>\n</ul>\n',postPath:"zh/basics/inspiration"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:c},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:m}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:g},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:E},{title:"数据集",dir:w},{title:"数据转换",dir:v},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:P},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:G,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:A},{title:"堆叠折线图",dir:V},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:T},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:I},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:O}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:$,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:c},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:m}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:g},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:E},{title:"Dataset",dir:w},{title:"Data Transform",dir:v},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:P},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:G,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:A},{title:"Stacked Line",dir:V},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:T},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:I},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:$,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/inspiration",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/basics/release-note/5-2-0/index.html b/handbook/zh/basics/release-note/5-2-0/index.html
index 3b770f3..077ab6f 100644
--- a/handbook/zh/basics/release-note/5-2-0/index.html
+++ b/handbook/zh/basics/release-note/5-2-0/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="apache-echarts-5.2.0-%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.2.0 介绍</h1> <h2 id="%E5%85%A8%E5%B1%80%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">全局过渡动画</h2> <p>在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变,不仅仅可以改善视觉效果,更为表达数据的关联和演变提供了可能。因此,在 5.2.0 中,我们进一步将过渡动画从表现系列内部数据的变化,泛化到全局能力。接下来,我们会看到这种<strong>全局过渡动画 Universal Transition</strong>是如何为图表增加表现力和叙事能力的。</p> <p>在之前的版本中,过渡动画有一定的局限性:只能用于相同类型的图形的位置、尺寸、形状,而且只能作用在相同类型的系列上。比如,下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化:</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">function makeRandomData() {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="apache-echarts-5.2.0-%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.2.0 介绍</h1> <h2 id="%E5%85%A8%E5%B1%80%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">全局过渡动画</h2> <p>在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变,不仅仅可以改善视觉效果,更为表达数据的关联和演变提供了可能。因此,在 5.2.0 中,我们进一步将过渡动画从表现系列内部数据的变化,泛化到全局能力。接下来,我们会看到这种<strong>全局过渡动画 Universal Transition</strong>是如何为图表增加表现力和叙事能力的。</p> <p>在之前的版本中,过渡动画有一定的局限性:只能用于相同类型的图形的位置、尺寸、形状,而且只能作用在相同类型的系列上。比如,下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化:</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">function makeRandomData() {
return [
{
value: Math.random(),
@@ -455,7 +455,7 @@
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这一配置项可以让我们避免了去找调色盘颜色然去一一设置的麻烦,可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强,提供更多的调色盘取色的策略。</p> <h2 id="%E6%9E%81%E5%9D%90%E6%A0%87%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E6%A0%87%E7%AD%BE" tabindex="-1">极坐标柱状图的标签</h2> <p>这个版本中我们实现了极坐标上的柱状图的标签,并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图:</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这一配置项可以让我们避免了去找调色盘颜色然后去一一设置的麻烦,可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强,提供更多的调色盘取色的策略。</p> <h2 id="%E6%9E%81%E5%9D%90%E6%A0%87%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E6%A0%87%E7%AD%BE" tabindex="-1">极坐标柱状图的标签</h2> <p>这个版本中我们实现了极坐标上的柱状图的标签,并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图:</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
angleAxis: {
show: false,
max: 10
@@ -583,7 +583,8 @@
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2> <p>以上我们介绍了 5.2.0 中的新特性以及优化,如果你对其中的一些特性感兴趣,不妨更新到最新版本的 Apache ECharts 亲自体验一下。</p> <p>如果你对 Apache ECharts 接下来的计划感兴趣,也可以在 <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a> 关注我们的开发计划。也非常欢迎加入我们的贡献者行列(在 <a href="https://github.com/apache/echarts/wiki">Wiki</a> 中了解更多)。</p> <h3 id="%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95" tabindex="-1">版本更新记录</h3> <h4 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%94%B9%E5%8A%A8" tabindex="-1">非兼容改动</h4> <ul><li>[Fix][pie] 负值会被作为非法值过滤。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li></ul> <h4 id="%E6%89%80%E6%9C%89%E6%94%B9%E5%8A%A8" tabindex="-1">所有改动</h4> <ul><li><strong>[Feature] 新增全局过渡动画。<a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li> <li>[Feature][color] 新增<code>series.colorBy</code>配置不同粒度的取色。<a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][label] 极坐标系柱状图支持标签显示。<a href="https://github.com/ecomfe/zrender/issues/774">#774</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][effectscatter] 新增<code>rippleEffect.number</code>配置涟漪数目。<a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Feature][gauge] 新增<code>pointer.showAbove</code>配置指针和标签的显示层级。<a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Feature][emphasis] <code>emphasis.color</code>支持设置为<code>'inherit'</code>关闭高亮。<a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li> <li>[Feature][pie] 无数据的时候默认显示灰色的占位圆。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][dataset] 优化高维数据<code>dataset</code>的性能。<a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][axis] 优化时间轴刻度标签的格式化显示。<a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li> <li>[Fix][custom] 优化旧代码对于<code>font</code>的兼容性。<a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][memory] 优化实例销毁后依旧持有实例时的内存占用。<a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][line] 优化有无穷大数据时的渐变色显示。 <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][date] 优化<code>date</code>数据的解析。<a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li> <li>[Fix][line] 修复渲染出错。<a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][candlestick] 修复样式可能在<code>setOption</code>后丢失的问题。<a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][sankey] 修复垂直布局时的渐变色边。<a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][tooltip] 修复在设置<code>tooltip.position</code>后<code>formatter</code>返回 DOM 对象会被解析成字符串的问题。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][tooltip] <code>formatter</code>返回<code>null</code>时清空内容。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][bar] 标签位置设置为<code>'middle'</code>时应该显示在图形中间。<a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][marker] 修复可能会在极坐标柱状图报<code>'clampData' is undefined</code>的错误。<a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][treemap] 修复关闭动画后更新可能旧节点不会被移除的问题。<a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li> <li>[Fix][tree] 修复更新数据时边可能会不被移除的问题。<a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie/sunburst] 修复<code>borderRadius</code>被设置为<code>null</code>或者<code>undefined</code>时无法重置的问题。<a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][canvas] 修复<code>fillStyle</code>被设置为<code>'none'</code>或者<code>null</code>时 FireFox 浏览器下会报警告的问题。 <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][highlight] 修复<code>chart.dispatchAction</code>高亮多个系列可能会不正确的问题。<a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][sankey] 修复使用<code>series.nodes</code>作为数据时拖拽功能失效的问题。<a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li> <li>[Fix][svg] 优化导出的 SVG 文件在 Powerpoint 中的兼容性。<a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][legend] 修复<code>text.lineHeight</code>不生效。<a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie] 将默认的<code>itemStyle.borderJoin</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][radar] 将默认的<code>lineStyle.join</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][treemap] 修复设置<code>label.show</code>为<code>false</code>会报错。<a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][pictorialbar] 修复零数据标签的显示问题。<a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][lines] 修复调用<code>chart.clear()</code>可能会无法清除线条的问题。<a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][endlabel] 修复端点标签只设置<code>emphasis.show</code>为<code>true</code>时可能无法显示的问题。<a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][svg] 修复矩形路径没有合并的问题。<a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][treemap] 在回调函数参数中添加<code>treeAncestors</code>属性。<a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][tree] 修复调用<code>setOption</code>两次更新数据时可能报错的问题。<a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][radar] 修复图形边框被缩放的问题。<a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][marker] 修复<code>symbolOffset</code>和<code>symbolKeepAspect</code>配置项不生效的问题。<a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][gauge] 支持进度条和指针的点击事件。<a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li> <li>[Fix][tooltip] 优化箭头的边框宽度,跟配置同步。<a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li> <li>[Fix][geo] 修复地理坐标组件从<code>show: false</code>配置为<code>show: true</code>后依旧不显示的问题。<a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][type] 优化自定义系列<code>renderItem</code>的类型推断。</li> <li>[Fix][type] 优化<code>echarts.init</code>的配置项类型。<a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li> <li>[Fix][type] 修复类型中<code>polarIndex</code>配置项丢失的问题。<a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][type] 优化 SVG 数据源的类型。<a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li> <li>[Fix][type] 优化饼图和地图系列中的数据类型。<a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</li></ul></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/release-note/5-2-0.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,a,g,s,h,c,o,I,d,l,C,r,A,n,p,u,b,m,B,f,w,G,F,E,y,Z,H,J,W,K,X,R,Y,v,S,x,V,L,O,D,k,z,N,T,U,M,Q,j,P,q,_,$,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5.2.0-%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.2.0 介绍</h1>\n<h2 id="%E5%85%A8%E5%B1%80%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">全局过渡动画</h2>\n<p>在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变,不仅仅可以改善视觉效果,更为表达数据的关联和演变提供了可能。因此,在 5.2.0 中,我们进一步将过渡动画从表现系列内部数据的变化,泛化到全局能力。接下来,我们会看到这种<strong>全局过渡动画 Universal Transition</strong>是如何为图表增加表现力和叙事能力的。</p>\n<p>在之前的版本中,过渡动画有一定的局限性:只能用于相同类型的图形的位置、尺寸、形状,而且只能作用在相同类型的系列上。比如,下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化:</p>\n<md-live lang="js" code="\'ZnVuY3Rpb24gbWFrZVJhbmRvbURhdGEoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdBJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdCJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdDJwogICAgfQogIF07Cn0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiBbMCwgJzUwJSddLAogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgXQp9OwoKc2V0SW50ZXJ2YWwoKCkgPT4gewogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogewogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgfSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'lr\'}" />\n<p>而从 5.2.0 开始,我们引入了更强大的全局过渡动画能力,让过渡动画不再局限于相同类型的系列之间。现在,我们可以使用这种跨系列的形变,为任意类型的系列和任意类型的图形做形变动画。</p>\n<p>这会有多酷呢?我们一起来感受一下!</p>\n<h3 id="%E8%B7%A8%E7%B3%BB%E5%88%97%E7%9A%84%E5%BD%A2%E5%8F%98%E5%8A%A8%E7%94%BB" tabindex="-1">跨系列的形变动画</h3>\n<p>在设置<code>universalTransition: true</code>开启全局过渡动画后,从饼图切换成柱状图,或者从柱状图切换成散点图,甚至旭日图和矩形树图这类复杂的图表之间,都可以通过形变的方式自然的进行动画过渡。</p>\n<p>如下,饼图和柱状图之间的切换:</p>\n<md-live lang="js" code="\'Y29uc3QgZGF0YXNldCA9IHsKICBkaW1lbnNpb25zOiBbJ25hbWUnLCAnc2NvcmUnXSwKICBzb3VyY2U6IFsKICAgIFsnSGFubmFoIEtyYXVzZScsIDMxNF0sCiAgICBbJ1poYW8gUWlhbicsIDM1MV0sCiAgICBbJ0phc21pbiBLcmF1c2UgJywgMjg3XSwKICAgIFsnTGkgTGVpJywgMjE5XSwKICAgIFsnS2FybGUgTmV1bWFubicsIDI1M10sCiAgICBbJ01pYSBOZXVtYW5uJywgMTY1XSwKICAgIFsnQsO2aG0gRnVjaHMnLCAzMThdLAogICAgWydIYW4gTWVpbWVpJywgMzY2XQogIF0KfTsKY29uc3QgcGllT3B0aW9uID0gewogIGRhdGFzZXQ6IFtkYXRhc2V0XSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIOmAmui_hyBpZCDlhbPogZTpnIDopoHov4fmuKHliqjnlLvnmoTns7vliJcKICAgICAgaWQ6ICdTY29yZScsCiAgICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CmNvbnN0IGJhck9wdGlvbiA9IHsKICBkYXRhc2V0OiBbZGF0YXNldF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIOmAmui_hyBpZCDlhbPogZTpnIDopoHov4fmuKHliqjnlLvnmoTns7vliJcKICAgICAgaWQ6ICdTY29yZScsCiAgICAgIC8vIOavj-S4quaVsOaNrumDveaYr-eUqOS4jeWQjOeahOminOiJsgogICAgICBjb2xvckJ5OiAnZGF0YScsCiAgICAgIGVuY29kZTogeyB4OiAnbmFtZScsIHk6ICdzY29yZScgfSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CgpvcHRpb24gPSBiYXJPcHRpb247CgpzZXRJbnRlcnZhbCgoKSA9PiB7CiAgb3B0aW9uID0gb3B0aW9uID09PSBwaWVPcHRpb24gPyBiYXJPcHRpb24gOiBwaWVPcHRpb247CiAgLy8g5L2_55SoIG5vdE1lcmdlIOeahOW9ouW8j-WPr-S7peenu-mZpOWdkOagh-i9tAogIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbiwgdHJ1ZSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'bt\'}" />\n<p>更多的常见基础图表之间的过渡:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition.gif"></p>\n<p>这样的动画过渡不再仅仅局限于基础的折、柱、饼中,在柱状图和地图之间:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-2.gif"></p>\n<p>或者旭日图和矩形树图之间,甚至非常灵活的自定义系列之间都可以进行动画的过渡。</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-3.gif"></p>\n<blockquote>\n<p>注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应。</p>\n</blockquote>\n<h3 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%88%86%E8%A3%82%E5%92%8C%E5%90%88%E5%B9%B6%E5%8A%A8%E7%94%BB" tabindex="-1">数据的分裂和合并动画</h3>\n<p>除了常见的数据值的更新,有时候我们还会碰到数据的聚合、下钻等交互后的更新,这个时候我们就不能直接应用一对一的动画过渡,而需要使用更多像分裂、合并这样的动画效果,来通过正确的图形动画表达出数据的变换。</p>\n<p>为了能够表达数据之间可能存在的多对多联系,在 5.2.0 中我们新引入了一个数据组<code>groupId</code>的概念,我们可以通过 <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a> 设置整个系列所属的组,或者更细粒度的通过 <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.data.groupId</a> 设置每个数据所属的组。如果你使用了<code>dataset</code>管理数据则更方便了,可以使用<code>encode.itemGroupId</code>来指定一个维度编码成<code>groupId</code>。</p>\n<p>比如我们要实现一个柱状图下钻的动画,可以将下钻后的整个系列的数据都设置同一个<code>groupId</code>,然后跟下钻前的数据对应起来:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0FuaW1hbHMnLCAnRnJ1aXRzJywgJ0NhcnMnXQogIH0sCiAgeUF4aXM6IHt9LAogIGRhdGFHcm91cElkOiAnJywKICBhbmltYXRpb25EdXJhdGlvblVwZGF0ZTogNTAwLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBpZDogJ3NhbGVzJywKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiA1LAogICAgICAgIGdyb3VwSWQ6ICdhbmltYWxzJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDIsCiAgICAgICAgZ3JvdXBJZDogJ2ZydWl0cycKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiA0LAogICAgICAgIGdyb3VwSWQ6ICdjYXJzJwogICAgICB9CiAgICBdLAogICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogewogICAgICBlbmFibGVkOiB0cnVlLAogICAgICBkaXZpZGVTaGFwZTogJ2Nsb25lJwogICAgfQogIH0KfTsKCmNvbnN0IGRyaWxsZG93bkRhdGEgPSBbCiAgewogICAgZGF0YUdyb3VwSWQ6ICdhbmltYWxzJywKICAgIGRhdGE6IFsKICAgICAgWydDYXRzJywgNF0sCiAgICAgIFsnRG9ncycsIDJdLAogICAgICBbJ0Nvd3MnLCAxXSwKICAgICAgWydTaGVlcCcsIDJdLAogICAgICBbJ1BpZ3MnLCAxXQogICAgXQogIH0sCiAgewogICAgZGF0YUdyb3VwSWQ6ICdmcnVpdHMnLAogICAgZGF0YTogWwogICAgICBbJ0FwcGxlcycsIDRdLAogICAgICBbJ09yYW5nZXMnLCAyXQogICAgXQogIH0sCiAgewogICAgZGF0YUdyb3VwSWQ6ICdjYXJzJywKICAgIGRhdGE6IFsKICAgICAgWydUb3lvdGEnLCA0XSwKICAgICAgWydPcGVsJywgMl0sCiAgICAgIFsnVm9sa3N3YWdlbicsIDJdCiAgICBdCiAgfQpdOwoKbXlDaGFydC5vbignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LmRhdGEpIHsKICAgIGNvbnN0IHN1YkRhdGEgPSBkcmlsbGRvd25EYXRhLmZpbmQoZGF0YSA9PiB7CiAgICAgIHJldHVybiBkYXRhLmRhdGFHcm91cElkID09PSBldmVudC5kYXRhLmdyb3VwSWQ7CiAgICB9KTsKICAgIGlmICghc3ViRGF0YSkgewogICAgICByZXR1cm47CiAgICB9CiAgICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICAgIHhBeGlzOiB7CiAgICAgICAgZGF0YTogc3ViRGF0YS5kYXRhLm1hcChpdGVtID0-IHsKICAgICAgICAgIHJldHVybiBpdGVtWzBdOwogICAgICAgIH0pCiAgICAgIH0sCiAgICAgIHNlcmllczogewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGlkOiAnc2FsZXMnLAogICAgICAgIGRhdGFHcm91cElkOiBzdWJEYXRhLmRhdGFHcm91cElkLAogICAgICAgIGRhdGE6IHN1YkRhdGEuZGF0YS5tYXAoaXRlbSA9PiB7CiAgICAgICAgICByZXR1cm4gaXRlbVsxXTsKICAgICAgICB9KSwKICAgICAgICB1bml2ZXJzYWxUcmFuc2l0aW9uOiB7CiAgICAgICAgICBlbmFibGVkOiB0cnVlLAogICAgICAgICAgZGl2aWRlU2hhcGU6ICdjbG9uZScKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGdyYXBoaWM6IFsKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAndGV4dCcsCiAgICAgICAgICBsZWZ0OiA1MCwKICAgICAgICAgIHRvcDogMjAsCiAgICAgICAgICBzdHlsZTogewogICAgICAgICAgICB0ZXh0OiAnQmFjaycsCiAgICAgICAgICAgIGZvbnRTaXplOiAxOAogICAgICAgICAgfSwKICAgICAgICAgIG9uY2xpY2s6IGZ1bmN0aW9uKCkgewogICAgICAgICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24sIHRydWUpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgXQogICAgfSk7CiAgfQp9KTs\'" v-bind="{layout: \'lr\'}" />\n<p>通过<code>groupId</code>,我们还可以实现更丰富的聚合,下钻动画。</p>\n<p>数据的聚合:</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition.gif"></p>\n<p>单系列下钻成两个系列:</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition-2.gif"></p>\n<p>全局过渡动画使得数据的关系和演变的表达能力走上新的台阶,为你的可视化创作灵感插上翅膀。</p>\n<p>看到这里,我们知道你已经跃跃欲试了。但是别急,5.2.0 还有更多值得一看的新功能。</p>\n<h2 id="%E8%B0%83%E8%89%B2%E7%9B%98%E7%9A%84%E5%8F%96%E8%89%B2%E7%AD%96%E7%95%A5" tabindex="-1">调色盘的取色策略</h2>\n<p>在上面全局过渡动画的示例中,大家可能有注意到我们使用了一个之前版本没有的<code>colorBy</code>配置项,这个配置项也是我们这个版本新增加的一个特性,用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略:</p>\n<ul>\n<li><code>\'series\'</code> 按照系列分配调色盘中的颜色,同一系列中的所有数据都是用相同的颜色。</li>\n<li><code>\'data\'</code> 按照数据项分配调色盘中的颜色,每个数据项都使用不同的颜色。</li>\n</ul>\n<p>在之前我们是按照系列的类型固定了这个策略,比如柱状图就是固定<code>\'series\'</code>的策略,而饼图则是固定<code>\'data\'</code>的策略。</p>\n<p>而现在新增这个配置项后,我们可以在柱状图中给每个数据项都分配不同的颜色:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBjb2xvckJ5OiAnZGF0YScKICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>或者在饼图中统一使用一个颜色:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBjb2xvckJ5OiAnc2VyaWVzJywKICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgIGl0ZW1TdHlsZTogewogICAgICBib3JkZXJDb2xvcjogJyNmZmYnLAogICAgICBib3JkZXJXaWR0aDogMQogICAgfSwKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgbmFtZTogJ0RpcmVjdCBWaXNpdCcKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiAyMzQsCiAgICAgICAgbmFtZTogJ1VuaW9uIEFkJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgIH0KICAgIF0KICB9Cn07\'" v-bind="{layout: \'lr\'}" />\n<p>这一配置项可以让我们避免了去找调色盘颜色然去一一设置的麻烦,可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强,提供更多的调色盘取色的策略。</p>\n<h2 id="%E6%9E%81%E5%9D%90%E6%A0%87%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E6%A0%87%E7%AD%BE" tabindex="-1">极坐标柱状图的标签</h2>\n<p>这个版本中我们实现了极坐标上的柱状图的标签,并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGFuZ2xlQXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtYXg6IDEwCiAgfSwKICByYWRpdXNBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ0FBQScsICdCQkInLCAnQ0NDJywgJ0RERCddCiAgfSwKICBwb2xhcjoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMywgNCwgNSwgNl0sCiAgICAgIGNvbG9yQnk6ICdkYXRhJywKICAgICAgcm91bmRDYXA6IHRydWUsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDor5Xor5XmlLnmiJAgJ2luc2lkZVN0YXJ0JwogICAgICAgIHBvc2l0aW9uOiAnc3RhcnQnLAogICAgICAgIGZvcm1hdHRlcjogJ3tifScKICAgICAgfSwKICAgICAgY29vcmRpbmF0ZVN5c3RlbTogJ3BvbGFyJwogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>更多标签位置的配置:</p>\n<p><img src="" alt="" data-src="images/5-2-0/polar-bar-label.jpg"></p>\n<p>这一灵活的标签位置配置项大大丰富了极坐标柱状图的表达能力,让文字清晰地匹配对应的数据。</p>\n<h2 id="%E7%A9%BA%E6%95%B0%E6%8D%AE%E7%9A%84%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F" tabindex="-1">空数据的饼图样式</h2>\n<p>在之前的版本中,如果饼图没有数据,画面中可能就是完全空白的。因为没有任何的视觉元素,所以用户会疑惑是不是出现了 bug 导致图中没有内容。</p>\n<p>为了解决这个问题,这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过<code>emptyCircleStyle</code>配置这个占位圆的样式。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogW10sCiAgICAgIC8vIHNob3dFbXB0eUNpcmNsZTogZmFsc2UsCiAgICAgIGVtcHR5Q2lyY2xlU3R5bGU6IHsKICAgICAgICAvLyDlsIbmoLflvI_mlLnkuLrnqbrlv4PlnIYKICAgICAgICBjb2xvcjogJ3RyYW5zcGFyZW50JywKICAgICAgICBib3JkZXJDb2xvcjogJyNkZGQnLAogICAgICAgIGJvcmRlcldpZHRoOiAxCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>如果不想要显示这个灰色的圆,也可以设置<code>showEmptyCircle: false</code>关闭。</p>\n<h2 id="%E9%AB%98%E7%BB%B4%E6%95%B0%E6%8D%AE%E7%9A%84%E6%80%A7%E8%83%BD%E5%A2%9E%E5%BC%BA" tabindex="-1">高维数据的性能增强</h2>\n<p>我们从 4.0 开始引入了 <a href="https://echarts.apache.org/option.html#dataset">dataset</a> 用来管理图表的数据,通常情况下<code>dataset</code>提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维(>100)数据的场景下,我们还是会碰到一些性能急剧下降的问题,比如下面这种通过一千个系列去可视化千维数据的场景(<a href="https://github.com/apache/echarts/issues/11907">#11907</a>),甚至可能会卡住。</p>\n<md-code-block lang="js" code="\'Y29uc3QgaW5kaWNlcyA9IEFycmF5LmZyb20oQXJyYXkoMTAwMCksIChfLCBpKSA9PiB7CiAgcmV0dXJuIGBpbmRleCR7aX1gOwp9KTsKY29uc3Qgb3B0aW9uID0gewogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgZGF0YXNldDogewogICAgLy8gZGltZW5zaW9uOiBbJ2RhdGUnLCAuLi5pbmRpY2VzXSwKICAgIHNvdXJjZTogQXJyYXkuZnJvbShBcnJheSgxMCksIChfLCBpKSA9PiB7CiAgICAgIHJldHVybiB7CiAgICAgICAgZGF0ZTogaSwKICAgICAgICAuLi5pbmRpY2VzLnJlZHVjZSgoaXRlbSwgbmV4dCkgPT4gewogICAgICAgICAgaXRlbVtuZXh0XSA9IE1hdGgucmFuZG9tKCkgKiAxMDA7CiAgICAgICAgICByZXR1cm4gaXRlbTsKICAgICAgICB9LCB7fSkKICAgICAgfTsKICAgIH0pCiAgfSwKICBzZXJpZXM6IGluZGljZXMubWFwKGluZGV4ID0-IHsKICAgIHJldHVybiB7IHR5cGU6ICdsaW5lJywgbmFtZTogaW5kZXggfTsKICB9KQp9Ow\'" line-highlights="\'\'" />\n<p>产生这个性能问题是因为我们在底层每个系列都会按照其需要处理一遍这个 dataset,然后保存一份处理过后的数据以及维度等元信息。这意味着刚才那个例子中需要处理并保存<code>1000 x 1000</code>个维度的信息,这带来了巨大的内存和垃圾回收的压力,从而导致了高维度的性能的急剧下降。</p>\n<p>在新版本中我们对这个问题做了优化,所有系列都尽可能共享 dataset 的数据(能否共享取决于系列怎么使用这份数据)存储而非每个系列都处理并存储一次,并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸,大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。</p>\n<p>这次优化带来收益的还不只是这种高维的场景,在使用维度不高但是数据量很大的 dataset 的时候,因为数据的共享所以多个系列只处理了一遍数据,因此也可以带来显著的性能提升。</p>\n<h2 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%BC%98%E5%8C%96" tabindex="-1">自定义系列的类型优化</h2>\n<p>自定义系列提供了非常灵活的创建系列图形的方式,相对于其它系列,自定义系列的学习曲线可能有些陡峭,而且容易出错。因此在这个版本中,我们进一步的优化了自定义系列中的核心方法<code>renderItem</code>的类型,对于<code>renderItem</code>的参数和返回值类型做了更精确的推断,从而可以根据返回的图形类型推断出可以设置该图形的哪些属性:</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdjdXN0b20nLAogIHJlbmRlckl0ZW0ocGFyYW1zKSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnZ3JvdXAnLAogICAgICAvLyBncm91cCDnsbvlnovkvb_nlKggY2hpbGRyZW4g5a2Y5YKo5YW25a6D57G75Z6L55qE5a2Q5YWD57SgCiAgICAgIGNoaWxkcmVuOiBbCiAgICAgICAgewogICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAvLyBjaXJjbGUg5oul5pyJ5LiL6Z2i6L-Z5Lqb5Y-v5Lul6YWN572u55qEIHNoYXBlIOWxnuaApwogICAgICAgICAgc2hhcGU6IHsgcjogMTAsIGN4OiAwLCBjeTogMCB9LAogICAgICAgICAgLy8g5Y-v5Lul6YWN572u55qE5qC35byPCiAgICAgICAgICBzdHlsZTogeyBmaWxsOiAncmVkJyB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAncmVjdCcsCiAgICAgICAgICAvLyByZWN0IOaLpeacieS4i-mdoui_meS6m-WPr-S7pemFjee9rueahCBzaGFwZSDlsZ7mgKcKICAgICAgICAgIHNoYXBlOiB7IHg6IDAsIHk6IDAsIHdpZHRoOiAxMDAsIGhlaWdodDogMTAwIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdwYXRoJywKICAgICAgICAgIC8vIOiHquWumuS5iei3r-W-hOWbvuW9ogogICAgICAgICAgc2hhcGU6IHsgZDogJy4uLicgfQogICAgICAgIH0KICAgICAgXQogICAgfTsKICB9Cn07\'" line-highlights="\'\'" />\n<h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2>\n<p>以上我们介绍了 5.2.0 中的新特性以及优化,如果你对其中的一些特性感兴趣,不妨更新到最新版本的 Apache ECharts 亲自体验一下。</p>\n<p>如果你对 Apache ECharts 接下来的计划感兴趣,也可以在 <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a> 关注我们的开发计划。也非常欢迎加入我们的贡献者行列(在 <a href="https://github.com/apache/echarts/wiki">Wiki</a> 中了解更多)。</p>\n<h3 id="%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95" tabindex="-1">版本更新记录</h3>\n<h4 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%94%B9%E5%8A%A8" tabindex="-1">非兼容改动</h4>\n<ul>\n<li>[Fix][pie] 负值会被作为非法值过滤。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n</ul>\n<h4 id="%E6%89%80%E6%9C%89%E6%94%B9%E5%8A%A8" tabindex="-1">所有改动</h4>\n<ul>\n<li><strong>[Feature] 新增全局过渡动画。<a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li>\n<li>[Feature][color] 新增<code>series.colorBy</code>配置不同粒度的取色。<a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][label] 极坐标系柱状图支持标签显示。<a href="https://github.com/ecomfe/zrender/issues/774">#774</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][effectscatter] 新增<code>rippleEffect.number</code>配置涟漪数目。<a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Feature][gauge] 新增<code>pointer.showAbove</code>配置指针和标签的显示层级。<a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Feature][emphasis] <code>emphasis.color</code>支持设置为<code>\'inherit\'</code>关闭高亮。<a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li>\n<li>[Feature][pie] 无数据的时候默认显示灰色的占位圆。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][dataset] 优化高维数据<code>dataset</code>的性能。<a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][axis] 优化时间轴刻度标签的格式化显示。<a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li>\n<li>[Fix][custom] 优化旧代码对于<code>font</code>的兼容性。<a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][memory] 优化实例销毁后依旧持有实例时的内存占用。<a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][line] 优化有无穷大数据时的渐变色显示。 <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][date] 优化<code>date</code>数据的解析。<a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li>\n<li>[Fix][line] 修复渲染出错。<a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][candlestick] 修复样式可能在<code>setOption</code>后丢失的问题。<a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][sankey] 修复垂直布局时的渐变色边。<a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][tooltip] 修复在设置<code>tooltip.position</code>后<code>formatter</code>返回 DOM 对象会被解析成字符串的问题。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][tooltip] <code>formatter</code>返回<code>null</code>时清空内容。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][bar] 标签位置设置为<code>\'middle\'</code>时应该显示在图形中间。<a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][marker] 修复可能会在极坐标柱状图报<code>\'clampData\' is undefined</code>的错误。<a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][treemap] 修复关闭动画后更新可能旧节点不会被移除的问题。<a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li>\n<li>[Fix][tree] 修复更新数据时边可能会不被移除的问题。<a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie/sunburst] 修复<code>borderRadius</code>被设置为<code>null</code>或者<code>undefined</code>时无法重置的问题。<a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][canvas] 修复<code>fillStyle</code>被设置为<code>\'none\'</code>或者<code>null</code>时 FireFox 浏览器下会报警告的问题。 <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][highlight] 修复<code>chart.dispatchAction</code>高亮多个系列可能会不正确的问题。<a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][sankey] 修复使用<code>series.nodes</code>作为数据时拖拽功能失效的问题。<a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li>\n<li>[Fix][svg] 优化导出的 SVG 文件在 Powerpoint 中的兼容性。<a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][legend] 修复<code>text.lineHeight</code>不生效。<a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie] 将默认的<code>itemStyle.borderJoin</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][radar] 将默认的<code>lineStyle.join</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][treemap] 修复设置<code>label.show</code>为<code>false</code>会报错。<a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][pictorialbar] 修复零数据标签的显示问题。<a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][lines] 修复调用<code>chart.clear()</code>可能会无法清除线条的问题。<a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][endlabel] 修复端点标签只设置<code>emphasis.show</code>为<code>true</code>时可能无法显示的问题。<a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][svg] 修复矩形路径没有合并的问题。<a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][treemap] 在回调函数参数中添加<code>treeAncestors</code>属性。<a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][tree] 修复调用<code>setOption</code>两次更新数据时可能报错的问题。<a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][radar] 修复图形边框被缩放的问题。<a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][marker] 修复<code>symbolOffset</code>和<code>symbolKeepAspect</code>配置项不生效的问题。<a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][gauge] 支持进度条和指针的点击事件。<a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li>\n<li>[Fix][tooltip] 优化箭头的边框宽度,跟配置同步。<a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li>\n<li>[Fix][geo] 修复地理坐标组件从<code>show: false</code>配置为<code>show: true</code>后依旧不显示的问题。<a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][type] 优化自定义系列<code>renderItem</code>的类型推断。</li>\n<li>[Fix][type] 优化<code>echarts.init</code>的配置项类型。<a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li>\n<li>[Fix][type] 修复类型中<code>polarIndex</code>配置项丢失的问题。<a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][type] 优化 SVG 数据源的类型。<a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li>\n<li>[Fix][type] 优化饼图和地图系列中的数据类型。<a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n</ul>\n',postPath:"zh/basics/release-note/5-2-0"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:s,children:[{title:"获取 ECharts",dir:h},{title:"在项目中引入 ECharts",dir:c},{title:"资源列表",dir:o,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:d},{title:"版本特性",dir:l,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:A}]}]},{title:"概念篇",dir:n,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:B},{title:"数据转换",dir:f},{title:"坐标系",dir:w,draft:i},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:F},{title:"事件与行为",dir:E}]},{title:"应用篇",dir:y,children:[{title:"常用图表类型",dir:Z,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:J},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:K,draft:i},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:v},{title:"区域面积图",dir:S},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:L},{title:"圆环图",dir:O},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:k,children:[{title:"基础散点图",dir:z}]}]},{title:N,dir:e,draft:i},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:j,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:N,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:g},{title:"Basics",dir:s,children:[{title:"Download ECharts",dir:h},{title:"Import ECharts",dir:c},{title:"Resources",dir:o,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:d},{title:"What's New",dir:l,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:A}]}]},{title:"Concepts",dir:n,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:B},{title:"Data Transform",dir:f},{title:"Coordinate",dir:w,draft:i},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:F},{title:"Event and Action",dir:E}]},{title:"How To Guides",dir:y,children:[{title:"Common Charts",dir:Z,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:J},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:K,draft:i},{title:"Waterfall",dir:X}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:v},{title:"Area Chart",dir:S},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:L},{title:"Ring Style",dir:O},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:k,children:[{title:"Basic Scatter",dir:z}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:j,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/basics/release-note/5-2-0",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2> <p>以上我们介绍了 5.2.0 中的新特性以及优化,如果你对其中的一些特性感兴趣,不妨更新到最新版本的 Apache ECharts 亲自体验一下。</p> <p>如果你对 Apache ECharts 接下来的计划感兴趣,也可以在 <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a> 关注我们的开发计划。也非常欢迎加入我们的贡献者行列(在 <a href="https://github.com/apache/echarts/wiki">Wiki</a> 中了解更多)。</p> <h3 id="%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95" tabindex="-1">版本更新记录</h3> <h4 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%94%B9%E5%8A%A8" tabindex="-1">非兼容改动</h4> <ul><li>[Fix][pie] 负值会被作为非法值过滤。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li></ul> <h4 id="%E6%89%80%E6%9C%89%E6%94%B9%E5%8A%A8" tabindex="-1">所有改动</h4> <ul><li><strong>[Feature] 新增全局过渡动画。<a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li> <li>[Feature][color] 新增<code>series.colorBy</code>配置不同粒度的取色。<a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][label] 极坐标系柱状图支持标签显示。<a href="https://github.com/ecomfe/zrender/issues/774">#774</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][effectscatter] 新增<code>rippleEffect.number</code>配置涟漪数目。<a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Feature][gauge] 新增<code>pointer.showAbove</code>配置指针和标签的显示层级。<a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Feature][emphasis] <code>emphasis.color</code>支持设置为<code>'inherit'</code>关闭高亮。<a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li> <li>[Feature][pie] 无数据的时候默认显示灰色的占位圆。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][dataset] 优化高维数据<code>dataset</code>的性能。<a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][axis] 优化时间轴刻度标签的格式化显示。<a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li> <li>[Fix][custom] 优化旧代码对于<code>font</code>的兼容性。<a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][memory] 优化实例销毁后依旧持有实例时的内存占用。<a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][line] 优化有无穷大数据时的渐变色显示。 <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][date] 优化<code>date</code>数据的解析。<a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li> <li>[Fix][line] 修复渲染出错。<a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][candlestick] 修复样式可能在<code>setOption</code>后丢失的问题。<a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][sankey] 修复垂直布局时的渐变色边。<a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][tooltip] 修复在设置<code>tooltip.position</code>后<code>formatter</code>返回 DOM 对象会被解析成字符串的问题。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][tooltip] <code>formatter</code>返回<code>null</code>时清空内容。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][bar] 标签位置设置为<code>'middle'</code>时应该显示在图形中间。<a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][marker] 修复可能会在极坐标柱状图报<code>'clampData' is undefined</code>的错误。<a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][treemap] 修复关闭动画后更新可能旧节点不会被移除的问题。<a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li> <li>[Fix][tree] 修复更新数据时边可能会不被移除的问题。<a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie/sunburst] 修复<code>borderRadius</code>被设置为<code>null</code>或者<code>undefined</code>时无法重置的问题。<a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][canvas] 修复<code>fillStyle</code>被设置为<code>'none'</code>或者<code>null</code>时 FireFox 浏览器下会报警告的问题。 <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][highlight] 修复<code>chart.dispatchAction</code>高亮多个系列可能会不正确的问题。<a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][sankey] 修复使用<code>series.nodes</code>作为数据时拖拽功能失效的问题。<a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li> <li>[Fix][svg] 优化导出的 SVG 文件在 Powerpoint 中的兼容性。<a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][legend] 修复<code>text.lineHeight</code>不生效。<a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie] 将默认的<code>itemStyle.borderJoin</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][radar] 将默认的<code>lineStyle.join</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][treemap] 修复设置<code>label.show</code>为<code>false</code>会报错。<a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][pictorialbar] 修复零数据标签的显示问题。<a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][lines] 修复调用<code>chart.clear()</code>可能会无法清除线条的问题。<a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][endlabel] 修复端点标签只设置<code>emphasis.show</code>为<code>true</code>时可能无法显示的问题。<a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][svg] 修复矩形路径没有合并的问题。<a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][treemap] 在回调函数参数中添加<code>treeAncestors</code>属性。<a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][tree] 修复调用<code>setOption</code>两次更新数据时可能报错的问题。<a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][radar] 修复图形边框被缩放的问题。<a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][marker] 修复<code>symbolOffset</code>和<code>symbolKeepAspect</code>配置项不生效的问题。<a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][gauge] 支持进度条和指针的点击事件。<a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li> <li>[Fix][tooltip] 优化箭头的边框宽度,跟配置同步。<a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li> <li>[Fix][geo] 修复地理坐标组件从<code>show: false</code>配置为<code>show: true</code>后依旧不显示的问题。<a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][type] 优化自定义系列<code>renderItem</code>的类型推断。</li> <li>[Fix][type] 优化<code>echarts.init</code>的配置项类型。<a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li> <li>[Fix][type] 修复类型中<code>polarIndex</code>配置项丢失的问题。<a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][type] 优化 SVG 数据源的类型。<a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li> <li>[Fix][type] 优化饼图和地图系列中的数据类型。<a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</li></ul></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/release-note/5-2-0.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,a,g,s,h,c,o,I,d,l,C,r,A,n,p,u,b,m,B,f,w,G,F,E,y,Z,H,J,W,K,X,R,Y,v,S,x,V,L,O,D,k,z,N,T,U,M,Q,j,P,q,_,$,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5.2.0-%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.2.0 介绍</h1>\n<h2 id="%E5%85%A8%E5%B1%80%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">全局过渡动画</h2>\n<p>在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变,不仅仅可以改善视觉效果,更为表达数据的关联和演变提供了可能。因此,在 5.2.0 中,我们进一步将过渡动画从表现系列内部数据的变化,泛化到全局能力。接下来,我们会看到这种<strong>全局过渡动画 Universal Transition</strong>是如何为图表增加表现力和叙事能力的。</p>\n<p>在之前的版本中,过渡动画有一定的局限性:只能用于相同类型的图形的位置、尺寸、形状,而且只能作用在相同类型的系列上。比如,下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化:</p>\n<md-live lang="js" code="\'ZnVuY3Rpb24gbWFrZVJhbmRvbURhdGEoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdBJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdCJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdDJwogICAgfQogIF07Cn0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiBbMCwgJzUwJSddLAogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgXQp9OwoKc2V0SW50ZXJ2YWwoKCkgPT4gewogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogewogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgfSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'lr\'}" />\n<p>而从 5.2.0 开始,我们引入了更强大的全局过渡动画能力,让过渡动画不再局限于相同类型的系列之间。现在,我们可以使用这种跨系列的形变,为任意类型的系列和任意类型的图形做形变动画。</p>\n<p>这会有多酷呢?我们一起来感受一下!</p>\n<h3 id="%E8%B7%A8%E7%B3%BB%E5%88%97%E7%9A%84%E5%BD%A2%E5%8F%98%E5%8A%A8%E7%94%BB" tabindex="-1">跨系列的形变动画</h3>\n<p>在设置<code>universalTransition: true</code>开启全局过渡动画后,从饼图切换成柱状图,或者从柱状图切换成散点图,甚至旭日图和矩形树图这类复杂的图表之间,都可以通过形变的方式自然的进行动画过渡。</p>\n<p>如下,饼图和柱状图之间的切换:</p>\n<md-live lang="js" code="\'Y29uc3QgZGF0YXNldCA9IHsKICBkaW1lbnNpb25zOiBbJ25hbWUnLCAnc2NvcmUnXSwKICBzb3VyY2U6IFsKICAgIFsnSGFubmFoIEtyYXVzZScsIDMxNF0sCiAgICBbJ1poYW8gUWlhbicsIDM1MV0sCiAgICBbJ0phc21pbiBLcmF1c2UgJywgMjg3XSwKICAgIFsnTGkgTGVpJywgMjE5XSwKICAgIFsnS2FybGUgTmV1bWFubicsIDI1M10sCiAgICBbJ01pYSBOZXVtYW5uJywgMTY1XSwKICAgIFsnQsO2aG0gRnVjaHMnLCAzMThdLAogICAgWydIYW4gTWVpbWVpJywgMzY2XQogIF0KfTsKY29uc3QgcGllT3B0aW9uID0gewogIGRhdGFzZXQ6IFtkYXRhc2V0XSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIOmAmui_hyBpZCDlhbPogZTpnIDopoHov4fmuKHliqjnlLvnmoTns7vliJcKICAgICAgaWQ6ICdTY29yZScsCiAgICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CmNvbnN0IGJhck9wdGlvbiA9IHsKICBkYXRhc2V0OiBbZGF0YXNldF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIOmAmui_hyBpZCDlhbPogZTpnIDopoHov4fmuKHliqjnlLvnmoTns7vliJcKICAgICAgaWQ6ICdTY29yZScsCiAgICAgIC8vIOavj-S4quaVsOaNrumDveaYr-eUqOS4jeWQjOeahOminOiJsgogICAgICBjb2xvckJ5OiAnZGF0YScsCiAgICAgIGVuY29kZTogeyB4OiAnbmFtZScsIHk6ICdzY29yZScgfSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CgpvcHRpb24gPSBiYXJPcHRpb247CgpzZXRJbnRlcnZhbCgoKSA9PiB7CiAgb3B0aW9uID0gb3B0aW9uID09PSBwaWVPcHRpb24gPyBiYXJPcHRpb24gOiBwaWVPcHRpb247CiAgLy8g5L2_55SoIG5vdE1lcmdlIOeahOW9ouW8j-WPr-S7peenu-mZpOWdkOagh-i9tAogIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbiwgdHJ1ZSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'bt\'}" />\n<p>更多的常见基础图表之间的过渡:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition.gif"></p>\n<p>这样的动画过渡不再仅仅局限于基础的折、柱、饼中,在柱状图和地图之间:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-2.gif"></p>\n<p>或者旭日图和矩形树图之间,甚至非常灵活的自定义系列之间都可以进行动画的过渡。</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-3.gif"></p>\n<blockquote>\n<p>注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应。</p>\n</blockquote>\n<h3 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%88%86%E8%A3%82%E5%92%8C%E5%90%88%E5%B9%B6%E5%8A%A8%E7%94%BB" tabindex="-1">数据的分裂和合并动画</h3>\n<p>除了常见的数据值的更新,有时候我们还会碰到数据的聚合、下钻等交互后的更新,这个时候我们就不能直接应用一对一的动画过渡,而需要使用更多像分裂、合并这样的动画效果,来通过正确的图形动画表达出数据的变换。</p>\n<p>为了能够表达数据之间可能存在的多对多联系,在 5.2.0 中我们新引入了一个数据组<code>groupId</code>的概念,我们可以通过 <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a> 设置整个系列所属的组,或者更细粒度的通过 <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.data.groupId</a> 设置每个数据所属的组。如果你使用了<code>dataset</code>管理数据则更方便了,可以使用<code>encode.itemGroupId</code>来指定一个维度编码成<code>groupId</code>。</p>\n<p>比如我们要实现一个柱状图下钻的动画,可以将下钻后的整个系列的数据都设置同一个<code>groupId</code>,然后跟下钻前的数据对应起来:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0FuaW1hbHMnLCAnRnJ1aXRzJywgJ0NhcnMnXQogIH0sCiAgeUF4aXM6IHt9LAogIGRhdGFHcm91cElkOiAnJywKICBhbmltYXRpb25EdXJhdGlvblVwZGF0ZTogNTAwLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBpZDogJ3NhbGVzJywKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiA1LAogICAgICAgIGdyb3VwSWQ6ICdhbmltYWxzJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDIsCiAgICAgICAgZ3JvdXBJZDogJ2ZydWl0cycKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiA0LAogICAgICAgIGdyb3VwSWQ6ICdjYXJzJwogICAgICB9CiAgICBdLAogICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogewogICAgICBlbmFibGVkOiB0cnVlLAogICAgICBkaXZpZGVTaGFwZTogJ2Nsb25lJwogICAgfQogIH0KfTsKCmNvbnN0IGRyaWxsZG93bkRhdGEgPSBbCiAgewogICAgZGF0YUdyb3VwSWQ6ICdhbmltYWxzJywKICAgIGRhdGE6IFsKICAgICAgWydDYXRzJywgNF0sCiAgICAgIFsnRG9ncycsIDJdLAogICAgICBbJ0Nvd3MnLCAxXSwKICAgICAgWydTaGVlcCcsIDJdLAogICAgICBbJ1BpZ3MnLCAxXQogICAgXQogIH0sCiAgewogICAgZGF0YUdyb3VwSWQ6ICdmcnVpdHMnLAogICAgZGF0YTogWwogICAgICBbJ0FwcGxlcycsIDRdLAogICAgICBbJ09yYW5nZXMnLCAyXQogICAgXQogIH0sCiAgewogICAgZGF0YUdyb3VwSWQ6ICdjYXJzJywKICAgIGRhdGE6IFsKICAgICAgWydUb3lvdGEnLCA0XSwKICAgICAgWydPcGVsJywgMl0sCiAgICAgIFsnVm9sa3N3YWdlbicsIDJdCiAgICBdCiAgfQpdOwoKbXlDaGFydC5vbignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LmRhdGEpIHsKICAgIGNvbnN0IHN1YkRhdGEgPSBkcmlsbGRvd25EYXRhLmZpbmQoZGF0YSA9PiB7CiAgICAgIHJldHVybiBkYXRhLmRhdGFHcm91cElkID09PSBldmVudC5kYXRhLmdyb3VwSWQ7CiAgICB9KTsKICAgIGlmICghc3ViRGF0YSkgewogICAgICByZXR1cm47CiAgICB9CiAgICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICAgIHhBeGlzOiB7CiAgICAgICAgZGF0YTogc3ViRGF0YS5kYXRhLm1hcChpdGVtID0-IHsKICAgICAgICAgIHJldHVybiBpdGVtWzBdOwogICAgICAgIH0pCiAgICAgIH0sCiAgICAgIHNlcmllczogewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGlkOiAnc2FsZXMnLAogICAgICAgIGRhdGFHcm91cElkOiBzdWJEYXRhLmRhdGFHcm91cElkLAogICAgICAgIGRhdGE6IHN1YkRhdGEuZGF0YS5tYXAoaXRlbSA9PiB7CiAgICAgICAgICByZXR1cm4gaXRlbVsxXTsKICAgICAgICB9KSwKICAgICAgICB1bml2ZXJzYWxUcmFuc2l0aW9uOiB7CiAgICAgICAgICBlbmFibGVkOiB0cnVlLAogICAgICAgICAgZGl2aWRlU2hhcGU6ICdjbG9uZScKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGdyYXBoaWM6IFsKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAndGV4dCcsCiAgICAgICAgICBsZWZ0OiA1MCwKICAgICAgICAgIHRvcDogMjAsCiAgICAgICAgICBzdHlsZTogewogICAgICAgICAgICB0ZXh0OiAnQmFjaycsCiAgICAgICAgICAgIGZvbnRTaXplOiAxOAogICAgICAgICAgfSwKICAgICAgICAgIG9uY2xpY2s6IGZ1bmN0aW9uKCkgewogICAgICAgICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24sIHRydWUpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgXQogICAgfSk7CiAgfQp9KTs\'" v-bind="{layout: \'lr\'}" />\n<p>通过<code>groupId</code>,我们还可以实现更丰富的聚合,下钻动画。</p>\n<p>数据的聚合:</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition.gif"></p>\n<p>单系列下钻成两个系列:</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition-2.gif"></p>\n<p>全局过渡动画使得数据的关系和演变的表达能力走上新的台阶,为你的可视化创作灵感插上翅膀。</p>\n<p>看到这里,我们知道你已经跃跃欲试了。但是别急,5.2.0 还有更多值得一看的新功能。</p>\n<h2 id="%E8%B0%83%E8%89%B2%E7%9B%98%E7%9A%84%E5%8F%96%E8%89%B2%E7%AD%96%E7%95%A5" tabindex="-1">调色盘的取色策略</h2>\n<p>在上面全局过渡动画的示例中,大家可能有注意到我们使用了一个之前版本没有的<code>colorBy</code>配置项,这个配置项也是我们这个版本新增加的一个特性,用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略:</p>\n<ul>\n<li><code>\'series\'</code> 按照系列分配调色盘中的颜色,同一系列中的所有数据都是用相同的颜色。</li>\n<li><code>\'data\'</code> 按照数据项分配调色盘中的颜色,每个数据项都使用不同的颜色。</li>\n</ul>\n<p>在之前我们是按照系列的类型固定了这个策略,比如柱状图就是固定<code>\'series\'</code>的策略,而饼图则是固定<code>\'data\'</code>的策略。</p>\n<p>而现在新增这个配置项后,我们可以在柱状图中给每个数据项都分配不同的颜色:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBjb2xvckJ5OiAnZGF0YScKICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>或者在饼图中统一使用一个颜色:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBjb2xvckJ5OiAnc2VyaWVzJywKICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgIGl0ZW1TdHlsZTogewogICAgICBib3JkZXJDb2xvcjogJyNmZmYnLAogICAgICBib3JkZXJXaWR0aDogMQogICAgfSwKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgbmFtZTogJ0RpcmVjdCBWaXNpdCcKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiAyMzQsCiAgICAgICAgbmFtZTogJ1VuaW9uIEFkJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgIH0KICAgIF0KICB9Cn07\'" v-bind="{layout: \'lr\'}" />\n<p>这一配置项可以让我们避免了去找调色盘颜色然后去一一设置的麻烦,可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强,提供更多的调色盘取色的策略。</p>\n<h2 id="%E6%9E%81%E5%9D%90%E6%A0%87%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E6%A0%87%E7%AD%BE" tabindex="-1">极坐标柱状图的标签</h2>\n<p>这个版本中我们实现了极坐标上的柱状图的标签,并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGFuZ2xlQXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtYXg6IDEwCiAgfSwKICByYWRpdXNBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ0FBQScsICdCQkInLCAnQ0NDJywgJ0RERCddCiAgfSwKICBwb2xhcjoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMywgNCwgNSwgNl0sCiAgICAgIGNvbG9yQnk6ICdkYXRhJywKICAgICAgcm91bmRDYXA6IHRydWUsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDor5Xor5XmlLnmiJAgJ2luc2lkZVN0YXJ0JwogICAgICAgIHBvc2l0aW9uOiAnc3RhcnQnLAogICAgICAgIGZvcm1hdHRlcjogJ3tifScKICAgICAgfSwKICAgICAgY29vcmRpbmF0ZVN5c3RlbTogJ3BvbGFyJwogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>更多标签位置的配置:</p>\n<p><img src="" alt="" data-src="images/5-2-0/polar-bar-label.jpg"></p>\n<p>这一灵活的标签位置配置项大大丰富了极坐标柱状图的表达能力,让文字清晰地匹配对应的数据。</p>\n<h2 id="%E7%A9%BA%E6%95%B0%E6%8D%AE%E7%9A%84%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F" tabindex="-1">空数据的饼图样式</h2>\n<p>在之前的版本中,如果饼图没有数据,画面中可能就是完全空白的。因为没有任何的视觉元素,所以用户会疑惑是不是出现了 bug 导致图中没有内容。</p>\n<p>为了解决这个问题,这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过<code>emptyCircleStyle</code>配置这个占位圆的样式。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogW10sCiAgICAgIC8vIHNob3dFbXB0eUNpcmNsZTogZmFsc2UsCiAgICAgIGVtcHR5Q2lyY2xlU3R5bGU6IHsKICAgICAgICAvLyDlsIbmoLflvI_mlLnkuLrnqbrlv4PlnIYKICAgICAgICBjb2xvcjogJ3RyYW5zcGFyZW50JywKICAgICAgICBib3JkZXJDb2xvcjogJyNkZGQnLAogICAgICAgIGJvcmRlcldpZHRoOiAxCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>如果不想要显示这个灰色的圆,也可以设置<code>showEmptyCircle: false</code>关闭。</p>\n<h2 id="%E9%AB%98%E7%BB%B4%E6%95%B0%E6%8D%AE%E7%9A%84%E6%80%A7%E8%83%BD%E5%A2%9E%E5%BC%BA" tabindex="-1">高维数据的性能增强</h2>\n<p>我们从 4.0 开始引入了 <a href="https://echarts.apache.org/option.html#dataset">dataset</a> 用来管理图表的数据,通常情况下<code>dataset</code>提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维(>100)数据的场景下,我们还是会碰到一些性能急剧下降的问题,比如下面这种通过一千个系列去可视化千维数据的场景(<a href="https://github.com/apache/echarts/issues/11907">#11907</a>),甚至可能会卡住。</p>\n<md-code-block lang="js" code="\'Y29uc3QgaW5kaWNlcyA9IEFycmF5LmZyb20oQXJyYXkoMTAwMCksIChfLCBpKSA9PiB7CiAgcmV0dXJuIGBpbmRleCR7aX1gOwp9KTsKY29uc3Qgb3B0aW9uID0gewogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgZGF0YXNldDogewogICAgLy8gZGltZW5zaW9uOiBbJ2RhdGUnLCAuLi5pbmRpY2VzXSwKICAgIHNvdXJjZTogQXJyYXkuZnJvbShBcnJheSgxMCksIChfLCBpKSA9PiB7CiAgICAgIHJldHVybiB7CiAgICAgICAgZGF0ZTogaSwKICAgICAgICAuLi5pbmRpY2VzLnJlZHVjZSgoaXRlbSwgbmV4dCkgPT4gewogICAgICAgICAgaXRlbVtuZXh0XSA9IE1hdGgucmFuZG9tKCkgKiAxMDA7CiAgICAgICAgICByZXR1cm4gaXRlbTsKICAgICAgICB9LCB7fSkKICAgICAgfTsKICAgIH0pCiAgfSwKICBzZXJpZXM6IGluZGljZXMubWFwKGluZGV4ID0-IHsKICAgIHJldHVybiB7IHR5cGU6ICdsaW5lJywgbmFtZTogaW5kZXggfTsKICB9KQp9Ow\'" line-highlights="\'\'" />\n<p>产生这个性能问题是因为我们在底层每个系列都会按照其需要处理一遍这个 dataset,然后保存一份处理过后的数据以及维度等元信息。这意味着刚才那个例子中需要处理并保存<code>1000 x 1000</code>个维度的信息,这带来了巨大的内存和垃圾回收的压力,从而导致了高维度的性能的急剧下降。</p>\n<p>在新版本中我们对这个问题做了优化,所有系列都尽可能共享 dataset 的数据(能否共享取决于系列怎么使用这份数据)存储而非每个系列都处理并存储一次,并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸,大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。</p>\n<p>这次优化带来收益的还不只是这种高维的场景,在使用维度不高但是数据量很大的 dataset 的时候,因为数据的共享所以多个系列只处理了一遍数据,因此也可以带来显著的性能提升。</p>\n<h2 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%BC%98%E5%8C%96" tabindex="-1">自定义系列的类型优化</h2>\n<p>自定义系列提供了非常灵活的创建系列图形的方式,相对于其它系列,自定义系列的学习曲线可能有些陡峭,而且容易出错。因此在这个版本中,我们进一步的优化了自定义系列中的核心方法<code>renderItem</code>的类型,对于<code>renderItem</code>的参数和返回值类型做了更精确的推断,从而可以根据返回的图形类型推断出可以设置该图形的哪些属性:</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdjdXN0b20nLAogIHJlbmRlckl0ZW0ocGFyYW1zKSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnZ3JvdXAnLAogICAgICAvLyBncm91cCDnsbvlnovkvb_nlKggY2hpbGRyZW4g5a2Y5YKo5YW25a6D57G75Z6L55qE5a2Q5YWD57SgCiAgICAgIGNoaWxkcmVuOiBbCiAgICAgICAgewogICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAvLyBjaXJjbGUg5oul5pyJ5LiL6Z2i6L-Z5Lqb5Y-v5Lul6YWN572u55qEIHNoYXBlIOWxnuaApwogICAgICAgICAgc2hhcGU6IHsgcjogMTAsIGN4OiAwLCBjeTogMCB9LAogICAgICAgICAgLy8g5Y-v5Lul6YWN572u55qE5qC35byPCiAgICAgICAgICBzdHlsZTogeyBmaWxsOiAncmVkJyB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAncmVjdCcsCiAgICAgICAgICAvLyByZWN0IOaLpeacieS4i-mdoui_meS6m-WPr-S7pemFjee9rueahCBzaGFwZSDlsZ7mgKcKICAgICAgICAgIHNoYXBlOiB7IHg6IDAsIHk6IDAsIHdpZHRoOiAxMDAsIGhlaWdodDogMTAwIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdwYXRoJywKICAgICAgICAgIC8vIOiHquWumuS5iei3r-W-hOWbvuW9ogogICAgICAgICAgc2hhcGU6IHsgZDogJy4uLicgfQogICAgICAgIH0KICAgICAgXQogICAgfTsKICB9Cn07\'" line-highlights="\'\'" />\n<h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2>\n<p>以上我们介绍了 5.2.0 中的新特性以及优化,如果你对其中的一些特性感兴趣,不妨更新到最新版本的 Apache ECharts 亲自体验一下。</p>\n<p>如果你对 Apache ECharts 接下来的计划感兴趣,也可以在 <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a> 关注我们的开发计划。也非常欢迎加入我们的贡献者行列(在 <a href="https://github.com/apache/echarts/wiki">Wiki</a> 中了解更多)。</p>\n<h3 id="%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95" tabindex="-1">版本更新记录</h3>\n<h4 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%94%B9%E5%8A%A8" tabindex="-1">非兼容改动</h4>\n<ul>\n<li>[Fix][pie] 负值会被作为非法值过滤。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n</ul>\n<h4 id="%E6%89%80%E6%9C%89%E6%94%B9%E5%8A%A8" tabindex="-1">所有改动</h4>\n<ul>\n<li><strong>[Feature] 新增全局过渡动画。<a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li>\n<li>[Feature][color] 新增<code>series.colorBy</code>配置不同粒度的取色。<a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][label] 极坐标系柱状图支持标签显示。<a href="https://github.com/ecomfe/zrender/issues/774">#774</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][effectscatter] 新增<code>rippleEffect.number</code>配置涟漪数目。<a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Feature][gauge] 新增<code>pointer.showAbove</code>配置指针和标签的显示层级。<a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Feature][emphasis] <code>emphasis.color</code>支持设置为<code>\'inherit\'</code>关闭高亮。<a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li>\n<li>[Feature][pie] 无数据的时候默认显示灰色的占位圆。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][dataset] 优化高维数据<code>dataset</code>的性能。<a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][axis] 优化时间轴刻度标签的格式化显示。<a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li>\n<li>[Fix][custom] 优化旧代码对于<code>font</code>的兼容性。<a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][memory] 优化实例销毁后依旧持有实例时的内存占用。<a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][line] 优化有无穷大数据时的渐变色显示。 <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][date] 优化<code>date</code>数据的解析。<a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li>\n<li>[Fix][line] 修复渲染出错。<a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][candlestick] 修复样式可能在<code>setOption</code>后丢失的问题。<a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][sankey] 修复垂直布局时的渐变色边。<a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][tooltip] 修复在设置<code>tooltip.position</code>后<code>formatter</code>返回 DOM 对象会被解析成字符串的问题。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][tooltip] <code>formatter</code>返回<code>null</code>时清空内容。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][bar] 标签位置设置为<code>\'middle\'</code>时应该显示在图形中间。<a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][marker] 修复可能会在极坐标柱状图报<code>\'clampData\' is undefined</code>的错误。<a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][treemap] 修复关闭动画后更新可能旧节点不会被移除的问题。<a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li>\n<li>[Fix][tree] 修复更新数据时边可能会不被移除的问题。<a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie/sunburst] 修复<code>borderRadius</code>被设置为<code>null</code>或者<code>undefined</code>时无法重置的问题。<a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][canvas] 修复<code>fillStyle</code>被设置为<code>\'none\'</code>或者<code>null</code>时 FireFox 浏览器下会报警告的问题。 <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][highlight] 修复<code>chart.dispatchAction</code>高亮多个系列可能会不正确的问题。<a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][sankey] 修复使用<code>series.nodes</code>作为数据时拖拽功能失效的问题。<a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li>\n<li>[Fix][svg] 优化导出的 SVG 文件在 Powerpoint 中的兼容性。<a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][legend] 修复<code>text.lineHeight</code>不生效。<a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie] 将默认的<code>itemStyle.borderJoin</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][radar] 将默认的<code>lineStyle.join</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][treemap] 修复设置<code>label.show</code>为<code>false</code>会报错。<a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][pictorialbar] 修复零数据标签的显示问题。<a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][lines] 修复调用<code>chart.clear()</code>可能会无法清除线条的问题。<a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][endlabel] 修复端点标签只设置<code>emphasis.show</code>为<code>true</code>时可能无法显示的问题。<a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][svg] 修复矩形路径没有合并的问题。<a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][treemap] 在回调函数参数中添加<code>treeAncestors</code>属性。<a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][tree] 修复调用<code>setOption</code>两次更新数据时可能报错的问题。<a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][radar] 修复图形边框被缩放的问题。<a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][marker] 修复<code>symbolOffset</code>和<code>symbolKeepAspect</code>配置项不生效的问题。<a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][gauge] 支持进度条和指针的点击事件。<a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li>\n<li>[Fix][tooltip] 优化箭头的边框宽度,跟配置同步。<a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li>\n<li>[Fix][geo] 修复地理坐标组件从<code>show: false</code>配置为<code>show: true</code>后依旧不显示的问题。<a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][type] 优化自定义系列<code>renderItem</code>的类型推断。</li>\n<li>[Fix][type] 优化<code>echarts.init</code>的配置项类型。<a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li>\n<li>[Fix][type] 修复类型中<code>polarIndex</code>配置项丢失的问题。<a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][type] 优化 SVG 数据源的类型。<a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li>\n<li>[Fix][type] 优化饼图和地图系列中的数据类型。<a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n</ul>\n',postPath:"zh/basics/release-note/5-2-0"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:s,children:[{title:"获取 ECharts",dir:h},{title:"在项目中引入 ECharts",dir:c},{title:"资源列表",dir:o,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:d},{title:"版本特性",dir:l,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:A}]}]},{title:"概念篇",dir:n,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:B},{title:"数据转换",dir:f},{title:"坐标系",dir:w,draft:i},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:F},{title:"事件与行为",dir:E}]},{title:"应用篇",dir:y,children:[{title:"常用图表类型",dir:Z,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:J},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:K,draft:i},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:v},{title:"区域面积图",dir:S},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:L},{title:"圆环图",dir:O},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:k,children:[{title:"基础散点图",dir:z}]}]},{title:N,dir:e,draft:i},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:j,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:N,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:g},{title:"Basics",dir:s,children:[{title:"Download ECharts",dir:h},{title:"Import ECharts",dir:c},{title:"Resources",dir:o,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:d},{title:"What's New",dir:l,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:A}]}]},{title:"Concepts",dir:n,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:B},{title:"Data Transform",dir:f},{title:"Coordinate",dir:w,draft:i},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:F},{title:"Event and Action",dir:E}]},{title:"How To Guides",dir:y,children:[{title:"Common Charts",dir:Z,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:J},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:K,draft:i},{title:"Waterfall",dir:X}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:v},{title:"Area Chart",dir:S},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:L},{title:"Ring Style",dir:O},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:k,children:[{title:"Basic Scatter",dir:z}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:j,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/basics/release-note/5-2-0",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/basics/release-note/v5-feature/index.html b/handbook/zh/basics/release-note/v5-feature/index.html
index 2219f22..f40075c 100644
--- a/handbook/zh/basics/release-note/v5-feature/index.html
+++ b/handbook/zh/basics/release-note/v5-feature/index.html
@@ -4,14 +4,15 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" 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">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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>对于数据区域缩放,时间轴等交互组件,我们也设计了全新的样式并且提供了更好的交互体验:</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>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" 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">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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>对于数据区域缩放,时间轴等交互组件,我们也设计了全新的样式并且提供了更好的交互体验:</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>
locale<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">DefinityTyped</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/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,n,h,l,p,s,c,E,o,g,m,A,B,b,C,f,x,u,w,v,y,D,S,R,k,P,F,T,L,G,I,V,z,W,M,H,O,_,K,U,Z,Y,j,N,J,Q,X,$,q,tt,et,it){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>对于数据区域缩放,时间轴等交互组件,我们也设计了全新的样式并且提供了更好的交互体验:</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">DefinityTyped</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"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:l,draft:t},{title:"获取灵感",dir:p},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:E},{title:"ECharts 5 升级指南",dir:o},{title:5.2,dir:g}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:B,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:C},{title:"数据集",dir:f},{title:"数据转换",dir:x},{title:"坐标系",dir:u,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:i},{title:"图例",dir:v},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:D,children:[{title:"常用图表类型",dir:S,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:k},{title:"动态排序柱状图",dir:P},{title:"极坐标系柱状图",dir:F,draft:t},{title:"阶梯瀑布图",dir:T},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:I},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:W}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:_,children:[{title:"基础散点图",dir:K}]}]},{title:U,dir:e,draft:t},{title:"跨平台方案",dir:Z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Y}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:X,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:U,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:h},{title:"Resources",dir:l,draft:t},{title:"Inspiration",dir:p},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:E},{title:"ECharts 5 Upgrade Guide",dir:o},{title:5.2,dir:g}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:f},{title:"Data Transform",dir:x},{title:"Coordinate",dir:u,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:i},{title:"Legend",dir:v},{title:"Event and Action",dir:y}]},{title:"How To Guides",dir:D,children:[{title:"Common Charts",dir:S,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:k},{title:"Bar Racing",dir:P},{title:"Bar Polar",dir:F,draft:t},{title:"Waterfall",dir:T}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:I},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:W}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:H},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:_,children:[{title:"Basic Scatter",dir:K}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:Z,children:[{title:"Server Side Rendering",dir:Y}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:X,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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">DefinityTyped</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/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,n,h,l,p,s,c,E,o,g,m,A,B,b,C,f,x,u,w,v,y,D,S,R,k,P,F,T,L,G,I,V,z,W,M,H,O,_,K,U,Z,Y,j,N,J,Q,X,$,q,tt,et,it){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>对于数据区域缩放,时间轴等交互组件,我们也设计了全新的样式并且提供了更好的交互体验:</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">DefinityTyped</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"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:l,draft:t},{title:"获取灵感",dir:p},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:E},{title:"ECharts 5 升级指南",dir:o},{title:5.2,dir:g}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:B,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:C},{title:"数据集",dir:f},{title:"数据转换",dir:x},{title:"坐标系",dir:u,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:i},{title:"图例",dir:v},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:D,children:[{title:"常用图表类型",dir:S,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:k},{title:"动态排序柱状图",dir:P},{title:"极坐标系柱状图",dir:F,draft:t},{title:"阶梯瀑布图",dir:T},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:I},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:W}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:_,children:[{title:"基础散点图",dir:K}]}]},{title:U,dir:e,draft:t},{title:"跨平台方案",dir:Z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Y}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:X,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:U,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:h},{title:"Resources",dir:l,draft:t},{title:"Inspiration",dir:p},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:E},{title:"ECharts 5 Upgrade Guide",dir:o},{title:5.2,dir:g}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:f},{title:"Data Transform",dir:x},{title:"Coordinate",dir:u,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:i},{title:"Legend",dir:v},{title:"Event and Action",dir:y}]},{title:"How To Guides",dir:D,children:[{title:"Common Charts",dir:S,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:k},{title:"Bar Racing",dir:P},{title:"Bar Polar",dir:F,draft:t},{title:"Waterfall",dir:T}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:I},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:W}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:H},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:_,children:[{title:"Basic Scatter",dir:K}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:Z,children:[{title:"Server Side Rendering",dir:Y}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:X,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},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:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/basics/release-note/v5-upgrade-guide/index.html b/handbook/zh/basics/release-note/v5-upgrade-guide/index.html
index a628bb0..5f86d28 100644
--- a/handbook/zh/basics/release-note/v5-upgrade-guide/index.html
+++ b/handbook/zh/basics/release-note/v5-upgrade-guide/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" 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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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-%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97" tabindex="-1">Apache ECharts 5 升级指南</h1> <p>本指南面向那些希望将 echarts 4.x(以下简称 <code>v4</code>)升级到 echarts 5.x(以下简称 <code>v5</code>)的用户。大家可以在 <a href="zh/basics/release-note/v5-feature">ECharts 5 新特性</a> 中了解这次<code>v5</code>带来了哪些值得升级的新特性。在绝大多数情况下,开发者用不着为这个升级做什么额外的事,因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是,<code>v5</code> 仍然带来了一些非兼容改动,需要特别关注。此外,在一些情况下,<code>v5</code> 提供了更好的 API 用来取代之前的 API,这些被取代的 API 将不再被推荐使用(当然,我们尽量兼容了这些改动)。我们会在这篇文档里尽量详尽得解释这些改动。</p> <h2 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%80%A7%E6%94%B9%E5%8F%98" tabindex="-1">非兼容性改变</h2> <h4 id="%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">默认主题(theme)</h4> <p>首先是默认主题的改动,<code>v5</code> 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色,可以手动声明颜色,如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" 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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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-%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97" tabindex="-1">Apache ECharts 5 升级指南</h1> <p>本指南面向那些希望将 echarts 4.x(以下简称 <code>v4</code>)升级到 echarts 5.x(以下简称 <code>v5</code>)的用户。大家可以在 <a href="zh/basics/release-note/v5-feature">ECharts 5 新特性</a> 中了解这次<code>v5</code>带来了哪些值得升级的新特性。在绝大多数情况下,开发者用不着为这个升级做什么额外的事,因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是,<code>v5</code> 仍然带来了一些非兼容改动,需要特别关注。此外,在一些情况下,<code>v5</code> 提供了更好的 API 用来取代之前的 API,这些被取代的 API 将不再被推荐使用(当然,我们尽量兼容了这些改动)。我们会在这篇文档里尽量详尽得解释这些改动。</p> <h2 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%80%A7%E6%94%B9%E5%8F%98" tabindex="-1">非兼容性改变</h2> <h4 id="%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">默认主题(theme)</h4> <p>首先是默认主题的改动,<code>v5</code> 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色,可以手动声明颜色,如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
color<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'#c23531'</span><span class="token punctuation">,</span>
<span class="token string">'#2f4554'</span><span class="token punctuation">,</span>
@@ -80,7 +80,8 @@
<ul><li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li> <li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li></ul></li> <li><code>dataZoom</code> 组件:
<ul><li>选项 <code>dataZoom.handleIcon</code> 如果使用 <code>SVGPath</code>,需要前缀 <code>path://</code>。</li></ul></li> <li>雷达图(<code>radar</code>):
<ul><li>选项 <code>radar.name</code> 已经不推荐使用。使用 <code>radar.axisName</code> 代替。</li> <li>选项 <code>radar.nameGap</code> 已经不推荐使用。使用 <code>radar.axisNameGap</code> 代替。</li></ul></li> <li>Parse and format:
-<ul><li><code>echarts.format.formatTime</code> 已经不推荐使用。使用 <code>echarts.time.format</code> 代替。</li> <li><code>echarts.number.parseDate</code> 已经不推荐使用。使用 <code>echarts.time.parse</code> 代替。</li> <li><code>echarts.format.getTextRect</code> 已经不推荐使用。</li></ul></li></ul></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-upgrade-guide.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,l,d,c,o,a,n,r,s,h,p,g,m,u,b,y,C,E,A,f,I,v,B,S,x,W,J,M,Y,N,w,G,Z,k,V,j,L,z,F,X,D,O,P,R,H,T,U,Q,K,q,_,$,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5-%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97" tabindex="-1">Apache ECharts 5 升级指南</h1>\n<p>本指南面向那些希望将 echarts 4.x(以下简称 <code>v4</code>)升级到 echarts 5.x(以下简称 <code>v5</code>)的用户。大家可以在 <a href="zh/basics/release-note/v5-feature">ECharts 5 新特性</a> 中了解这次<code>v5</code>带来了哪些值得升级的新特性。在绝大多数情况下,开发者用不着为这个升级做什么额外的事,因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是,<code>v5</code> 仍然带来了一些非兼容改动,需要特别关注。此外,在一些情况下,<code>v5</code> 提供了更好的 API 用来取代之前的 API,这些被取代的 API 将不再被推荐使用(当然,我们尽量兼容了这些改动)。我们会在这篇文档里尽量详尽得解释这些改动。</p>\n<h2 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%80%A7%E6%94%B9%E5%8F%98" tabindex="-1">非兼容性改变</h2>\n<h4 id="%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">默认主题(theme)</h4>\n<p>首先是默认主题的改动,<code>v5</code> 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色,可以手动声明颜色,如下:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBjb2xvcjogWwogICAgJyNjMjM1MzEnLAogICAgJyMyZjQ1NTQnLAogICAgJyM2MWEwYTgnLAogICAgJyNkNDgyNjUnLAogICAgJyM5MWM3YWUnLAogICAgJyM3NDlmODMnLAogICAgJyNjYTg2MjInLAogICAgJyNiZGEyOWEnLAogICAgJyM2ZTcwNzQnLAogICAgJyM1NDY1NzAnLAogICAgJyNjNGNjZDMnCiAgXQogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<p>或者,做一个简单的 <code>v4</code> 主题:</p>\n<md-code-block lang="js" code="\'dmFyIHRoZW1lRUM0ID0gewogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdCn07CnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sIHRoZW1lRUM0KTsKY2hhcnQuc2V0T3B0aW9uKC8qIC4uLiAqLyk7\'" line-highlights="\'\'" />\n<h4 id="%E5%BC%95%E7%94%A8-echarts" tabindex="-1">引用 ECharts</h4>\n<h5 id="%E5%8E%BB%E9%99%A4-default-exports-%E7%9A%84%E6%94%AF%E6%8C%81" tabindex="-1">去除 default exports 的支持</h5>\n<p>如果使用者在 <code>v4</code> 中这样引用了 echarts:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Ci8vIOaIluiAheaMiemcgOW8leWFpQppbXBvcnQgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>这两种方式,<code>v5</code> 中不再支持了。</p>\n<p>使用者需要如下更改代码解决这个问题:</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKLy8g5oyJ6ZyA5byV5YWlCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9saWIvZWNoYXJ0cyc7\'" line-highlights="\'\'" />\n<h5 id="%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">按需引入</h5>\n<p>在 5.0.1 中,我们引入了新的<a href="zh/basics/import">按需引入接口</a></p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsgR3JpZENvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIOazqOaEj--8jOaWsOeahOaOpeWPo-S4rem7mOiupOS4jeWGjeWMheWQqyBDYW52YXMg5riy5p-T5Zmo77yM6ZyA6KaB5pi-56S65byV5YWl77yM5aaC5p6c6ZyA6KaB5L2_55SoIFNWRyDmuLLmn5PmqKHlvI_liJnkvb_nlKggU1ZHUmVuZGVyZXIKaW1wb3J0IHsgQ2FudmFzUmVuZGVyZXIgfSBmcm9tICdlY2hhcnRzL3JlbmRlcmVycyc7CgplY2hhcnRzLnVzZShbQmFyQ2hhcnQsIEdyaWRDb21wb25lbnQsIENhbnZhc1JlbmRlcmVyXSk7\'" line-highlights="\'\'" />\n<p>如果之前是使用<code>import \'echarts/lib/chart/bar\'</code>引入,新的接口对应的是<code>import {BarChart} from \'echarts/charts\'</code>;</p>\n<p>为了方便大家了解自己的配置项需要引入哪些模块,我们新的示例编辑页面添加了生成按需引入代码的功能,大家可以在示例编辑页的<code>完整代码</code>标签下选中按需引入后查看需要引入的模块以及相关代码。</p>\n<p>在大部分情况下,我们都推荐大家尽可能用这套新的按需引入接口,它可以最大程度的利用打包工具 tree-shaking 的能力,并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法,之前的方式我们也依旧是支持的:</p>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NvbXBvbmVudC9ncmlkJyk7\'" line-highlights="\'\'" />\n<p>其次,因为我们的源代码已使用 TypeScript 重写,<code>v5</code> 将不再支持从 <code>echarts/src</code> 引用文件,需要改为从<code>echarts/lib</code>引入。</p>\n<h5 id="%E4%BE%9D%E8%B5%96%E8%B0%83%E6%95%B4" tabindex="-1">依赖调整</h5>\n<blockquote>\n<p>注意:该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者,如果是全量引入的不需要关注</p>\n</blockquote>\n<p>为了保证 tree-shaking 后的体积足够小,我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候,<code>CanvasRenderer</code>将不再被默认引入,这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来,除此之外,还有下面这些依赖的改动:</p>\n<ul>\n<li>在使用折线图,柱状图中不再默认引入直角坐标系组件,因此之前使用下面的引入方式</li>\n</ul>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NoYXJ0L2xpbmUnKTs\'" line-highlights="\'\'" />\n<p>需要再单独引入<code>grid</code>组件</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2dyaWQnKTs\'" line-highlights="\'\'" />\n<p>参考 issue:<a href="https://github.com/apache/echarts/issues/14080">#14080</a>, <a href="https://github.com/apache/echarts/issues/13764">#13764</a></p>\n<ul>\n<li>默认不再引入<code>aria</code>组件,如果需要的话可以手动引入。</li>\n</ul>\n<md-code-block lang="js" code="\'aW1wb3J0IHsgQXJpYUNvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmVjaGFydHMudXNlKEFyaWFDb21wb25lbnQpOw\'" line-highlights="\'\'" />\n<p>或者:</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2FyaWEnKTs\'" line-highlights="\'\'" />\n<h4 id="%E5%8E%BB%E9%99%A4%E5%86%85%E7%BD%AE%E7%9A%84-geojson" tabindex="-1">去除内置的 geoJSON</h4>\n<p><code>v5</code> 移除了内置的 geoJSON(原先在 <code>echarts/map</code> 文件夹下)。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们,可以去从老版本中得到,或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。</p>\n<h4 id="%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7" tabindex="-1">浏览器兼容性</h4>\n<p><code>v5</code> 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML 渲染器</a> 来着实现 IE8 的兼容。如果使用者确实有很强的需求,那么欢迎提 pull request 来升级 VML 渲染器,或者单独维护一个第三方 VML 渲染器,我们从 <code>v5.0.1</code> 开始支持注册独立的渲染器了。</p>\n<h4 id="echarts-%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%B0%83%E6%95%B4" tabindex="-1">ECharts 配置项调整</h4>\n<h5 id="%E8%A7%86%E8%A7%89%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E6%94%B9%E5%8F%98" tabindex="-1">视觉样式设置的优先级改变</h5>\n<p><code>v5</code> 对调了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 和 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的视觉样式优先级。</p>\n<p>具体来说,<code>v4</code> 中,<a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 中生成的视觉样式(如,颜色、图形类型、图形尺寸等)的优先级,比开发者在 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 中设置的样式的优先级高,也就是说如果他们同时设置的话,前者会生效而后者不会生效。这带来了些麻烦:假如使用者在使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 时,又想针对某个数据项对应的图形,设置 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> 样式,则做不到。<code>v5</code> 中于是提高了 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的优先级,使他们能生效。</p>\n<p>在绝大多处情况下,这个变化并不会带来什么影响。但是为保险起见,使用者在升级 <code>v4</code> 到 <code>v5</code> 时,还是可以检查下,是否有同时使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 和 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的情况。</p>\n<h5 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E7%9A%84-padding" tabindex="-1">富文本的 <code>padding</code></h5>\n<p><code>v5</code> 调整了 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> 的格式使其更符合 CSS 的规范。<code>v4</code> 里,例如 <code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>33</code> 且 <code>padding-bottom</code> 是 <code>11</code>。在 <code>v5</code> 中调整了上下的位置,<code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>11</code> 且 <code>padding-bottom</code> 是 <code>33</code>。</p>\n<p>如果使用者有在使用 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>,需要注意调整下这个顺序。</p>\n<h2 id="echarts-%E7%9A%84%E7%9B%B8%E5%85%B3%E6%89%A9%E5%B1%95" tabindex="-1">ECharts 的相关扩展</h2>\n<p>如果想要升级到 <code>v5</code> ,下面这些扩展需要升级到最新的版本实现兼容。</p>\n<ul>\n<li><a href="https://github.com/ecomfe/echarts-gl">echarts-gl</a></li>\n<li><a href="https://github.com/ecomfe/echarts-wordcloud">echarts-wordcloud</a></li>\n<li><a href="https://github.com/ecomfe/echarts-liquidfill">echarts-liquidfill</a></li>\n</ul>\n<h2 id="%E4%B8%8D%E5%86%8D%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%E7%9A%84-api" tabindex="-1">不再推荐使用的 API</h2>\n<p>一些 API(包括接口调用,事件监听和配置项)在 <code>v5</code> 中不再推荐使用。当然,使用者仍然可以用他们,只是会在 dev 模式下,在 console 中打印一些 warning,并不会影响功能。但是从长远维护考虑,我们还是推荐升级成新的 API。</p>\n<p>下面是不再推荐使用的 API 以及推荐的新 API:</p>\n<ul>\n<li>图形元素 transform 相关的属性被改变了:\n<ul>\n<li>变更点:\n<ul>\n<li><code>position: [number, number]</code> 改为 <code>x: number</code> / <code>y: number</code>。</li>\n<li><code>scale: [number, number]</code> 改为 <code>scaleX: number</code> / <code>scaleY: number</code>。</li>\n<li><code>origin: [number, number]</code> 改为 <code>originX: number</code> / <code>originY: number</code>。</li>\n</ul>\n</li>\n<li><code>position</code>、<code>scale</code> 和 <code>origin</code> 仍然支持,但已不推荐使用。</li>\n<li>它影响到这些地方:\n<ul>\n<li>在<code>graphic</code>组件中:每个元素的声明。</li>\n<li>在 <code>custom series</code> 中:<code>renderItem</code> 返回的每个元素的声明。</li>\n<li>直接使用 zrender 图形元素时。</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Text 相关的属性被改变:\n<ul>\n<li>变更点:\n<ul>\n<li>图形元素附带的文本的声明方式被改变:\n<ul>\n<li>除了 <code>Text</code> 元素之外,其他元素中的属性 <code>style.text</code> 都不推荐使用了。取而代之的是新属性 <code>textContent</code> 和 <code>textConfig</code>,他们能带来更丰富的功能。</li>\n<li>其中,下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性:\n<ul>\n<li>textPosition => textConfig.position</li>\n<li>textOffset => textConfig.offset</li>\n<li>textRotation => textConfig.rotation</li>\n<li>textDistance => textConfig.distance</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>下面左边部分的属性在 <code>style</code> 和 <code>style.rich.?</code> 中已不推荐使用或废弃。请使用下面右边的属性:\n<ul>\n<li>textFill => fill</li>\n<li>textStroke => stroke</li>\n<li>textFont => font</li>\n<li>textStrokeWidth => lineWidth</li>\n<li>textAlign => align</li>\n<li>textVerticalAlign => verticalAlign</li>\n<li>textLineHeight =></li>\n<li>textWidth => width</li>\n<li>textHeight => hight</li>\n<li>textBackgroundColor => backgroundColor</li>\n<li>textPadding => padding</li>\n<li>textBorderColor => borderColor</li>\n<li>textBorderWidth => borderWidth</li>\n<li>textBorderRadius => borderRadius</li>\n<li>textBoxShadowColor => shadowColor</li>\n<li>textBoxShadowBlur => shadowBlur</li>\n<li>textBoxShadowOffsetX => shadowOffsetX</li>\n<li>textBoxShadowOffsetY => shadowOffsetY</li>\n</ul>\n</li>\n<li>注:这些属性并没有变化:\n<ul>\n<li>textShadowColor</li>\n<li>textShadowBlur</li>\n<li>textShadowOffsetX</li>\n<li>textShadowOffsetY</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>它影响到这些地方:\n<ul>\n<li>在 <code>graphic</code> 组件中:每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)</li>\n<li>在自定义系列(<code>custom series</code>)中:<code>renderItem</code> 返回中的每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)</li>\n<li>直接使用 zrender API 创建图形元素。(不再兼容,原写法被废弃。)</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>图表实例上的 API:\n<ul>\n<li><code>chart.one(...)</code> 已不推荐使用。</li>\n</ul>\n</li>\n<li><code>label</code>。\n<ul>\n<li>属性 <code>color</code>、<code>textBorderColor</code>、<code>backgroundColor</code>、<code>borderColor</code> 中,值 <code>auto</code> 已不推荐使用,而推荐使用 <code>\'inherit\'</code> 代替。</li>\n</ul>\n</li>\n<li><code>hoverAnimation</code>:\n<ul>\n<li>选项 <code>series.hoverAnimation</code> 已不推荐使用,使用 <code>series.emphasis.scale</code> 代替之。</li>\n</ul>\n</li>\n<li>折线图(<code>line series</code>):\n<ul>\n<li>选项 <code>series.clipOverflow</code> 已不推荐使用,使用 <code>series.clip</code> 代替之。</li>\n</ul>\n</li>\n<li>自定义系列(<code>custom series</code>)。\n<ul>\n<li>在 <code>renderItem</code> 中,<code>api.style(...)</code> 和 <code>api.styleEmphasis(...)</code> 已不推荐使用。因为这两个接口其实并不真正必要,也很难保证向后兼容。用户可以通过 <code>api.visual(...)</code> 获取系统自动分配的视觉信息。</li>\n</ul>\n</li>\n<li>旭日图(<code>sunburst</code>):\n<ul>\n<li>动作类型 <code>highlight</code> 已被弃用,请使用 <code>sunburstHighlight</code> 代替。</li>\n<li>动作类型 <code>downplay</code> 已被弃用,请使用 <code>sunburstUnhighlight</code> 代替。</li>\n<li>选项 <code>series.downplay</code> 已被弃用,请使用 <code>series.blur</code> 代替。</li>\n<li>选项 <code>series.highlightPolicy</code> 已不适用,请使用 <code>series.emphasis.focus</code> 代替。</li>\n</ul>\n</li>\n<li>饼图(<code>pie</code>):\n<ul>\n<li>下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n<ul>\n<li><code>pieToggleSelect</code> => <code>toggleSelect</code>。</li>\n<li><code>pieSelect</code> => <code>select</code>。</li>\n<li><code>pieUnSelect</code> => <code>unselect</code>。</li>\n</ul>\n</li>\n<li>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n<ul>\n<li><code>pieselectchanged</code> => <code>selectchanged</code>。</li>\n<li><code>pieselected</code> => <code>selected</code>。</li>\n<li><code>pieunselected</code> => <code>unselected</code>。</li>\n</ul>\n</li>\n<li>选项 <code>series.label.margin</code> 已经不推荐使用。使用 <code>series.label.edgeDistance</code> 代替。</li>\n<li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li>\n<li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li>\n</ul>\n</li>\n<li>地图(<code>map series</code>):\n<ul>\n<li>下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n<ul>\n<li><code>mapToggleSelect</code> => <code>toggleSelect</code>。</li>\n<li><code>mapSelect</code> => <code>select</code>。</li>\n<li><code>mapUnSelect</code> => <code>unselect</code>。</li>\n</ul>\n</li>\n<li>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n<ul>\n<li><code>mapselectchanged</code> => <code>selectchanged</code>。</li>\n<li><code>mapselected</code> => <code>selected</code>。</li>\n<li><code>mapunselected</code> => <code>unselected</code>。</li>\n</ul>\n</li>\n<li>选项 <code>series.mapType</code> 已经不推荐使用。使用 <code>series.map</code> 代替。</li>\n<li>选项 <code>series.mapLocation</code> 已经不推荐使用。</li>\n</ul>\n</li>\n<li>关系图(<code>graph series</code>):\n<ul>\n<li>选项 <code>series.focusNodeAdjacency</code> 已经不推荐使用。使用 <code>series.emphasis: { focus: \'adjacency\'}</code> 代替。</li>\n</ul>\n</li>\n<li>仪表盘(<code>gauge series</code>):\n<ul>\n<li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li>\n<li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li>\n</ul>\n</li>\n<li><code>dataZoom</code> 组件:\n<ul>\n<li>选项 <code>dataZoom.handleIcon</code> 如果使用 <code>SVGPath</code>,需要前缀 <code>path://</code>。</li>\n</ul>\n</li>\n<li>雷达图(<code>radar</code>):\n<ul>\n<li>选项 <code>radar.name</code> 已经不推荐使用。使用 <code>radar.axisName</code> 代替。</li>\n<li>选项 <code>radar.nameGap</code> 已经不推荐使用。使用 <code>radar.axisNameGap</code> 代替。</li>\n</ul>\n</li>\n<li>Parse and format:\n<ul>\n<li><code>echarts.format.formatTime</code> 已经不推荐使用。使用 <code>echarts.time.format</code> 代替。</li>\n<li><code>echarts.number.parseDate</code> 已经不推荐使用。使用 <code>echarts.time.parse</code> 代替。</li>\n<li><code>echarts.format.getTextRect</code> 已经不推荐使用。</li>\n</ul>\n</li>\n</ul>\n',postPath:"zh/basics/release-note/v5-upgrade-guide"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:c,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:n,draft:e},{title:"获取灵感",dir:r},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:m}]}]},{title:"概念篇",dir:u,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:y,draft:e},{title:"系列",dir:C,draft:e},{title:"样式",dir:E},{title:"数据集",dir:A},{title:"数据转换",dir:f},{title:"坐标系",dir:I,draft:e},{title:"坐标轴",dir:v},{title:"视觉映射",dir:t},{title:"图例",dir:B},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:M},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:N,draft:e},{title:"阶梯瀑布图",dir:w},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:L}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:F},{title:"南丁格尔图(玫瑰图)",dir:X}]},{title:"散点图",dir:D,children:[{title:"基础散点图",dir:O}]}]},{title:P,dir:i,draft:e},{title:"跨平台方案",dir:R,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:H}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Q,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:c,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:a},{title:"Resources",dir:n,draft:e},{title:"Inspiration",dir:r},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:m}]}]},{title:"Concepts",dir:u,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:y,draft:e},{title:"Series",dir:C,draft:e},{title:"Style",dir:E},{title:"Dataset",dir:A},{title:"Data Transform",dir:f},{title:"Coordinate",dir:I,draft:e},{title:"Axis",dir:v},{title:"Visual Mapping",dir:t},{title:"Legend",dir:B},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:M},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:N,draft:e},{title:"Waterfall",dir:w}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:L}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:F},{title:"Rose Style",dir:X}]},{title:"Scatter",dir:D,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:R,children:[{title:"Server Side Rendering",dir:H}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Q,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},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:e,routePath:"/zh/basics/release-note/v5-upgrade-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<ul><li><code>echarts.format.formatTime</code> 已经不推荐使用。使用 <code>echarts.time.format</code> 代替。</li> <li><code>echarts.number.parseDate</code> 已经不推荐使用。使用 <code>echarts.time.parse</code> 代替。</li> <li><code>echarts.format.getTextRect</code> 已经不推荐使用。</li></ul></li></ul></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-upgrade-guide.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,l,d,c,o,a,n,r,s,h,p,g,m,u,b,y,C,E,A,f,I,v,B,S,x,W,J,M,Y,N,w,G,Z,k,V,j,L,z,F,X,D,O,P,R,H,T,U,Q,K,q,_,$,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5-%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97" tabindex="-1">Apache ECharts 5 升级指南</h1>\n<p>本指南面向那些希望将 echarts 4.x(以下简称 <code>v4</code>)升级到 echarts 5.x(以下简称 <code>v5</code>)的用户。大家可以在 <a href="zh/basics/release-note/v5-feature">ECharts 5 新特性</a> 中了解这次<code>v5</code>带来了哪些值得升级的新特性。在绝大多数情况下,开发者用不着为这个升级做什么额外的事,因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是,<code>v5</code> 仍然带来了一些非兼容改动,需要特别关注。此外,在一些情况下,<code>v5</code> 提供了更好的 API 用来取代之前的 API,这些被取代的 API 将不再被推荐使用(当然,我们尽量兼容了这些改动)。我们会在这篇文档里尽量详尽得解释这些改动。</p>\n<h2 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%80%A7%E6%94%B9%E5%8F%98" tabindex="-1">非兼容性改变</h2>\n<h4 id="%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">默认主题(theme)</h4>\n<p>首先是默认主题的改动,<code>v5</code> 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色,可以手动声明颜色,如下:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBjb2xvcjogWwogICAgJyNjMjM1MzEnLAogICAgJyMyZjQ1NTQnLAogICAgJyM2MWEwYTgnLAogICAgJyNkNDgyNjUnLAogICAgJyM5MWM3YWUnLAogICAgJyM3NDlmODMnLAogICAgJyNjYTg2MjInLAogICAgJyNiZGEyOWEnLAogICAgJyM2ZTcwNzQnLAogICAgJyM1NDY1NzAnLAogICAgJyNjNGNjZDMnCiAgXQogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<p>或者,做一个简单的 <code>v4</code> 主题:</p>\n<md-code-block lang="js" code="\'dmFyIHRoZW1lRUM0ID0gewogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdCn07CnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sIHRoZW1lRUM0KTsKY2hhcnQuc2V0T3B0aW9uKC8qIC4uLiAqLyk7\'" line-highlights="\'\'" />\n<h4 id="%E5%BC%95%E7%94%A8-echarts" tabindex="-1">引用 ECharts</h4>\n<h5 id="%E5%8E%BB%E9%99%A4-default-exports-%E7%9A%84%E6%94%AF%E6%8C%81" tabindex="-1">去除 default exports 的支持</h5>\n<p>如果使用者在 <code>v4</code> 中这样引用了 echarts:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Ci8vIOaIluiAheaMiemcgOW8leWFpQppbXBvcnQgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>这两种方式,<code>v5</code> 中不再支持了。</p>\n<p>使用者需要如下更改代码解决这个问题:</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKLy8g5oyJ6ZyA5byV5YWlCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9saWIvZWNoYXJ0cyc7\'" line-highlights="\'\'" />\n<h5 id="%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">按需引入</h5>\n<p>在 5.0.1 中,我们引入了新的<a href="zh/basics/import">按需引入接口</a></p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsgR3JpZENvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIOazqOaEj--8jOaWsOeahOaOpeWPo-S4rem7mOiupOS4jeWGjeWMheWQqyBDYW52YXMg5riy5p-T5Zmo77yM6ZyA6KaB5pi-56S65byV5YWl77yM5aaC5p6c6ZyA6KaB5L2_55SoIFNWRyDmuLLmn5PmqKHlvI_liJnkvb_nlKggU1ZHUmVuZGVyZXIKaW1wb3J0IHsgQ2FudmFzUmVuZGVyZXIgfSBmcm9tICdlY2hhcnRzL3JlbmRlcmVycyc7CgplY2hhcnRzLnVzZShbQmFyQ2hhcnQsIEdyaWRDb21wb25lbnQsIENhbnZhc1JlbmRlcmVyXSk7\'" line-highlights="\'\'" />\n<p>如果之前是使用<code>import \'echarts/lib/chart/bar\'</code>引入,新的接口对应的是<code>import {BarChart} from \'echarts/charts\'</code>;</p>\n<p>为了方便大家了解自己的配置项需要引入哪些模块,我们新的示例编辑页面添加了生成按需引入代码的功能,大家可以在示例编辑页的<code>完整代码</code>标签下选中按需引入后查看需要引入的模块以及相关代码。</p>\n<p>在大部分情况下,我们都推荐大家尽可能用这套新的按需引入接口,它可以最大程度的利用打包工具 tree-shaking 的能力,并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法,之前的方式我们也依旧是支持的:</p>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NvbXBvbmVudC9ncmlkJyk7\'" line-highlights="\'\'" />\n<p>其次,因为我们的源代码已使用 TypeScript 重写,<code>v5</code> 将不再支持从 <code>echarts/src</code> 引用文件,需要改为从<code>echarts/lib</code>引入。</p>\n<h5 id="%E4%BE%9D%E8%B5%96%E8%B0%83%E6%95%B4" tabindex="-1">依赖调整</h5>\n<blockquote>\n<p>注意:该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者,如果是全量引入的不需要关注</p>\n</blockquote>\n<p>为了保证 tree-shaking 后的体积足够小,我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候,<code>CanvasRenderer</code>将不再被默认引入,这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来,除此之外,还有下面这些依赖的改动:</p>\n<ul>\n<li>在使用折线图,柱状图中不再默认引入直角坐标系组件,因此之前使用下面的引入方式</li>\n</ul>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NoYXJ0L2xpbmUnKTs\'" line-highlights="\'\'" />\n<p>需要再单独引入<code>grid</code>组件</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2dyaWQnKTs\'" line-highlights="\'\'" />\n<p>参考 issue:<a href="https://github.com/apache/echarts/issues/14080">#14080</a>, <a href="https://github.com/apache/echarts/issues/13764">#13764</a></p>\n<ul>\n<li>默认不再引入<code>aria</code>组件,如果需要的话可以手动引入。</li>\n</ul>\n<md-code-block lang="js" code="\'aW1wb3J0IHsgQXJpYUNvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmVjaGFydHMudXNlKEFyaWFDb21wb25lbnQpOw\'" line-highlights="\'\'" />\n<p>或者:</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2FyaWEnKTs\'" line-highlights="\'\'" />\n<h4 id="%E5%8E%BB%E9%99%A4%E5%86%85%E7%BD%AE%E7%9A%84-geojson" tabindex="-1">去除内置的 geoJSON</h4>\n<p><code>v5</code> 移除了内置的 geoJSON(原先在 <code>echarts/map</code> 文件夹下)。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们,可以去从老版本中得到,或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。</p>\n<h4 id="%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7" tabindex="-1">浏览器兼容性</h4>\n<p><code>v5</code> 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML 渲染器</a> 来着实现 IE8 的兼容。如果使用者确实有很强的需求,那么欢迎提 pull request 来升级 VML 渲染器,或者单独维护一个第三方 VML 渲染器,我们从 <code>v5.0.1</code> 开始支持注册独立的渲染器了。</p>\n<h4 id="echarts-%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%B0%83%E6%95%B4" tabindex="-1">ECharts 配置项调整</h4>\n<h5 id="%E8%A7%86%E8%A7%89%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E6%94%B9%E5%8F%98" tabindex="-1">视觉样式设置的优先级改变</h5>\n<p><code>v5</code> 对调了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 和 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的视觉样式优先级。</p>\n<p>具体来说,<code>v4</code> 中,<a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 中生成的视觉样式(如,颜色、图形类型、图形尺寸等)的优先级,比开发者在 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 中设置的样式的优先级高,也就是说如果他们同时设置的话,前者会生效而后者不会生效。这带来了些麻烦:假如使用者在使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 时,又想针对某个数据项对应的图形,设置 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> 样式,则做不到。<code>v5</code> 中于是提高了 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的优先级,使他们能生效。</p>\n<p>在绝大多处情况下,这个变化并不会带来什么影响。但是为保险起见,使用者在升级 <code>v4</code> 到 <code>v5</code> 时,还是可以检查下,是否有同时使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 和 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的情况。</p>\n<h5 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E7%9A%84-padding" tabindex="-1">富文本的 <code>padding</code></h5>\n<p><code>v5</code> 调整了 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> 的格式使其更符合 CSS 的规范。<code>v4</code> 里,例如 <code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>33</code> 且 <code>padding-bottom</code> 是 <code>11</code>。在 <code>v5</code> 中调整了上下的位置,<code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>11</code> 且 <code>padding-bottom</code> 是 <code>33</code>。</p>\n<p>如果使用者有在使用 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>,需要注意调整下这个顺序。</p>\n<h2 id="echarts-%E7%9A%84%E7%9B%B8%E5%85%B3%E6%89%A9%E5%B1%95" tabindex="-1">ECharts 的相关扩展</h2>\n<p>如果想要升级到 <code>v5</code> ,下面这些扩展需要升级到最新的版本实现兼容。</p>\n<ul>\n<li><a href="https://github.com/ecomfe/echarts-gl">echarts-gl</a></li>\n<li><a href="https://github.com/ecomfe/echarts-wordcloud">echarts-wordcloud</a></li>\n<li><a href="https://github.com/ecomfe/echarts-liquidfill">echarts-liquidfill</a></li>\n</ul>\n<h2 id="%E4%B8%8D%E5%86%8D%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%E7%9A%84-api" tabindex="-1">不再推荐使用的 API</h2>\n<p>一些 API(包括接口调用,事件监听和配置项)在 <code>v5</code> 中不再推荐使用。当然,使用者仍然可以用他们,只是会在 dev 模式下,在 console 中打印一些 warning,并不会影响功能。但是从长远维护考虑,我们还是推荐升级成新的 API。</p>\n<p>下面是不再推荐使用的 API 以及推荐的新 API:</p>\n<ul>\n<li>图形元素 transform 相关的属性被改变了:\n<ul>\n<li>变更点:\n<ul>\n<li><code>position: [number, number]</code> 改为 <code>x: number</code> / <code>y: number</code>。</li>\n<li><code>scale: [number, number]</code> 改为 <code>scaleX: number</code> / <code>scaleY: number</code>。</li>\n<li><code>origin: [number, number]</code> 改为 <code>originX: number</code> / <code>originY: number</code>。</li>\n</ul>\n</li>\n<li><code>position</code>、<code>scale</code> 和 <code>origin</code> 仍然支持,但已不推荐使用。</li>\n<li>它影响到这些地方:\n<ul>\n<li>在<code>graphic</code>组件中:每个元素的声明。</li>\n<li>在 <code>custom series</code> 中:<code>renderItem</code> 返回的每个元素的声明。</li>\n<li>直接使用 zrender 图形元素时。</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Text 相关的属性被改变:\n<ul>\n<li>变更点:\n<ul>\n<li>图形元素附带的文本的声明方式被改变:\n<ul>\n<li>除了 <code>Text</code> 元素之外,其他元素中的属性 <code>style.text</code> 都不推荐使用了。取而代之的是新属性 <code>textContent</code> 和 <code>textConfig</code>,他们能带来更丰富的功能。</li>\n<li>其中,下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性:\n<ul>\n<li>textPosition => textConfig.position</li>\n<li>textOffset => textConfig.offset</li>\n<li>textRotation => textConfig.rotation</li>\n<li>textDistance => textConfig.distance</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>下面左边部分的属性在 <code>style</code> 和 <code>style.rich.?</code> 中已不推荐使用或废弃。请使用下面右边的属性:\n<ul>\n<li>textFill => fill</li>\n<li>textStroke => stroke</li>\n<li>textFont => font</li>\n<li>textStrokeWidth => lineWidth</li>\n<li>textAlign => align</li>\n<li>textVerticalAlign => verticalAlign</li>\n<li>textLineHeight =></li>\n<li>textWidth => width</li>\n<li>textHeight => hight</li>\n<li>textBackgroundColor => backgroundColor</li>\n<li>textPadding => padding</li>\n<li>textBorderColor => borderColor</li>\n<li>textBorderWidth => borderWidth</li>\n<li>textBorderRadius => borderRadius</li>\n<li>textBoxShadowColor => shadowColor</li>\n<li>textBoxShadowBlur => shadowBlur</li>\n<li>textBoxShadowOffsetX => shadowOffsetX</li>\n<li>textBoxShadowOffsetY => shadowOffsetY</li>\n</ul>\n</li>\n<li>注:这些属性并没有变化:\n<ul>\n<li>textShadowColor</li>\n<li>textShadowBlur</li>\n<li>textShadowOffsetX</li>\n<li>textShadowOffsetY</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>它影响到这些地方:\n<ul>\n<li>在 <code>graphic</code> 组件中:每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)</li>\n<li>在自定义系列(<code>custom series</code>)中:<code>renderItem</code> 返回中的每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)</li>\n<li>直接使用 zrender API 创建图形元素。(不再兼容,原写法被废弃。)</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>图表实例上的 API:\n<ul>\n<li><code>chart.one(...)</code> 已不推荐使用。</li>\n</ul>\n</li>\n<li><code>label</code>。\n<ul>\n<li>属性 <code>color</code>、<code>textBorderColor</code>、<code>backgroundColor</code>、<code>borderColor</code> 中,值 <code>auto</code> 已不推荐使用,而推荐使用 <code>\'inherit\'</code> 代替。</li>\n</ul>\n</li>\n<li><code>hoverAnimation</code>:\n<ul>\n<li>选项 <code>series.hoverAnimation</code> 已不推荐使用,使用 <code>series.emphasis.scale</code> 代替之。</li>\n</ul>\n</li>\n<li>折线图(<code>line series</code>):\n<ul>\n<li>选项 <code>series.clipOverflow</code> 已不推荐使用,使用 <code>series.clip</code> 代替之。</li>\n</ul>\n</li>\n<li>自定义系列(<code>custom series</code>)。\n<ul>\n<li>在 <code>renderItem</code> 中,<code>api.style(...)</code> 和 <code>api.styleEmphasis(...)</code> 已不推荐使用。因为这两个接口其实并不真正必要,也很难保证向后兼容。用户可以通过 <code>api.visual(...)</code> 获取系统自动分配的视觉信息。</li>\n</ul>\n</li>\n<li>旭日图(<code>sunburst</code>):\n<ul>\n<li>动作类型 <code>highlight</code> 已被弃用,请使用 <code>sunburstHighlight</code> 代替。</li>\n<li>动作类型 <code>downplay</code> 已被弃用,请使用 <code>sunburstUnhighlight</code> 代替。</li>\n<li>选项 <code>series.downplay</code> 已被弃用,请使用 <code>series.blur</code> 代替。</li>\n<li>选项 <code>series.highlightPolicy</code> 已不适用,请使用 <code>series.emphasis.focus</code> 代替。</li>\n</ul>\n</li>\n<li>饼图(<code>pie</code>):\n<ul>\n<li>下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n<ul>\n<li><code>pieToggleSelect</code> => <code>toggleSelect</code>。</li>\n<li><code>pieSelect</code> => <code>select</code>。</li>\n<li><code>pieUnSelect</code> => <code>unselect</code>。</li>\n</ul>\n</li>\n<li>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n<ul>\n<li><code>pieselectchanged</code> => <code>selectchanged</code>。</li>\n<li><code>pieselected</code> => <code>selected</code>。</li>\n<li><code>pieunselected</code> => <code>unselected</code>。</li>\n</ul>\n</li>\n<li>选项 <code>series.label.margin</code> 已经不推荐使用。使用 <code>series.label.edgeDistance</code> 代替。</li>\n<li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li>\n<li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li>\n</ul>\n</li>\n<li>地图(<code>map series</code>):\n<ul>\n<li>下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n<ul>\n<li><code>mapToggleSelect</code> => <code>toggleSelect</code>。</li>\n<li><code>mapSelect</code> => <code>select</code>。</li>\n<li><code>mapUnSelect</code> => <code>unselect</code>。</li>\n</ul>\n</li>\n<li>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n<ul>\n<li><code>mapselectchanged</code> => <code>selectchanged</code>。</li>\n<li><code>mapselected</code> => <code>selected</code>。</li>\n<li><code>mapunselected</code> => <code>unselected</code>。</li>\n</ul>\n</li>\n<li>选项 <code>series.mapType</code> 已经不推荐使用。使用 <code>series.map</code> 代替。</li>\n<li>选项 <code>series.mapLocation</code> 已经不推荐使用。</li>\n</ul>\n</li>\n<li>关系图(<code>graph series</code>):\n<ul>\n<li>选项 <code>series.focusNodeAdjacency</code> 已经不推荐使用。使用 <code>series.emphasis: { focus: \'adjacency\'}</code> 代替。</li>\n</ul>\n</li>\n<li>仪表盘(<code>gauge series</code>):\n<ul>\n<li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li>\n<li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li>\n</ul>\n</li>\n<li><code>dataZoom</code> 组件:\n<ul>\n<li>选项 <code>dataZoom.handleIcon</code> 如果使用 <code>SVGPath</code>,需要前缀 <code>path://</code>。</li>\n</ul>\n</li>\n<li>雷达图(<code>radar</code>):\n<ul>\n<li>选项 <code>radar.name</code> 已经不推荐使用。使用 <code>radar.axisName</code> 代替。</li>\n<li>选项 <code>radar.nameGap</code> 已经不推荐使用。使用 <code>radar.axisNameGap</code> 代替。</li>\n</ul>\n</li>\n<li>Parse and format:\n<ul>\n<li><code>echarts.format.formatTime</code> 已经不推荐使用。使用 <code>echarts.time.format</code> 代替。</li>\n<li><code>echarts.number.parseDate</code> 已经不推荐使用。使用 <code>echarts.time.parse</code> 代替。</li>\n<li><code>echarts.format.getTextRect</code> 已经不推荐使用。</li>\n</ul>\n</li>\n</ul>\n',postPath:"zh/basics/release-note/v5-upgrade-guide"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:c,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:n,draft:e},{title:"获取灵感",dir:r},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:m}]}]},{title:"概念篇",dir:u,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:y,draft:e},{title:"系列",dir:C,draft:e},{title:"样式",dir:E},{title:"数据集",dir:A},{title:"数据转换",dir:f},{title:"坐标系",dir:I,draft:e},{title:"坐标轴",dir:v},{title:"视觉映射",dir:t},{title:"图例",dir:B},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:M},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:N,draft:e},{title:"阶梯瀑布图",dir:w},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:L}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:F},{title:"南丁格尔图(玫瑰图)",dir:X}]},{title:"散点图",dir:D,children:[{title:"基础散点图",dir:O}]}]},{title:P,dir:i,draft:e},{title:"跨平台方案",dir:R,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:H}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Q,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:c,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:a},{title:"Resources",dir:n,draft:e},{title:"Inspiration",dir:r},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:m}]}]},{title:"Concepts",dir:u,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:y,draft:e},{title:"Series",dir:C,draft:e},{title:"Style",dir:E},{title:"Dataset",dir:A},{title:"Data Transform",dir:f},{title:"Coordinate",dir:I,draft:e},{title:"Axis",dir:v},{title:"Visual Mapping",dir:t},{title:"Legend",dir:B},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:M},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:N,draft:e},{title:"Waterfall",dir:w}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:L}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:F},{title:"Rose Style",dir:X}]},{title:"Scatter",dir:D,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:R,children:[{title:"Server Side Rendering",dir:H}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Q,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},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:e,routePath:"/zh/basics/release-note/v5-upgrade-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/best-practices/aria/index.html b/handbook/zh/best-practices/aria/index.html
index 91e3f99..fd06667 100644
--- a/handbook/zh/best-practices/aria/index.html
+++ b/handbook/zh/best-practices/aria/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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="%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE" tabindex="-1">无障碍访问</h1> <p>W3C 制定了无障碍富互联网应用规范集(<a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>,the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。</p> <p>默认关闭,需要通过将 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code> 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。</p> <p>对于配置项:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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="%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE" tabindex="-1">无障碍访问</h1> <p>W3C 制定了无障碍富互联网应用规范集(<a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>,the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。</p> <p>默认关闭,需要通过将 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code> 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。</p> <p>对于配置项:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
aria<span class="token operator">:</span> <span class="token punctuation">{</span>
show<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
@@ -29,7 +29,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><iframe width="100%" height="350" src=""></iframe></p> <p>生成的图表 DOM 上,会有一个 <code>aria-label</code> 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:</p> <pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图,表示访问来源。其数据是——直接访问的数据是335,邮件营销的数据是310,联盟广告的数据是234,视频广告的数据是135,搜索引擎的数据是1548。
-</code></pre> <h2 id="%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" tabindex="-1">整体修改描述</h2> <p>对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p> <p>这时候,用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> 配置项指定图表的整体描述。</p> <h2 id="%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" tabindex="-1">定制模板描述</h2> <p>除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。</p> <p>生成描述的基本流程为,如果 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code>,则生成无障碍访问描述,否则不生成。如果定义了 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a>,则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 <code>aria.description</code> 完全覆盖。</p> <p>使用模板拼接时,先根据是否存在标题 <a href="https://echarts.apache.org/option.html#title.text">title.text</a> 决定使用 <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> 还是 <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> 作为整体性描述。其中,<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>,将会被替换成图表标题。也就是说,如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是:{title}。'</code>,则如果包含标题 <code>'价格分布图'</code>,这部分的描述为 <code>'图表的标题是:价格分布图。'</code>。</p> <p>拼接完标题之后,会依次拼接系列的描述(<a href="https://echarts.apache.org/option.html#aria.series">aria.series</a>),和每个系列的数据的描述(<a href="https://echarts.apache.org/option.html#aria.data">aria.data</a>)。同样,每个模板都有可能包括模板变量,用以替换实际的值。</p> <p>完整的描述生成流程请参见 <a href="https://echarts.apache.org/option.html#aria">ARIA 文档</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/best-practices/aria.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,o,h,n,c,s,p,g,C,I,A,m,f,b,u,B,E,w,x,S,W,k,v,F,R,T,y,D,H,K,L,P,Z,G,M,U,_,z,O,X,J,Q,V,Y,N,j,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE" tabindex="-1">无障碍访问</h1>\n<p>W3C 制定了无障碍富互联网应用规范集(<a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>,the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。</p>\n<p>默认关闭,需要通过将 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code> 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。</p>\n<p>对于配置项:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGFyaWE6IHsKICAgIHNob3c6IHRydWUKICB9LAogIHRpdGxlOiB7CiAgICB0ZXh0OiAn5p-Q56uZ54K555So5oi36K6_6Zeu5p2l5rqQJywKICAgIHg6ICdjZW50ZXInCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-iuv-mXruadpea6kCcsCiAgICAgIHR5cGU6ICdwaWUnLAogICAgICBkYXRhOiBbCiAgICAgICAgeyB2YWx1ZTogMzM1LCBuYW1lOiAn55u05o6l6K6_6ZeuJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ-mCruS7tuiQpemUgCcgfSwKICAgICAgICB7IHZhbHVlOiAyMzQsIG5hbWU6ICfogZTnm5_lub_lkYonIH0sCiAgICAgICAgeyB2YWx1ZTogMTM1LCBuYW1lOiAn6KeG6aKR5bm_5ZGKJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICfmkJzntKLlvJXmk44nIH0KICAgICAgXQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/aria-pie"></md-example></p>\n<p>生成的图表 DOM 上,会有一个 <code>aria-label</code> 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图,表示访问来源。其数据是——直接访问的数据是335,邮件营销的数据是310,联盟广告的数据是234,视频广告的数据是135,搜索引擎的数据是1548。\n</code></pre>\n<h2 id="%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" tabindex="-1">整体修改描述</h2>\n<p>对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p>这时候,用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> 配置项指定图表的整体描述。</p>\n<h2 id="%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" tabindex="-1">定制模板描述</h2>\n<p>除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为,如果 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code>,则生成无障碍访问描述,否则不生成。如果定义了 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a>,则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时,先根据是否存在标题 <a href="https://echarts.apache.org/option.html#title.text">title.text</a> 决定使用 <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> 还是 <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> 作为整体性描述。其中,<code>aria.general.withTitle</code> 配置项包括模板变量 <code>\'{title}\'</code>,将会被替换成图表标题。也就是说,如果 <code>aria.general.withTitle</code> 被设置为 <code>\'图表的标题是:{title}。\'</code>,则如果包含标题 <code>\'价格分布图\'</code>,这部分的描述为 <code>\'图表的标题是:价格分布图。\'</code>。</p>\n<p>拼接完标题之后,会依次拼接系列的描述(<a href="https://echarts.apache.org/option.html#aria.series">aria.series</a>),和每个系列的数据的描述(<a href="https://echarts.apache.org/option.html#aria.data">aria.data</a>)。同样,每个模板都有可能包括模板变量,用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href="https://echarts.apache.org/option.html#aria">ARIA 文档</a>。</p>\n',postPath:"zh/best-practices/aria"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:c},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:C}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:f,draft:t},{title:"样式",dir:b},{title:"数据集",dir:u},{title:"数据转换",dir:B},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:x},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:F},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:T,draft:t},{title:"阶梯瀑布图",dir:y},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:D,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:K},{title:"区域面积图",dir:L},{title:"平滑曲线图",dir:P},{title:"阶梯线图",dir:Z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:G},{title:"圆环图",dir:M},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:_,children:[{title:"基础散点图",dir:z}]}]},{title:O,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:Y,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:O,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:c},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:C}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:f,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:u},{title:"Data Transform",dir:B},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:x},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:F},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:T,draft:t},{title:"Waterfall",dir:y}]},{title:"Line",dir:D,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:K},{title:"Area Chart",dir:L},{title:"Smoothed Line",dir:P},{title:"Step Line",dir:Z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:G},{title:"Ring Style",dir:M},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:_,children:[{title:"Basic Scatter",dir:z}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:Y,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/best-practices/aria",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+</code></pre> <h2 id="%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" tabindex="-1">整体修改描述</h2> <p>对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p> <p>这时候,用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> 配置项指定图表的整体描述。</p> <h2 id="%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" tabindex="-1">定制模板描述</h2> <p>除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。</p> <p>生成描述的基本流程为,如果 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code>,则生成无障碍访问描述,否则不生成。如果定义了 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a>,则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 <code>aria.description</code> 完全覆盖。</p> <p>使用模板拼接时,先根据是否存在标题 <a href="https://echarts.apache.org/option.html#title.text">title.text</a> 决定使用 <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> 还是 <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> 作为整体性描述。其中,<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>,将会被替换成图表标题。也就是说,如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是:{title}。'</code>,则如果包含标题 <code>'价格分布图'</code>,这部分的描述为 <code>'图表的标题是:价格分布图。'</code>。</p> <p>拼接完标题之后,会依次拼接系列的描述(<a href="https://echarts.apache.org/option.html#aria.series">aria.series</a>),和每个系列的数据的描述(<a href="https://echarts.apache.org/option.html#aria.data">aria.data</a>)。同样,每个模板都有可能包括模板变量,用以替换实际的值。</p> <p>完整的描述生成流程请参见 <a href="https://echarts.apache.org/option.html#aria">ARIA 文档</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/best-practices/aria.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,o,h,n,c,s,p,g,C,I,A,m,f,b,u,B,E,w,x,S,W,k,v,F,R,T,y,D,H,K,L,P,Z,G,M,U,_,z,O,X,J,Q,V,Y,N,j,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE" tabindex="-1">无障碍访问</h1>\n<p>W3C 制定了无障碍富互联网应用规范集(<a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>,the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。</p>\n<p>默认关闭,需要通过将 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code> 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。</p>\n<p>对于配置项:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGFyaWE6IHsKICAgIHNob3c6IHRydWUKICB9LAogIHRpdGxlOiB7CiAgICB0ZXh0OiAn5p-Q56uZ54K555So5oi36K6_6Zeu5p2l5rqQJywKICAgIHg6ICdjZW50ZXInCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-iuv-mXruadpea6kCcsCiAgICAgIHR5cGU6ICdwaWUnLAogICAgICBkYXRhOiBbCiAgICAgICAgeyB2YWx1ZTogMzM1LCBuYW1lOiAn55u05o6l6K6_6ZeuJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ-mCruS7tuiQpemUgCcgfSwKICAgICAgICB7IHZhbHVlOiAyMzQsIG5hbWU6ICfogZTnm5_lub_lkYonIH0sCiAgICAgICAgeyB2YWx1ZTogMTM1LCBuYW1lOiAn6KeG6aKR5bm_5ZGKJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICfmkJzntKLlvJXmk44nIH0KICAgICAgXQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/aria-pie"></md-example></p>\n<p>生成的图表 DOM 上,会有一个 <code>aria-label</code> 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图,表示访问来源。其数据是——直接访问的数据是335,邮件营销的数据是310,联盟广告的数据是234,视频广告的数据是135,搜索引擎的数据是1548。\n</code></pre>\n<h2 id="%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" tabindex="-1">整体修改描述</h2>\n<p>对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p>这时候,用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> 配置项指定图表的整体描述。</p>\n<h2 id="%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" tabindex="-1">定制模板描述</h2>\n<p>除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为,如果 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code>,则生成无障碍访问描述,否则不生成。如果定义了 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a>,则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时,先根据是否存在标题 <a href="https://echarts.apache.org/option.html#title.text">title.text</a> 决定使用 <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> 还是 <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> 作为整体性描述。其中,<code>aria.general.withTitle</code> 配置项包括模板变量 <code>\'{title}\'</code>,将会被替换成图表标题。也就是说,如果 <code>aria.general.withTitle</code> 被设置为 <code>\'图表的标题是:{title}。\'</code>,则如果包含标题 <code>\'价格分布图\'</code>,这部分的描述为 <code>\'图表的标题是:价格分布图。\'</code>。</p>\n<p>拼接完标题之后,会依次拼接系列的描述(<a href="https://echarts.apache.org/option.html#aria.series">aria.series</a>),和每个系列的数据的描述(<a href="https://echarts.apache.org/option.html#aria.data">aria.data</a>)。同样,每个模板都有可能包括模板变量,用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href="https://echarts.apache.org/option.html#aria">ARIA 文档</a>。</p>\n',postPath:"zh/best-practices/aria"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:c},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:C}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:f,draft:t},{title:"样式",dir:b},{title:"数据集",dir:u},{title:"数据转换",dir:B},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:x},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:F},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:T,draft:t},{title:"阶梯瀑布图",dir:y},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:D,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:K},{title:"区域面积图",dir:L},{title:"平滑曲线图",dir:P},{title:"阶梯线图",dir:Z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:G},{title:"圆环图",dir:M},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:_,children:[{title:"基础散点图",dir:z}]}]},{title:O,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:Y,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:O,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:c},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:C}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:f,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:u},{title:"Data Transform",dir:B},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:x},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:F},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:T,draft:t},{title:"Waterfall",dir:y}]},{title:"Line",dir:D,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:K},{title:"Area Chart",dir:L},{title:"Smoothed Line",dir:P},{title:"Step Line",dir:Z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:G},{title:"Ring Style",dir:M},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:_,children:[{title:"Basic Scatter",dir:z}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:Y,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/best-practices/aria",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/best-practices/canvas-vs-svg/index.html b/handbook/zh/best-practices/canvas-vs-svg/index.html
index 41b75ef..497e34c 100644
--- a/handbook/zh/best-practices/canvas-vs-svg/index.html
+++ b/handbook/zh/best-practices/canvas-vs-svg/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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="%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93" tabindex="-1">使用 Canvas 或者 SVG 渲染</h1> <p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。</p> <p>ECharts 从初始一直使用 Canvas 绘制图表。而 <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 <a href="https://echarts.apache.org//api.html#echarts.init">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器,比较方便。</p> <blockquote><p>SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 <a href="https://github.com/ecomfe/zrender">ZRender</a> 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。</p></blockquote> <h2 id="%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">选择哪种渲染器</h2> <p>一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">特效</a>。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。</p> <p>选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。</p> <ul><li>在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。</li> <li>在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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="%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93" tabindex="-1">使用 Canvas 或者 SVG 渲染</h1> <p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。</p> <p>ECharts 从初始一直使用 Canvas 绘制图表。而 <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 <a href="https://echarts.apache.org//api.html#echarts.init">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器,比较方便。</p> <blockquote><p>SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 <a href="https://github.com/ecomfe/zrender">ZRender</a> 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。</p></blockquote> <h2 id="%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">选择哪种渲染器</h2> <p>一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">特效</a>。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。</p> <p>选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。</p> <ul><li>在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。</li> <li>在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:
<ul><li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略得说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 <a href="https://ecomfe.github.io/echarts-liquidfill/example/">水球图</a> 等,SVG 渲染器可能效果更好。</li> <li>数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。</li></ul></li></ul> <p>我们强烈欢迎开发者们<a href="https://github.com/apache/echarts/issues/new">反馈</a>给我们使用的体验和场景,帮助我们更好的做优化。</p> <p>注:当前某些特殊的渲染依然需要依赖 Canvas:如<a href="https://echarts.apache.org/option.html#series-lines.effect">炫光尾迹特效</a>、<a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap">带有混合效果的热力图</a>等。</p> <h2 id="%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">如何使用渲染器</h2> <p>如果是用如下的方式完整引入<code>echarts</code>,代码中已经包含了 SVG 渲染器和 Canvas 渲染器</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>如果你是按照 <a href="zh/basics/import">在项目中引入 Apache ECharts</a> 一文中的介绍使用按需引入,则需要手动引入需要的渲染器</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/core'</span><span class="token punctuation">;</span>
<span class="token comment">// 可以根据需要选用只用到的渲染器</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> SVGRenderer<span class="token punctuation">,</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span>
@@ -18,7 +18,8 @@
<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 使用 SVG 渲染器</span>
-<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<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 punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/best-practices/canvas-vs-svg.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,l,d,n,h,c,s,o,p,m,g,b,f,u,v,C,E,S,B,y,I,G,k,w,V,Z,L,R,W,X,D,J,P,A,Y,j,x,N,z,F,H,T,K,M,O,U,_,q,Q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93" tabindex="-1">使用 Canvas 或者 SVG 渲染</h1>\n<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>ECharts 从初始一直使用 Canvas 绘制图表。而 <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 <a href="https://echarts.apache.org//api.html#echarts.init">renderer 参数</a> 为 <code>\'canvas\'</code> 或 <code>\'svg\'</code> 即可指定渲染器,比较方便。</p>\n<blockquote>\n<p>SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 <a href="https://github.com/ecomfe/zrender">ZRender</a> 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>\n</blockquote>\n<h2 id="%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">选择哪种渲染器</h2>\n<p>一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">特效</a>。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。</p>\n<p>选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>\n<ul>\n<li>在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。</li>\n<li>在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:\n<ul>\n<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略得说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 <a href="https://ecomfe.github.io/echarts-liquidfill/example/">水球图</a> 等,SVG 渲染器可能效果更好。</li>\n<li>数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。</li>\n</ul>\n</li>\n</ul>\n<p>我们强烈欢迎开发者们<a href="https://github.com/apache/echarts/issues/new">反馈</a>给我们使用的体验和场景,帮助我们更好的做优化。</p>\n<p>注:当前某些特殊的渲染依然需要依赖 Canvas:如<a href="https://echarts.apache.org/option.html#series-lines.effect">炫光尾迹特效</a>、<a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap">带有混合效果的热力图</a>等。</p>\n<h2 id="%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">如何使用渲染器</h2>\n<p>如果是用如下的方式完整引入<code>echarts</code>,代码中已经包含了 SVG 渲染器和 Canvas 渲染器</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>如果你是按照 <a href="zh/basics/import">在项目中引入 Apache ECharts</a> 一文中的介绍使用按需引入,则需要手动引入需要的渲染器</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwovLyDlj6_ku6XmoLnmja7pnIDopoHpgInnlKjlj6rnlKjliLDnmoTmuLLmn5PlmagKaW1wb3J0IHsgU1ZHUmVuZGVyZXIsIENhbnZhc1JlbmRlcmVyIH0gZnJvbSAnZWNoYXJ0cy9yZW5kZXJlcnMnOwoKZWNoYXJ0cy51c2UoW1NWR1JlbmRlcmVyLCBDYW52YXNSZW5kZXJlcl0pOw\'" line-highlights="\'\'" />\n<p>然后,我们就可以在代码中,初始化图表实例时,<a href="https://echarts.apache.org//api.html/api.html#echarts.init">传入参数</a> 选择渲染器类型:</p>\n<md-code-block lang="js" code="\'Ly8g5L2_55SoIENhbnZhcyDmuLLmn5PlmajvvIjpu5jorqTvvIkKdmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGNvbnRhaW5lckRvbSwgbnVsbCwgeyByZW5kZXJlcjogJ2NhbnZhcycgfSk7Ci8vIOetieS7t-S6ju-8mgp2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoY29udGFpbmVyRG9tKTsKCi8vIOS9v-eUqCBTVkcg5riy5p-T5ZmoCnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChjb250YWluZXJEb20sIG51bGwsIHsgcmVuZGVyZXI6ICdzdmcnIH0pOw\'" line-highlights="\'\'" />\n',postPath:"zh/best-practices/canvas-vs-svg"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:s},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:u,draft:t},{title:"系列",dir:v,draft:t},{title:"样式",dir:C},{title:"数据集",dir:E},{title:"数据转换",dir:S},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:I},{title:"事件与行为",dir:G}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:w,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:V},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:W},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:X,children:[{title:"基础折线图",dir:D},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:P},{title:"平滑曲线图",dir:A},{title:"阶梯线图",dir:Y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:j},{title:"圆环图",dir:x},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:F}]}]},{title:H,dir:i,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:H,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:n},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:s},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:v,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:E},{title:"Data Transform",dir:S},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:I},{title:"Event and Action",dir:G}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:w,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:V},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:W}]},{title:"Line",dir:X,children:[{title:"Basic Line",dir:D},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:P},{title:"Smoothed Line",dir:A},{title:"Step Line",dir:Y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:j},{title:"Ring Style",dir:x},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/best-practices/canvas-vs-svg",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<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 punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/best-practices/canvas-vs-svg.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,l,d,n,h,c,s,o,p,m,g,b,f,u,v,C,E,S,B,y,I,G,k,w,V,Z,L,R,W,X,D,J,P,A,Y,j,x,N,z,F,H,T,K,M,O,U,_,q,Q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93" tabindex="-1">使用 Canvas 或者 SVG 渲染</h1>\n<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>ECharts 从初始一直使用 Canvas 绘制图表。而 <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 <a href="https://echarts.apache.org//api.html#echarts.init">renderer 参数</a> 为 <code>\'canvas\'</code> 或 <code>\'svg\'</code> 即可指定渲染器,比较方便。</p>\n<blockquote>\n<p>SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 <a href="https://github.com/ecomfe/zrender">ZRender</a> 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>\n</blockquote>\n<h2 id="%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">选择哪种渲染器</h2>\n<p>一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">特效</a>。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。</p>\n<p>选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>\n<ul>\n<li>在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。</li>\n<li>在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:\n<ul>\n<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略得说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 <a href="https://ecomfe.github.io/echarts-liquidfill/example/">水球图</a> 等,SVG 渲染器可能效果更好。</li>\n<li>数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。</li>\n</ul>\n</li>\n</ul>\n<p>我们强烈欢迎开发者们<a href="https://github.com/apache/echarts/issues/new">反馈</a>给我们使用的体验和场景,帮助我们更好的做优化。</p>\n<p>注:当前某些特殊的渲染依然需要依赖 Canvas:如<a href="https://echarts.apache.org/option.html#series-lines.effect">炫光尾迹特效</a>、<a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap">带有混合效果的热力图</a>等。</p>\n<h2 id="%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">如何使用渲染器</h2>\n<p>如果是用如下的方式完整引入<code>echarts</code>,代码中已经包含了 SVG 渲染器和 Canvas 渲染器</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>如果你是按照 <a href="zh/basics/import">在项目中引入 Apache ECharts</a> 一文中的介绍使用按需引入,则需要手动引入需要的渲染器</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwovLyDlj6_ku6XmoLnmja7pnIDopoHpgInnlKjlj6rnlKjliLDnmoTmuLLmn5PlmagKaW1wb3J0IHsgU1ZHUmVuZGVyZXIsIENhbnZhc1JlbmRlcmVyIH0gZnJvbSAnZWNoYXJ0cy9yZW5kZXJlcnMnOwoKZWNoYXJ0cy51c2UoW1NWR1JlbmRlcmVyLCBDYW52YXNSZW5kZXJlcl0pOw\'" line-highlights="\'\'" />\n<p>然后,我们就可以在代码中,初始化图表实例时,<a href="https://echarts.apache.org//api.html/api.html#echarts.init">传入参数</a> 选择渲染器类型:</p>\n<md-code-block lang="js" code="\'Ly8g5L2_55SoIENhbnZhcyDmuLLmn5PlmajvvIjpu5jorqTvvIkKdmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGNvbnRhaW5lckRvbSwgbnVsbCwgeyByZW5kZXJlcjogJ2NhbnZhcycgfSk7Ci8vIOetieS7t-S6ju-8mgp2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoY29udGFpbmVyRG9tKTsKCi8vIOS9v-eUqCBTVkcg5riy5p-T5ZmoCnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChjb250YWluZXJEb20sIG51bGwsIHsgcmVuZGVyZXI6ICdzdmcnIH0pOw\'" line-highlights="\'\'" />\n',postPath:"zh/best-practices/canvas-vs-svg"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:s},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:u,draft:t},{title:"系列",dir:v,draft:t},{title:"样式",dir:C},{title:"数据集",dir:E},{title:"数据转换",dir:S},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:I},{title:"事件与行为",dir:G}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:w,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:V},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:W},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:X,children:[{title:"基础折线图",dir:D},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:P},{title:"平滑曲线图",dir:A},{title:"阶梯线图",dir:Y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:j},{title:"圆环图",dir:x},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:F}]}]},{title:H,dir:i,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:H,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:n},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:s},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:v,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:E},{title:"Data Transform",dir:S},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:I},{title:"Event and Action",dir:G}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:w,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:V},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:W}]},{title:"Line",dir:X,children:[{title:"Basic Line",dir:D},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:P},{title:"Smoothed Line",dir:A},{title:"Step Line",dir:Y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:j},{title:"Ring Style",dir:x},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/best-practices/canvas-vs-svg",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/concepts/axis/index.html b/handbook/zh/concepts/axis/index.html
index 1734c1f..a623322 100644
--- a/handbook/zh/concepts/axis/index.html
+++ b/handbook/zh/concepts/axis/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9D%90%E6%A0%87%E8%BD%B4" tabindex="-1">坐标轴</h1> <p>直角坐标系中的 x/y 轴。</p> <h2 id="x-%E8%BD%B4%E3%80%81y-%E8%BD%B4" tabindex="-1">x 轴、y 轴</h2> <p>x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据</p> <img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg"> <p>普通的二维数据坐标系都有 x 轴和 y 轴,通常情况下,x 轴显示在图表的底部,y 轴显示在左侧,一般配置如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9D%90%E6%A0%87%E8%BD%B4" tabindex="-1">坐标轴</h1> <p>直角坐标系中的 x/y 轴。</p> <h2 id="x-%E8%BD%B4%E3%80%81y-%E8%BD%B4" tabindex="-1">x 轴、y 轴</h2> <p>x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据</p> <img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg"> <p>普通的二维数据坐标系都有 x 轴和 y 轴,通常情况下,x 轴显示在图表的底部,y 轴显示在左侧,一般配置如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
@@ -275,7 +275,8 @@
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步<a href="https://echarts.apache.org/option.html#xAxis">官网</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/concepts/axis.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"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a><a href="https://github.com/yufeng04" target="_blank" class="post-contributor"><img alt="yufeng04" src="https://avatars.githubusercontent.com/yufeng04?size=60"> <span>yufeng04</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,g,C,I,A,l,d,r,a,o,n,s,h,c,B,p,u,w,b,L,m,y,G,x,f,K,H,W,Z,D,E,O,X,v,S,z,J,M,N,Y,F,T,R,V,k,j,U,P,Q,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9D%90%E6%A0%87%E8%BD%B4" tabindex="-1">坐标轴</h1>\n<p>直角坐标系中的 x/y 轴。</p>\n<h2 id="x-%E8%BD%B4%E3%80%81y-%E8%BD%B4" tabindex="-1">x 轴、y 轴</h2>\n<p>x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据</p>\n<img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg">\n</img>\n<p>普通的二维数据坐标系都有 x 轴和 y 轴,通常情况下,x 轴显示在图表的底部,y 轴显示在左侧,一般配置如下:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICAvLyAuLi4KICB9LAogIHlBeGlzOiB7CiAgICAvLyAuLi4KICB9Cn07\'" line-highlights="\'\'" />\n<p>x 轴常用来标示数据的维度,维度一般用来指数据的类别,是观察数据的角度,例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值,数值是用来具体考察某一类数据的数量值,也是我们需要分析的指标,例如“销售数量”和“销售金额”等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAn6ZSA5ZSu5pe26Ze0JwogICAgLy8gLi4uCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJywKICAgIG5hbWU6ICfplIDllK7mlbDph48nCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>当 x 轴(水平坐标轴)跨度很大,可以采用才区域缩放方式灵活显示数据内容。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAn6ZSA5ZSu5pe26Ze0JwogICAgLy8gLi4uCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJywKICAgIG5hbWU6ICfplIDllK7mlbDph48nCiAgICAvLyAuLi4KICB9LAogIGRhdGFab29tOiBbCiAgICAvLyAuLi4KICBdCiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>在二维数据中,轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴,多于两个 x/y 轴需要通过配置 <a href="https://echarts.apache.org/option.html#xAxis.offset">offset</a> 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下,两个 y 轴显示在左右两侧。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAn6ZSA5ZSu5pe26Ze0JwogICAgLy8gLi4uCiAgfSwKICB5QXhpczogWwogICAgewogICAgICB0eXBlOiAndmFsdWUnLAogICAgICBuYW1lOiAn6ZSA5ZSu5pWw6YePJwogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICfplIDllK7ph5Hpop0nCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E8%BD%B4%E7%BA%BF" tabindex="-1">轴线</h2>\n<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLine">axisLine</a> 相关的配置,我们可以根据实际情况调整,例如轴线两端的箭头,轴线的样式等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGluZTogewogICAgICBzeW1ib2w6ICdhcnJvdycsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMaW5lOiB7CiAgICAgIHN5bWJvbDogJ2Fycm93JywKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E5%88%BB%E5%BA%A6" tabindex="-1">刻度</h2>\n<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisTick">axisTick</a> 相关的配置,我们可以根据实际情况调整,例如刻度线的长度,样式等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzVGljazogewogICAgICBsZW5ndGg6IDYsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNUaWNrOiB7CiAgICAgIGxlbmd0aDogNiwKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E5%88%BB%E5%BA%A6%E6%A0%87%E7%AD%BE" tabindex="-1">刻度标签</h2>\n<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel">axisLabel</a> 相关的配置,我们可以根据实际情况调整,例如文字对齐方式,自定义刻度标签内容等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGFiZWw6IHsKICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBrZycsCiAgICAgIGFsaWduOiAnY2VudGVyJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMYWJlbDogewogICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IOWFgycsCiAgICAgIGFsaWduOiAnY2VudGVyJwogICAgICAvLyAuLi4KICAgIH0KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E7%A4%BA%E4%BE%8B" tabindex="-1">示例</h2>\n<p>图左侧的 y 轴代表东京月平均气温,右侧的 y 轴表示东京降水量,x 轴表示时间。两组 y 轴在一起,反映了平均气温和降水量间的趋势关系。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJywKICAgIGF4aXNQb2ludGVyOiB7IHR5cGU6ICdjcm9zcycgfQogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBheGlzVGljazogewogICAgICAgIGFsaWduV2l0aExhYmVsOiB0cnVlCiAgICAgIH0sCiAgICAgIGRhdGE6IFsKICAgICAgICAnMeaciCcsCiAgICAgICAgJzLmnIgnLAogICAgICAgICcz5pyIJywKICAgICAgICAnNOaciCcsCiAgICAgICAgJzXmnIgnLAogICAgICAgICc25pyIJywKICAgICAgICAnN-aciCcsCiAgICAgICAgJzjmnIgnLAogICAgICAgICc55pyIJywKICAgICAgICAnMTDmnIgnLAogICAgICAgICcxMeaciCcsCiAgICAgICAgJzEy5pyIJwogICAgICBdCiAgICB9CiAgXSwKICB5QXhpczogWwogICAgewogICAgICB0eXBlOiAndmFsdWUnLAogICAgICBuYW1lOiAn6ZmN5rC06YePJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDI1MCwKICAgICAgcG9zaXRpb246ICdyaWdodCcsCiAgICAgIGF4aXNMYWJlbDogewogICAgICAgIGZvcm1hdHRlcjogJ3t2YWx1ZX0gbWwnCiAgICAgIH0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICfmuKnluqYnLAogICAgICBtaW46IDAsCiAgICAgIG1heDogMjUsCiAgICAgIHBvc2l0aW9uOiAnbGVmdCcsCiAgICAgIGF4aXNMYWJlbDogewogICAgICAgIGZvcm1hdHRlcjogJ3t2YWx1ZX0gwrBDJwogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mZjeawtOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICB5QXhpc0luZGV4OiAwLAogICAgICBkYXRhOiBbNiwgMzIsIDcwLCA4NiwgNjguNywgMTAwLjcsIDEyNS42LCAxMTIuMiwgNzguNywgNDguOCwgMzYuMCwgMTkuM10KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICfmuKnluqYnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZSwKICAgICAgeUF4aXNJbmRleDogMSwKICAgICAgZGF0YTogWwogICAgICAgIDYuMCwKICAgICAgICAxMC4yLAogICAgICAgIDEwLjMsCiAgICAgICAgMTEuNSwKICAgICAgICAxMC4zLAogICAgICAgIDEzLjIsCiAgICAgICAgMTQuMywKICAgICAgICAxNi40LAogICAgICAgIDE4LjAsCiAgICAgICAgMTYuNSwKICAgICAgICAxMi4wLAogICAgICAgIDUuMgogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步<a href="https://echarts.apache.org/option.html#xAxis">官网</a>。</p>\n',postPath:"zh/concepts/axis"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:C},{title:"入门篇",dir:I,children:[{title:"获取 ECharts",dir:A},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:d,draft:i},{title:"获取灵感",dir:r},{title:"寻求帮助",dir:a},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:s},{title:5.2,dir:h}]}]},{title:"概念篇",dir:c,children:[{title:"图表容器及大小",dir:B},{title:"配置项",dir:p,draft:i},{title:"系列",dir:u,draft:i},{title:"样式",dir:w},{title:"数据集",dir:b},{title:"数据转换",dir:L},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:G},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:f,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:Z},{title:"极坐标系柱状图",dir:D,draft:i},{title:"阶梯瀑布图",dir:E},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:X},{title:"堆叠折线图",dir:v},{title:"区域面积图",dir:S},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:J}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:T}]}]},{title:R,dir:t,draft:i},{title:"跨平台方案",dir:V,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:k}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:P,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:R,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:C},{title:"Basics",dir:I,children:[{title:"Download ECharts",dir:A},{title:"Import ECharts",dir:l},{title:"Resources",dir:d,draft:i},{title:"Inspiration",dir:r},{title:"Get Help",dir:a},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:s},{title:5.2,dir:h}]}]},{title:"Concepts",dir:c,children:[{title:"Chart Container",dir:B},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:u,draft:i},{title:"Style",dir:w},{title:"Dataset",dir:b},{title:"Data Transform",dir:L},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:G},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:f,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:Z},{title:"Bar Polar",dir:D,draft:i},{title:"Waterfall",dir:E}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:X},{title:"Stacked Line",dir:v},{title:"Area Chart",dir:S},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:J}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:N},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:V,children:[{title:"Server Side Rendering",dir:k}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:P,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/axis",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步<a href="https://echarts.apache.org/option.html#xAxis">官网</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/concepts/axis.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"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a><a href="https://github.com/yufeng04" target="_blank" class="post-contributor"><img alt="yufeng04" src="https://avatars.githubusercontent.com/yufeng04?size=60"> <span>yufeng04</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,g,C,I,A,l,d,r,a,o,n,s,h,c,B,p,u,w,b,L,m,y,G,x,f,K,H,W,Z,D,E,O,X,v,S,z,J,M,N,Y,F,T,R,V,k,j,U,P,Q,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9D%90%E6%A0%87%E8%BD%B4" tabindex="-1">坐标轴</h1>\n<p>直角坐标系中的 x/y 轴。</p>\n<h2 id="x-%E8%BD%B4%E3%80%81y-%E8%BD%B4" tabindex="-1">x 轴、y 轴</h2>\n<p>x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据</p>\n<img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg">\n</img>\n<p>普通的二维数据坐标系都有 x 轴和 y 轴,通常情况下,x 轴显示在图表的底部,y 轴显示在左侧,一般配置如下:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICAvLyAuLi4KICB9LAogIHlBeGlzOiB7CiAgICAvLyAuLi4KICB9Cn07\'" line-highlights="\'\'" />\n<p>x 轴常用来标示数据的维度,维度一般用来指数据的类别,是观察数据的角度,例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值,数值是用来具体考察某一类数据的数量值,也是我们需要分析的指标,例如“销售数量”和“销售金额”等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAn6ZSA5ZSu5pe26Ze0JwogICAgLy8gLi4uCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJywKICAgIG5hbWU6ICfplIDllK7mlbDph48nCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>当 x 轴(水平坐标轴)跨度很大,可以采用才区域缩放方式灵活显示数据内容。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAn6ZSA5ZSu5pe26Ze0JwogICAgLy8gLi4uCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJywKICAgIG5hbWU6ICfplIDllK7mlbDph48nCiAgICAvLyAuLi4KICB9LAogIGRhdGFab29tOiBbCiAgICAvLyAuLi4KICBdCiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>在二维数据中,轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴,多于两个 x/y 轴需要通过配置 <a href="https://echarts.apache.org/option.html#xAxis.offset">offset</a> 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下,两个 y 轴显示在左右两侧。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAn6ZSA5ZSu5pe26Ze0JwogICAgLy8gLi4uCiAgfSwKICB5QXhpczogWwogICAgewogICAgICB0eXBlOiAndmFsdWUnLAogICAgICBuYW1lOiAn6ZSA5ZSu5pWw6YePJwogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICfplIDllK7ph5Hpop0nCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E8%BD%B4%E7%BA%BF" tabindex="-1">轴线</h2>\n<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLine">axisLine</a> 相关的配置,我们可以根据实际情况调整,例如轴线两端的箭头,轴线的样式等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGluZTogewogICAgICBzeW1ib2w6ICdhcnJvdycsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMaW5lOiB7CiAgICAgIHN5bWJvbDogJ2Fycm93JywKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E5%88%BB%E5%BA%A6" tabindex="-1">刻度</h2>\n<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisTick">axisTick</a> 相关的配置,我们可以根据实际情况调整,例如刻度线的长度,样式等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzVGljazogewogICAgICBsZW5ndGg6IDYsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNUaWNrOiB7CiAgICAgIGxlbmd0aDogNiwKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E5%88%BB%E5%BA%A6%E6%A0%87%E7%AD%BE" tabindex="-1">刻度标签</h2>\n<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel">axisLabel</a> 相关的配置,我们可以根据实际情况调整,例如文字对齐方式,自定义刻度标签内容等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGFiZWw6IHsKICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBrZycsCiAgICAgIGFsaWduOiAnY2VudGVyJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMYWJlbDogewogICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IOWFgycsCiAgICAgIGFsaWduOiAnY2VudGVyJwogICAgICAvLyAuLi4KICAgIH0KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E7%A4%BA%E4%BE%8B" tabindex="-1">示例</h2>\n<p>图左侧的 y 轴代表东京月平均气温,右侧的 y 轴表示东京降水量,x 轴表示时间。两组 y 轴在一起,反映了平均气温和降水量间的趋势关系。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJywKICAgIGF4aXNQb2ludGVyOiB7IHR5cGU6ICdjcm9zcycgfQogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBheGlzVGljazogewogICAgICAgIGFsaWduV2l0aExhYmVsOiB0cnVlCiAgICAgIH0sCiAgICAgIGRhdGE6IFsKICAgICAgICAnMeaciCcsCiAgICAgICAgJzLmnIgnLAogICAgICAgICcz5pyIJywKICAgICAgICAnNOaciCcsCiAgICAgICAgJzXmnIgnLAogICAgICAgICc25pyIJywKICAgICAgICAnN-aciCcsCiAgICAgICAgJzjmnIgnLAogICAgICAgICc55pyIJywKICAgICAgICAnMTDmnIgnLAogICAgICAgICcxMeaciCcsCiAgICAgICAgJzEy5pyIJwogICAgICBdCiAgICB9CiAgXSwKICB5QXhpczogWwogICAgewogICAgICB0eXBlOiAndmFsdWUnLAogICAgICBuYW1lOiAn6ZmN5rC06YePJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDI1MCwKICAgICAgcG9zaXRpb246ICdyaWdodCcsCiAgICAgIGF4aXNMYWJlbDogewogICAgICAgIGZvcm1hdHRlcjogJ3t2YWx1ZX0gbWwnCiAgICAgIH0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICfmuKnluqYnLAogICAgICBtaW46IDAsCiAgICAgIG1heDogMjUsCiAgICAgIHBvc2l0aW9uOiAnbGVmdCcsCiAgICAgIGF4aXNMYWJlbDogewogICAgICAgIGZvcm1hdHRlcjogJ3t2YWx1ZX0gwrBDJwogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mZjeawtOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICB5QXhpc0luZGV4OiAwLAogICAgICBkYXRhOiBbNiwgMzIsIDcwLCA4NiwgNjguNywgMTAwLjcsIDEyNS42LCAxMTIuMiwgNzguNywgNDguOCwgMzYuMCwgMTkuM10KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICfmuKnluqYnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZSwKICAgICAgeUF4aXNJbmRleDogMSwKICAgICAgZGF0YTogWwogICAgICAgIDYuMCwKICAgICAgICAxMC4yLAogICAgICAgIDEwLjMsCiAgICAgICAgMTEuNSwKICAgICAgICAxMC4zLAogICAgICAgIDEzLjIsCiAgICAgICAgMTQuMywKICAgICAgICAxNi40LAogICAgICAgIDE4LjAsCiAgICAgICAgMTYuNSwKICAgICAgICAxMi4wLAogICAgICAgIDUuMgogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步<a href="https://echarts.apache.org/option.html#xAxis">官网</a>。</p>\n',postPath:"zh/concepts/axis"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:C},{title:"入门篇",dir:I,children:[{title:"获取 ECharts",dir:A},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:d,draft:i},{title:"获取灵感",dir:r},{title:"寻求帮助",dir:a},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:s},{title:5.2,dir:h}]}]},{title:"概念篇",dir:c,children:[{title:"图表容器及大小",dir:B},{title:"配置项",dir:p,draft:i},{title:"系列",dir:u,draft:i},{title:"样式",dir:w},{title:"数据集",dir:b},{title:"数据转换",dir:L},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:G},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:f,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:Z},{title:"极坐标系柱状图",dir:D,draft:i},{title:"阶梯瀑布图",dir:E},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:X},{title:"堆叠折线图",dir:v},{title:"区域面积图",dir:S},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:J}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:T}]}]},{title:R,dir:t,draft:i},{title:"跨平台方案",dir:V,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:k}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:P,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:R,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:C},{title:"Basics",dir:I,children:[{title:"Download ECharts",dir:A},{title:"Import ECharts",dir:l},{title:"Resources",dir:d,draft:i},{title:"Inspiration",dir:r},{title:"Get Help",dir:a},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:s},{title:5.2,dir:h}]}]},{title:"Concepts",dir:c,children:[{title:"Chart Container",dir:B},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:u,draft:i},{title:"Style",dir:w},{title:"Dataset",dir:b},{title:"Data Transform",dir:L},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:G},{title:"Event and Action",dir:x}]},{title:"How To Guides",dir:f,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:Z},{title:"Bar Polar",dir:D,draft:i},{title:"Waterfall",dir:E}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:X},{title:"Stacked Line",dir:v},{title:"Area Chart",dir:S},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:J}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:N},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:V,children:[{title:"Server Side Rendering",dir:k}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:P,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/axis",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/concepts/chart-size/index.html b/handbook/zh/concepts/chart-size/index.html
index e0fa437..2d13938 100644
--- a/handbook/zh/concepts/chart-size/index.html
+++ b/handbook/zh/concepts/chart-size/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B0%8F" tabindex="-1">图表容器及大小</h1> <p>在<a href="zh/get-started">快速上手</a>中,我们介绍了初始化 ECharts 的接口 <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>。<a href="https://echarts.apache.org//api.html#echarts.init">API 文档</a>中详细介绍了参数的具体含义,建议理解后再阅读本文。</p> <p>下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。</p> <h2 id="%E5%88%9D%E5%A7%8B%E5%8C%96" tabindex="-1">初始化</h2> <h3 id="%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89" tabindex="-1">在 HTML 中定义有宽度和高度的父容器(推荐)</h3> <p>通常来说,需要在 HTML 中先定义一个 <code><div></code> 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 <code>opts.width</code> 或 <code>opts.height</code> 将其覆盖。</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"><</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>main<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> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></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"></</span>div</span><span class="token punctuation">></span></span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B0%8F" tabindex="-1">图表容器及大小</h1> <p>在<a href="zh/get-started">快速上手</a>中,我们介绍了初始化 ECharts 的接口 <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>。<a href="https://echarts.apache.org//api.html#echarts.init">API 文档</a>中详细介绍了参数的具体含义,建议理解后再阅读本文。</p> <p>下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。</p> <h2 id="%E5%88%9D%E5%A7%8B%E5%8C%96" tabindex="-1">初始化</h2> <h3 id="%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89" tabindex="-1">在 HTML 中定义有宽度和高度的父容器(推荐)</h3> <p>通常来说,需要在 HTML 中先定义一个 <code><div></code> 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 <code>opts.width</code> 或 <code>opts.height</code> 将其覆盖。</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"><</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>main<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> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></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"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
var myChart = echarts.init(document.getElementById('main'));
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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>需要注意的是,使用这种方法在调用 <code>echarts.init</code> 时需保证容器已经有宽度和高度了。</p> <h3 id="%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">指定图表的大小</h3> <p>如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。</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"><</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>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
@@ -35,7 +35,8 @@
<span class="token tag"><span class="token tag"><span class="token punctuation"></</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> <h3 id="%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">为图表设置特定的大小</h3> <p>除了直接调用 <code>resize()</code> 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">resize</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
width<span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
height<span class="token operator">:</span> <span class="token number">400</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> <blockquote><p>小贴士:阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。</p></blockquote> <h3 id="%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6" tabindex="-1">容器节点被销毁以及被重建时</h3> <p>假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。</p> <p>本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。</p> <p>正确的做法是,在图表容器被销毁之后,调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 销毁实例,在图表容器重新被添加后再次调用 <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> 初始化。</p> <blockquote><p>小贴士:在容器节点被销毁时,总是应调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 以销毁实例释放资源,避免内存泄漏。</p></blockquote></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/concepts/chart-size.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,h,n,c,o,s,p,E,A,B,g,C,b,m,f,u,I,w,D,P,k,W,G,R,S,Z,x,F,v,H,L,X,y,z,V,N,Y,j,M,J,K,Q,O,T,U,_,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B0%8F" tabindex="-1">图表容器及大小</h1>\n<p>在<a href="zh/get-started">快速上手</a>中,我们介绍了初始化 ECharts 的接口 <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>。<a href="https://echarts.apache.org//api.html#echarts.init">API 文档</a>中详细介绍了参数的具体含义,建议理解后再阅读本文。</p>\n<p>下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。</p>\n<h2 id="%E5%88%9D%E5%A7%8B%E5%8C%96" tabindex="-1">初始化</h2>\n<h3 id="%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89" tabindex="-1">在 HTML 中定义有宽度和高度的父容器(推荐)</h3>\n<p>通常来说,需要在 HTML 中先定义一个 <code><div></code> 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 <code>opts.width</code> 或 <code>opts.height</code> 将其覆盖。</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgogIHZhciBteUNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwo8L3NjcmlwdD4\'" line-highlights="\'\'" />\n<p>需要注意的是,使用这种方法在调用 <code>echarts.init</code> 时需保证容器已经有宽度和高度了。</p>\n<h3 id="%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">指定图表的大小</h3>\n<p>如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiI-PC9kaXY-CjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpLCBudWxsLCB7CiAgICB3aWR0aDogNjAwLAogICAgaGVpZ2h0OiA0MDAKICB9KTsKPC9zY3JpcHQ-\'" line-highlights="\'\'" />\n<h2 id="%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96" tabindex="-1">响应容器大小的变化</h2>\n<h3 id="%E7%9B%91%E5%90%AC%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%B9%B6%E6%94%B9%E5%8F%98%E5%9B%BE%E8%A1%A8%E5%A4%A7%E5%B0%8F" tabindex="-1">监听图表容器的大小并改变图表大小</h3>\n<p>在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。</p>\n<p>比如,图表容器是一个高度为 300px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。</p>\n<p>这种情况下,可以监听页面的 <code>window.onresize</code> 事件获取浏览器大小改变的事件,然后调用 <a href="https://echarts.apache.org/api.html#echartsInstance.resize"><code>echartsInstance.resize</code></a> 改变图表的大小。</p>\n<md-code-block lang="html" code="\'PHN0eWxlPgogICNtYWluLAogIGh0bWwsCiAgYm9keSB7CiAgICB3aWR0aDogMTAwJTsKICB9CiAgI21haW4gewogICAgaGVpZ2h0OiA0MDBweDsKICB9Cjwvc3R5bGU-CjxkaXYgaWQ9Im1haW4iPjwvZGl2Pgo8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI-CiAgdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CiAgd2luZG93Lm9ucmVzaXplID0gZnVuY3Rpb24oKSB7CiAgICBteUNoYXJ0LnJlc2l6ZSgpOwogIH07Cjwvc2NyaXB0Pg\'" line-highlights="\'\'" />\n<h3 id="%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">为图表设置特定的大小</h3>\n<p>除了直接调用 <code>resize()</code> 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5yZXNpemUoewogIHdpZHRoOiA4MDAsCiAgaGVpZ2h0OiA0MDAKfSk7\'" line-highlights="\'\'" />\n<blockquote>\n<p>小贴士:阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。</p>\n</blockquote>\n<h3 id="%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6" tabindex="-1">容器节点被销毁以及被重建时</h3>\n<p>假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。</p>\n<p>本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。</p>\n<p>正确的做法是,在图表容器被销毁之后,调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 销毁实例,在图表容器重新被添加后再次调用 <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> 初始化。</p>\n<blockquote>\n<p>小贴士:在容器节点被销毁时,总是应调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 以销毁实例释放资源,避免内存泄漏。</p>\n</blockquote>\n',postPath:"zh/concepts/chart-size"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:o},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:E},{title:5.2,dir:A}]}]},{title:"概念篇",dir:B,children:[{title:"图表容器及大小",dir:g},{title:"配置项",dir:C,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:m},{title:"数据集",dir:f},{title:"数据转换",dir:u},{title:"坐标系",dir:I,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:D},{title:"事件与行为",dir:P}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:S},{title:"极坐标系柱状图",dir:Z,draft:t},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:F,children:[{title:"基础折线图",dir:v},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:L},{title:"平滑曲线图",dir:X},{title:"阶梯线图",dir:y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:Y,children:[{title:"基础散点图",dir:j}]}]},{title:M,dir:i,draft:t},{title:"跨平台方案",dir:J,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:T,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:M,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:o},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:E},{title:5.2,dir:A}]}]},{title:"Concepts",dir:B,children:[{title:"Chart Container",dir:g},{title:"Chart Option",dir:C,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:m},{title:"Dataset",dir:f},{title:"Data Transform",dir:u},{title:"Coordinate",dir:I,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:D},{title:"Event and Action",dir:P}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:S},{title:"Bar Polar",dir:Z,draft:t},{title:"Waterfall",dir:x}]},{title:"Line",dir:F,children:[{title:"Basic Line",dir:v},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:L},{title:"Smoothed Line",dir:X},{title:"Step Line",dir:y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:V},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:Y,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:J,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:T,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/concepts/chart-size",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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> <blockquote><p>小贴士:阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。</p></blockquote> <h3 id="%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6" tabindex="-1">容器节点被销毁以及被重建时</h3> <p>假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。</p> <p>本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。</p> <p>正确的做法是,在图表容器被销毁之后,调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 销毁实例,在图表容器重新被添加后再次调用 <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> 初始化。</p> <blockquote><p>小贴士:在容器节点被销毁时,总是应调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 以销毁实例释放资源,避免内存泄漏。</p></blockquote></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/concepts/chart-size.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,h,n,c,o,s,p,E,A,B,g,C,b,m,f,u,I,w,D,P,k,W,G,R,S,Z,x,F,v,H,L,X,y,z,V,N,Y,j,M,J,K,Q,O,T,U,_,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B0%8F" tabindex="-1">图表容器及大小</h1>\n<p>在<a href="zh/get-started">快速上手</a>中,我们介绍了初始化 ECharts 的接口 <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>。<a href="https://echarts.apache.org//api.html#echarts.init">API 文档</a>中详细介绍了参数的具体含义,建议理解后再阅读本文。</p>\n<p>下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。</p>\n<h2 id="%E5%88%9D%E5%A7%8B%E5%8C%96" tabindex="-1">初始化</h2>\n<h3 id="%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89" tabindex="-1">在 HTML 中定义有宽度和高度的父容器(推荐)</h3>\n<p>通常来说,需要在 HTML 中先定义一个 <code><div></code> 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 <code>opts.width</code> 或 <code>opts.height</code> 将其覆盖。</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgogIHZhciBteUNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwo8L3NjcmlwdD4\'" line-highlights="\'\'" />\n<p>需要注意的是,使用这种方法在调用 <code>echarts.init</code> 时需保证容器已经有宽度和高度了。</p>\n<h3 id="%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">指定图表的大小</h3>\n<p>如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiI-PC9kaXY-CjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpLCBudWxsLCB7CiAgICB3aWR0aDogNjAwLAogICAgaGVpZ2h0OiA0MDAKICB9KTsKPC9zY3JpcHQ-\'" line-highlights="\'\'" />\n<h2 id="%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96" tabindex="-1">响应容器大小的变化</h2>\n<h3 id="%E7%9B%91%E5%90%AC%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%B9%B6%E6%94%B9%E5%8F%98%E5%9B%BE%E8%A1%A8%E5%A4%A7%E5%B0%8F" tabindex="-1">监听图表容器的大小并改变图表大小</h3>\n<p>在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。</p>\n<p>比如,图表容器是一个高度为 300px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。</p>\n<p>这种情况下,可以监听页面的 <code>window.onresize</code> 事件获取浏览器大小改变的事件,然后调用 <a href="https://echarts.apache.org/api.html#echartsInstance.resize"><code>echartsInstance.resize</code></a> 改变图表的大小。</p>\n<md-code-block lang="html" code="\'PHN0eWxlPgogICNtYWluLAogIGh0bWwsCiAgYm9keSB7CiAgICB3aWR0aDogMTAwJTsKICB9CiAgI21haW4gewogICAgaGVpZ2h0OiA0MDBweDsKICB9Cjwvc3R5bGU-CjxkaXYgaWQ9Im1haW4iPjwvZGl2Pgo8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI-CiAgdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CiAgd2luZG93Lm9ucmVzaXplID0gZnVuY3Rpb24oKSB7CiAgICBteUNoYXJ0LnJlc2l6ZSgpOwogIH07Cjwvc2NyaXB0Pg\'" line-highlights="\'\'" />\n<h3 id="%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">为图表设置特定的大小</h3>\n<p>除了直接调用 <code>resize()</code> 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5yZXNpemUoewogIHdpZHRoOiA4MDAsCiAgaGVpZ2h0OiA0MDAKfSk7\'" line-highlights="\'\'" />\n<blockquote>\n<p>小贴士:阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。</p>\n</blockquote>\n<h3 id="%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6" tabindex="-1">容器节点被销毁以及被重建时</h3>\n<p>假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。</p>\n<p>本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。</p>\n<p>正确的做法是,在图表容器被销毁之后,调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 销毁实例,在图表容器重新被添加后再次调用 <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> 初始化。</p>\n<blockquote>\n<p>小贴士:在容器节点被销毁时,总是应调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 以销毁实例释放资源,避免内存泄漏。</p>\n</blockquote>\n',postPath:"zh/concepts/chart-size"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:o},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:E},{title:5.2,dir:A}]}]},{title:"概念篇",dir:B,children:[{title:"图表容器及大小",dir:g},{title:"配置项",dir:C,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:m},{title:"数据集",dir:f},{title:"数据转换",dir:u},{title:"坐标系",dir:I,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:D},{title:"事件与行为",dir:P}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:S},{title:"极坐标系柱状图",dir:Z,draft:t},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:F,children:[{title:"基础折线图",dir:v},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:L},{title:"平滑曲线图",dir:X},{title:"阶梯线图",dir:y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:Y,children:[{title:"基础散点图",dir:j}]}]},{title:M,dir:i,draft:t},{title:"跨平台方案",dir:J,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:T,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:M,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:o},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:E},{title:5.2,dir:A}]}]},{title:"Concepts",dir:B,children:[{title:"Chart Container",dir:g},{title:"Chart Option",dir:C,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:m},{title:"Dataset",dir:f},{title:"Data Transform",dir:u},{title:"Coordinate",dir:I,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:D},{title:"Event and Action",dir:P}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:S},{title:"Bar Polar",dir:Z,draft:t},{title:"Waterfall",dir:x}]},{title:"Line",dir:F,children:[{title:"Basic Line",dir:v},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:L},{title:"Smoothed Line",dir:X},{title:"Step Line",dir:y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:V},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:Y,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:J,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:T,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/concepts/chart-size",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/concepts/data-transform/index.html b/handbook/zh/concepts/data-transform/index.html
index 28572ae..68c9d94 100644
--- a/handbook/zh/concepts/data-transform/index.html
+++ b/handbook/zh/concepts/data-transform/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E4%BD%BF%E7%94%A8-transform-%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2" tabindex="-1">使用 transform 进行数据转换</h1> <p>Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)和一个“转换方法”(<a href="https://echarts.apache.org/option.html##dataset.transform">transform</a>),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。</p> <p>抽象地来说,数据转换是这样一种公式:<code>outData = f(inputData)</code>。<code>f</code> 是转换方法,例如:<code>filter</code>、<code>sort</code>、<code>regression</code>、<code>boxplot</code>、<code>cluster</code>、<code>aggregate</code>(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:</p> <ul><li>把数据分成多份用不同的饼图展现。</li> <li>进行一些数据统计运算,并展示结果。</li> <li>用某些数据可视化算法处理数据,并展示结果。</li> <li>数据排序。</li> <li>去除或直选择数据项。</li> <li>...</li></ul> <h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">数据转换基础使用</h2> <p>在 echarts 中,数据转换是依托于数据集(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)来实现的. 我们可以设置 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 来表示,此 dataset 的数据,来自于此 transform 的结果。</p> <p>下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E4%BD%BF%E7%94%A8-transform-%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2" tabindex="-1">使用 transform 进行数据转换</h1> <p>Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)和一个“转换方法”(<a href="https://echarts.apache.org/option.html##dataset.transform">transform</a>),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。</p> <p>抽象地来说,数据转换是这样一种公式:<code>outData = f(inputData)</code>。<code>f</code> 是转换方法,例如:<code>filter</code>、<code>sort</code>、<code>regression</code>、<code>boxplot</code>、<code>cluster</code>、<code>aggregate</code>(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:</p> <ul><li>把数据分成多份用不同的饼图展现。</li> <li>进行一些数据统计运算,并展示结果。</li> <li>用某些数据可视化算法处理数据,并展示结果。</li> <li>数据排序。</li> <li>去除或直选择数据项。</li> <li>...</li></ul> <h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">数据转换基础使用</h2> <p>在 echarts 中,数据转换是依托于数据集(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)来实现的. 我们可以设置 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 来表示,此 dataset 的数据,来自于此 transform 的结果。</p> <p>下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var option = {
dataset: [
{
// 这个 dataset 的 index 是 `0`。
@@ -574,7 +574,8 @@
datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>一些使用 echarts-stat 的例子:</p> <ul><li><a href="https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&edit=1&reset=1">聚集 (Aggregate)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&edit=1&reset=1">直方图 (Histogram)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1">简单聚类 (Clustering)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1">线性回归线 (Linear Regression)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1">指数回归线 (Exponential Regression)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">对数回归线 (Logarithmic Regression)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">多项式回归线 (Polynomial Regression)</a></li></ul></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/concepts/data-transform.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,A,i,e,t,d,o,l,a,c,n,r,s,m,h,y,b,p,W,u,Z,B,L,w,J,G,M,D,O,S,X,E,F,z,R,v,H,Y,K,N,V,j,f,x,k,T,U,Q,q,P,_,$,gg,Ig,Cg){return{layout:"default",data:[{html:'<h1 id="%E4%BD%BF%E7%94%A8-transform-%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2" tabindex="-1">使用 transform 进行数据转换</h1>\n<p>Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)和一个“转换方法”(<a href="https://echarts.apache.org/option.html##dataset.transform">transform</a>),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。</p>\n<p>抽象地来说,数据转换是这样一种公式:<code>outData = f(inputData)</code>。<code>f</code> 是转换方法,例如:<code>filter</code>、<code>sort</code>、<code>regression</code>、<code>boxplot</code>、<code>cluster</code>、<code>aggregate</code>(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:</p>\n<ul>\n<li>把数据分成多份用不同的饼图展现。</li>\n<li>进行一些数据统计运算,并展示结果。</li>\n<li>用某些数据可视化算法处理数据,并展示结果。</li>\n<li>数据排序。</li>\n<li>去除或直选择数据项。</li>\n<li>...</li>\n</ul>\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">数据转换基础使用</h2>\n<p>在 echarts 中,数据转换是依托于数据集(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)来实现的. 我们可以设置 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 来表示,此 dataset 的数据,来自于此 transform 的结果。</p>\n<p>下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIOi_meS4qiBkYXRhc2V0IOeahCBpbmRleCDmmK8gYDBg44CCCiAgICAgIHNvdXJjZTogWwogICAgICAgIFsnUHJvZHVjdCcsICdTYWxlcycsICdQcmljZScsICdZZWFyJ10sCiAgICAgICAgWydDYWtlJywgMTIzLCAzMiwgMjAxMV0sCiAgICAgICAgWydDZXJlYWwnLCAyMzEsIDE0LCAyMDExXSwKICAgICAgICBbJ1RvZnUnLCAyMzUsIDUsIDIwMTFdLAogICAgICAgIFsnRHVtcGxpbmcnLCAzNDEsIDI1LCAyMDExXSwKICAgICAgICBbJ0Jpc2N1aXQnLCAxMjIsIDI5LCAyMDExXSwKICAgICAgICBbJ0Nha2UnLCAxNDMsIDMwLCAyMDEyXSwKICAgICAgICBbJ0NlcmVhbCcsIDIwMSwgMTksIDIwMTJdLAogICAgICAgIFsnVG9mdScsIDI1NSwgNywgMjAxMl0sCiAgICAgICAgWydEdW1wbGluZycsIDI0MSwgMjcsIDIwMTJdLAogICAgICAgIFsnQmlzY3VpdCcsIDEwMiwgMzQsIDIwMTJdLAogICAgICAgIFsnQ2FrZScsIDE1MywgMjgsIDIwMTNdLAogICAgICAgIFsnQ2VyZWFsJywgMTgxLCAyMSwgMjAxM10sCiAgICAgICAgWydUb2Z1JywgMzk1LCA0LCAyMDEzXSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjgxLCAzMSwgMjAxM10sCiAgICAgICAgWydCaXNjdWl0JywgOTIsIDM5LCAyMDEzXSwKICAgICAgICBbJ0Nha2UnLCAyMjMsIDI5LCAyMDE0XSwKICAgICAgICBbJ0NlcmVhbCcsIDIxMSwgMTcsIDIwMTRdLAogICAgICAgIFsnVG9mdScsIDM0NSwgMywgMjAxNF0sCiAgICAgICAgWydEdW1wbGluZycsIDIxMSwgMzUsIDIwMTRdLAogICAgICAgIFsnQmlzY3VpdCcsIDcyLCAyNCwgMjAxNF0KICAgICAgXQogICAgICAvLyBpZDogJ2EnCiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5pivIGAxYOOAggogICAgICAvLyDov5nkuKogYHRyYW5zZm9ybWAg6YWN572u77yM6KGo56S677yM5q2kIGRhdGFzZXQg55qE5pWw5o2u77yM5p2l6Ieq5LqO5q2kIHRyYW5zZm9ybSDnmoTnu5PmnpzjgIIKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1llYXInLCB2YWx1ZTogMjAxMSB9CiAgICAgIH0KICAgICAgLy8g5oiR5Lus6L-Y5Y-v5Lul6K6-572u6L-Z5Lqb5Y-v6YCJ55qE5bGe5oCn77yaIGBmcm9tRGF0YXNldEluZGV4YCDmiJYgYGZyb21EYXRhc2V0SWRg44CCCiAgICAgIC8vIOi_meS6m-WxnuaAp--8jOaMh-WumuS6hu-8jHRyYW5zZm9ybSDnmoTovpPlhaXvvIzmnaXoh6rkuo7lk6rkuKogZGF0YXNldOOAguS-i-Wmgu-8jAogICAgICAvLyBgZnJvbURhdGFzZXRJbmRleDogMGAg6KGo56S66L6T5YWl5p2l6Ieq5LqOIGluZGV4IOS4uiBgMGAg55qEIGRhdGFzZXQg44CC5Y-I5L6L5aaC77yMCiAgICAgIC8vIGBmcm9tRGF0YXNldElkOiAnYSdgIOihqOekuui-k-WFpeadpeiHquS6jiBgaWQ6ICdhJ2Ag55qEIGRhdGFzZXTjgIIKICAgICAgLy8g5b2T6L-Z5Lqb5bGe5oCn6YO95LiN5oyH5a6a5pe277yM6buY6K6k6K6k5Li677yM6L6T5YWl5p2l6Ieq5LqOIGluZGV4IOS4uiBgMGAg55qEIGRhdGFzZXQg44CCCiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5pivIGAyYOOAggogICAgICAvLyDlkIzmoLfvvIzov5nph4zlm6DkuLogYGZyb21EYXRhc2V0SW5kZXhgIOWSjCBgZnJvbURhdGFzZXRJZGAg6YO95rKh5pyJ6KKr5oyH5a6a77yMCiAgICAgIC8vIOmCo-S5iOi-k-WFpem7mOiupOadpeiHquS6jiBpbmRleCDkuLogYDBgIOeahCBkYXRhc2V0IOOAggogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyDov5nkuKrnsbvlnovkuLogImZpbHRlciIg55qEIHRyYW5zZm9ybSDog73lpJ_pgY3ljoblubbnrZvpgInlh7rmu6HotrPmnaHku7bnmoTmlbDmja7pobnjgIIKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICAvLyDmr4_kuKogdHJhbnNmb3JtIOWmguaenOmcgOimgeaciemFjee9ruWPguaVsOeahOivne-8jOmDvemhu-mFjee9ruWcqCBgY29uZmlnYCDph4zjgIIKICAgICAgICAvLyDlnKjov5nkuKogImZpbHRlciIgdHJhbnNmb3JtIOS4re-8jGBjb25maWdgIOeUqOS6juaMh-Wumuetm-mAieadoeS7tuOAggogICAgICAgIC8vIOS4i-mdoui_meS4quetm-mAieadoeS7tuaYr--8mumAieWHuue7tOW6pu-8iCBkaW1lbnNpb24g77yJJ1llYXInIOS4reWAvOS4uiAyMDEyIOeahOaJgOaciQogICAgICAgIC8vIOaVsOaNrumhueOAggogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgdmFsdWU6IDIwMTIgfQogICAgICB9CiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5pivIGAzYOOAggogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsIHZhbHVlOiAyMDEzIH0KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IDUwLAogICAgICBjZW50ZXI6IFsnMjUlJywgJzUwJSddLAogICAgICAvLyDov5nkuKrppbzlm77ns7vliJfvvIzlvJXnlKjkuoYgaW5kZXgg5Li6IGAxYCDnmoQgZGF0YXNldCDjgILkuZ_lsLHmmK_vvIzlvJXnlKjkuobkuIrov7AKICAgICAgLy8gMjAxMSDlubTpgqPkuKogImZpbHRlciIgdHJhbnNmb3JtIOeahOe7k-aenOOAggogICAgICBkYXRhc2V0SW5kZXg6IDEKICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IDUwLAogICAgICBjZW50ZXI6IFsnNTAlJywgJzUwJSddLAogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IDUwLAogICAgICBjZW50ZXI6IFsnNzUlJywgJzUwJSddLAogICAgICBkYXRhc2V0SW5kZXg6IDMKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>现在我们简单总结下,使用 transform 时的几个要点:</p>\n<ul>\n<li>在一个空的 dataset 中声明 <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> 来表示我们要生成新的数据。</li>\n<li>系列引用这个 dataset 。</li>\n</ul>\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8" tabindex="-1">数据转换的进阶使用</h2>\n<h4 id="%E9%93%BE%E5%BC%8F%E5%A3%B0%E6%98%8E-transform" tabindex="-1">链式声明 transform</h4>\n<p><code>transform</code> 可以被链式声明,这是一个语法糖。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8g5Y6f5aeL5pWw5o2uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIC8vIOWHoOS4qiB0cmFuc2Zvcm0g6KKr5aOw5piO5oiQIGFycmF5IO-8jOS7luS7rOaehOaIkOS6huS4gOS4qumTvu-8jAogICAgICAvLyDliY3kuIDkuKogdHJhbnNmb3JtIOeahOi-k-WHuuaYr-WQjuS4gOS4qiB0cmFuc2Zvcm0g55qE6L6T5YWl44CCCiAgICAgIHRyYW5zZm9ybTogWwogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCB2YWx1ZTogJ1RvZnUnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgb3JkZXI6ICdkZXNjJyB9CiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgLy8g6L-Z5Liq57O75YiX5byV55So5LiK6L-wIHRyYW5zZm9ybSDnmoTnu5PmnpzjgIIKICAgIGRhdGFzZXRJbmRleDogMQogIH0KfTs\'" line-highlights="\'\'" />\n<blockquote>\n<p>注意:理论上,任何 transform 都可能有多个输入或多个输出。但是,如果一个 transform 被链式声明,它只能获取前一个 transform 的第一个输出作为输入(第一个 transform 除外),以及它只能把自己的第一个输出给到后一个 transform (最后一个 transform 除外)。</p>\n</blockquote>\n<h4 id="%E4%B8%80%E4%B8%AA-transform-%E8%BE%93%E5%87%BA%E5%A4%9A%E4%B8%AA-data" tabindex="-1">一个 transform 输出多个 data</h4>\n<p>在大多数场景下,transform 只需输出一个 data 。但是也有一些场景,需要输出多个 data ,每个 data 可以被不同的 series 或者 dataset 所使用。</p>\n<p>例如,在内置的 "boxplot" transform 中,除了 boxplot 系列所需要的 data 外,离群点( outlier )也会被生成,并且可以用例如散点图系列显示出来。例如,<a href="https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity">example</a>。</p>\n<p>我们提供配置 <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> 来满足这种情况,例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgLy8g6L-Z5LiqIGRhdGFzZXQg55qEIGluZGV4IOS4uiBgMGDjgIIKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8g5Y6f5aeL5pWw5o2uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIC8vIOi_meS4qiBkYXRhc2V0IOeahCBpbmRleCDkuLogYDFg44CCCiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdib3hwbG90JwogICAgICB9CiAgICAgIC8vIOi_meS4qiAiYm94cGxvdCIgdHJhbnNmb3JtIOeUn-aIkOS6huS4pOS4quaVsOaNru-8mgogICAgICAvLyByZXN1bHRbMF06IGJveHBsb3Qgc2VyaWVzIOaJgOmcgOeahOaVsOaNruOAggogICAgICAvLyByZXN1bHRbMV06IOemu-e-pOeCueaVsOaNruOAggogICAgICAvLyDlvZPlhbbku5Ygc2VyaWVzIOaIluiAhSBkYXRhc2V0IOW8leeUqOi_meS4qiBkYXRhc2V0IOaXtu-8jOS7luS7rOm7mOiupOWPquiDveW-l-WIsAogICAgICAvLyByZXN1bHRbMF0g44CCCiAgICAgIC8vIOWmguaenOaDs-imgeS7luS7rOW-l-WIsCByZXN1bHRbMV0g77yM6ZyA6KaB6aKd5aSW5aOw5piO5aaC5LiL6L-Z5qC35LiA5LiqIGRhdGFzZXQg77yaCiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5Li6IGAyYOOAggogICAgICAvLyDov5nkuKrpop3lpJbnmoQgZGF0YXNldCDmjIflrprkuobmlbDmja7mnaXmupDkuo4gaW5kZXgg5Li6IGAxYCDnmoQgZGF0YXNldOOAggogICAgICBmcm9tRGF0YXNldEluZGV4OiAxLAogICAgICAvLyDlubbkuJTmjIflrprkuobojrflj5YgdHJhbnNmb3JtIHJlc3VsdFsxXSDjgIIKICAgICAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ2JveHBsb3QnLAogICAgICB0eXBlOiAnYm94cGxvdCcsCiAgICAgIC8vIFJlZmVyZW5jZSB0aGUgZGF0YSBmcm9tIHJlc3VsdFswXS4KICAgICAgLy8g6L-Z5LiqIHNlcmllcyDlvJXnlKggaW5kZXgg5Li6IGAxYCDnmoQgZGF0YXNldCDjgIIKICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9LAogICAgewogICAgICBuYW1lOiAnb3V0bGllcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgLy8g6L-Z5LiqIHNlcmllcyDlvJXnlKggaW5kZXgg5Li6IGAyYCDnmoQgZGF0YXNldCDjgIIKICAgICAgLy8g5LuO6ICM5Lmf5bCx5b6X5Yiw5LqG5LiK6L-w55qEIHRyYW5zZm9ybSByZXN1bHRbMV0g77yI5Y2z56a7576k54K55pWw5o2u77yJCiAgICAgIGRhdGFzZXRJbmRleDogMgogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>另外,<a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> 和 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 能同时出现在一个 dataset 中,这表示,这个 transform 的输入,是上游的结果中以 <code>fromTransformResult</code> 获取的结果。例如:</p>\n<md-code-block lang="js" code="\'ewogIGZyb21EYXRhc2V0SW5kZXg6IDEsCiAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMSwKICB0cmFuc2Zvcm06IHsKICAgIHR5cGU6ICdzb3J0JywKICAgIGNvbmZpZzogeyBkaW1lbnNpb246IDIsIG9yZGVyOiAnZGVzYycgfQogIH0KfQ\'" line-highlights="\'\'" />\n<h4 id="%E5%9C%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%AD-debug" tabindex="-1">在开发环境中 debug</h4>\n<p>使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 <code>transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7fSwKICAgICAgICAvLyDphY3nva7kuLogYHRydWVgIOWQju-8jCB0cmFuc2Zvcm0g55qE57uT5p6cCiAgICAgICAgLy8g5Lya6KKrIGNvbnNvbGUubG9nIOaJk-WNsOWHuuadpeOAggogICAgICAgIHByaW50OiB0cnVlCiAgICAgIH0KICAgIH0KICBdCiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-%22filter%22" tabindex="-1">数据转换器 "filter"</h2>\n<p>echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 <code>transform.type: "filter"</code>,以及给出数据筛选条件。如下例:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0xhdHRlJywgMjMxLCAxNCwgMjAxMV0sCiAgICAgICAgWydUb2Z1JywgMjM1LCA1LCAyMDExXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzQxLCAyNSwgMjAxMV0sCiAgICAgICAgWydQb3JyaWRnZScsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnTGF0dGUnLCAyMDEsIDE5LCAyMDEyXSwKICAgICAgICBbJ1RvZnUnLCAyNTUsIDcsIDIwMTJdLAogICAgICAgIFsnTWlsayBUZWUnLCAyNDEsIDI3LCAyMDEyXSwKICAgICAgICBbJ1BvcnJpZGdlJywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydMYXR0ZScsIDE4MSwgMjEsIDIwMTNdLAogICAgICAgIFsnVG9mdScsIDM5NSwgNCwgMjAxM10sCiAgICAgICAgWydNaWxrIFRlZScsIDI4MSwgMzEsIDIwMTNdLAogICAgICAgIFsnUG9ycmlkZ2UnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnTGF0dGUnLCAyMTEsIDE3LCAyMDE0XSwKICAgICAgICBbJ1RvZnUnLCAzNDUsIDMsIDIwMTRdLAogICAgICAgIFsnTWlsayBUZWUnLCAyMTEsIDM1LCAyMDE0XSwKICAgICAgICBbJ1BvcnJpZGdlJywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9CiAgICAgICAgLy8g6L-Z5Liq562b6YCJ5p2h5Lu26KGo56S677yM6YGN5Y6G5pWw5o2u77yM562b6YCJ5Ye657u05bqm77yIIGRpbWVuc2lvbiDvvIkKICAgICAgICAvLyAnWWVhcicg5LiK5YC85Li6IDIwMTEg55qE5omA5pyJ5pWw5o2u6aG544CCCiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9Cn07\'" v-bind="{}" />\n<p>这是 filter 的另一个例子的效果:</p>\n<p><md-example src="data-transform-filter"></md-example></p>\n<p>在 "filter" transform 中,有这些要素:</p>\n<p><strong>关于维度( dimension ):</strong></p>\n<p><code>config.dimension</code> 指定了维度,能设成这样的值:</p>\n<ul>\n<li>设定成声明在 dataset 中的维度名,例如 <code>config: { dimension: \'Year\', \'=\': 2011 }</code>。不过, dataset 中维度名的声明并非强制,所以我们也可以</li>\n<li>设定成 dataset 中的维度 index (index 值从 0 开始)例如 <code>config: { dimension: 3, \'=\': 2011 }</code>。</li>\n</ul>\n<p><strong>关于关系比较操作符:</strong></p>\n<p>关系操作符,可以设定这些:\n<code>></code>(<code>gt</code>)、<code>>=</code>(<code>gte</code>)、<code><</code>(<code>lt</code>)、<code><=</code>(<code>lte</code>)、<code>=</code>(<code>eq</code>)、<code>!=</code>(<code>ne</code>、<code><></code>)、<code>reg</code>。(小括号中的符号或名字,是别名,设置起来作用相同)。他们首先基本地能基于数值大小进行比较,然后也有些额外的功能特性:</p>\n<ul>\n<li>多个关系操作符能声明在一个 {} 中,例如 <code>{ dimension: \'Price\', \'>=\': 20, \'<\': 30 }</code>。这表示“与”的关系,即,筛选出价格大于等于 20 小雨 30 的数据项。</li>\n<li>data 里的值,不仅可以是数值( number ),也可以是“类数值的字符串”(“ numeric string ”)。“类数值的字符串”本身是一个字符串,但是可以被转换为字面所描述的数值,例如 <code>\' 123 \'</code>。转换过程中,空格(全角半角空格)和换行符都能被消除( trim )。</li>\n<li>如果我们需要对日期对象(JS <code>Date</code>)或者日期字符串(如 \'2012-05-12\')进行比较,我们需要手动指定 <code>parser: \'time\'</code>,例如 <code>config: { dimension: 3, lt: \'2012-05-12\', parser: \'time\' }</code>。</li>\n<li>纯字符串比较也被支持,但是只能用在 <code>=</code> 或 <code>!=</code> 上。而 <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> 并不支持纯字符串比较,也就是说,这四个操作符的右值,不能是字符串。</li>\n<li><code>reg</code> 操作符能提供正则表达式比较。例如, <code>{ dimension: \'Name\', reg: /\\s+Müller\\s*$/ }</code> 能在 <code>\'Name\'</code> 维度上选出姓 <code>\'Müller\'</code> 的数据项。</li>\n</ul>\n<p><strong>关于逻辑比较:</strong></p>\n<p>我们也支持了逻辑比较操作符 <strong>与或非</strong>( <code>and</code> | <code>or</code> | <code>not</code> ):</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8gLi4uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogewogICAgICAgICAgLy8g5L2_55SoIGFuZCDmk43kvZznrKbjgIIKICAgICAgICAgIC8vIOexu-S8vOWcsO-8jOWQjOagt-eahOS9jee9ruS5n-WPr-S7peS9v-eUqCDigJxvcuKAnSDmiJYg4oCcbm904oCd44CCCiAgICAgICAgICAvLyDkvYbmmK_ms6jmhI8g4oCcbm904oCdIOWQjuW6lOivpei3n-S4gOS4qiB7Li4ufSDogIzpnZ4gWy4uLl0g44CCCiAgICAgICAgICBhbmQ6IFsKICAgICAgICAgICAgeyBkaW1lbnNpb246ICdZZWFyJywgJz0nOiAyMDExIH0sCiAgICAgICAgICAgIHsgZGltZW5zaW9uOiAnUHJpY2UnLCAnPj0nOiAyMCwgJzwnOiAzMCB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICAgIC8vIOi_meS4quihqOi-vueahOaYr--8jOmAieWHuiAyMDExIOW5tOS7t-agvOWkp-S6juetieS6jiAyMCDkvYblsI_kuo4gMzAg55qE5pWw5o2u6aG544CCCiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9Cn07\'" line-highlights="\'\'" />\n<p><code>and</code>/<code>or</code>/<code>not</code> 自然可以被嵌套,例如:</p>\n<md-code-block lang="js" code="\'dHJhbnNmb3JtOiB7CiAgdHlwZTogJ2ZpbHRlcicsCiAgY29uZmlnOiB7CiAgICBvcjogW3sKICAgICAgYW5kOiBbewogICAgICAgIGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMTAsICc8JzogMjAKICAgICAgfSwgewogICAgICAgIGRpbWVuc2lvbjogJ1NhbGVzJywgJzwnOiAxMDAKICAgICAgfSwgewogICAgICAgIG5vdDogeyBkaW1lbnNpb246ICdQcm9kdWN0JywgJz0nOiAnVG9mdScgfQogICAgICB9XQogICAgfSwgewogICAgICBhbmQ6IFt7CiAgICAgICAgZGltZW5zaW9uOiAnUHJpY2UnLCAnPj0nOiAxMCwgJzwnOiAyMAogICAgICB9LCB7CiAgICAgICAgZGltZW5zaW9uOiAnU2FsZXMnLCAnPCc6IDEwMAogICAgICB9LCB7CiAgICAgICAgbm90OiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCAnPSc6ICdDYWtlJyB9CiAgICAgIH1dCiAgICB9XQogIH0KfQ\'" line-highlights="\'\'" />\n<p><strong>关于解析器( parser ):</strong></p>\n<p>还可以指定“解析器”( parser )来对值进行解析后再做比较。现在支持的解析器有:</p>\n<ul>\n<li><code>parser: \'time\'</code>:把原始值解析成时间戳( timestamp )后再做比较。这个解析器的行为,和 <code>echarts.time.parse</code> 相同,即,当原始值为时间对象( JS <code>Date</code> 实例),或者是时间戳,或者是描述时间的字符串(例如 <code>\'2012-05-12 03:11:22\'</code> ),都可以被解析为时间戳,然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值,那么会被解析为 NaN。</li>\n<li><code>parser: \'trim\'</code>:如果原始数据是字符串,则把字符串两端的空格(全角半角)和换行符去掉。如果不是字符串,还保持为原始数据。</li>\n<li><code>parser: \'number\'</code>:强制把原始数据转成数值。如果不能转成有意义的数值,那么转成 <code>NaN</code>。在大多数场景下,我们并不需要这个解析器,因为按默认策略,“像数值的字符串”就会被转成数值。但是默认策略比较严格,这个解析器比较宽松,如果我们遇到含有尾缀的字符串(例如 <code>\'33%\'</code>, <code>12px</code>),我们需要手动指定 <code>parser: \'number\'</code>,从而去掉尾缀转为数值才能比较。</li>\n</ul>\n<p>这个例子显示了如何使用 <code>parser: \'time\'</code>:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ0RhdGUnXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzExLCAyMSwgJzIwMTItMDUtMTInXSwKICAgICAgICBbJ0Nha2UnLCAxMzUsIDI4LCAnMjAxMi0wNS0yMiddLAogICAgICAgIFsnTGF0dGUnLCAyNjIsIDM2LCAnMjAxMi0wNi0wMiddLAogICAgICAgIFsnTWlsayBUZWUnLCAzNTksIDIxLCAnMjAxMi0wNi0yMiddLAogICAgICAgIFsnQ2FrZScsIDEyMSwgMjgsICcyMDEyLTA3LTAyJ10sCiAgICAgICAgWydMYXR0ZScsIDI3MSwgMzYsICcyMDEyLTA2LTIyJ10KICAgICAgICAvLyAuLi4KICAgICAgXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICBkaW1lbnNpb246ICdEYXRlJywKICAgICAgICAgICc-PSc6ICcyMDEyLTA1JywKICAgICAgICAgICc8JzogJzIwMTItMDYnLAogICAgICAgICAgcGFyc2VyOiAndGltZScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><strong>形式化定义:</strong></p>\n<p>最后,我们给出,数据转换器 "filter" 的 config 的形式化定义:</p>\n<md-code-block lang="ts" code="\'dHlwZSBGaWx0ZXJUcmFuc2Zvcm0gPSB7CiAgdHlwZTogJ2ZpbHRlcic7CiAgY29uZmlnOiBDb25kaXRpb25hbEV4cHJlc3Npb25PcHRpb247Cn07CnR5cGUgQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uID0KICB8IHRydWUKICB8IGZhbHNlCiAgfCBSZWxhdGlvbmFsRXhwcmVzc2lvbk9wdGlvbgogIHwgTG9naWNhbEV4cHJlc3Npb25PcHRpb247CnR5cGUgUmVsYXRpb25hbEV4cHJlc3Npb25PcHRpb24gPSB7CiAgZGltZW5zaW9uOiBEaW1lbnNpb25OYW1lIHwgRGltZW5zaW9uSW5kZXg7CiAgcGFyc2VyPzogJ3RpbWUnIHwgJ3RyaW0nIHwgJ251bWJlcic7CiAgbHQ_OiBEYXRhVmFsdWU7IC8vIGxlc3MgdGhhbgogIGx0ZT86IERhdGFWYWx1ZTsgLy8gbGVzcyB0aGFuIG9yIGVxdWFsCiAgZ3Q_OiBEYXRhVmFsdWU7IC8vIGdyZWF0ZXIgdGhhbgogIGd0ZT86IERhdGFWYWx1ZTsgLy8gZ3JlYXRlciB0aGFuIG9yIGVxdWFsCiAgZXE_OiBEYXRhVmFsdWU7IC8vIGVxdWFsCiAgbmU_OiBEYXRhVmFsdWU7IC8vIG5vdCBlcXVhbAogICc8Jz86IERhdGFWYWx1ZTsgLy8gbHQKICAnPD0nPzogRGF0YVZhbHVlOyAvLyBsdGUKICAnPic_OiBEYXRhVmFsdWU7IC8vIGd0CiAgJz49Jz86IERhdGFWYWx1ZTsgLy8gZ3RlCiAgJz0nPzogRGF0YVZhbHVlOyAvLyBlcQogICchPSc_OiBEYXRhVmFsdWU7IC8vIG5lCiAgJzw-Jz86IERhdGFWYWx1ZTsgLy8gbmUgKFNRTCBzdHlsZSkKICByZWc_OiBSZWdFeHAgfCBzdHJpbmc7IC8vIFJlZ0V4cAp9Owp0eXBlIExvZ2ljYWxFeHByZXNzaW9uT3B0aW9uID0gewogIGFuZD86IENvbmRpdGlvbmFsRXhwcmVzc2lvbk9wdGlvbltdOwogIG9yPzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uW107CiAgbm90PzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uOwp9Owp0eXBlIERhdGFWYWx1ZSA9IHN0cmluZyB8IG51bWJlciB8IERhdGU7CnR5cGUgRGltZW5zaW9uTmFtZSA9IHN0cmluZzsKdHlwZSBEaW1lbnNpb25JbmRleCA9IG51bWJlcjs\'" line-highlights="\'\'" />\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-%22sort%22" tabindex="-1">数据转换器 "sort"</h2>\n<p>"sort" 是另一个内置的数据转换器,用于排序数据。目前主要能用于在类目轴( <code>axis.type: \'category\'</code> )中显示排过序的数据。例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAvLyDmjInliIbmlbDmjpLluo8KICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnc2NvcmUnLCBvcmRlcjogJ2FzYycgfQogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdiYXInLAogICAgZGF0YXNldEluZGV4OiAxCiAgfQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p><md-example src="data-transform-sort-bar"></md-example></p>\n<p>数据转换器 "sort" 还有一些额外的功能:</p>\n<ul>\n<li>可以多重排序,多个维度一起排序。见下面的例子。</li>\n<li>排序规则是这样的:\n<ul>\n<li>默认按照数值大小排序。其中,“可转为数值的字符串”也被转换成数值,和其他数值一起按大小排序。</li>\n<li>对于其他“不能转为数值的字符串”,也能在它们之间按字符串进行排序。这个特性有助于这种场景:把相同标签的数据项排到一起,尤其是当多个维度共同排序时。见下面的例子。</li>\n<li>当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时,或者它们和“其他类型的值”进行比较时,它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”,并且可以设置 <code>incomparable: \'min\' | \'max\'</code> 来指定一个“incomparable”在这个比较中是最大还是最小,从而能使它们能产生比较结果。这个设定的用途,比如可以是,决定空值(例如 <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>\'\'</code>, <code>\'-\'</code>)在排序的头还是尾。</li>\n</ul>\n</li>\n<li>过滤器 <code>filter: \'time\' | \'trim\' | \'number\'</code> 可以被使用,和数据转换器 "filter" 中的情况一样。\n<ul>\n<li>如果要对时间进行排序(例如,值为 JS <code>Date</code> 实例或者时间字符串如 <code>\'2012-03-12 11:13:54\'</code>),我们需要声明 <code>parser: \'time\'</code>。</li>\n<li>如果需要对有后缀的数值进行排序(如 <code>\'33%\'</code>, <code>\'16px\'</code>)我们需要声明 <code>parser: \'number\'</code>。</li>\n</ul>\n</li>\n</ul>\n<p>这是一个“多维度排序”的例子。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICBjb25maWc6IFsKICAgICAgICAgIC8vIOWvueS4pOS4que7tOW6puaMieWjsOaYjueahOS8mOWFiOe6p-WIhuWIq-aOkuW6j-OAggogICAgICAgICAgeyBkaW1lbnNpb246ICdwcm9mZXNzaW9uJywgb3JkZXI6ICdkZXNjJyB9LAogICAgICAgICAgeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnZGVzYycgfQogICAgICAgIF0KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnYmFyJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KICAvLy4uLgp9Ow\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/data-transform-multiple-sort-bar"></md-example></p>\n<p>最后,我们给出数据转换器 "sort" 的 config 的形式化定义。</p>\n<md-code-block lang="ts" code="\'dHlwZSBTb3J0VHJhbnNmb3JtID0gewogIHR5cGU6ICdmaWx0ZXInOwogIGNvbmZpZzogT3JkZXJFeHByZXNzaW9uIHwgT3JkZXJFeHByZXNzaW9uW107Cn07CnR5cGUgT3JkZXJFeHByZXNzaW9uID0gewogIGRpbWVuc2lvbjogRGltZW5zaW9uTmFtZSB8IERpbWVuc2lvbkluZGV4OwogIG9yZGVyOiAnYXNjJyB8ICdkZXNjJzsKICBpbmNvbXBhcmFibGU_OiAnbWluJyB8ICdtYXgnOwogIHBhcnNlcj86ICd0aW1lJyB8ICd0cmltJyB8ICdudW1iZXInOwp9Owp0eXBlIERpbWVuc2lvbk5hbWUgPSBzdHJpbmc7CnR5cGUgRGltZW5zaW9uSW5kZXggPSBudW1iZXI7\'" line-highlights="\'\'" />\n<h2 id="%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8" tabindex="-1">使用外部的数据转换器</h2>\n<p>除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中,我们使用第三方库 <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> 提供的数据转换器。</p>\n<p>生成数据的回归线:</p>\n<md-code-block lang="js" code="\'Ly8g6aaW5YWI6KaB5rOo5YaM5aSW6YOo5pWw5o2u6L2s5o2i5Zmo44CCCmVjaGFydHMucmVnaXN0ZXJUcmFuc2Zvcm0oZWNTdGF0VHJhbnNmb3JtKGVjU3RhdCkucmVncmVzc2lvbik7\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiByYXdEYXRhCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyDlvJXnlKjms6jlhoznmoTmlbDmja7ovazmjaLlmajjgIIKICAgICAgICAvLyDms6jmhI_vvIzmr4_kuKrlpJbpg6jnmoTmlbDmja7ovazmjaLlmajvvIzpg73mnInlkI3nqbrpl7TvvIjlpoIgJ2VjU3RhdDp4eHgn77yMJ2VjU3RhdCcg5piv5ZCN56m66Ze077yJ44CCCiAgICAgICAgLy8g6ICM5YaF572u5pWw5o2u6L2s5o2i5Zmo77yI5aaCICdmaWx0ZXInLCAnc29ydCfvvInmsqHmnInlkI3nqbrpl7TjgIIKICAgICAgICB0eXBlOiAnZWNTdGF0OnJlZ3Jlc3Npb24nLAogICAgICAgIGNvbmZpZzogewogICAgICAgICAgLy8g6L-Z6YeM5piv5q2k5aSW6YOo5pWw5o2u6L2s5o2i5Zmo5omA6ZyA55qE5Y-C5pWw44CCCiAgICAgICAgICBtZXRob2Q6ICdleHBvbmVudGlhbCcKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdLAogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdzY2F0dGVyJywKICAgICAgdHlwZTogJ3NjYXR0ZXInLAogICAgICBkYXRhc2V0SW5kZXg6IDAKICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICdyZWdyZXNzaW9uJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzeW1ib2w6ICdub25lJywKICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<p>一些使用 echarts-stat 的例子:</p>\n<ul>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&edit=1&reset=1">聚集 (Aggregate)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&edit=1&reset=1">直方图 (Histogram)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1">简单聚类 (Clustering)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1">线性回归线 (Linear Regression)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1">指数回归线 (Exponential Regression)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">对数回归线 (Logarithmic Regression)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">多项式回归线 (Polynomial Regression)</a></li>\n</ul>\n',postPath:"zh/concepts/data-transform"}],fetch:{},error:A,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:e,children:[{title:"获取 ECharts",dir:t},{title:"在项目中引入 ECharts",dir:d},{title:"资源列表",dir:o,draft:g},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:a},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:s}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:h},{title:"配置项",dir:y,draft:g},{title:"系列",dir:b,draft:g},{title:"样式",dir:p},{title:"数据集",dir:W},{title:"数据转换",dir:u},{title:"坐标系",dir:Z,draft:g},{title:"坐标轴",dir:B},{title:"视觉映射",dir:C},{title:"图例",dir:L},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:M},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:S,draft:g},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:E,children:[{title:"基础折线图",dir:F},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:R},{title:"平滑曲线图",dir:v},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Y},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:V,children:[{title:"基础散点图",dir:j}]}]},{title:f,dir:I,draft:g},{title:"跨平台方案",dir:x,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:k}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:f,dir:I,draft:g},{title:gg,dir:Ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Cg}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:e,children:[{title:"Download ECharts",dir:t},{title:"Import ECharts",dir:d},{title:"Resources",dir:o,draft:g},{title:"Inspiration",dir:l},{title:"Get Help",dir:a},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:s}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:h},{title:"Chart Option",dir:y,draft:g},{title:"Series",dir:b,draft:g},{title:"Style",dir:p},{title:"Dataset",dir:W},{title:"Data Transform",dir:u},{title:"Coordinate",dir:Z,draft:g},{title:"Axis",dir:B},{title:"Visual Mapping",dir:C},{title:"Legend",dir:L},{title:"Event and Action",dir:w}]},{title:"How To Guides",dir:J,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:M},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:S,draft:g},{title:"Waterfall",dir:X}]},{title:"Line",dir:E,children:[{title:"Basic Line",dir:F},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:R},{title:"Smoothed Line",dir:v},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Y},{title:"Ring Style",dir:K},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:V,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:x,children:[{title:"Server Side Rendering",dir:k}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:gg,dir:Ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Cg}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/concepts/data-transform",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:A}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>一些使用 echarts-stat 的例子:</p> <ul><li><a href="https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&edit=1&reset=1">聚集 (Aggregate)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&edit=1&reset=1">直方图 (Histogram)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1">简单聚类 (Clustering)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1">线性回归线 (Linear Regression)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1">指数回归线 (Exponential Regression)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">对数回归线 (Logarithmic Regression)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">多项式回归线 (Polynomial Regression)</a></li></ul></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/concepts/data-transform.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,A,i,e,t,d,o,l,a,c,n,r,s,m,h,y,b,p,W,u,Z,B,L,w,J,G,M,D,O,S,X,E,F,z,R,v,H,Y,K,N,V,j,f,x,k,T,U,Q,q,P,_,$,gg,Ig,Cg){return{layout:"default",data:[{html:'<h1 id="%E4%BD%BF%E7%94%A8-transform-%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2" tabindex="-1">使用 transform 进行数据转换</h1>\n<p>Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)和一个“转换方法”(<a href="https://echarts.apache.org/option.html##dataset.transform">transform</a>),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。</p>\n<p>抽象地来说,数据转换是这样一种公式:<code>outData = f(inputData)</code>。<code>f</code> 是转换方法,例如:<code>filter</code>、<code>sort</code>、<code>regression</code>、<code>boxplot</code>、<code>cluster</code>、<code>aggregate</code>(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:</p>\n<ul>\n<li>把数据分成多份用不同的饼图展现。</li>\n<li>进行一些数据统计运算,并展示结果。</li>\n<li>用某些数据可视化算法处理数据,并展示结果。</li>\n<li>数据排序。</li>\n<li>去除或直选择数据项。</li>\n<li>...</li>\n</ul>\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">数据转换基础使用</h2>\n<p>在 echarts 中,数据转换是依托于数据集(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)来实现的. 我们可以设置 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 来表示,此 dataset 的数据,来自于此 transform 的结果。</p>\n<p>下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIOi_meS4qiBkYXRhc2V0IOeahCBpbmRleCDmmK8gYDBg44CCCiAgICAgIHNvdXJjZTogWwogICAgICAgIFsnUHJvZHVjdCcsICdTYWxlcycsICdQcmljZScsICdZZWFyJ10sCiAgICAgICAgWydDYWtlJywgMTIzLCAzMiwgMjAxMV0sCiAgICAgICAgWydDZXJlYWwnLCAyMzEsIDE0LCAyMDExXSwKICAgICAgICBbJ1RvZnUnLCAyMzUsIDUsIDIwMTFdLAogICAgICAgIFsnRHVtcGxpbmcnLCAzNDEsIDI1LCAyMDExXSwKICAgICAgICBbJ0Jpc2N1aXQnLCAxMjIsIDI5LCAyMDExXSwKICAgICAgICBbJ0Nha2UnLCAxNDMsIDMwLCAyMDEyXSwKICAgICAgICBbJ0NlcmVhbCcsIDIwMSwgMTksIDIwMTJdLAogICAgICAgIFsnVG9mdScsIDI1NSwgNywgMjAxMl0sCiAgICAgICAgWydEdW1wbGluZycsIDI0MSwgMjcsIDIwMTJdLAogICAgICAgIFsnQmlzY3VpdCcsIDEwMiwgMzQsIDIwMTJdLAogICAgICAgIFsnQ2FrZScsIDE1MywgMjgsIDIwMTNdLAogICAgICAgIFsnQ2VyZWFsJywgMTgxLCAyMSwgMjAxM10sCiAgICAgICAgWydUb2Z1JywgMzk1LCA0LCAyMDEzXSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjgxLCAzMSwgMjAxM10sCiAgICAgICAgWydCaXNjdWl0JywgOTIsIDM5LCAyMDEzXSwKICAgICAgICBbJ0Nha2UnLCAyMjMsIDI5LCAyMDE0XSwKICAgICAgICBbJ0NlcmVhbCcsIDIxMSwgMTcsIDIwMTRdLAogICAgICAgIFsnVG9mdScsIDM0NSwgMywgMjAxNF0sCiAgICAgICAgWydEdW1wbGluZycsIDIxMSwgMzUsIDIwMTRdLAogICAgICAgIFsnQmlzY3VpdCcsIDcyLCAyNCwgMjAxNF0KICAgICAgXQogICAgICAvLyBpZDogJ2EnCiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5pivIGAxYOOAggogICAgICAvLyDov5nkuKogYHRyYW5zZm9ybWAg6YWN572u77yM6KGo56S677yM5q2kIGRhdGFzZXQg55qE5pWw5o2u77yM5p2l6Ieq5LqO5q2kIHRyYW5zZm9ybSDnmoTnu5PmnpzjgIIKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1llYXInLCB2YWx1ZTogMjAxMSB9CiAgICAgIH0KICAgICAgLy8g5oiR5Lus6L-Y5Y-v5Lul6K6-572u6L-Z5Lqb5Y-v6YCJ55qE5bGe5oCn77yaIGBmcm9tRGF0YXNldEluZGV4YCDmiJYgYGZyb21EYXRhc2V0SWRg44CCCiAgICAgIC8vIOi_meS6m-WxnuaAp--8jOaMh-WumuS6hu-8jHRyYW5zZm9ybSDnmoTovpPlhaXvvIzmnaXoh6rkuo7lk6rkuKogZGF0YXNldOOAguS-i-Wmgu-8jAogICAgICAvLyBgZnJvbURhdGFzZXRJbmRleDogMGAg6KGo56S66L6T5YWl5p2l6Ieq5LqOIGluZGV4IOS4uiBgMGAg55qEIGRhdGFzZXQg44CC5Y-I5L6L5aaC77yMCiAgICAgIC8vIGBmcm9tRGF0YXNldElkOiAnYSdgIOihqOekuui-k-WFpeadpeiHquS6jiBgaWQ6ICdhJ2Ag55qEIGRhdGFzZXTjgIIKICAgICAgLy8g5b2T6L-Z5Lqb5bGe5oCn6YO95LiN5oyH5a6a5pe277yM6buY6K6k6K6k5Li677yM6L6T5YWl5p2l6Ieq5LqOIGluZGV4IOS4uiBgMGAg55qEIGRhdGFzZXQg44CCCiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5pivIGAyYOOAggogICAgICAvLyDlkIzmoLfvvIzov5nph4zlm6DkuLogYGZyb21EYXRhc2V0SW5kZXhgIOWSjCBgZnJvbURhdGFzZXRJZGAg6YO95rKh5pyJ6KKr5oyH5a6a77yMCiAgICAgIC8vIOmCo-S5iOi-k-WFpem7mOiupOadpeiHquS6jiBpbmRleCDkuLogYDBgIOeahCBkYXRhc2V0IOOAggogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyDov5nkuKrnsbvlnovkuLogImZpbHRlciIg55qEIHRyYW5zZm9ybSDog73lpJ_pgY3ljoblubbnrZvpgInlh7rmu6HotrPmnaHku7bnmoTmlbDmja7pobnjgIIKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICAvLyDmr4_kuKogdHJhbnNmb3JtIOWmguaenOmcgOimgeaciemFjee9ruWPguaVsOeahOivne-8jOmDvemhu-mFjee9ruWcqCBgY29uZmlnYCDph4zjgIIKICAgICAgICAvLyDlnKjov5nkuKogImZpbHRlciIgdHJhbnNmb3JtIOS4re-8jGBjb25maWdgIOeUqOS6juaMh-Wumuetm-mAieadoeS7tuOAggogICAgICAgIC8vIOS4i-mdoui_meS4quetm-mAieadoeS7tuaYr--8mumAieWHuue7tOW6pu-8iCBkaW1lbnNpb24g77yJJ1llYXInIOS4reWAvOS4uiAyMDEyIOeahOaJgOaciQogICAgICAgIC8vIOaVsOaNrumhueOAggogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgdmFsdWU6IDIwMTIgfQogICAgICB9CiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5pivIGAzYOOAggogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsIHZhbHVlOiAyMDEzIH0KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IDUwLAogICAgICBjZW50ZXI6IFsnMjUlJywgJzUwJSddLAogICAgICAvLyDov5nkuKrppbzlm77ns7vliJfvvIzlvJXnlKjkuoYgaW5kZXgg5Li6IGAxYCDnmoQgZGF0YXNldCDjgILkuZ_lsLHmmK_vvIzlvJXnlKjkuobkuIrov7AKICAgICAgLy8gMjAxMSDlubTpgqPkuKogImZpbHRlciIgdHJhbnNmb3JtIOeahOe7k-aenOOAggogICAgICBkYXRhc2V0SW5kZXg6IDEKICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IDUwLAogICAgICBjZW50ZXI6IFsnNTAlJywgJzUwJSddLAogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IDUwLAogICAgICBjZW50ZXI6IFsnNzUlJywgJzUwJSddLAogICAgICBkYXRhc2V0SW5kZXg6IDMKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>现在我们简单总结下,使用 transform 时的几个要点:</p>\n<ul>\n<li>在一个空的 dataset 中声明 <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> 来表示我们要生成新的数据。</li>\n<li>系列引用这个 dataset 。</li>\n</ul>\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8" tabindex="-1">数据转换的进阶使用</h2>\n<h4 id="%E9%93%BE%E5%BC%8F%E5%A3%B0%E6%98%8E-transform" tabindex="-1">链式声明 transform</h4>\n<p><code>transform</code> 可以被链式声明,这是一个语法糖。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8g5Y6f5aeL5pWw5o2uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIC8vIOWHoOS4qiB0cmFuc2Zvcm0g6KKr5aOw5piO5oiQIGFycmF5IO-8jOS7luS7rOaehOaIkOS6huS4gOS4qumTvu-8jAogICAgICAvLyDliY3kuIDkuKogdHJhbnNmb3JtIOeahOi-k-WHuuaYr-WQjuS4gOS4qiB0cmFuc2Zvcm0g55qE6L6T5YWl44CCCiAgICAgIHRyYW5zZm9ybTogWwogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCB2YWx1ZTogJ1RvZnUnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgb3JkZXI6ICdkZXNjJyB9CiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgLy8g6L-Z5Liq57O75YiX5byV55So5LiK6L-wIHRyYW5zZm9ybSDnmoTnu5PmnpzjgIIKICAgIGRhdGFzZXRJbmRleDogMQogIH0KfTs\'" line-highlights="\'\'" />\n<blockquote>\n<p>注意:理论上,任何 transform 都可能有多个输入或多个输出。但是,如果一个 transform 被链式声明,它只能获取前一个 transform 的第一个输出作为输入(第一个 transform 除外),以及它只能把自己的第一个输出给到后一个 transform (最后一个 transform 除外)。</p>\n</blockquote>\n<h4 id="%E4%B8%80%E4%B8%AA-transform-%E8%BE%93%E5%87%BA%E5%A4%9A%E4%B8%AA-data" tabindex="-1">一个 transform 输出多个 data</h4>\n<p>在大多数场景下,transform 只需输出一个 data 。但是也有一些场景,需要输出多个 data ,每个 data 可以被不同的 series 或者 dataset 所使用。</p>\n<p>例如,在内置的 "boxplot" transform 中,除了 boxplot 系列所需要的 data 外,离群点( outlier )也会被生成,并且可以用例如散点图系列显示出来。例如,<a href="https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity">example</a>。</p>\n<p>我们提供配置 <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> 来满足这种情况,例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgLy8g6L-Z5LiqIGRhdGFzZXQg55qEIGluZGV4IOS4uiBgMGDjgIIKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8g5Y6f5aeL5pWw5o2uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIC8vIOi_meS4qiBkYXRhc2V0IOeahCBpbmRleCDkuLogYDFg44CCCiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdib3hwbG90JwogICAgICB9CiAgICAgIC8vIOi_meS4qiAiYm94cGxvdCIgdHJhbnNmb3JtIOeUn-aIkOS6huS4pOS4quaVsOaNru-8mgogICAgICAvLyByZXN1bHRbMF06IGJveHBsb3Qgc2VyaWVzIOaJgOmcgOeahOaVsOaNruOAggogICAgICAvLyByZXN1bHRbMV06IOemu-e-pOeCueaVsOaNruOAggogICAgICAvLyDlvZPlhbbku5Ygc2VyaWVzIOaIluiAhSBkYXRhc2V0IOW8leeUqOi_meS4qiBkYXRhc2V0IOaXtu-8jOS7luS7rOm7mOiupOWPquiDveW-l-WIsAogICAgICAvLyByZXN1bHRbMF0g44CCCiAgICAgIC8vIOWmguaenOaDs-imgeS7luS7rOW-l-WIsCByZXN1bHRbMV0g77yM6ZyA6KaB6aKd5aSW5aOw5piO5aaC5LiL6L-Z5qC35LiA5LiqIGRhdGFzZXQg77yaCiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5Li6IGAyYOOAggogICAgICAvLyDov5nkuKrpop3lpJbnmoQgZGF0YXNldCDmjIflrprkuobmlbDmja7mnaXmupDkuo4gaW5kZXgg5Li6IGAxYCDnmoQgZGF0YXNldOOAggogICAgICBmcm9tRGF0YXNldEluZGV4OiAxLAogICAgICAvLyDlubbkuJTmjIflrprkuobojrflj5YgdHJhbnNmb3JtIHJlc3VsdFsxXSDjgIIKICAgICAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ2JveHBsb3QnLAogICAgICB0eXBlOiAnYm94cGxvdCcsCiAgICAgIC8vIFJlZmVyZW5jZSB0aGUgZGF0YSBmcm9tIHJlc3VsdFswXS4KICAgICAgLy8g6L-Z5LiqIHNlcmllcyDlvJXnlKggaW5kZXgg5Li6IGAxYCDnmoQgZGF0YXNldCDjgIIKICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9LAogICAgewogICAgICBuYW1lOiAnb3V0bGllcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgLy8g6L-Z5LiqIHNlcmllcyDlvJXnlKggaW5kZXgg5Li6IGAyYCDnmoQgZGF0YXNldCDjgIIKICAgICAgLy8g5LuO6ICM5Lmf5bCx5b6X5Yiw5LqG5LiK6L-w55qEIHRyYW5zZm9ybSByZXN1bHRbMV0g77yI5Y2z56a7576k54K55pWw5o2u77yJCiAgICAgIGRhdGFzZXRJbmRleDogMgogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>另外,<a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> 和 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 能同时出现在一个 dataset 中,这表示,这个 transform 的输入,是上游的结果中以 <code>fromTransformResult</code> 获取的结果。例如:</p>\n<md-code-block lang="js" code="\'ewogIGZyb21EYXRhc2V0SW5kZXg6IDEsCiAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMSwKICB0cmFuc2Zvcm06IHsKICAgIHR5cGU6ICdzb3J0JywKICAgIGNvbmZpZzogeyBkaW1lbnNpb246IDIsIG9yZGVyOiAnZGVzYycgfQogIH0KfQ\'" line-highlights="\'\'" />\n<h4 id="%E5%9C%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%AD-debug" tabindex="-1">在开发环境中 debug</h4>\n<p>使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 <code>transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7fSwKICAgICAgICAvLyDphY3nva7kuLogYHRydWVgIOWQju-8jCB0cmFuc2Zvcm0g55qE57uT5p6cCiAgICAgICAgLy8g5Lya6KKrIGNvbnNvbGUubG9nIOaJk-WNsOWHuuadpeOAggogICAgICAgIHByaW50OiB0cnVlCiAgICAgIH0KICAgIH0KICBdCiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-%22filter%22" tabindex="-1">数据转换器 "filter"</h2>\n<p>echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 <code>transform.type: "filter"</code>,以及给出数据筛选条件。如下例:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0xhdHRlJywgMjMxLCAxNCwgMjAxMV0sCiAgICAgICAgWydUb2Z1JywgMjM1LCA1LCAyMDExXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzQxLCAyNSwgMjAxMV0sCiAgICAgICAgWydQb3JyaWRnZScsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnTGF0dGUnLCAyMDEsIDE5LCAyMDEyXSwKICAgICAgICBbJ1RvZnUnLCAyNTUsIDcsIDIwMTJdLAogICAgICAgIFsnTWlsayBUZWUnLCAyNDEsIDI3LCAyMDEyXSwKICAgICAgICBbJ1BvcnJpZGdlJywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydMYXR0ZScsIDE4MSwgMjEsIDIwMTNdLAogICAgICAgIFsnVG9mdScsIDM5NSwgNCwgMjAxM10sCiAgICAgICAgWydNaWxrIFRlZScsIDI4MSwgMzEsIDIwMTNdLAogICAgICAgIFsnUG9ycmlkZ2UnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnTGF0dGUnLCAyMTEsIDE3LCAyMDE0XSwKICAgICAgICBbJ1RvZnUnLCAzNDUsIDMsIDIwMTRdLAogICAgICAgIFsnTWlsayBUZWUnLCAyMTEsIDM1LCAyMDE0XSwKICAgICAgICBbJ1BvcnJpZGdlJywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9CiAgICAgICAgLy8g6L-Z5Liq562b6YCJ5p2h5Lu26KGo56S677yM6YGN5Y6G5pWw5o2u77yM562b6YCJ5Ye657u05bqm77yIIGRpbWVuc2lvbiDvvIkKICAgICAgICAvLyAnWWVhcicg5LiK5YC85Li6IDIwMTEg55qE5omA5pyJ5pWw5o2u6aG544CCCiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9Cn07\'" v-bind="{}" />\n<p>这是 filter 的另一个例子的效果:</p>\n<p><md-example src="data-transform-filter"></md-example></p>\n<p>在 "filter" transform 中,有这些要素:</p>\n<p><strong>关于维度( dimension ):</strong></p>\n<p><code>config.dimension</code> 指定了维度,能设成这样的值:</p>\n<ul>\n<li>设定成声明在 dataset 中的维度名,例如 <code>config: { dimension: \'Year\', \'=\': 2011 }</code>。不过, dataset 中维度名的声明并非强制,所以我们也可以</li>\n<li>设定成 dataset 中的维度 index (index 值从 0 开始)例如 <code>config: { dimension: 3, \'=\': 2011 }</code>。</li>\n</ul>\n<p><strong>关于关系比较操作符:</strong></p>\n<p>关系操作符,可以设定这些:\n<code>></code>(<code>gt</code>)、<code>>=</code>(<code>gte</code>)、<code><</code>(<code>lt</code>)、<code><=</code>(<code>lte</code>)、<code>=</code>(<code>eq</code>)、<code>!=</code>(<code>ne</code>、<code><></code>)、<code>reg</code>。(小括号中的符号或名字,是别名,设置起来作用相同)。他们首先基本地能基于数值大小进行比较,然后也有些额外的功能特性:</p>\n<ul>\n<li>多个关系操作符能声明在一个 {} 中,例如 <code>{ dimension: \'Price\', \'>=\': 20, \'<\': 30 }</code>。这表示“与”的关系,即,筛选出价格大于等于 20 小雨 30 的数据项。</li>\n<li>data 里的值,不仅可以是数值( number ),也可以是“类数值的字符串”(“ numeric string ”)。“类数值的字符串”本身是一个字符串,但是可以被转换为字面所描述的数值,例如 <code>\' 123 \'</code>。转换过程中,空格(全角半角空格)和换行符都能被消除( trim )。</li>\n<li>如果我们需要对日期对象(JS <code>Date</code>)或者日期字符串(如 \'2012-05-12\')进行比较,我们需要手动指定 <code>parser: \'time\'</code>,例如 <code>config: { dimension: 3, lt: \'2012-05-12\', parser: \'time\' }</code>。</li>\n<li>纯字符串比较也被支持,但是只能用在 <code>=</code> 或 <code>!=</code> 上。而 <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> 并不支持纯字符串比较,也就是说,这四个操作符的右值,不能是字符串。</li>\n<li><code>reg</code> 操作符能提供正则表达式比较。例如, <code>{ dimension: \'Name\', reg: /\\s+Müller\\s*$/ }</code> 能在 <code>\'Name\'</code> 维度上选出姓 <code>\'Müller\'</code> 的数据项。</li>\n</ul>\n<p><strong>关于逻辑比较:</strong></p>\n<p>我们也支持了逻辑比较操作符 <strong>与或非</strong>( <code>and</code> | <code>or</code> | <code>not</code> ):</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8gLi4uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogewogICAgICAgICAgLy8g5L2_55SoIGFuZCDmk43kvZznrKbjgIIKICAgICAgICAgIC8vIOexu-S8vOWcsO-8jOWQjOagt-eahOS9jee9ruS5n-WPr-S7peS9v-eUqCDigJxvcuKAnSDmiJYg4oCcbm904oCd44CCCiAgICAgICAgICAvLyDkvYbmmK_ms6jmhI8g4oCcbm904oCdIOWQjuW6lOivpei3n-S4gOS4qiB7Li4ufSDogIzpnZ4gWy4uLl0g44CCCiAgICAgICAgICBhbmQ6IFsKICAgICAgICAgICAgeyBkaW1lbnNpb246ICdZZWFyJywgJz0nOiAyMDExIH0sCiAgICAgICAgICAgIHsgZGltZW5zaW9uOiAnUHJpY2UnLCAnPj0nOiAyMCwgJzwnOiAzMCB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICAgIC8vIOi_meS4quihqOi-vueahOaYr--8jOmAieWHuiAyMDExIOW5tOS7t-agvOWkp-S6juetieS6jiAyMCDkvYblsI_kuo4gMzAg55qE5pWw5o2u6aG544CCCiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9Cn07\'" line-highlights="\'\'" />\n<p><code>and</code>/<code>or</code>/<code>not</code> 自然可以被嵌套,例如:</p>\n<md-code-block lang="js" code="\'dHJhbnNmb3JtOiB7CiAgdHlwZTogJ2ZpbHRlcicsCiAgY29uZmlnOiB7CiAgICBvcjogW3sKICAgICAgYW5kOiBbewogICAgICAgIGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMTAsICc8JzogMjAKICAgICAgfSwgewogICAgICAgIGRpbWVuc2lvbjogJ1NhbGVzJywgJzwnOiAxMDAKICAgICAgfSwgewogICAgICAgIG5vdDogeyBkaW1lbnNpb246ICdQcm9kdWN0JywgJz0nOiAnVG9mdScgfQogICAgICB9XQogICAgfSwgewogICAgICBhbmQ6IFt7CiAgICAgICAgZGltZW5zaW9uOiAnUHJpY2UnLCAnPj0nOiAxMCwgJzwnOiAyMAogICAgICB9LCB7CiAgICAgICAgZGltZW5zaW9uOiAnU2FsZXMnLCAnPCc6IDEwMAogICAgICB9LCB7CiAgICAgICAgbm90OiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCAnPSc6ICdDYWtlJyB9CiAgICAgIH1dCiAgICB9XQogIH0KfQ\'" line-highlights="\'\'" />\n<p><strong>关于解析器( parser ):</strong></p>\n<p>还可以指定“解析器”( parser )来对值进行解析后再做比较。现在支持的解析器有:</p>\n<ul>\n<li><code>parser: \'time\'</code>:把原始值解析成时间戳( timestamp )后再做比较。这个解析器的行为,和 <code>echarts.time.parse</code> 相同,即,当原始值为时间对象( JS <code>Date</code> 实例),或者是时间戳,或者是描述时间的字符串(例如 <code>\'2012-05-12 03:11:22\'</code> ),都可以被解析为时间戳,然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值,那么会被解析为 NaN。</li>\n<li><code>parser: \'trim\'</code>:如果原始数据是字符串,则把字符串两端的空格(全角半角)和换行符去掉。如果不是字符串,还保持为原始数据。</li>\n<li><code>parser: \'number\'</code>:强制把原始数据转成数值。如果不能转成有意义的数值,那么转成 <code>NaN</code>。在大多数场景下,我们并不需要这个解析器,因为按默认策略,“像数值的字符串”就会被转成数值。但是默认策略比较严格,这个解析器比较宽松,如果我们遇到含有尾缀的字符串(例如 <code>\'33%\'</code>, <code>12px</code>),我们需要手动指定 <code>parser: \'number\'</code>,从而去掉尾缀转为数值才能比较。</li>\n</ul>\n<p>这个例子显示了如何使用 <code>parser: \'time\'</code>:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ0RhdGUnXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzExLCAyMSwgJzIwMTItMDUtMTInXSwKICAgICAgICBbJ0Nha2UnLCAxMzUsIDI4LCAnMjAxMi0wNS0yMiddLAogICAgICAgIFsnTGF0dGUnLCAyNjIsIDM2LCAnMjAxMi0wNi0wMiddLAogICAgICAgIFsnTWlsayBUZWUnLCAzNTksIDIxLCAnMjAxMi0wNi0yMiddLAogICAgICAgIFsnQ2FrZScsIDEyMSwgMjgsICcyMDEyLTA3LTAyJ10sCiAgICAgICAgWydMYXR0ZScsIDI3MSwgMzYsICcyMDEyLTA2LTIyJ10KICAgICAgICAvLyAuLi4KICAgICAgXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICBkaW1lbnNpb246ICdEYXRlJywKICAgICAgICAgICc-PSc6ICcyMDEyLTA1JywKICAgICAgICAgICc8JzogJzIwMTItMDYnLAogICAgICAgICAgcGFyc2VyOiAndGltZScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><strong>形式化定义:</strong></p>\n<p>最后,我们给出,数据转换器 "filter" 的 config 的形式化定义:</p>\n<md-code-block lang="ts" code="\'dHlwZSBGaWx0ZXJUcmFuc2Zvcm0gPSB7CiAgdHlwZTogJ2ZpbHRlcic7CiAgY29uZmlnOiBDb25kaXRpb25hbEV4cHJlc3Npb25PcHRpb247Cn07CnR5cGUgQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uID0KICB8IHRydWUKICB8IGZhbHNlCiAgfCBSZWxhdGlvbmFsRXhwcmVzc2lvbk9wdGlvbgogIHwgTG9naWNhbEV4cHJlc3Npb25PcHRpb247CnR5cGUgUmVsYXRpb25hbEV4cHJlc3Npb25PcHRpb24gPSB7CiAgZGltZW5zaW9uOiBEaW1lbnNpb25OYW1lIHwgRGltZW5zaW9uSW5kZXg7CiAgcGFyc2VyPzogJ3RpbWUnIHwgJ3RyaW0nIHwgJ251bWJlcic7CiAgbHQ_OiBEYXRhVmFsdWU7IC8vIGxlc3MgdGhhbgogIGx0ZT86IERhdGFWYWx1ZTsgLy8gbGVzcyB0aGFuIG9yIGVxdWFsCiAgZ3Q_OiBEYXRhVmFsdWU7IC8vIGdyZWF0ZXIgdGhhbgogIGd0ZT86IERhdGFWYWx1ZTsgLy8gZ3JlYXRlciB0aGFuIG9yIGVxdWFsCiAgZXE_OiBEYXRhVmFsdWU7IC8vIGVxdWFsCiAgbmU_OiBEYXRhVmFsdWU7IC8vIG5vdCBlcXVhbAogICc8Jz86IERhdGFWYWx1ZTsgLy8gbHQKICAnPD0nPzogRGF0YVZhbHVlOyAvLyBsdGUKICAnPic_OiBEYXRhVmFsdWU7IC8vIGd0CiAgJz49Jz86IERhdGFWYWx1ZTsgLy8gZ3RlCiAgJz0nPzogRGF0YVZhbHVlOyAvLyBlcQogICchPSc_OiBEYXRhVmFsdWU7IC8vIG5lCiAgJzw-Jz86IERhdGFWYWx1ZTsgLy8gbmUgKFNRTCBzdHlsZSkKICByZWc_OiBSZWdFeHAgfCBzdHJpbmc7IC8vIFJlZ0V4cAp9Owp0eXBlIExvZ2ljYWxFeHByZXNzaW9uT3B0aW9uID0gewogIGFuZD86IENvbmRpdGlvbmFsRXhwcmVzc2lvbk9wdGlvbltdOwogIG9yPzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uW107CiAgbm90PzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uOwp9Owp0eXBlIERhdGFWYWx1ZSA9IHN0cmluZyB8IG51bWJlciB8IERhdGU7CnR5cGUgRGltZW5zaW9uTmFtZSA9IHN0cmluZzsKdHlwZSBEaW1lbnNpb25JbmRleCA9IG51bWJlcjs\'" line-highlights="\'\'" />\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-%22sort%22" tabindex="-1">数据转换器 "sort"</h2>\n<p>"sort" 是另一个内置的数据转换器,用于排序数据。目前主要能用于在类目轴( <code>axis.type: \'category\'</code> )中显示排过序的数据。例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAvLyDmjInliIbmlbDmjpLluo8KICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnc2NvcmUnLCBvcmRlcjogJ2FzYycgfQogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdiYXInLAogICAgZGF0YXNldEluZGV4OiAxCiAgfQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p><md-example src="data-transform-sort-bar"></md-example></p>\n<p>数据转换器 "sort" 还有一些额外的功能:</p>\n<ul>\n<li>可以多重排序,多个维度一起排序。见下面的例子。</li>\n<li>排序规则是这样的:\n<ul>\n<li>默认按照数值大小排序。其中,“可转为数值的字符串”也被转换成数值,和其他数值一起按大小排序。</li>\n<li>对于其他“不能转为数值的字符串”,也能在它们之间按字符串进行排序。这个特性有助于这种场景:把相同标签的数据项排到一起,尤其是当多个维度共同排序时。见下面的例子。</li>\n<li>当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时,或者它们和“其他类型的值”进行比较时,它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”,并且可以设置 <code>incomparable: \'min\' | \'max\'</code> 来指定一个“incomparable”在这个比较中是最大还是最小,从而能使它们能产生比较结果。这个设定的用途,比如可以是,决定空值(例如 <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>\'\'</code>, <code>\'-\'</code>)在排序的头还是尾。</li>\n</ul>\n</li>\n<li>过滤器 <code>filter: \'time\' | \'trim\' | \'number\'</code> 可以被使用,和数据转换器 "filter" 中的情况一样。\n<ul>\n<li>如果要对时间进行排序(例如,值为 JS <code>Date</code> 实例或者时间字符串如 <code>\'2012-03-12 11:13:54\'</code>),我们需要声明 <code>parser: \'time\'</code>。</li>\n<li>如果需要对有后缀的数值进行排序(如 <code>\'33%\'</code>, <code>\'16px\'</code>)我们需要声明 <code>parser: \'number\'</code>。</li>\n</ul>\n</li>\n</ul>\n<p>这是一个“多维度排序”的例子。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICBjb25maWc6IFsKICAgICAgICAgIC8vIOWvueS4pOS4que7tOW6puaMieWjsOaYjueahOS8mOWFiOe6p-WIhuWIq-aOkuW6j-OAggogICAgICAgICAgeyBkaW1lbnNpb246ICdwcm9mZXNzaW9uJywgb3JkZXI6ICdkZXNjJyB9LAogICAgICAgICAgeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnZGVzYycgfQogICAgICAgIF0KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnYmFyJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KICAvLy4uLgp9Ow\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/data-transform-multiple-sort-bar"></md-example></p>\n<p>最后,我们给出数据转换器 "sort" 的 config 的形式化定义。</p>\n<md-code-block lang="ts" code="\'dHlwZSBTb3J0VHJhbnNmb3JtID0gewogIHR5cGU6ICdmaWx0ZXInOwogIGNvbmZpZzogT3JkZXJFeHByZXNzaW9uIHwgT3JkZXJFeHByZXNzaW9uW107Cn07CnR5cGUgT3JkZXJFeHByZXNzaW9uID0gewogIGRpbWVuc2lvbjogRGltZW5zaW9uTmFtZSB8IERpbWVuc2lvbkluZGV4OwogIG9yZGVyOiAnYXNjJyB8ICdkZXNjJzsKICBpbmNvbXBhcmFibGU_OiAnbWluJyB8ICdtYXgnOwogIHBhcnNlcj86ICd0aW1lJyB8ICd0cmltJyB8ICdudW1iZXInOwp9Owp0eXBlIERpbWVuc2lvbk5hbWUgPSBzdHJpbmc7CnR5cGUgRGltZW5zaW9uSW5kZXggPSBudW1iZXI7\'" line-highlights="\'\'" />\n<h2 id="%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8" tabindex="-1">使用外部的数据转换器</h2>\n<p>除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中,我们使用第三方库 <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> 提供的数据转换器。</p>\n<p>生成数据的回归线:</p>\n<md-code-block lang="js" code="\'Ly8g6aaW5YWI6KaB5rOo5YaM5aSW6YOo5pWw5o2u6L2s5o2i5Zmo44CCCmVjaGFydHMucmVnaXN0ZXJUcmFuc2Zvcm0oZWNTdGF0VHJhbnNmb3JtKGVjU3RhdCkucmVncmVzc2lvbik7\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiByYXdEYXRhCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyDlvJXnlKjms6jlhoznmoTmlbDmja7ovazmjaLlmajjgIIKICAgICAgICAvLyDms6jmhI_vvIzmr4_kuKrlpJbpg6jnmoTmlbDmja7ovazmjaLlmajvvIzpg73mnInlkI3nqbrpl7TvvIjlpoIgJ2VjU3RhdDp4eHgn77yMJ2VjU3RhdCcg5piv5ZCN56m66Ze077yJ44CCCiAgICAgICAgLy8g6ICM5YaF572u5pWw5o2u6L2s5o2i5Zmo77yI5aaCICdmaWx0ZXInLCAnc29ydCfvvInmsqHmnInlkI3nqbrpl7TjgIIKICAgICAgICB0eXBlOiAnZWNTdGF0OnJlZ3Jlc3Npb24nLAogICAgICAgIGNvbmZpZzogewogICAgICAgICAgLy8g6L-Z6YeM5piv5q2k5aSW6YOo5pWw5o2u6L2s5o2i5Zmo5omA6ZyA55qE5Y-C5pWw44CCCiAgICAgICAgICBtZXRob2Q6ICdleHBvbmVudGlhbCcKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdLAogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdzY2F0dGVyJywKICAgICAgdHlwZTogJ3NjYXR0ZXInLAogICAgICBkYXRhc2V0SW5kZXg6IDAKICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICdyZWdyZXNzaW9uJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzeW1ib2w6ICdub25lJywKICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<p>一些使用 echarts-stat 的例子:</p>\n<ul>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&edit=1&reset=1">聚集 (Aggregate)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&edit=1&reset=1">直方图 (Histogram)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1">简单聚类 (Clustering)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1">线性回归线 (Linear Regression)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1">指数回归线 (Exponential Regression)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">对数回归线 (Logarithmic Regression)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">多项式回归线 (Polynomial Regression)</a></li>\n</ul>\n',postPath:"zh/concepts/data-transform"}],fetch:{},error:A,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:e,children:[{title:"获取 ECharts",dir:t},{title:"在项目中引入 ECharts",dir:d},{title:"资源列表",dir:o,draft:g},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:a},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:s}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:h},{title:"配置项",dir:y,draft:g},{title:"系列",dir:b,draft:g},{title:"样式",dir:p},{title:"数据集",dir:W},{title:"数据转换",dir:u},{title:"坐标系",dir:Z,draft:g},{title:"坐标轴",dir:B},{title:"视觉映射",dir:C},{title:"图例",dir:L},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:M},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:S,draft:g},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:E,children:[{title:"基础折线图",dir:F},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:R},{title:"平滑曲线图",dir:v},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Y},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:V,children:[{title:"基础散点图",dir:j}]}]},{title:f,dir:I,draft:g},{title:"跨平台方案",dir:x,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:k}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:f,dir:I,draft:g},{title:gg,dir:Ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Cg}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:e,children:[{title:"Download ECharts",dir:t},{title:"Import ECharts",dir:d},{title:"Resources",dir:o,draft:g},{title:"Inspiration",dir:l},{title:"Get Help",dir:a},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:s}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:h},{title:"Chart Option",dir:y,draft:g},{title:"Series",dir:b,draft:g},{title:"Style",dir:p},{title:"Dataset",dir:W},{title:"Data Transform",dir:u},{title:"Coordinate",dir:Z,draft:g},{title:"Axis",dir:B},{title:"Visual Mapping",dir:C},{title:"Legend",dir:L},{title:"Event and Action",dir:w}]},{title:"How To Guides",dir:J,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:M},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:S,draft:g},{title:"Waterfall",dir:X}]},{title:"Line",dir:E,children:[{title:"Basic Line",dir:F},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:R},{title:"Smoothed Line",dir:v},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Y},{title:"Ring Style",dir:K},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:V,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:x,children:[{title:"Server Side Rendering",dir:k}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:gg,dir:Ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Cg}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/concepts/data-transform",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:A}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/concepts/dataset/index.html b/handbook/zh/concepts/dataset/index.html
index 29c1019..77bfaee 100644
--- a/handbook/zh/concepts/dataset/index.html
+++ b/handbook/zh/concepts/dataset/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h1> <p><code>数据集</code>(<code>dataset</code>)是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据,但是从 ECharts4 支持 <code>数据集</code> 开始,更推荐使用 <code>数据集</code> 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。</p> <h2 id="%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在系列中设置数据</h2> <p>如果数据设置在 <code>系列</code>(<code>series</code>)中,例如:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h1> <p><code>数据集</code>(<code>dataset</code>)是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据,但是从 ECharts4 支持 <code>数据集</code> 开始,更推荐使用 <code>数据集</code> 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。</p> <h2 id="%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在系列中设置数据</h2> <p>如果数据设置在 <code>系列</code>(<code>series</code>)中,例如:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
@@ -494,7 +494,8 @@
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>其实,<a href="https://echarts.apache.org/option.html##series.data">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表,如 <a href="https://echarts.apache.org/option.html##series-treemap">treemap</a>、<a href="https://echarts.apache.org/option.html##series-graph">graph</a>、<a href="https://echarts.apache.org/option.html##series-lines">lines</a> 等,现在仍不支持在 dataset 中设置,仍然需要使用 <a href="https://echarts.apache.org/option.html##series.data">series.data</a>。另外,对于巨大数据量的渲染(如百万以上的数据量),需要使用 <a href="api.html#echartsInstance.appendData">appendData</a> 进行增量加载,这种情况不支持使用 <code>dataset</code>。</p> <h2 id="%E5%85%B6%E4%BB%96" tabindex="-1">其他</h2> <p>目前并非所有图表都支持 dataset。支持 dataset 的图表有:
<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。
-后续会有更多的图表进行支持。</p> <p>最后,给出这个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1">示例</a>,多个图表共享一个 <code>dataset</code>,并带有联动交互。</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/concepts/dataset.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,g,t,d,I,l,o,C,a,n,A,s,c,r,h,p,B,u,m,y,b,E,L,v,W,O,D,w,Z,J,j,H,z,Y,M,X,S,G,K,k,N,f,T,F,x,Q,R,V,U,q,P,_,$,ee,ie,ge){return{layout:"default",data:[{html:'<h1 id="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h1>\n<p><code>数据集</code>(<code>dataset</code>)是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据,但是从 ECharts4 支持 <code>数据集</code> 开始,更推荐使用 <code>数据集</code> 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。</p>\n<h2 id="%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在系列中设置数据</h2>\n<p>如果数据设置在 <code>系列</code>(<code>series</code>)中,例如:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。\n但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<h2 id="%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在数据集中设置数据</h2>\n<p>而数据设置在 <code>数据集</code>(<code>dataset</code>)中,会有这些好处:</p>\n<ul>\n<li>能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。</li>\n<li>数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。</li>\n<li>数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。</li>\n<li>支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p>下面是一个最简单的 <code>dataset</code> 的例子:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8g5o-Q5L6b5LiA5Lu95pWw5o2u44CCCiAgICBzb3VyY2U6IFsKICAgICAgWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDMuMywgODUuOCwgOTMuN10sCiAgICAgIFsnTWlsayBUZWEnLCA4My4xLCA3My40LCA1NS4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCA4Ni40LCA2NS4yLCA4Mi41XSwKICAgICAgWydXYWxudXQgQnJvd25pZScsIDcyLjQsIDUzLjksIDM5LjFdCiAgICBdCiAgfSwKICAvLyDlo7DmmI7kuIDkuKogWCDovbTvvIznsbvnm67ovbTvvIhjYXRlZ29yee-8ieOAgum7mOiupOaDheWGteS4i--8jOexu-ebrui9tOWvueW6lOWIsCBkYXRhc2V0IOesrOS4gOWIl-OAggogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICAvLyDlo7DmmI7kuIDkuKogWSDovbTvvIzmlbDlgLzovbTjgIIKICB5QXhpczoge30sCiAgLy8g5aOw5piO5aSa5LiqIGJhciDns7vliJfvvIzpu5jorqTmg4XlhrXkuIvvvIzmr4_kuKrns7vliJfkvJroh6rliqjlr7nlupTliLAgZGF0YXNldCDnmoTmr4_kuIDliJfjgIIKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>或者也可以使用常见的“对象数组”的格式:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8g55SoIGRpbWVuc2lvbnMg5oyH5a6a5LqG57u05bqm55qE6aG65bqP44CC55u06KeS5Z2Q5qCH57O75Lit77yM5aaC5p6cIFgg6L20IHR5cGUg5Li6IGNhdGVnb3J577yMCiAgICAvLyDpu5jorqTmiornrKzkuIDkuKrnu7TluqbmmKDlsITliLAgWCDovbTkuIrvvIzlkI7pnaLnu7TluqbmmKDlsITliLAgWSDovbTkuIrjgIIKICAgIC8vIOWmguaenOS4jeaMh-WumiBkaW1lbnNpb25z77yM5Lmf5Y-v5Lul6YCa6L-H5oyH5a6aIHNlcmllcy5lbmNvZGUKICAgIC8vIOWujOaIkOaYoOWwhO-8jOWPguingeWQjuaWh-OAggogICAgZGltZW5zaW9uczogWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgJzIwMTUnOiA0My4zLCAnMjAxNic6IDg1LjgsICcyMDE3JzogOTMuNyB9LAogICAgICB7IHByb2R1Y3Q6ICdNaWxrIFRlYScsICcyMDE1JzogODMuMSwgJzIwMTYnOiA3My40LCAnMjAxNyc6IDU1LjEgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgJzIwMTUnOiA4Ni40LCAnMjAxNic6IDY1LjIsICcyMDE3JzogODIuNSB9LAogICAgICB7IHByb2R1Y3Q6ICdXYWxudXQgQnJvd25pZScsICcyMDE1JzogNzIuNCwgJzIwMTYnOiA1My45LCAnMjAxNyc6IDM5LjEgfQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<h2 id="%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84" tabindex="-1">数据到图形的映射</h2>\n<p>如上所述,数据可视化的一个常见思路是:(I)提供数据,(II)指定数据到视觉的映射。</p>\n<p>简而言之,可以进行这些映射的设定:</p>\n<ul>\n<li>指定 <code>数据集</code> 的列(column)还是行(row)映射为 <code>系列</code>(<code>series</code>)。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">series.seriesLayoutBy</a> 属性来配置。默认是按照列(column)来映射。</li>\n<li>指定维度映射的规则:如何从 dataset 的维度(一个“维度”的意思是一行/列)映射到坐标轴(如 X、Y 轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> 属性,以及 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 组件来配置(如果有需要映射颜色大小等视觉维度的话)。上面的例子中,没有给出这种映射配置,那么 ECharts 就按最常见的理解进行默认映射:X 坐标轴声明为类目轴,默认情况下会自动对应到 <code>dataset.source</code> 中的第一列;三个柱图系列,一一对应到 <code>dataset.source</code> 中后面每一列。</li>\n</ul>\n<p>下面详细解释这些映射的设定。</p>\n<h2 id="%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89" tabindex="-1">把数据集( dataset )的行或列映射为系列(series)</h2>\n<p>有了数据表之后,使用者可以灵活地配置:数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项,改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值:</p>\n<ul>\n<li>\'column\': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li>\'row\': 系列被安放到 <code>dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDEyJywgJzIwMTMnLCAnMjAxNCcsICcyMDE1J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDEuMSwgMzAuNCwgNjUuMSwgNTMuM10sCiAgICAgIFsnTWlsayBUZWEnLCA4Ni41LCA5Mi4xLCA4NS43LCA4My4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCAyNC4xLCA2Ny4yLCA3OS41LCA4Ni40XQogICAgXQogIH0sCiAgeEF4aXM6IFsKICAgIHsgdHlwZTogJ2NhdGVnb3J5JywgZ3JpZEluZGV4OiAwIH0sCiAgICB7IHR5cGU6ICdjYXRlZ29yeScsIGdyaWRJbmRleDogMSB9CiAgXSwKICB5QXhpczogW3sgZ3JpZEluZGV4OiAwIH0sIHsgZ3JpZEluZGV4OiAxIH1dLAogIGdyaWQ6IFt7IGJvdHRvbTogJzU1JScgfSwgeyB0b3A6ICc1NSUnIH1dLAogIHNlcmllczogWwogICAgLy8g6L-Z5Yeg5Liq57O75YiX5Lya5Ye6546w5Zyo56ys5LiA5Liq55u06KeS5Z2Q5qCH57O75Lit77yM5q-P5Liq57O75YiX5a-55bqU5YiwIGRhdGFzZXQg55qE5q-P5LiA6KGM44CCCiAgICB7IHR5cGU6ICdiYXInLCBzZXJpZXNMYXlvdXRCeTogJ3JvdycgfSwKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAncm93JyB9LAogICAgeyB0eXBlOiAnYmFyJywgc2VyaWVzTGF5b3V0Qnk6ICdyb3cnIH0sCiAgICAvLyDov5nlh6DkuKrns7vliJfkvJrlh7rnjrDlnKjnrKzkuozkuKrnm7Top5LlnZDmoIfns7vkuK3vvIzmr4_kuKrns7vliJflr7nlupTliLAgZGF0YXNldCDnmoTmr4_kuIDliJfjgIIKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89" tabindex="-1">维度( dimension )</h2>\n<p>常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。</p>\n<p>维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。例如上面的例子中,<code>\'score\'</code>、<code>\'amount\'</code>、<code>\'product\'</code> 就是维度名。从第二行开始,才是正式的数据。<code>dataset.source</code> 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行(列)就是维度,或者 <code>dataset.sourceHeader: false</code> 表明第一行(列)开始就直接是数据。</p>\n<p>维度的定义,也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义,这样可以同时指定维度名,和维度的类型( dimension type ):</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbjEgPSB7CiAgZGF0YXNldDogewogICAgZGltZW5zaW9uczogWwogICAgICB7IG5hbWU6ICdzY29yZScgfSwKICAgICAgLy8g5Y-v5Lul566A5YaZ5Li6IHN0cmluZyDvvIzooajnpLogZGltZW5zaW9uIG5hbWUg44CCCiAgICAgICdhbW91bnQnLAogICAgICAvLyDlj6_ku6XlnKggdHlwZSDkuK3mjIflrprnu7TluqbnsbvlnovjgIIKICAgICAgeyBuYW1lOiAncHJvZHVjdCcsIHR5cGU6ICdvcmRpbmFsJyB9CiAgICBdLAogICAgc291cmNlOiBbCiAgICAgIC8vLi4uCiAgICBdCiAgfQogIC8vIC4uLgp9OwoKdmFyIG9wdGlvbjIgPSB7CiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIC8vIC4uLgogICAgXQogIH0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnbGluZScsCiAgICAvLyBzZXJpZXMuZGltZW5zaW9ucyDkvJrmm7TkvJjlhYjkuo4gZGF0YXNldC5kaW1lbnNpb24g6YeH57qz44CCCiAgICBkaW1lbnNpb25zOiBbCiAgICAgIG51bGwsIC8vIOWPr-S7peiuvue9ruS4uiBudWxsIOihqOekuuS4jeaDs-iuvue9rue7tOW6puWQjQogICAgICAnYW1vdW50JywKICAgICAgeyBuYW1lOiAncHJvZHVjdCcsIHR5cGU6ICdvcmRpbmFsJyB9CiAgICBdCiAgfQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>大多数情况下,我们并不需要去设置维度类型,因为 ECharts 会自动尝试判断。但是如果不足够准确时,可以手动设置维度类型。</p>\n<p>维度类型( dimension type )可以取这些值:</p>\n<ul>\n<li><code>\'number\'</code>: 默认,表示普通数据。</li>\n<li><code>\'ordinal\'</code>: 对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 \'ordinal\' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确,所以使用者也可以手动强制指定。</li>\n<li><code>\'time\'</code>: 表示时间数据。设置成 <code>\'time\'</code> 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 \'2017-05-10\',会自动被解析。如果这个维度被用在时间数轴(<a href="https://echarts.apache.org/option.html##xAxis.type">axis.type</a> 为 <code>\'time\'</code>)上,那么会被自动设置为 <code>\'time\'</code> 类型。时间类型的支持参见 <a href="https://echarts.apache.org/option.html##series.data">data</a>。</li>\n<li><code>\'float\'</code>: 如果设置成 <code>\'float\'</code>,在存储时候会使用 <code>TypedArray</code>,对性能优化有好处。</li>\n<li><code>\'int\'</code>: 如果设置成 <code>\'int\'</code>,在存储时候会使用 <code>TypedArray</code>,对性能优化有好处。</li>\n</ul>\n<h2 id="%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-series.encode-%EF%BC%89" tabindex="-1">数据到图形的映射( series.encode )</h2>\n<p>了解了维度的概念后,我们就可以使用 <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> 来做映射。总体是这样的感觉:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWydzY29yZScsICdhbW91bnQnLCAncHJvZHVjdCddLAogICAgICBbODkuMywgNTgyMTIsICdNYXRjaGEgTGF0dGUnXSwKICAgICAgWzU3LjEsIDc4MjU0LCAnTWlsayBUZWEnXSwKICAgICAgWzc0LjQsIDQxMDMyLCAnQ2hlZXNlIENvY29hJ10sCiAgICAgIFs1MC4xLCAxMjc1NSwgJ0NoZWVzZSBCcm93bmllJ10sCiAgICAgIFs4OS43LCAyMDE0NSwgJ01hdGNoYSBDb2NvYSddLAogICAgICBbNjguMSwgNzkxNDYsICdUZWEnXSwKICAgICAgWzE5LjYsIDkxODUyLCAnT3JhbmdlIEp1aWNlJ10sCiAgICAgIFsxMC42LCAxMDE4NTIsICdMZW1vbiBKdWljZSddLAogICAgICBbMzIuNywgMjAxMTIsICdXYWxudXQgQnJvd25pZSddCiAgICBdCiAgfSwKICB4QXhpczoge30sCiAgeUF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZW5jb2RlOiB7CiAgICAgICAgLy8g5bCGICJhbW91bnQiIOWIl-aYoOWwhOWIsCBYIOi9tOOAggogICAgICAgIHg6ICdhbW91bnQnLAogICAgICAgIC8vIOWwhiAicHJvZHVjdCIg5YiX5pig5bCE5YiwIFkg6L2044CCCiAgICAgICAgeTogJ3Byb2R1Y3QnCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p><code>series.encode</code> 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称,如 <code>\'x\'</code>, <code>\'y\'</code>, <code>\'tooltip\'</code> 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。</p>\n<p>下面是 <code>series.encode</code> 支持的属性:</p>\n<md-code-block lang="js" code="\'Ly8g5Zyo5Lu75L2V5Z2Q5qCH57O75ZKM57O75YiX5Lit77yM6YO95pSv5oyB77yaCmVuY29kZTogewogIC8vIOS9v-eUqCDigJzlkI3kuLogcHJvZHVjdCDnmoTnu7TluqbigJ0g5ZKMIOKAnOWQjeS4uiBzY29yZSDnmoTnu7TluqbigJ0g55qE5YC85ZyoIHRvb2x0aXAg5Lit5pi-56S6CiAgdG9vbHRpcDogWydwcm9kdWN0JywgJ3Njb3JlJ10KICAvLyDkvb_nlKgg4oCc57u05bqmIDHigJ0g5ZKMIOKAnOe7tOW6piAz4oCdIOeahOe7tOW6puWQjei_nui1t-adpeS9nOS4uuezu-WIl-WQjeOAgu-8iOacieaXtuWAmeWQjeWtl-avlOi-g-mVv--8jOi_meWPr-S7pemBv-WFjeWcqCBzZXJpZXMubmFtZSDph43lpI3ovpPlhaXov5nkupvlkI3lrZfvvIkKICBzZXJpZXNOYW1lOiBbMSwgM10sCiAgLy8g6KGo56S65L2_55SoIOKAnOe7tOW6pjLigJ0g5Lit55qE5YC85L2c5Li6IGlk44CC6L-Z5Zyo5L2_55SoIHNldE9wdGlvbiDliqjmgIHmm7TmlrDmlbDmja7ml7bmnInnlKjlpITvvIzlj6_ku6Xkvb_mlrDogIHmlbDmja7nlKggaWQg5a-55bqU6LW35p2l77yM5LuO6ICM6IO95aSf5Lqn55Sf5ZCI6YCC55qE5pWw5o2u5pu05paw5Yqo55S744CCCiAgaXRlbUlkOiAyLAogIC8vIOaMh-WumuaVsOaNrumhueeahOWQjeensOS9v-eUqCDigJznu7TluqYz4oCdIOWcqOmlvOWbvuetieWbvuihqOS4reacieeUqO-8jOWPr-S7peS9v-i_meS4quWQjeWtl-aYvuekuuWcqOWbvuS-i--8iGxlZ2VuZO-8ieS4reOAggogIGl0ZW1OYW1lOiAzCn0KCi8vIOebtOinkuWdkOagh-ezu--8iGdyaWQvY2FydGVzaWFu77yJ54m55pyJ55qE5bGe5oCn77yaCmVuY29kZTogewogIC8vIOaKiiDigJznu7TluqYx4oCd44CB4oCc57u05bqmNeKAneOAgeKAnOWQjeS4uiBzY29yZSDnmoTnu7TluqbigJ0g5pig5bCE5YiwIFgg6L2077yaCiAgeDogWzEsIDUsICdzY29yZSddLAogIC8vIOaKiuKAnOe7tOW6pjDigJ3mmKDlsITliLAgWSDovbTjgIIKICB5OiAwCn0KCi8vIOWNlei9tO-8iHNpbmdsZUF4aXPvvInnibnmnInnmoTlsZ7mgKfvvJoKZW5jb2RlOiB7CiAgc2luZ2xlOiAzCn0KCi8vIOaegeWdkOagh-ezu--8iHBvbGFy77yJ54m55pyJ55qE5bGe5oCn77yaCmVuY29kZTogewogIHJhZGl1czogMywKICBhbmdsZTogMgp9CgovLyDlnLDnkIblnZDmoIfns7vvvIhnZW_vvInnibnmnInnmoTlsZ7mgKfvvJoKZW5jb2RlOiB7CiAgbG5nOiAzLAogIGxhdDogMgp9CgovLyDlr7nkuo7kuIDkupvmsqHmnInlnZDmoIfns7vnmoTlm77ooajvvIzkvovlpoLppbzlm77jgIHmvI_mlpflm77nrYnvvIzlj6_ku6XmmK_vvJoKZW5jb2RlOiB7CiAgdmFsdWU6IDMKfQ\'" line-highlights="\'\'" />\n<p>这是个更丰富的 <code>series.encode</code> 的 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1">示例</a> 。</p>\n<h2 id="%E9%BB%98%E8%AE%A4%E7%9A%84-series.encode" tabindex="-1">默认的 series.encode</h2>\n<p>值得一提的是,当 <code>series.encode</code> 并没有指定时,ECharts 针对最常见直角坐标系中的图表(折线图、柱状图、散点图、K 线图等)、饼图、漏斗图,会采用一些默认的映射规则。默认的映射规则比较简单,大体是:</p>\n<ul>\n<li>在坐标系中(如直角坐标系、极坐标系等)\n<ul>\n<li>如果有类目轴(axis.type 为 \'category\'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列。</li>\n<li>如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的 X Y 轴),则每两列对应一个系列,这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系(如饼图)\n<ul>\n<li>取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值)。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时,就可以自己来配置 <code>encode</code>,也并不复杂。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1">例子</a>。</p>\n<h2 id="%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-series.encode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B" tabindex="-1">几个常见的 series.encode 设置方式举例</h2>\n<p>问:如何把第三列设置为 X 轴,第五列设置为 Y 轴?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgLy8g5rOo5oSP57u05bqm5bqP5Y-377yIZGltZW5zaW9uSW5kZXjvvInku44gMCDlvIDlp4vorqHmlbDvvIznrKzkuInliJfmmK8gZGltZW5zaW9uc1syXeOAggogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfQogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问:如何把第三行设置为 X 轴,第五行设置为 Y 轴?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfSwKICAgIHNlcmllc0xheW91dEJ5OiAncm93JwogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问:如何把第二列设置为标签?</p>\n<p>答:\n关于标签的显示 <a href="https://echarts.apache.org/option.html##series.label.formatter">label.formatter</a>,现在支持引用特定维度的值,例如:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgbGFiZWw6IHsKICAgIC8vIGAne0BzY29yZX0nYCDooajnpLog4oCc5ZCN5Li6IHNjb3Jl4oCdIOeahOe7tOW6pumHjOeahOWAvOOAggogICAgLy8gYCd7QFs0XX0nYCDooajnpLrlvJXnlKjluo_lj7fkuLogNCDnmoTnu7Tluqbph4znmoTlgLzjgIIKICAgIGZvcm1hdHRlcjogJ2FhYXtAcHJvZHVjdH1iYmJ7QHNjb3JlfWNjY3tAWzRdfWRkZCc7CiAgfQp9\'" line-highlights="\'\'" />\n<p>问:如何让第 2 列和第 3 列显示在提示框(tooltip)中?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7CiAgICAgIHRvb2x0aXA6IFsxLCAyXQogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>问:数据里没有维度名,那么怎么给出维度名?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBkaW1lbnNpb25zOiBbJ3Njb3JlJywgJ2Ftb3VudCddLAogICAgc291cmNlOiBbCiAgICAgIFs4OS4zLCAzMzcxXSwKICAgICAgWzkyLjEsIDgxMjNdLAogICAgICBbOTQuNCwgMTk1NF0sCiAgICAgIFs4NS40LCA4MjldCiAgICBdCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问:如何把第三列映射为气泡图的点的大小?</p>\n<p>答:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWzEyLCAzMjMsIDExLjJdLAogICAgICBbMjMsIDE2NywgOC4zXSwKICAgICAgWzgxLCAyODQsIDEyXSwKICAgICAgWzkxLCA0MTMsIDQuMV0sCiAgICAgIFsxMywgMjg3LCAxMy41XQogICAgXQogIH0sCiAgdmlzdWFsTWFwOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIGRpbWVuc2lvbjogMiwgLy8g5oyH5ZCR56ys5LiJ5YiX77yI5YiX5bqP5Y-35LuOIDAg5byA5aeL6K6w77yM5omA5Lul6K6-572u5Li6IDLvvInjgIIKICAgIG1pbjogMiwgLy8g6ZyA6KaB57uZ5Ye65pWw5YC86IyD5Zu077yM5pyA5bCP5pWw5YC844CCCiAgICBtYXg6IDE1LCAvLyDpnIDopoHnu5nlh7rmlbDlgLzojIPlm7TvvIzmnIDlpKfmlbDlgLzjgIIKICAgIGluUmFuZ2U6IHsKICAgICAgLy8g5rCU5rOh5bC65a-477yaNSDlg4_ntKDliLAgNjAg5YOP57Sg44CCCiAgICAgIHN5bWJvbFNpemU6IFs1LCA2MF0KICAgIH0KICB9LAogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnc2NhdHRlcicKICB9Cn07\'" v-bind="{}" />\n<p>问:encode 里指定了映射,但是不管用?</p>\n<p>答:可以查查有没有拼错,比如,维度名是:<code>\'Life Expectancy\'</code>,encode 中拼成了 <code>\'Life Expectency\'</code>。</p>\n<h2 id="%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84" tabindex="-1">视觉通道(颜色、尺寸等)的映射</h2>\n<p>我们可以使用 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 组件进行视觉通道的映射。详见 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 文档的介绍。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1">示例</a>。</p>\n<h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F" tabindex="-1">数据的各种格式</h2>\n<p>多数常见图表中,数据适于用二维表的形式描述。广为使用的数据表格软件(如 MS Excel、Numbers)或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式,输入到 <code>dataset.source</code> 中,在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件,那么可以使用一些 csv 工具如 <a href="https://github.com/d3/d3-dsv">dsv</a> 或者 <a href="https://github.com/mholt/PapaParse">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中,二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外,dataset 也支持例如下面 key-value 方式的数据格式,这类格式也非常常见。但是这类格式中,目前并不支持 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">seriesLayoutBy</a> 参数。</p>\n<md-code-block lang="js" code="\'ZGF0YXNldDogWwogIHsKICAgIC8vIOaMieihjOeahCBrZXktdmFsdWUg5b2i5byP77yI5a-56LGh5pWw57uE77yJ77yM6L-Z5piv5Liq5q-U6L6D5bi46KeB55qE5qC85byP44CCCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgY291bnQ6IDgyMywgc2NvcmU6IDk1LjggfSwKICAgICAgeyBwcm9kdWN0OiAnTWlsayBUZWEnLCBjb3VudDogMjM1LCBzY29yZTogODEuNCB9LAogICAgICB7IHByb2R1Y3Q6ICdDaGVlc2UgQ29jb2EnLCBjb3VudDogMTA0Miwgc2NvcmU6IDkxLjIgfSwKICAgICAgeyBwcm9kdWN0OiAnV2FsbnV0IEJyb3duaWUnLCBjb3VudDogOTg4LCBzY29yZTogNzYuOSB9CiAgICBdCiAgfSwKICB7CiAgICAvLyDmjInliJfnmoQga2V5LXZhbHVlIOW9ouW8j-OAggogICAgc291cmNlOiB7CiAgICAgIHByb2R1Y3Q6IFsnTWF0Y2hhIExhdHRlJywgJ01pbGsgVGVhJywgJ0NoZWVzZSBDb2NvYScsICdXYWxudXQgQnJvd25pZSddLAogICAgICBjb3VudDogWzgyMywgMjM1LCAxMDQyLCA5ODhdLAogICAgICBzY29yZTogWzk1LjgsIDgxLjQsIDkxLjIsIDc2LjldCiAgICB9CiAgfQpdOw\'" line-highlights="\'\'" />\n<h2 id="%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC" tabindex="-1">多个 dataset 以及如何引用他们</h2>\n<p>可以同时定义多个 dataset。系列可以通过 <a href="https://echarts.apache.org/option.html##series.datasetIndex">series.datasetIndex</a> 来指定引用哪个 dataset。例如:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAwIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAxIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAyIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICAvLyDkvb_nlKjluo_lj7fkuLogMiDnmoQgZGF0YXNldOOAggogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0sCiAgICB7CiAgICAgIC8vIOS9v-eUqOW6j-WPt-S4uiAxIOeahCBkYXRhc2V044CCCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h2 id="echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88series.data%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8" tabindex="-1">ECharts 3 的数据设置方式(series.data)仍正常使用</h2>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持,如果系列已经声明了 <a href="https://echarts.apache.org/option.html##series.data">series.data</a>, 那么就会使用 <a href="https://echarts.apache.org/option.html##series.data">series.data</a> 而非 <code>dataset</code>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>其实,<a href="https://echarts.apache.org/option.html##series.data">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表,如 <a href="https://echarts.apache.org/option.html##series-treemap">treemap</a>、<a href="https://echarts.apache.org/option.html##series-graph">graph</a>、<a href="https://echarts.apache.org/option.html##series-lines">lines</a> 等,现在仍不支持在 dataset 中设置,仍然需要使用 <a href="https://echarts.apache.org/option.html##series.data">series.data</a>。另外,对于巨大数据量的渲染(如百万以上的数据量),需要使用 <a href="api.html#echartsInstance.appendData">appendData</a> 进行增量加载,这种情况不支持使用 <code>dataset</code>。</p>\n<h2 id="%E5%85%B6%E4%BB%96" tabindex="-1">其他</h2>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有:\n<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。\n后续会有更多的图表进行支持。</p>\n<p>最后,给出这个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1">示例</a>,多个图表共享一个 <code>dataset</code>,并带有联动交互。</p>\n',postPath:"zh/concepts/dataset"}],fetch:{},error:t,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:I,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:C,draft:e},{title:"获取灵感",dir:a},{title:"寻求帮助",dir:n},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:r}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:m},{title:"数据集",dir:y},{title:"数据转换",dir:b},{title:"坐标系",dir:E,draft:e},{title:"坐标轴",dir:L},{title:"视觉映射",dir:g},{title:"图例",dir:v},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:O,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:w},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:J},{title:"极坐标系柱状图",dir:j,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:g,draft:e}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:G}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:k},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:f,children:[{title:"基础散点图",dir:T}]}]},{title:F,dir:i,draft:e},{title:"跨平台方案",dir:x,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:R,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:U,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ge}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:I,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:C,draft:e},{title:"Inspiration",dir:a},{title:"Get Help",dir:n},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:r}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:m},{title:"Dataset",dir:y},{title:"Data Transform",dir:b},{title:"Coordinate",dir:E,draft:e},{title:"Axis",dir:L},{title:"Visual Mapping",dir:g},{title:"Legend",dir:v},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:O,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:w},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:J},{title:"Bar Polar",dir:j,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:G}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:k},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:f,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:x,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:R,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:U,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ge}]}]},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:e,routePath:"/zh/concepts/dataset",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:t}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+后续会有更多的图表进行支持。</p> <p>最后,给出这个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1">示例</a>,多个图表共享一个 <code>dataset</code>,并带有联动交互。</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/concepts/dataset.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,g,t,d,I,l,o,C,a,n,A,s,c,r,h,p,B,u,m,y,b,E,L,v,W,O,D,w,Z,J,j,H,z,Y,M,X,S,G,K,k,N,f,T,F,x,Q,R,V,U,q,P,_,$,ee,ie,ge){return{layout:"default",data:[{html:'<h1 id="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h1>\n<p><code>数据集</code>(<code>dataset</code>)是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据,但是从 ECharts4 支持 <code>数据集</code> 开始,更推荐使用 <code>数据集</code> 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。</p>\n<h2 id="%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在系列中设置数据</h2>\n<p>如果数据设置在 <code>系列</code>(<code>series</code>)中,例如:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。\n但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<h2 id="%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在数据集中设置数据</h2>\n<p>而数据设置在 <code>数据集</code>(<code>dataset</code>)中,会有这些好处:</p>\n<ul>\n<li>能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。</li>\n<li>数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。</li>\n<li>数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。</li>\n<li>支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p>下面是一个最简单的 <code>dataset</code> 的例子:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8g5o-Q5L6b5LiA5Lu95pWw5o2u44CCCiAgICBzb3VyY2U6IFsKICAgICAgWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDMuMywgODUuOCwgOTMuN10sCiAgICAgIFsnTWlsayBUZWEnLCA4My4xLCA3My40LCA1NS4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCA4Ni40LCA2NS4yLCA4Mi41XSwKICAgICAgWydXYWxudXQgQnJvd25pZScsIDcyLjQsIDUzLjksIDM5LjFdCiAgICBdCiAgfSwKICAvLyDlo7DmmI7kuIDkuKogWCDovbTvvIznsbvnm67ovbTvvIhjYXRlZ29yee-8ieOAgum7mOiupOaDheWGteS4i--8jOexu-ebrui9tOWvueW6lOWIsCBkYXRhc2V0IOesrOS4gOWIl-OAggogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICAvLyDlo7DmmI7kuIDkuKogWSDovbTvvIzmlbDlgLzovbTjgIIKICB5QXhpczoge30sCiAgLy8g5aOw5piO5aSa5LiqIGJhciDns7vliJfvvIzpu5jorqTmg4XlhrXkuIvvvIzmr4_kuKrns7vliJfkvJroh6rliqjlr7nlupTliLAgZGF0YXNldCDnmoTmr4_kuIDliJfjgIIKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>或者也可以使用常见的“对象数组”的格式:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8g55SoIGRpbWVuc2lvbnMg5oyH5a6a5LqG57u05bqm55qE6aG65bqP44CC55u06KeS5Z2Q5qCH57O75Lit77yM5aaC5p6cIFgg6L20IHR5cGUg5Li6IGNhdGVnb3J577yMCiAgICAvLyDpu5jorqTmiornrKzkuIDkuKrnu7TluqbmmKDlsITliLAgWCDovbTkuIrvvIzlkI7pnaLnu7TluqbmmKDlsITliLAgWSDovbTkuIrjgIIKICAgIC8vIOWmguaenOS4jeaMh-WumiBkaW1lbnNpb25z77yM5Lmf5Y-v5Lul6YCa6L-H5oyH5a6aIHNlcmllcy5lbmNvZGUKICAgIC8vIOWujOaIkOaYoOWwhO-8jOWPguingeWQjuaWh-OAggogICAgZGltZW5zaW9uczogWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgJzIwMTUnOiA0My4zLCAnMjAxNic6IDg1LjgsICcyMDE3JzogOTMuNyB9LAogICAgICB7IHByb2R1Y3Q6ICdNaWxrIFRlYScsICcyMDE1JzogODMuMSwgJzIwMTYnOiA3My40LCAnMjAxNyc6IDU1LjEgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgJzIwMTUnOiA4Ni40LCAnMjAxNic6IDY1LjIsICcyMDE3JzogODIuNSB9LAogICAgICB7IHByb2R1Y3Q6ICdXYWxudXQgQnJvd25pZScsICcyMDE1JzogNzIuNCwgJzIwMTYnOiA1My45LCAnMjAxNyc6IDM5LjEgfQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<h2 id="%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84" tabindex="-1">数据到图形的映射</h2>\n<p>如上所述,数据可视化的一个常见思路是:(I)提供数据,(II)指定数据到视觉的映射。</p>\n<p>简而言之,可以进行这些映射的设定:</p>\n<ul>\n<li>指定 <code>数据集</code> 的列(column)还是行(row)映射为 <code>系列</code>(<code>series</code>)。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">series.seriesLayoutBy</a> 属性来配置。默认是按照列(column)来映射。</li>\n<li>指定维度映射的规则:如何从 dataset 的维度(一个“维度”的意思是一行/列)映射到坐标轴(如 X、Y 轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> 属性,以及 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 组件来配置(如果有需要映射颜色大小等视觉维度的话)。上面的例子中,没有给出这种映射配置,那么 ECharts 就按最常见的理解进行默认映射:X 坐标轴声明为类目轴,默认情况下会自动对应到 <code>dataset.source</code> 中的第一列;三个柱图系列,一一对应到 <code>dataset.source</code> 中后面每一列。</li>\n</ul>\n<p>下面详细解释这些映射的设定。</p>\n<h2 id="%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89" tabindex="-1">把数据集( dataset )的行或列映射为系列(series)</h2>\n<p>有了数据表之后,使用者可以灵活地配置:数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项,改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值:</p>\n<ul>\n<li>\'column\': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li>\'row\': 系列被安放到 <code>dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDEyJywgJzIwMTMnLCAnMjAxNCcsICcyMDE1J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDEuMSwgMzAuNCwgNjUuMSwgNTMuM10sCiAgICAgIFsnTWlsayBUZWEnLCA4Ni41LCA5Mi4xLCA4NS43LCA4My4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCAyNC4xLCA2Ny4yLCA3OS41LCA4Ni40XQogICAgXQogIH0sCiAgeEF4aXM6IFsKICAgIHsgdHlwZTogJ2NhdGVnb3J5JywgZ3JpZEluZGV4OiAwIH0sCiAgICB7IHR5cGU6ICdjYXRlZ29yeScsIGdyaWRJbmRleDogMSB9CiAgXSwKICB5QXhpczogW3sgZ3JpZEluZGV4OiAwIH0sIHsgZ3JpZEluZGV4OiAxIH1dLAogIGdyaWQ6IFt7IGJvdHRvbTogJzU1JScgfSwgeyB0b3A6ICc1NSUnIH1dLAogIHNlcmllczogWwogICAgLy8g6L-Z5Yeg5Liq57O75YiX5Lya5Ye6546w5Zyo56ys5LiA5Liq55u06KeS5Z2Q5qCH57O75Lit77yM5q-P5Liq57O75YiX5a-55bqU5YiwIGRhdGFzZXQg55qE5q-P5LiA6KGM44CCCiAgICB7IHR5cGU6ICdiYXInLCBzZXJpZXNMYXlvdXRCeTogJ3JvdycgfSwKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAncm93JyB9LAogICAgeyB0eXBlOiAnYmFyJywgc2VyaWVzTGF5b3V0Qnk6ICdyb3cnIH0sCiAgICAvLyDov5nlh6DkuKrns7vliJfkvJrlh7rnjrDlnKjnrKzkuozkuKrnm7Top5LlnZDmoIfns7vkuK3vvIzmr4_kuKrns7vliJflr7nlupTliLAgZGF0YXNldCDnmoTmr4_kuIDliJfjgIIKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89" tabindex="-1">维度( dimension )</h2>\n<p>常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。</p>\n<p>维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。例如上面的例子中,<code>\'score\'</code>、<code>\'amount\'</code>、<code>\'product\'</code> 就是维度名。从第二行开始,才是正式的数据。<code>dataset.source</code> 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行(列)就是维度,或者 <code>dataset.sourceHeader: false</code> 表明第一行(列)开始就直接是数据。</p>\n<p>维度的定义,也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义,这样可以同时指定维度名,和维度的类型( dimension type ):</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbjEgPSB7CiAgZGF0YXNldDogewogICAgZGltZW5zaW9uczogWwogICAgICB7IG5hbWU6ICdzY29yZScgfSwKICAgICAgLy8g5Y-v5Lul566A5YaZ5Li6IHN0cmluZyDvvIzooajnpLogZGltZW5zaW9uIG5hbWUg44CCCiAgICAgICdhbW91bnQnLAogICAgICAvLyDlj6_ku6XlnKggdHlwZSDkuK3mjIflrprnu7TluqbnsbvlnovjgIIKICAgICAgeyBuYW1lOiAncHJvZHVjdCcsIHR5cGU6ICdvcmRpbmFsJyB9CiAgICBdLAogICAgc291cmNlOiBbCiAgICAgIC8vLi4uCiAgICBdCiAgfQogIC8vIC4uLgp9OwoKdmFyIG9wdGlvbjIgPSB7CiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIC8vIC4uLgogICAgXQogIH0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnbGluZScsCiAgICAvLyBzZXJpZXMuZGltZW5zaW9ucyDkvJrmm7TkvJjlhYjkuo4gZGF0YXNldC5kaW1lbnNpb24g6YeH57qz44CCCiAgICBkaW1lbnNpb25zOiBbCiAgICAgIG51bGwsIC8vIOWPr-S7peiuvue9ruS4uiBudWxsIOihqOekuuS4jeaDs-iuvue9rue7tOW6puWQjQogICAgICAnYW1vdW50JywKICAgICAgeyBuYW1lOiAncHJvZHVjdCcsIHR5cGU6ICdvcmRpbmFsJyB9CiAgICBdCiAgfQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>大多数情况下,我们并不需要去设置维度类型,因为 ECharts 会自动尝试判断。但是如果不足够准确时,可以手动设置维度类型。</p>\n<p>维度类型( dimension type )可以取这些值:</p>\n<ul>\n<li><code>\'number\'</code>: 默认,表示普通数据。</li>\n<li><code>\'ordinal\'</code>: 对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 \'ordinal\' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确,所以使用者也可以手动强制指定。</li>\n<li><code>\'time\'</code>: 表示时间数据。设置成 <code>\'time\'</code> 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 \'2017-05-10\',会自动被解析。如果这个维度被用在时间数轴(<a href="https://echarts.apache.org/option.html##xAxis.type">axis.type</a> 为 <code>\'time\'</code>)上,那么会被自动设置为 <code>\'time\'</code> 类型。时间类型的支持参见 <a href="https://echarts.apache.org/option.html##series.data">data</a>。</li>\n<li><code>\'float\'</code>: 如果设置成 <code>\'float\'</code>,在存储时候会使用 <code>TypedArray</code>,对性能优化有好处。</li>\n<li><code>\'int\'</code>: 如果设置成 <code>\'int\'</code>,在存储时候会使用 <code>TypedArray</code>,对性能优化有好处。</li>\n</ul>\n<h2 id="%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-series.encode-%EF%BC%89" tabindex="-1">数据到图形的映射( series.encode )</h2>\n<p>了解了维度的概念后,我们就可以使用 <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> 来做映射。总体是这样的感觉:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWydzY29yZScsICdhbW91bnQnLCAncHJvZHVjdCddLAogICAgICBbODkuMywgNTgyMTIsICdNYXRjaGEgTGF0dGUnXSwKICAgICAgWzU3LjEsIDc4MjU0LCAnTWlsayBUZWEnXSwKICAgICAgWzc0LjQsIDQxMDMyLCAnQ2hlZXNlIENvY29hJ10sCiAgICAgIFs1MC4xLCAxMjc1NSwgJ0NoZWVzZSBCcm93bmllJ10sCiAgICAgIFs4OS43LCAyMDE0NSwgJ01hdGNoYSBDb2NvYSddLAogICAgICBbNjguMSwgNzkxNDYsICdUZWEnXSwKICAgICAgWzE5LjYsIDkxODUyLCAnT3JhbmdlIEp1aWNlJ10sCiAgICAgIFsxMC42LCAxMDE4NTIsICdMZW1vbiBKdWljZSddLAogICAgICBbMzIuNywgMjAxMTIsICdXYWxudXQgQnJvd25pZSddCiAgICBdCiAgfSwKICB4QXhpczoge30sCiAgeUF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZW5jb2RlOiB7CiAgICAgICAgLy8g5bCGICJhbW91bnQiIOWIl-aYoOWwhOWIsCBYIOi9tOOAggogICAgICAgIHg6ICdhbW91bnQnLAogICAgICAgIC8vIOWwhiAicHJvZHVjdCIg5YiX5pig5bCE5YiwIFkg6L2044CCCiAgICAgICAgeTogJ3Byb2R1Y3QnCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p><code>series.encode</code> 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称,如 <code>\'x\'</code>, <code>\'y\'</code>, <code>\'tooltip\'</code> 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。</p>\n<p>下面是 <code>series.encode</code> 支持的属性:</p>\n<md-code-block lang="js" code="\'Ly8g5Zyo5Lu75L2V5Z2Q5qCH57O75ZKM57O75YiX5Lit77yM6YO95pSv5oyB77yaCmVuY29kZTogewogIC8vIOS9v-eUqCDigJzlkI3kuLogcHJvZHVjdCDnmoTnu7TluqbigJ0g5ZKMIOKAnOWQjeS4uiBzY29yZSDnmoTnu7TluqbigJ0g55qE5YC85ZyoIHRvb2x0aXAg5Lit5pi-56S6CiAgdG9vbHRpcDogWydwcm9kdWN0JywgJ3Njb3JlJ10KICAvLyDkvb_nlKgg4oCc57u05bqmIDHigJ0g5ZKMIOKAnOe7tOW6piAz4oCdIOeahOe7tOW6puWQjei_nui1t-adpeS9nOS4uuezu-WIl-WQjeOAgu-8iOacieaXtuWAmeWQjeWtl-avlOi-g-mVv--8jOi_meWPr-S7pemBv-WFjeWcqCBzZXJpZXMubmFtZSDph43lpI3ovpPlhaXov5nkupvlkI3lrZfvvIkKICBzZXJpZXNOYW1lOiBbMSwgM10sCiAgLy8g6KGo56S65L2_55SoIOKAnOe7tOW6pjLigJ0g5Lit55qE5YC85L2c5Li6IGlk44CC6L-Z5Zyo5L2_55SoIHNldE9wdGlvbiDliqjmgIHmm7TmlrDmlbDmja7ml7bmnInnlKjlpITvvIzlj6_ku6Xkvb_mlrDogIHmlbDmja7nlKggaWQg5a-55bqU6LW35p2l77yM5LuO6ICM6IO95aSf5Lqn55Sf5ZCI6YCC55qE5pWw5o2u5pu05paw5Yqo55S744CCCiAgaXRlbUlkOiAyLAogIC8vIOaMh-WumuaVsOaNrumhueeahOWQjeensOS9v-eUqCDigJznu7TluqYz4oCdIOWcqOmlvOWbvuetieWbvuihqOS4reacieeUqO-8jOWPr-S7peS9v-i_meS4quWQjeWtl-aYvuekuuWcqOWbvuS-i--8iGxlZ2VuZO-8ieS4reOAggogIGl0ZW1OYW1lOiAzCn0KCi8vIOebtOinkuWdkOagh-ezu--8iGdyaWQvY2FydGVzaWFu77yJ54m55pyJ55qE5bGe5oCn77yaCmVuY29kZTogewogIC8vIOaKiiDigJznu7TluqYx4oCd44CB4oCc57u05bqmNeKAneOAgeKAnOWQjeS4uiBzY29yZSDnmoTnu7TluqbigJ0g5pig5bCE5YiwIFgg6L2077yaCiAgeDogWzEsIDUsICdzY29yZSddLAogIC8vIOaKiuKAnOe7tOW6pjDigJ3mmKDlsITliLAgWSDovbTjgIIKICB5OiAwCn0KCi8vIOWNlei9tO-8iHNpbmdsZUF4aXPvvInnibnmnInnmoTlsZ7mgKfvvJoKZW5jb2RlOiB7CiAgc2luZ2xlOiAzCn0KCi8vIOaegeWdkOagh-ezu--8iHBvbGFy77yJ54m55pyJ55qE5bGe5oCn77yaCmVuY29kZTogewogIHJhZGl1czogMywKICBhbmdsZTogMgp9CgovLyDlnLDnkIblnZDmoIfns7vvvIhnZW_vvInnibnmnInnmoTlsZ7mgKfvvJoKZW5jb2RlOiB7CiAgbG5nOiAzLAogIGxhdDogMgp9CgovLyDlr7nkuo7kuIDkupvmsqHmnInlnZDmoIfns7vnmoTlm77ooajvvIzkvovlpoLppbzlm77jgIHmvI_mlpflm77nrYnvvIzlj6_ku6XmmK_vvJoKZW5jb2RlOiB7CiAgdmFsdWU6IDMKfQ\'" line-highlights="\'\'" />\n<p>这是个更丰富的 <code>series.encode</code> 的 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1">示例</a> 。</p>\n<h2 id="%E9%BB%98%E8%AE%A4%E7%9A%84-series.encode" tabindex="-1">默认的 series.encode</h2>\n<p>值得一提的是,当 <code>series.encode</code> 并没有指定时,ECharts 针对最常见直角坐标系中的图表(折线图、柱状图、散点图、K 线图等)、饼图、漏斗图,会采用一些默认的映射规则。默认的映射规则比较简单,大体是:</p>\n<ul>\n<li>在坐标系中(如直角坐标系、极坐标系等)\n<ul>\n<li>如果有类目轴(axis.type 为 \'category\'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列。</li>\n<li>如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的 X Y 轴),则每两列对应一个系列,这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系(如饼图)\n<ul>\n<li>取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值)。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时,就可以自己来配置 <code>encode</code>,也并不复杂。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1">例子</a>。</p>\n<h2 id="%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-series.encode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B" tabindex="-1">几个常见的 series.encode 设置方式举例</h2>\n<p>问:如何把第三列设置为 X 轴,第五列设置为 Y 轴?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgLy8g5rOo5oSP57u05bqm5bqP5Y-377yIZGltZW5zaW9uSW5kZXjvvInku44gMCDlvIDlp4vorqHmlbDvvIznrKzkuInliJfmmK8gZGltZW5zaW9uc1syXeOAggogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfQogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问:如何把第三行设置为 X 轴,第五行设置为 Y 轴?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfSwKICAgIHNlcmllc0xheW91dEJ5OiAncm93JwogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问:如何把第二列设置为标签?</p>\n<p>答:\n关于标签的显示 <a href="https://echarts.apache.org/option.html##series.label.formatter">label.formatter</a>,现在支持引用特定维度的值,例如:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgbGFiZWw6IHsKICAgIC8vIGAne0BzY29yZX0nYCDooajnpLog4oCc5ZCN5Li6IHNjb3Jl4oCdIOeahOe7tOW6pumHjOeahOWAvOOAggogICAgLy8gYCd7QFs0XX0nYCDooajnpLrlvJXnlKjluo_lj7fkuLogNCDnmoTnu7Tluqbph4znmoTlgLzjgIIKICAgIGZvcm1hdHRlcjogJ2FhYXtAcHJvZHVjdH1iYmJ7QHNjb3JlfWNjY3tAWzRdfWRkZCc7CiAgfQp9\'" line-highlights="\'\'" />\n<p>问:如何让第 2 列和第 3 列显示在提示框(tooltip)中?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7CiAgICAgIHRvb2x0aXA6IFsxLCAyXQogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>问:数据里没有维度名,那么怎么给出维度名?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBkaW1lbnNpb25zOiBbJ3Njb3JlJywgJ2Ftb3VudCddLAogICAgc291cmNlOiBbCiAgICAgIFs4OS4zLCAzMzcxXSwKICAgICAgWzkyLjEsIDgxMjNdLAogICAgICBbOTQuNCwgMTk1NF0sCiAgICAgIFs4NS40LCA4MjldCiAgICBdCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问:如何把第三列映射为气泡图的点的大小?</p>\n<p>答:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWzEyLCAzMjMsIDExLjJdLAogICAgICBbMjMsIDE2NywgOC4zXSwKICAgICAgWzgxLCAyODQsIDEyXSwKICAgICAgWzkxLCA0MTMsIDQuMV0sCiAgICAgIFsxMywgMjg3LCAxMy41XQogICAgXQogIH0sCiAgdmlzdWFsTWFwOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIGRpbWVuc2lvbjogMiwgLy8g5oyH5ZCR56ys5LiJ5YiX77yI5YiX5bqP5Y-35LuOIDAg5byA5aeL6K6w77yM5omA5Lul6K6-572u5Li6IDLvvInjgIIKICAgIG1pbjogMiwgLy8g6ZyA6KaB57uZ5Ye65pWw5YC86IyD5Zu077yM5pyA5bCP5pWw5YC844CCCiAgICBtYXg6IDE1LCAvLyDpnIDopoHnu5nlh7rmlbDlgLzojIPlm7TvvIzmnIDlpKfmlbDlgLzjgIIKICAgIGluUmFuZ2U6IHsKICAgICAgLy8g5rCU5rOh5bC65a-477yaNSDlg4_ntKDliLAgNjAg5YOP57Sg44CCCiAgICAgIHN5bWJvbFNpemU6IFs1LCA2MF0KICAgIH0KICB9LAogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnc2NhdHRlcicKICB9Cn07\'" v-bind="{}" />\n<p>问:encode 里指定了映射,但是不管用?</p>\n<p>答:可以查查有没有拼错,比如,维度名是:<code>\'Life Expectancy\'</code>,encode 中拼成了 <code>\'Life Expectency\'</code>。</p>\n<h2 id="%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84" tabindex="-1">视觉通道(颜色、尺寸等)的映射</h2>\n<p>我们可以使用 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 组件进行视觉通道的映射。详见 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 文档的介绍。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1">示例</a>。</p>\n<h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F" tabindex="-1">数据的各种格式</h2>\n<p>多数常见图表中,数据适于用二维表的形式描述。广为使用的数据表格软件(如 MS Excel、Numbers)或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式,输入到 <code>dataset.source</code> 中,在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件,那么可以使用一些 csv 工具如 <a href="https://github.com/d3/d3-dsv">dsv</a> 或者 <a href="https://github.com/mholt/PapaParse">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中,二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外,dataset 也支持例如下面 key-value 方式的数据格式,这类格式也非常常见。但是这类格式中,目前并不支持 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">seriesLayoutBy</a> 参数。</p>\n<md-code-block lang="js" code="\'ZGF0YXNldDogWwogIHsKICAgIC8vIOaMieihjOeahCBrZXktdmFsdWUg5b2i5byP77yI5a-56LGh5pWw57uE77yJ77yM6L-Z5piv5Liq5q-U6L6D5bi46KeB55qE5qC85byP44CCCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgY291bnQ6IDgyMywgc2NvcmU6IDk1LjggfSwKICAgICAgeyBwcm9kdWN0OiAnTWlsayBUZWEnLCBjb3VudDogMjM1LCBzY29yZTogODEuNCB9LAogICAgICB7IHByb2R1Y3Q6ICdDaGVlc2UgQ29jb2EnLCBjb3VudDogMTA0Miwgc2NvcmU6IDkxLjIgfSwKICAgICAgeyBwcm9kdWN0OiAnV2FsbnV0IEJyb3duaWUnLCBjb3VudDogOTg4LCBzY29yZTogNzYuOSB9CiAgICBdCiAgfSwKICB7CiAgICAvLyDmjInliJfnmoQga2V5LXZhbHVlIOW9ouW8j-OAggogICAgc291cmNlOiB7CiAgICAgIHByb2R1Y3Q6IFsnTWF0Y2hhIExhdHRlJywgJ01pbGsgVGVhJywgJ0NoZWVzZSBDb2NvYScsICdXYWxudXQgQnJvd25pZSddLAogICAgICBjb3VudDogWzgyMywgMjM1LCAxMDQyLCA5ODhdLAogICAgICBzY29yZTogWzk1LjgsIDgxLjQsIDkxLjIsIDc2LjldCiAgICB9CiAgfQpdOw\'" line-highlights="\'\'" />\n<h2 id="%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC" tabindex="-1">多个 dataset 以及如何引用他们</h2>\n<p>可以同时定义多个 dataset。系列可以通过 <a href="https://echarts.apache.org/option.html##series.datasetIndex">series.datasetIndex</a> 来指定引用哪个 dataset。例如:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAwIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAxIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAyIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICAvLyDkvb_nlKjluo_lj7fkuLogMiDnmoQgZGF0YXNldOOAggogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0sCiAgICB7CiAgICAgIC8vIOS9v-eUqOW6j-WPt-S4uiAxIOeahCBkYXRhc2V044CCCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h2 id="echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88series.data%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8" tabindex="-1">ECharts 3 的数据设置方式(series.data)仍正常使用</h2>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持,如果系列已经声明了 <a href="https://echarts.apache.org/option.html##series.data">series.data</a>, 那么就会使用 <a href="https://echarts.apache.org/option.html##series.data">series.data</a> 而非 <code>dataset</code>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>其实,<a href="https://echarts.apache.org/option.html##series.data">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表,如 <a href="https://echarts.apache.org/option.html##series-treemap">treemap</a>、<a href="https://echarts.apache.org/option.html##series-graph">graph</a>、<a href="https://echarts.apache.org/option.html##series-lines">lines</a> 等,现在仍不支持在 dataset 中设置,仍然需要使用 <a href="https://echarts.apache.org/option.html##series.data">series.data</a>。另外,对于巨大数据量的渲染(如百万以上的数据量),需要使用 <a href="api.html#echartsInstance.appendData">appendData</a> 进行增量加载,这种情况不支持使用 <code>dataset</code>。</p>\n<h2 id="%E5%85%B6%E4%BB%96" tabindex="-1">其他</h2>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有:\n<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。\n后续会有更多的图表进行支持。</p>\n<p>最后,给出这个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1">示例</a>,多个图表共享一个 <code>dataset</code>,并带有联动交互。</p>\n',postPath:"zh/concepts/dataset"}],fetch:{},error:t,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:I,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:C,draft:e},{title:"获取灵感",dir:a},{title:"寻求帮助",dir:n},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:r}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:m},{title:"数据集",dir:y},{title:"数据转换",dir:b},{title:"坐标系",dir:E,draft:e},{title:"坐标轴",dir:L},{title:"视觉映射",dir:g},{title:"图例",dir:v},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:O,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:w},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:J},{title:"极坐标系柱状图",dir:j,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:g,draft:e}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:G}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:k},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:f,children:[{title:"基础散点图",dir:T}]}]},{title:F,dir:i,draft:e},{title:"跨平台方案",dir:x,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:R,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:U,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ge}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:I,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:C,draft:e},{title:"Inspiration",dir:a},{title:"Get Help",dir:n},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:r}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:m},{title:"Dataset",dir:y},{title:"Data Transform",dir:b},{title:"Coordinate",dir:E,draft:e},{title:"Axis",dir:L},{title:"Visual Mapping",dir:g},{title:"Legend",dir:v},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:O,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:w},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:J},{title:"Bar Polar",dir:j,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:G}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:k},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:f,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:x,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:R,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:U,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ge}]}]},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:e,routePath:"/zh/concepts/dataset",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:t}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/concepts/event/index.html b/handbook/zh/concepts/event/index.html
index 09a0919..5d36c44 100644
--- a/handbook/zh/concepts/event/index.html
+++ b/handbook/zh/concepts/event/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA" tabindex="-1">事件与行为</h1> <p>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。</p> <p>ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA" tabindex="-1">事件与行为</h1> <p>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。</p> <p>ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 控制台打印数据的名称</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>在 ECharts 中事件分为两种类型,一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'legendselectchanged'</a> 事件(这里需要注意切换图例开关是不会触发 <code>'legendselected'</code> 事件的),数据区域缩放时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'datazoom'</a> 事件等等。</p> <h2 id="%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86" tabindex="-1">鼠标事件的处理</h2> <p>ECharts 支持常规的鼠标事件类型,包括 <code>'click'</code>、 <code>'dblclick'</code>、 <code>'mousedown'</code>、 <code>'mousemove'</code>、 <code>'mouseup'</code>、 <code>'mouseover'</code>、 <code>'mouseout'</code>、 <code>'globalout'</code>、 <code>'contextmenu'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">// 基于准备好的dom,初始化ECharts实例
@@ -327,7 +327,8 @@
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>event<span class="token punctuation">.</span>target<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 punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/event.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,g,t,l,d,I,C,n,a,o,c,r,A,h,s,b,m,p,u,B,Z,W,y,G,v,L,K,X,Y,O,k,w,J,S,H,V,j,F,R,E,D,z,f,N,T,U,q,M,Q,x,P,_,$,ii,ei,gi){return{layout:"default",data:[{html:'<h1 id="%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA" tabindex="-1">事件与行为</h1>\n<p>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。</p>\n<p>ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyDmjqfliLblj7DmiZPljbDmlbDmja7nmoTlkI3np7AKICBjb25zb2xlLmxvZyhwYXJhbXMubmFtZSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>在 ECharts 中事件分为两种类型,一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'legendselectchanged\'</a> 事件(这里需要注意切换图例开关是不会触发 <code>\'legendselected\'</code> 事件的),数据区域缩放时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'datazoom\'</a> 事件等等。</p>\n<h2 id="%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86" tabindex="-1">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型,包括 <code>\'click\'</code>、 <code>\'dblclick\'</code>、 <code>\'mousedown\'</code>、 <code>\'mousemove\'</code>、 <code>\'mouseup\'</code>、 <code>\'mouseover\'</code>、 <code>\'mouseout\'</code>、 <code>\'globalout\'</code>、 <code>\'contextmenu\'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<md-live lang="js" code="\'Ly8g5Z-65LqO5YeG5aSH5aW955qEZG9t77yM5Yid5aeL5YyWRUNoYXJ0c-WunuS-iwovLyB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCi8vIOaMh-WumuWbvuihqOeahOmFjee9rumhueWSjOaVsOaNrgp2YXIgb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgfQogIF0KfTsKLy8g5L2_55So5Yia5oyH5a6a55qE6YWN572u6aG55ZKM5pWw5o2u5pi-56S65Zu-6KGo44CCCm15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbik7Ci8vIOWkhOeQhueCueWHu-S6i-S7tuW5tuS4lOi3s-i9rOWIsOebuOW6lOeahOeZvuW6puaQnOe0oumhtemdogpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKHBhcmFtcykgewogIHdpbmRvdy5vcGVuKCdodHRwczovL3d3dy5iYWlkdS5jb20vcz93ZD0nICsgZW5jb2RlVVJJQ29tcG9uZW50KHBhcmFtcy5uYW1lKSk7Cn0pOw\'" v-bind="{}" />\n<p>所有的鼠标事件包含参数 <code>params</code>,这是一个包含点击图形的数据信息的对象,如下格式:</p>\n<md-code-block lang="ts" code="\'dHlwZSBFdmVudFBhcmFtcyA9IHsKICAvLyDlvZPliY3ngrnlh7vnmoTlm77lvaLlhYPntKDmiYDlsZ7nmoTnu4Tku7blkI3np7DvvIwKICAvLyDlhbblgLzlpoIgJ3NlcmllcyfjgIEnbWFya0xpbmUn44CBJ21hcmtQb2ludCfjgIEndGltZUxpbmUnIOetieOAggogIGNvbXBvbmVudFR5cGU6IHN0cmluZzsKICAvLyDns7vliJfnsbvlnovjgILlgLzlj6_og73kuLrvvJonbGluZSfjgIEnYmFyJ-OAgSdwaWUnIOetieOAguW9kyBjb21wb25lbnRUeXBlIOS4uiAnc2VyaWVzJyDml7bmnInmhI_kuYnjgIIKICBzZXJpZXNUeXBlOiBzdHJpbmc7CiAgLy8g57O75YiX5Zyo5Lyg5YWl55qEIG9wdGlvbi5zZXJpZXMg5Lit55qEIGluZGV444CC5b2TIGNvbXBvbmVudFR5cGUg5Li6ICdzZXJpZXMnIOaXtuacieaEj-S5ieOAggogIHNlcmllc0luZGV4OiBudW1iZXI7CiAgLy8g57O75YiX5ZCN56ew44CC5b2TIGNvbXBvbmVudFR5cGUg5Li6ICdzZXJpZXMnIOaXtuacieaEj-S5ieOAggogIHNlcmllc05hbWU6IHN0cmluZzsKICAvLyDmlbDmja7lkI3vvIznsbvnm67lkI0KICBuYW1lOiBzdHJpbmc7CiAgLy8g5pWw5o2u5Zyo5Lyg5YWl55qEIGRhdGEg5pWw57uE5Lit55qEIGluZGV4CiAgZGF0YUluZGV4OiBudW1iZXI7CiAgLy8g5Lyg5YWl55qE5Y6f5aeL5pWw5o2u6aG5CiAgZGF0YTogT2JqZWN0OwogIC8vIHNhbmtleeOAgWdyYXBoIOetieWbvuihqOWQjOaXtuWQq-aciSBub2RlRGF0YSDlkowgZWRnZURhdGEg5Lik56eNIGRhdGHvvIwKICAvLyBkYXRhVHlwZSDnmoTlgLzkvJrmmK8gJ25vZGUnIOaIluiAhSAnZWRnZSfvvIzooajnpLrlvZPliY3ngrnlh7vlnKggbm9kZSDov5jmmK8gZWRnZSDkuIrjgIIKICAvLyDlhbbku5blpKfpg6jliIblm77ooajkuK3lj6rmnInkuIDnp40gZGF0Ye-8jGRhdGFUeXBlIOaXoOaEj-S5ieOAggogIGRhdGFUeXBlOiBzdHJpbmc7CiAgLy8g5Lyg5YWl55qE5pWw5o2u5YC8CiAgdmFsdWU6IG51bWJlciB8IEFycmF5OwogIC8vIOaVsOaNruWbvuW9oueahOminOiJsuOAguW9kyBjb21wb25lbnRUeXBlIOS4uiAnc2VyaWVzJyDml7bmnInmhI_kuYnjgIIKICBjb2xvcjogc3RyaW5nOwp9Ow\'" line-highlights="\'\'" />\n<p>如何区分鼠标点击到了哪里:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdtYXJrUG9pbnQnKSB7CiAgICAvLyDngrnlh7vliLDkuoYgbWFya1BvaW50IOS4igogICAgaWYgKHBhcmFtcy5zZXJpZXNJbmRleCA9PT0gNSkgewogICAgICAvLyDngrnlh7vliLDkuoYgaW5kZXgg5Li6IDUg55qEIHNlcmllcyDnmoQgbWFya1BvaW50IOS4iuOAggogICAgfQogIH0gZWxzZSBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdzZXJpZXMnKSB7CiAgICBpZiAocGFyYW1zLnNlcmllc1R5cGUgPT09ICdncmFwaCcpIHsKICAgICAgaWYgKHBhcmFtcy5kYXRhVHlwZSA9PT0gJ2VkZ2UnKSB7CiAgICAgICAgLy8g54K55Ye75Yiw5LqGIGdyYXBoIOeahCBlZGdl77yI6L6577yJ5LiK44CCCiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8g54K55Ye75Yiw5LqGIGdyYXBoIOeahCBub2Rl77yI6IqC54K577yJ5LiK44CCCiAgICAgIH0KICAgIH0KICB9Cn0pOw\'" line-highlights="\'\'" />\n<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oZXZlbnROYW1lLCBxdWVyeSwgaGFuZGxlcik7\'" line-highlights="\'\'" />\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>string</code> 表示组件类型。格式可以是 \'mainType\' 或者 \'mainType.subType\'。例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oJ2NsaWNrJywgJ3NlcmllcycsIGZ1bmN0aW9uKCkge30pOwpjaGFydC5vbignY2xpY2snLCAnc2VyaWVzLmxpbmUnLCBmdW5jdGlvbigpIHt9KTsKY2hhcnQub24oJ2NsaWNrJywgJ2RhdGFab29tJywgZnVuY3Rpb24oKSB7fSk7CmNoYXJ0Lm9uKCdjbGljaycsICd4QXhpcy5jYXRlZ29yeScsIGZ1bmN0aW9uKCkge30pOw\'" line-highlights="\'\'" />\n<p>如果为 <code>Object</code>,可以包含以下一个或多个属性,每个属性都是可选的:</p>\n<md-code-block lang="ts" code="\'ewogICR7bWFpblR5cGV9SW5kZXg6IG51bWJlciAvLyDnu4Tku7YgaW5kZXgKICAke21haW5UeXBlfU5hbWU6IHN0cmluZyAvLyDnu4Tku7YgbmFtZQogICR7bWFpblR5cGV9SWQ6IHN0cmluZyAvLyDnu4Tku7YgaWQKICBkYXRhSW5kZXg6IG51bWJlciAvLyDmlbDmja7pobkgaW5kZXgKICBuYW1lOiBzdHJpbmcgLy8g5pWw5o2u6aG5IG5hbWUKICBkYXRhVHlwZTogc3RyaW5nIC8vIOaVsOaNrumhuSB0eXBl77yM5aaC5YWz57O75Zu-5Lit55qEICdub2RlJywgJ2VkZ2UnCiAgZWxlbWVudDogc3RyaW5nIC8vIOiHquWumuS5ieezu-WIl-S4reeahCBlbCDnmoQgbmFtZQp9\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3V1dScKICAgICAgLy8gLi4uCiAgICB9CiAgXQp9KTsKY2hhcnQub24oJ21vdXNlb3ZlcicsIHsgc2VyaWVzTmFtZTogJ3V1dScgfSwgZnVuY3Rpb24oKSB7CiAgLy8gc2VyaWVzIG5hbWUg5Li6ICd1dXUnIOeahOezu-WIl-S4reeahOWbvuW9ouWFg-e0oOiiqyAnbW91c2VvdmVyJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyAuLi4KICAgICAgZGF0YTogWwogICAgICAgIHsgbmFtZTogJ3h4JywgdmFsdWU6IDEyMSB9LAogICAgICAgIHsgbmFtZTogJ3l5JywgdmFsdWU6IDMzIH0KICAgICAgXQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdtb3VzZW92ZXInLCB7IHNlcmllc0luZGV4OiAxLCBuYW1lOiAneHgnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHNlcmllcyBpbmRleCAxIOeahOezu-WIl-S4reeahCBuYW1lIOS4uiAneHgnIOeahOWFg-e0oOiiqyAnbW91c2VvdmVyJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2dyYXBoJywKICAgICAgbm9kZXM6IFsKICAgICAgICB7IG5hbWU6ICdhJywgdmFsdWU6IDEwIH0sCiAgICAgICAgeyBuYW1lOiAnYicsIHZhbHVlOiAyMCB9CiAgICAgIF0sCiAgICAgIGVkZ2VzOiBbeyBzb3VyY2U6IDAsIHRhcmdldDogMSB9XQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdub2RlJyB9LCBmdW5jdGlvbigpIHsKICAvLyDlhbPns7vlm77nmoToioLngrnooqvngrnlh7vml7bmraTmlrnms5Xooqvlm57osIPjgIIKfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdlZGdlJyB9LCBmdW5jdGlvbigpIHsKICAvLyDlhbPns7vlm77nmoTovrnooqvngrnlh7vml7bmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IHsKICAgIC8vIC4uLgogICAgdHlwZTogJ2N1c3RvbScsCiAgICByZW5kZXJJdGVtOiBmdW5jdGlvbihwYXJhbXMsIGFwaSkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICdncm91cCcsCiAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgIHsKICAgICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAgIG5hbWU6ICdteV9lbCcKICAgICAgICAgICAgLy8gLi4uCiAgICAgICAgICB9LAogICAgICAgICAgewogICAgICAgICAgICAvLyAuLi4KICAgICAgICAgIH0KICAgICAgICBdCiAgICAgIH07CiAgICB9LAogICAgZGF0YTogW1sxMiwgMzNdXQogIH0KfSk7CmNoYXJ0Lm9uKCdtb3VzZXVwJywgeyBlbGVtZW50OiAnbXlfZWwnIH0sIGZ1bmN0aW9uKCkgewogIC8vIG5hbWUg5Li6ICdteV9lbCcg55qE5YWD57Sg6KKrICdtb3VzZXVwJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表,显示浮层等等,如下示例代码:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJtYXMpIHsKICAkLmdldCgnZGV0YWlsP3E9JyArIHBhcmFtcy5uYW1lLCBmdW5jdGlvbihkZXRhaWwpIHsKICAgIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgICAgc2VyaWVzOiBbCiAgICAgICAgewogICAgICAgICAgbmFtZTogJ3BpZScsCiAgICAgICAgICAvLyDpgJrov4fppbzlm77ooajnjrDljZXkuKrmn7HlrZDkuK3nmoTmlbDmja7liIbluIMKICAgICAgICAgIGRhdGE6IFtkZXRhaWwuZGF0YV0KICAgICAgICB9CiAgICAgIF0KICAgIH0pOwogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6" tabindex="-1">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 <a href="https://echarts.apache.org//api.html#events">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例:</p>\n<md-code-block lang="js" code="\'Ly8g5Zu-5L6L5byA5YWz55qE6KGM5Li65Y-q5Lya6Kem5Y-RIGxlZ2VuZHNlbGVjdGNoYW5nZWQg5LqL5Lu2Cm15Q2hhcnQub24oJ2xlZ2VuZHNlbGVjdGNoYW5nZWQnLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyDojrflj5bngrnlh7vlm77kvovnmoTpgInkuK3nirbmgIEKICB2YXIgaXNTZWxlY3RlZCA9IHBhcmFtcy5zZWxlY3RlZFtwYXJhbXMubmFtZV07CiAgLy8g5Zyo5o6n5Yi25Y-w5Lit5omT5Y2wCiAgY29uc29sZS5sb2coKGlzU2VsZWN0ZWQgPyAn6YCJ5Lit5LqGJyA6ICflj5bmtojpgInkuK3kuoYnKSArICflm77kvosnICsgcGFyYW1zLm5hbWUpOwogIC8vIOaJk-WNsOaJgOacieWbvuS-i-eahOeKtuaAgQogIGNvbnNvbGUubG9nKHBhcmFtcy5zZWxlY3RlZCk7Cn0pOw\'" line-highlights="\'\'" />\n<h2 id="%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA" tabindex="-1">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如 <code>\'legendselectchanged\'</code> 事件会由组件交互的行为触发,那除了用户的交互操作,有时候也会有需要在程序里调用方法触发图表的行为,诸如显示 tooltip,选中图例。</p>\n<p>在 ECharts 通过调用 <code>myChart.dispatchAction({ type: \'\' })</code> 触发图表行为,统一管理了所有动作,也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href="https://echarts.apache.org//api.html#action">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过 <code>dispatchAction</code> 去轮流高亮饼图的每个扇形。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRpdGxlOiB7CiAgICB0ZXh0OiAn6aW85Zu-56iL5bqP6LCD55So6auY5Lqu56S65L6LJywKICAgIGxlZnQ6ICdjZW50ZXInCiAgfSwKICB0b29sdGlwOiB7CiAgICB0cmlnZ2VyOiAnaXRlbScsCiAgICBmb3JtYXR0ZXI6ICd7YX0gPGJyLz57Yn0gOiB7Y30gKHtkfSUpJwogIH0sCiAgbGVnZW5kOiB7CiAgICBvcmllbnQ6ICd2ZXJ0aWNhbCcsCiAgICBsZWZ0OiAnbGVmdCcsCiAgICBkYXRhOiBbJ-ebtOaOpeiuv-mXricsICfpgq7ku7bokKXplIAnLCAn6IGU55uf5bm_5ZGKJywgJ-inhumikeW5v-WRiicsICfmkJzntKLlvJXmk44nXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICforr_pl67mnaXmupAnLAogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiAnNTUlJywKICAgICAgY2VudGVyOiBbJzUwJScsICc2MCUnXSwKICAgICAgZGF0YTogWwogICAgICAgIHsgdmFsdWU6IDMzNSwgbmFtZTogJ-ebtOaOpeiuv-mXricgfSwKICAgICAgICB7IHZhbHVlOiAzMTAsIG5hbWU6ICfpgq7ku7bokKXplIAnIH0sCiAgICAgICAgeyB2YWx1ZTogMjM0LCBuYW1lOiAn6IGU55uf5bm_5ZGKJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ-inhumikeW5v-WRiicgfSwKICAgICAgICB7IHZhbHVlOiAxNTQ4LCBuYW1lOiAn5pCc57Si5byV5pOOJyB9CiAgICAgIF0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgICBzaGFkb3dCbHVyOiAxMCwKICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICBzaGFkb3dDb2xvcjogJ3JnYmEoMCwgMCwgMCwgMC41KScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07CgpsZXQgY3VycmVudEluZGV4ID0gLTE7CgpzZXRJbnRlcnZhbChmdW5jdGlvbigpIHsKICB2YXIgZGF0YUxlbiA9IG9wdGlvbi5zZXJpZXNbMF0uZGF0YS5sZW5ndGg7CiAgLy8g5Y-W5raI5LmL5YmN6auY5Lqu55qE5Zu-5b2iCiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnZG93bnBsYXknLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwogIGN1cnJlbnRJbmRleCA9IChjdXJyZW50SW5kZXggKyAxKSAlIGRhdGFMZW47CiAgLy8g6auY5Lqu5b2T5YmN5Zu-5b2iCiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnaGlnaGxpZ2h0JywKICAgIHNlcmllc0luZGV4OiAwLAogICAgZGF0YUluZGV4OiBjdXJyZW50SW5kZXgKICB9KTsKICAvLyDmmL7npLogdG9vbHRpcAogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwp9LCAxMDAwKTs\'" v-bind="{}" />\n<h2 id="%E7%9B%91%E5%90%AC%E2%80%9C%E7%A9%BA%E7%99%BD%E5%A4%84%E2%80%9D%E7%9A%84%E4%BA%8B%E4%BB%B6" tabindex="-1">监听“空白处”的事件</h2>\n<p>有时候,开发者需要监听画布的“空白处”所触发的事件。比如,当需要在用户点击“空白处”的时候重置图表时。</p>\n<p>在讨论这个功能之前,我们需要先明确两种事件。zrender 事件和 echarts 事件。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8g6K-l55uR5ZCs5Zmo5q2j5Zyo55uR5ZCs5LiA5LiqYHpyZW5kZXIg5LqL5Lu2YOOAggp9KTsKbXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihldmVudCkgewogIC8vIOivpeebkeWQrOWZqOato-WcqOebkeWQrOS4gOS4qmBlY2hhcnRzIOS6i-S7tmDjgIIKfSk7\'" line-highlights="\'\'" />\n<p>zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发,而后者是只有当鼠标在图形元素上时才能被触发。事实上,echarts 事件是在 zrender 事件的基础上实现的,也就是说,当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件给开发者。</p>\n<p>有了 zrender 事件,我们就可以实现监听空白处的事件,具体如下:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8g5rKh5pyJIHRhcmdldCDmhI_lkbPnnYDpvKDmoIcv5oyH6ZKI5LiN5Zyo5Lu75L2V5LiA5Liq5Zu-5b2i5YWD57Sg5LiK77yM5a6D5piv5LuO4oCc56m655m95aSE4oCd6Kem5Y-R55qE44CCCiAgaWYgKCFldmVudC50YXJnZXQpIHsKICAgIC8vIOeCueWHu-WcqOS6huepuueZveWkhO-8jOWBmuS6m-S7gOS5iOOAggogIH0KfSk7\'" line-highlights="\'\'" />\n',postPath:"zh/concepts/event"}],fetch:{},error:t,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:I},{title:"在项目中引入 ECharts",dir:C},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:a},{title:"寻求帮助",dir:o},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"ECharts 5 升级指南",dir:A},{title:5.2,dir:h}]}]},{title:"概念篇",dir:s,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:i},{title:"系列",dir:p,draft:i},{title:"样式",dir:u},{title:"数据集",dir:B},{title:"数据转换",dir:Z},{title:"坐标系",dir:W,draft:i},{title:"坐标轴",dir:y},{title:"视觉映射",dir:g},{title:"图例",dir:G},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:k,draft:i},{title:"阶梯瀑布图",dir:w},{title:"视觉映射的柱状图",dir:g,draft:i}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:R},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:f}]}]},{title:N,dir:e,draft:i},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:x}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:N,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:gi}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:I},{title:"Import ECharts",dir:C},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:a},{title:"Get Help",dir:o},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:r},{title:"ECharts 5 Upgrade Guide",dir:A},{title:5.2,dir:h}]}]},{title:"Concepts",dir:s,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:i},{title:"Series",dir:p,draft:i},{title:"Style",dir:u},{title:"Dataset",dir:B},{title:"Data Transform",dir:Z},{title:"Coordinate",dir:W,draft:i},{title:"Axis",dir:y},{title:"Visual Mapping",dir:g},{title:"Legend",dir:G},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:L,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:k,draft:i},{title:"Waterfall",dir:w}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:R},{title:"Ring Style",dir:E},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:f}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:x}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:gi}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/event",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:t}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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></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/concepts/event.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/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,g,t,l,d,I,C,n,a,o,c,r,A,h,s,b,m,p,u,B,Z,W,y,G,v,L,K,X,Y,O,k,w,J,S,H,V,j,F,R,E,D,z,f,N,T,U,q,M,Q,x,P,_,$,ii,ei,gi){return{layout:"default",data:[{html:'<h1 id="%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA" tabindex="-1">事件与行为</h1>\n<p>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。</p>\n<p>ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyDmjqfliLblj7DmiZPljbDmlbDmja7nmoTlkI3np7AKICBjb25zb2xlLmxvZyhwYXJhbXMubmFtZSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>在 ECharts 中事件分为两种类型,一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'legendselectchanged\'</a> 事件(这里需要注意切换图例开关是不会触发 <code>\'legendselected\'</code> 事件的),数据区域缩放时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'datazoom\'</a> 事件等等。</p>\n<h2 id="%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86" tabindex="-1">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型,包括 <code>\'click\'</code>、 <code>\'dblclick\'</code>、 <code>\'mousedown\'</code>、 <code>\'mousemove\'</code>、 <code>\'mouseup\'</code>、 <code>\'mouseover\'</code>、 <code>\'mouseout\'</code>、 <code>\'globalout\'</code>、 <code>\'contextmenu\'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<md-live lang="js" code="\'Ly8g5Z-65LqO5YeG5aSH5aW955qEZG9t77yM5Yid5aeL5YyWRUNoYXJ0c-WunuS-iwovLyB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCi8vIOaMh-WumuWbvuihqOeahOmFjee9rumhueWSjOaVsOaNrgp2YXIgb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgfQogIF0KfTsKLy8g5L2_55So5Yia5oyH5a6a55qE6YWN572u6aG55ZKM5pWw5o2u5pi-56S65Zu-6KGo44CCCm15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbik7Ci8vIOWkhOeQhueCueWHu-S6i-S7tuW5tuS4lOi3s-i9rOWIsOebuOW6lOeahOeZvuW6puaQnOe0oumhtemdogpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKHBhcmFtcykgewogIHdpbmRvdy5vcGVuKCdodHRwczovL3d3dy5iYWlkdS5jb20vcz93ZD0nICsgZW5jb2RlVVJJQ29tcG9uZW50KHBhcmFtcy5uYW1lKSk7Cn0pOw\'" v-bind="{}" />\n<p>所有的鼠标事件包含参数 <code>params</code>,这是一个包含点击图形的数据信息的对象,如下格式:</p>\n<md-code-block lang="ts" code="\'dHlwZSBFdmVudFBhcmFtcyA9IHsKICAvLyDlvZPliY3ngrnlh7vnmoTlm77lvaLlhYPntKDmiYDlsZ7nmoTnu4Tku7blkI3np7DvvIwKICAvLyDlhbblgLzlpoIgJ3NlcmllcyfjgIEnbWFya0xpbmUn44CBJ21hcmtQb2ludCfjgIEndGltZUxpbmUnIOetieOAggogIGNvbXBvbmVudFR5cGU6IHN0cmluZzsKICAvLyDns7vliJfnsbvlnovjgILlgLzlj6_og73kuLrvvJonbGluZSfjgIEnYmFyJ-OAgSdwaWUnIOetieOAguW9kyBjb21wb25lbnRUeXBlIOS4uiAnc2VyaWVzJyDml7bmnInmhI_kuYnjgIIKICBzZXJpZXNUeXBlOiBzdHJpbmc7CiAgLy8g57O75YiX5Zyo5Lyg5YWl55qEIG9wdGlvbi5zZXJpZXMg5Lit55qEIGluZGV444CC5b2TIGNvbXBvbmVudFR5cGUg5Li6ICdzZXJpZXMnIOaXtuacieaEj-S5ieOAggogIHNlcmllc0luZGV4OiBudW1iZXI7CiAgLy8g57O75YiX5ZCN56ew44CC5b2TIGNvbXBvbmVudFR5cGUg5Li6ICdzZXJpZXMnIOaXtuacieaEj-S5ieOAggogIHNlcmllc05hbWU6IHN0cmluZzsKICAvLyDmlbDmja7lkI3vvIznsbvnm67lkI0KICBuYW1lOiBzdHJpbmc7CiAgLy8g5pWw5o2u5Zyo5Lyg5YWl55qEIGRhdGEg5pWw57uE5Lit55qEIGluZGV4CiAgZGF0YUluZGV4OiBudW1iZXI7CiAgLy8g5Lyg5YWl55qE5Y6f5aeL5pWw5o2u6aG5CiAgZGF0YTogT2JqZWN0OwogIC8vIHNhbmtleeOAgWdyYXBoIOetieWbvuihqOWQjOaXtuWQq-aciSBub2RlRGF0YSDlkowgZWRnZURhdGEg5Lik56eNIGRhdGHvvIwKICAvLyBkYXRhVHlwZSDnmoTlgLzkvJrmmK8gJ25vZGUnIOaIluiAhSAnZWRnZSfvvIzooajnpLrlvZPliY3ngrnlh7vlnKggbm9kZSDov5jmmK8gZWRnZSDkuIrjgIIKICAvLyDlhbbku5blpKfpg6jliIblm77ooajkuK3lj6rmnInkuIDnp40gZGF0Ye-8jGRhdGFUeXBlIOaXoOaEj-S5ieOAggogIGRhdGFUeXBlOiBzdHJpbmc7CiAgLy8g5Lyg5YWl55qE5pWw5o2u5YC8CiAgdmFsdWU6IG51bWJlciB8IEFycmF5OwogIC8vIOaVsOaNruWbvuW9oueahOminOiJsuOAguW9kyBjb21wb25lbnRUeXBlIOS4uiAnc2VyaWVzJyDml7bmnInmhI_kuYnjgIIKICBjb2xvcjogc3RyaW5nOwp9Ow\'" line-highlights="\'\'" />\n<p>如何区分鼠标点击到了哪里:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdtYXJrUG9pbnQnKSB7CiAgICAvLyDngrnlh7vliLDkuoYgbWFya1BvaW50IOS4igogICAgaWYgKHBhcmFtcy5zZXJpZXNJbmRleCA9PT0gNSkgewogICAgICAvLyDngrnlh7vliLDkuoYgaW5kZXgg5Li6IDUg55qEIHNlcmllcyDnmoQgbWFya1BvaW50IOS4iuOAggogICAgfQogIH0gZWxzZSBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdzZXJpZXMnKSB7CiAgICBpZiAocGFyYW1zLnNlcmllc1R5cGUgPT09ICdncmFwaCcpIHsKICAgICAgaWYgKHBhcmFtcy5kYXRhVHlwZSA9PT0gJ2VkZ2UnKSB7CiAgICAgICAgLy8g54K55Ye75Yiw5LqGIGdyYXBoIOeahCBlZGdl77yI6L6577yJ5LiK44CCCiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8g54K55Ye75Yiw5LqGIGdyYXBoIOeahCBub2Rl77yI6IqC54K577yJ5LiK44CCCiAgICAgIH0KICAgIH0KICB9Cn0pOw\'" line-highlights="\'\'" />\n<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oZXZlbnROYW1lLCBxdWVyeSwgaGFuZGxlcik7\'" line-highlights="\'\'" />\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>string</code> 表示组件类型。格式可以是 \'mainType\' 或者 \'mainType.subType\'。例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oJ2NsaWNrJywgJ3NlcmllcycsIGZ1bmN0aW9uKCkge30pOwpjaGFydC5vbignY2xpY2snLCAnc2VyaWVzLmxpbmUnLCBmdW5jdGlvbigpIHt9KTsKY2hhcnQub24oJ2NsaWNrJywgJ2RhdGFab29tJywgZnVuY3Rpb24oKSB7fSk7CmNoYXJ0Lm9uKCdjbGljaycsICd4QXhpcy5jYXRlZ29yeScsIGZ1bmN0aW9uKCkge30pOw\'" line-highlights="\'\'" />\n<p>如果为 <code>Object</code>,可以包含以下一个或多个属性,每个属性都是可选的:</p>\n<md-code-block lang="ts" code="\'ewogICR7bWFpblR5cGV9SW5kZXg6IG51bWJlciAvLyDnu4Tku7YgaW5kZXgKICAke21haW5UeXBlfU5hbWU6IHN0cmluZyAvLyDnu4Tku7YgbmFtZQogICR7bWFpblR5cGV9SWQ6IHN0cmluZyAvLyDnu4Tku7YgaWQKICBkYXRhSW5kZXg6IG51bWJlciAvLyDmlbDmja7pobkgaW5kZXgKICBuYW1lOiBzdHJpbmcgLy8g5pWw5o2u6aG5IG5hbWUKICBkYXRhVHlwZTogc3RyaW5nIC8vIOaVsOaNrumhuSB0eXBl77yM5aaC5YWz57O75Zu-5Lit55qEICdub2RlJywgJ2VkZ2UnCiAgZWxlbWVudDogc3RyaW5nIC8vIOiHquWumuS5ieezu-WIl-S4reeahCBlbCDnmoQgbmFtZQp9\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3V1dScKICAgICAgLy8gLi4uCiAgICB9CiAgXQp9KTsKY2hhcnQub24oJ21vdXNlb3ZlcicsIHsgc2VyaWVzTmFtZTogJ3V1dScgfSwgZnVuY3Rpb24oKSB7CiAgLy8gc2VyaWVzIG5hbWUg5Li6ICd1dXUnIOeahOezu-WIl-S4reeahOWbvuW9ouWFg-e0oOiiqyAnbW91c2VvdmVyJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyAuLi4KICAgICAgZGF0YTogWwogICAgICAgIHsgbmFtZTogJ3h4JywgdmFsdWU6IDEyMSB9LAogICAgICAgIHsgbmFtZTogJ3l5JywgdmFsdWU6IDMzIH0KICAgICAgXQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdtb3VzZW92ZXInLCB7IHNlcmllc0luZGV4OiAxLCBuYW1lOiAneHgnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHNlcmllcyBpbmRleCAxIOeahOezu-WIl-S4reeahCBuYW1lIOS4uiAneHgnIOeahOWFg-e0oOiiqyAnbW91c2VvdmVyJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2dyYXBoJywKICAgICAgbm9kZXM6IFsKICAgICAgICB7IG5hbWU6ICdhJywgdmFsdWU6IDEwIH0sCiAgICAgICAgeyBuYW1lOiAnYicsIHZhbHVlOiAyMCB9CiAgICAgIF0sCiAgICAgIGVkZ2VzOiBbeyBzb3VyY2U6IDAsIHRhcmdldDogMSB9XQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdub2RlJyB9LCBmdW5jdGlvbigpIHsKICAvLyDlhbPns7vlm77nmoToioLngrnooqvngrnlh7vml7bmraTmlrnms5Xooqvlm57osIPjgIIKfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdlZGdlJyB9LCBmdW5jdGlvbigpIHsKICAvLyDlhbPns7vlm77nmoTovrnooqvngrnlh7vml7bmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IHsKICAgIC8vIC4uLgogICAgdHlwZTogJ2N1c3RvbScsCiAgICByZW5kZXJJdGVtOiBmdW5jdGlvbihwYXJhbXMsIGFwaSkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICdncm91cCcsCiAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgIHsKICAgICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAgIG5hbWU6ICdteV9lbCcKICAgICAgICAgICAgLy8gLi4uCiAgICAgICAgICB9LAogICAgICAgICAgewogICAgICAgICAgICAvLyAuLi4KICAgICAgICAgIH0KICAgICAgICBdCiAgICAgIH07CiAgICB9LAogICAgZGF0YTogW1sxMiwgMzNdXQogIH0KfSk7CmNoYXJ0Lm9uKCdtb3VzZXVwJywgeyBlbGVtZW50OiAnbXlfZWwnIH0sIGZ1bmN0aW9uKCkgewogIC8vIG5hbWUg5Li6ICdteV9lbCcg55qE5YWD57Sg6KKrICdtb3VzZXVwJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表,显示浮层等等,如下示例代码:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJtYXMpIHsKICAkLmdldCgnZGV0YWlsP3E9JyArIHBhcmFtcy5uYW1lLCBmdW5jdGlvbihkZXRhaWwpIHsKICAgIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgICAgc2VyaWVzOiBbCiAgICAgICAgewogICAgICAgICAgbmFtZTogJ3BpZScsCiAgICAgICAgICAvLyDpgJrov4fppbzlm77ooajnjrDljZXkuKrmn7HlrZDkuK3nmoTmlbDmja7liIbluIMKICAgICAgICAgIGRhdGE6IFtkZXRhaWwuZGF0YV0KICAgICAgICB9CiAgICAgIF0KICAgIH0pOwogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6" tabindex="-1">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 <a href="https://echarts.apache.org//api.html#events">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例:</p>\n<md-code-block lang="js" code="\'Ly8g5Zu-5L6L5byA5YWz55qE6KGM5Li65Y-q5Lya6Kem5Y-RIGxlZ2VuZHNlbGVjdGNoYW5nZWQg5LqL5Lu2Cm15Q2hhcnQub24oJ2xlZ2VuZHNlbGVjdGNoYW5nZWQnLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyDojrflj5bngrnlh7vlm77kvovnmoTpgInkuK3nirbmgIEKICB2YXIgaXNTZWxlY3RlZCA9IHBhcmFtcy5zZWxlY3RlZFtwYXJhbXMubmFtZV07CiAgLy8g5Zyo5o6n5Yi25Y-w5Lit5omT5Y2wCiAgY29uc29sZS5sb2coKGlzU2VsZWN0ZWQgPyAn6YCJ5Lit5LqGJyA6ICflj5bmtojpgInkuK3kuoYnKSArICflm77kvosnICsgcGFyYW1zLm5hbWUpOwogIC8vIOaJk-WNsOaJgOacieWbvuS-i-eahOeKtuaAgQogIGNvbnNvbGUubG9nKHBhcmFtcy5zZWxlY3RlZCk7Cn0pOw\'" line-highlights="\'\'" />\n<h2 id="%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA" tabindex="-1">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如 <code>\'legendselectchanged\'</code> 事件会由组件交互的行为触发,那除了用户的交互操作,有时候也会有需要在程序里调用方法触发图表的行为,诸如显示 tooltip,选中图例。</p>\n<p>在 ECharts 通过调用 <code>myChart.dispatchAction({ type: \'\' })</code> 触发图表行为,统一管理了所有动作,也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href="https://echarts.apache.org//api.html#action">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过 <code>dispatchAction</code> 去轮流高亮饼图的每个扇形。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRpdGxlOiB7CiAgICB0ZXh0OiAn6aW85Zu-56iL5bqP6LCD55So6auY5Lqu56S65L6LJywKICAgIGxlZnQ6ICdjZW50ZXInCiAgfSwKICB0b29sdGlwOiB7CiAgICB0cmlnZ2VyOiAnaXRlbScsCiAgICBmb3JtYXR0ZXI6ICd7YX0gPGJyLz57Yn0gOiB7Y30gKHtkfSUpJwogIH0sCiAgbGVnZW5kOiB7CiAgICBvcmllbnQ6ICd2ZXJ0aWNhbCcsCiAgICBsZWZ0OiAnbGVmdCcsCiAgICBkYXRhOiBbJ-ebtOaOpeiuv-mXricsICfpgq7ku7bokKXplIAnLCAn6IGU55uf5bm_5ZGKJywgJ-inhumikeW5v-WRiicsICfmkJzntKLlvJXmk44nXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICforr_pl67mnaXmupAnLAogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiAnNTUlJywKICAgICAgY2VudGVyOiBbJzUwJScsICc2MCUnXSwKICAgICAgZGF0YTogWwogICAgICAgIHsgdmFsdWU6IDMzNSwgbmFtZTogJ-ebtOaOpeiuv-mXricgfSwKICAgICAgICB7IHZhbHVlOiAzMTAsIG5hbWU6ICfpgq7ku7bokKXplIAnIH0sCiAgICAgICAgeyB2YWx1ZTogMjM0LCBuYW1lOiAn6IGU55uf5bm_5ZGKJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ-inhumikeW5v-WRiicgfSwKICAgICAgICB7IHZhbHVlOiAxNTQ4LCBuYW1lOiAn5pCc57Si5byV5pOOJyB9CiAgICAgIF0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgICBzaGFkb3dCbHVyOiAxMCwKICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICBzaGFkb3dDb2xvcjogJ3JnYmEoMCwgMCwgMCwgMC41KScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07CgpsZXQgY3VycmVudEluZGV4ID0gLTE7CgpzZXRJbnRlcnZhbChmdW5jdGlvbigpIHsKICB2YXIgZGF0YUxlbiA9IG9wdGlvbi5zZXJpZXNbMF0uZGF0YS5sZW5ndGg7CiAgLy8g5Y-W5raI5LmL5YmN6auY5Lqu55qE5Zu-5b2iCiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnZG93bnBsYXknLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwogIGN1cnJlbnRJbmRleCA9IChjdXJyZW50SW5kZXggKyAxKSAlIGRhdGFMZW47CiAgLy8g6auY5Lqu5b2T5YmN5Zu-5b2iCiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnaGlnaGxpZ2h0JywKICAgIHNlcmllc0luZGV4OiAwLAogICAgZGF0YUluZGV4OiBjdXJyZW50SW5kZXgKICB9KTsKICAvLyDmmL7npLogdG9vbHRpcAogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwp9LCAxMDAwKTs\'" v-bind="{}" />\n<h2 id="%E7%9B%91%E5%90%AC%E2%80%9C%E7%A9%BA%E7%99%BD%E5%A4%84%E2%80%9D%E7%9A%84%E4%BA%8B%E4%BB%B6" tabindex="-1">监听“空白处”的事件</h2>\n<p>有时候,开发者需要监听画布的“空白处”所触发的事件。比如,当需要在用户点击“空白处”的时候重置图表时。</p>\n<p>在讨论这个功能之前,我们需要先明确两种事件。zrender 事件和 echarts 事件。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8g6K-l55uR5ZCs5Zmo5q2j5Zyo55uR5ZCs5LiA5LiqYHpyZW5kZXIg5LqL5Lu2YOOAggp9KTsKbXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihldmVudCkgewogIC8vIOivpeebkeWQrOWZqOato-WcqOebkeWQrOS4gOS4qmBlY2hhcnRzIOS6i-S7tmDjgIIKfSk7\'" line-highlights="\'\'" />\n<p>zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发,而后者是只有当鼠标在图形元素上时才能被触发。事实上,echarts 事件是在 zrender 事件的基础上实现的,也就是说,当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件给开发者。</p>\n<p>有了 zrender 事件,我们就可以实现监听空白处的事件,具体如下:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8g5rKh5pyJIHRhcmdldCDmhI_lkbPnnYDpvKDmoIcv5oyH6ZKI5LiN5Zyo5Lu75L2V5LiA5Liq5Zu-5b2i5YWD57Sg5LiK77yM5a6D5piv5LuO4oCc56m655m95aSE4oCd6Kem5Y-R55qE44CCCiAgaWYgKCFldmVudC50YXJnZXQpIHsKICAgIC8vIOeCueWHu-WcqOS6huepuueZveWkhO-8jOWBmuS6m-S7gOS5iOOAggogIH0KfSk7\'" line-highlights="\'\'" />\n',postPath:"zh/concepts/event"}],fetch:{},error:t,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:I},{title:"在项目中引入 ECharts",dir:C},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:a},{title:"寻求帮助",dir:o},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"ECharts 5 升级指南",dir:A},{title:5.2,dir:h}]}]},{title:"概念篇",dir:s,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:i},{title:"系列",dir:p,draft:i},{title:"样式",dir:u},{title:"数据集",dir:B},{title:"数据转换",dir:Z},{title:"坐标系",dir:W,draft:i},{title:"坐标轴",dir:y},{title:"视觉映射",dir:g},{title:"图例",dir:G},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:k,draft:i},{title:"阶梯瀑布图",dir:w},{title:"视觉映射的柱状图",dir:g,draft:i}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:R},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:f}]}]},{title:N,dir:e,draft:i},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:x}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:N,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:gi}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:I},{title:"Import ECharts",dir:C},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:a},{title:"Get Help",dir:o},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:r},{title:"ECharts 5 Upgrade Guide",dir:A},{title:5.2,dir:h}]}]},{title:"Concepts",dir:s,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:i},{title:"Series",dir:p,draft:i},{title:"Style",dir:u},{title:"Dataset",dir:B},{title:"Data Transform",dir:Z},{title:"Coordinate",dir:W,draft:i},{title:"Axis",dir:y},{title:"Visual Mapping",dir:g},{title:"Legend",dir:G},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:L,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:k,draft:i},{title:"Waterfall",dir:w}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:R},{title:"Ring Style",dir:E},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:f}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:x}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:gi}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/event",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:t}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/concepts/legend/index.html b/handbook/zh/concepts/legend/index.html
index faf4a19..125c0fb 100644
--- a/handbook/zh/concepts/legend/index.html
+++ b/handbook/zh/concepts/legend/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9B%BE%E4%BE%8B" tabindex="-1">图例</h1> <p>图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列,通过点击对应数据列的标记,可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。</p> <h2 id="%E5%B8%83%E5%B1%80" tabindex="-1">布局</h2> <p>图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致,可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9B%BE%E4%BE%8B" tabindex="-1">图例</h1> <p>图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列,通过点击对应数据列的标记,可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。</p> <h2 id="%E5%B8%83%E5%B1%80" tabindex="-1">布局</h2> <p>图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致,可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
legend: {
// Try 'horizontal'
orient: 'vertical',
@@ -118,7 +118,8 @@
<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></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>当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。</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/concepts/legend.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/yufeng04" target="_blank" class="post-contributor"><img alt="yufeng04" src="https://avatars.githubusercontent.com/yufeng04?size=60"> <span>yufeng04</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,l,g,a,n,o,C,I,s,A,c,h,u,L,p,b,B,w,m,v,y,f,Z,J,S,E,W,G,D,k,H,M,V,Y,x,F,K,N,j,T,O,X,P,R,z,Q,U,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9B%BE%E4%BE%8B" tabindex="-1">图例</h1>\n<p>图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列,通过点击对应数据列的标记,可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。</p>\n<h2 id="%E5%B8%83%E5%B1%80" tabindex="-1">布局</h2>\n<p>图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致,可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgLy8gVHJ5ICdob3Jpem9udGFsJwogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgcmlnaHQ6IDEwLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDE1JywgJzIwMTYnLCAnMjAxNyddLAogICAgICBbJ01hdGNoYSBMYXR0ZScsIDQzLjMsIDg1LjgsIDkzLjddLAogICAgICBbJ01pbGsgVGVhJywgODMuMSwgNzMuNCwgNTUuMV0sCiAgICAgIFsnQ2hlZXNlIENvY29hJywgODYuNCwgNjUuMiwgODIuNV0sCiAgICAgIFsnV2FsbnV0IEJyb3duaWUnLCA3Mi40LCA1My45LCAzOS4xXQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>对于图例较多时,可以使用可滚动翻页的图例</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgdHlwZTogJ3Njcm9sbCcsCiAgICBvcmllbnQ6ICd2ZXJ0aWNhbCcsCiAgICByaWdodDogMTAsCiAgICB0b3A6IDIwLAogICAgYm90dG9tOiAyMCwKICAgIGRhdGE6IFsn5Zu-5L6L5LiAJywgJ-WbvuS-i-S6jCcsICflm77kvovkuIknIC8qIC4uLiAqLywgLCAn5Zu-5L6LbiddCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E6%A0%B7%E5%BC%8F" tabindex="-1">样式</h2>\n<p>在深色系背景下、为了方便阅读,建议给图例加上半透明的浅色背景层,文字颜色设置为浅色。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWyflm77kvovkuIAnLCAn5Zu-5L6L5LqMJywgJ-WbvuS-i-S4iSddLAogICAgYmFja2dyb3VuZENvbG9yOiAnI2NjYycsCiAgICB0ZXh0U3R5bGU6IHsKICAgICAgY29sb3I6ICcjY2NjJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p>图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。</p>\n<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWyflm77kvovkuIAnLCAn5Zu-5L6L5LqMJywgJ-WbvuS-i-S4iSddLAogICAgaWNvbjogJ3JlY3QnCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E4%BA%A4%E4%BA%92" tabindex="-1">交互</h2>\n<p>根据场景需要,图例可支持交互操作,点击控制显示或隐藏对应的数据列;</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWyflm77kvovkuIAnLCAn5Zu-5L6L5LqMJywgJ-WbvuS-i-S4iSddLAogICAgc2VsZWN0ZWQ6IHsKICAgICAg5Zu-5L6L5LiAOiB0cnVlLAogICAgICDlm77kvovkuow6IHRydWUsCiAgICAgIOWbvuS-i-S4iTogZmFsc2UKICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">图例注意事项</h2>\n<p>图例要要注意视情况使用,有些双轴图包含了多种图表类型,不同类型的图例样式要有所区分。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWwogICAgICB7CiAgICAgICAgbmFtZTogJ-WbvuS-i-S4gCcsCiAgICAgICAgaWNvbjogJ3JlY3QnCiAgICAgIH0sCiAgICAgIHsKICAgICAgICBuYW1lOiAn5Zu-5L6L5LqMJywKICAgICAgICBpY29uOiAnY2lyY2xlJwogICAgICB9LAogICAgICB7CiAgICAgICAgbmFtZTogJ-WbvuS-i-S4iScsCiAgICAgICAgaWNvbjogJ3BpbicKICAgICAgfQogICAgXQogICAgLy8gLi4uCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-WbvuS-i-S4gCcKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICBuYW1lOiAn5Zu-5L6L5LqMJwogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICflm77kvovkuIknCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p>当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。</p>\n',postPath:"zh/concepts/legend"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:C},{title:"版本特性",dir:I,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:A},{title:5.2,dir:c}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:L,draft:i},{title:"系列",dir:p,draft:i},{title:"样式",dir:b},{title:"数据集",dir:B},{title:"数据转换",dir:w},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:v},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:f}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:G,draft:i},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:Y},{title:"阶梯线图",dir:x}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:T}]}]},{title:O,dir:t,draft:i},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:P}]},{title:"数据处理",dir:R,children:[{title:"动态的异步数据",dir:z},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:O,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:a},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:o},{title:"Get Help",dir:C},{title:"What's New",dir:I,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:A},{title:5.2,dir:c}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:L,draft:i},{title:"Series",dir:p,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:B},{title:"Data Transform",dir:w},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:v},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:f}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:G,draft:i},{title:"Waterfall",dir:D}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:Y},{title:"Step Line",dir:x}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:K},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:P}]},{title:"Data",dir:R,children:[{title:"Dynamic Data",dir:z},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/legend",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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>当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。</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/concepts/legend.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/yufeng04" target="_blank" class="post-contributor"><img alt="yufeng04" src="https://avatars.githubusercontent.com/yufeng04?size=60"> <span>yufeng04</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,l,g,a,n,o,C,I,s,A,c,h,u,L,p,b,B,w,m,v,y,f,Z,J,S,E,W,G,D,k,H,M,V,Y,x,F,K,N,j,T,O,X,P,R,z,Q,U,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9B%BE%E4%BE%8B" tabindex="-1">图例</h1>\n<p>图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列,通过点击对应数据列的标记,可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。</p>\n<h2 id="%E5%B8%83%E5%B1%80" tabindex="-1">布局</h2>\n<p>图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致,可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgLy8gVHJ5ICdob3Jpem9udGFsJwogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgcmlnaHQ6IDEwLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDE1JywgJzIwMTYnLCAnMjAxNyddLAogICAgICBbJ01hdGNoYSBMYXR0ZScsIDQzLjMsIDg1LjgsIDkzLjddLAogICAgICBbJ01pbGsgVGVhJywgODMuMSwgNzMuNCwgNTUuMV0sCiAgICAgIFsnQ2hlZXNlIENvY29hJywgODYuNCwgNjUuMiwgODIuNV0sCiAgICAgIFsnV2FsbnV0IEJyb3duaWUnLCA3Mi40LCA1My45LCAzOS4xXQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>对于图例较多时,可以使用可滚动翻页的图例</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgdHlwZTogJ3Njcm9sbCcsCiAgICBvcmllbnQ6ICd2ZXJ0aWNhbCcsCiAgICByaWdodDogMTAsCiAgICB0b3A6IDIwLAogICAgYm90dG9tOiAyMCwKICAgIGRhdGE6IFsn5Zu-5L6L5LiAJywgJ-WbvuS-i-S6jCcsICflm77kvovkuIknIC8qIC4uLiAqLywgLCAn5Zu-5L6LbiddCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E6%A0%B7%E5%BC%8F" tabindex="-1">样式</h2>\n<p>在深色系背景下、为了方便阅读,建议给图例加上半透明的浅色背景层,文字颜色设置为浅色。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWyflm77kvovkuIAnLCAn5Zu-5L6L5LqMJywgJ-WbvuS-i-S4iSddLAogICAgYmFja2dyb3VuZENvbG9yOiAnI2NjYycsCiAgICB0ZXh0U3R5bGU6IHsKICAgICAgY29sb3I6ICcjY2NjJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p>图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。</p>\n<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWyflm77kvovkuIAnLCAn5Zu-5L6L5LqMJywgJ-WbvuS-i-S4iSddLAogICAgaWNvbjogJ3JlY3QnCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E4%BA%A4%E4%BA%92" tabindex="-1">交互</h2>\n<p>根据场景需要,图例可支持交互操作,点击控制显示或隐藏对应的数据列;</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWyflm77kvovkuIAnLCAn5Zu-5L6L5LqMJywgJ-WbvuS-i-S4iSddLAogICAgc2VsZWN0ZWQ6IHsKICAgICAg5Zu-5L6L5LiAOiB0cnVlLAogICAgICDlm77kvovkuow6IHRydWUsCiAgICAgIOWbvuS-i-S4iTogZmFsc2UKICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">图例注意事项</h2>\n<p>图例要要注意视情况使用,有些双轴图包含了多种图表类型,不同类型的图例样式要有所区分。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWwogICAgICB7CiAgICAgICAgbmFtZTogJ-WbvuS-i-S4gCcsCiAgICAgICAgaWNvbjogJ3JlY3QnCiAgICAgIH0sCiAgICAgIHsKICAgICAgICBuYW1lOiAn5Zu-5L6L5LqMJywKICAgICAgICBpY29uOiAnY2lyY2xlJwogICAgICB9LAogICAgICB7CiAgICAgICAgbmFtZTogJ-WbvuS-i-S4iScsCiAgICAgICAgaWNvbjogJ3BpbicKICAgICAgfQogICAgXQogICAgLy8gLi4uCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-WbvuS-i-S4gCcKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICBuYW1lOiAn5Zu-5L6L5LqMJwogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICflm77kvovkuIknCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p>当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。</p>\n',postPath:"zh/concepts/legend"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:C},{title:"版本特性",dir:I,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:A},{title:5.2,dir:c}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:L,draft:i},{title:"系列",dir:p,draft:i},{title:"样式",dir:b},{title:"数据集",dir:B},{title:"数据转换",dir:w},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:v},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:f}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:G,draft:i},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:Y},{title:"阶梯线图",dir:x}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:T}]}]},{title:O,dir:t,draft:i},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:P}]},{title:"数据处理",dir:R,children:[{title:"动态的异步数据",dir:z},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:O,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:a},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:o},{title:"Get Help",dir:C},{title:"What's New",dir:I,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:A},{title:5.2,dir:c}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:L,draft:i},{title:"Series",dir:p,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:B},{title:"Data Transform",dir:w},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:v},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:f}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:G,draft:i},{title:"Waterfall",dir:D}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:Y},{title:"Step Line",dir:x}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:K},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:P}]},{title:"Data",dir:R,children:[{title:"Dynamic Data",dir:z},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/legend",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/concepts/style/index.html b/handbook/zh/concepts/style/index.html
index 008f6ed..3403b22 100644
--- a/handbook/zh/concepts/style/index.html
+++ b/handbook/zh/concepts/style/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B" tabindex="-1">ECharts 中的样式简介</h1> <p>本文主要是大略概述,用哪些方法,可以在 Apache ECharts<sup>TM</sup> 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。</p> <blockquote><p>为了让表述更通俗易懂,我们在这里用了“样式”这种可能不很符合数据可视化思维的词</p></blockquote> <p>本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。</p> <ul><li>颜色主题(Theme)</li> <li>调色盘</li> <li>直接样式设置(itemStyle、lineStyle、areaStyle、label、...)</li> <li>视觉映射(visualMap)</li></ul> <h2 id="%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">颜色主题(Theme)</h2> <p>最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 <a href="$%7BwebsitePath%7D/examples">示例集合</a> 中,可以通过切换深色模式,直接看到采用主题的效果。</p> <p>ECharts5 除了一贯的默认主题外,还内置了<code>'dark'</code>主题。可以如下切换成深色模式:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> <span class="token string">'dark'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html">主题编辑器</a> 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:</p> <p>如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 假设主题名称是 "vintage"</span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B" tabindex="-1">ECharts 中的样式简介</h1> <p>本文主要是大略概述,用哪些方法,可以在 Apache ECharts<sup>TM</sup> 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。</p> <blockquote><p>为了让表述更通俗易懂,我们在这里用了“样式”这种可能不很符合数据可视化思维的词</p></blockquote> <p>本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。</p> <ul><li>颜色主题(Theme)</li> <li>调色盘</li> <li>直接样式设置(itemStyle、lineStyle、areaStyle、label、...)</li> <li>视觉映射(visualMap)</li></ul> <h2 id="%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">颜色主题(Theme)</h2> <p>最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 <a href="$%7BwebsitePath%7D/examples">示例集合</a> 中,可以通过切换深色模式,直接看到采用主题的效果。</p> <p>ECharts5 除了一贯的默认主题外,还内置了<code>'dark'</code>主题。可以如下切换成深色模式:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> <span class="token string">'dark'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html">主题编辑器</a> 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:</p> <p>如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 假设主题名称是 "vintage"</span>
$<span class="token punctuation">.</span><span class="token function">getJSON</span><span class="token punctuation">(</span><span class="token string">'xxx/xxx/vintage.json'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">themeJSON</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
echarts<span class="token punctuation">.</span><span class="token function">registerTheme</span><span class="token punctuation">(</span><span class="token string">'vintage'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>themeJSON<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> <span class="token string">'vintage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
@@ -450,7 +450,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>这种写法 <strong>仍然被兼容</strong>,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 <code>normal</code> 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。</p> <h2 id="%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F" tabindex="-1">通过 visualMap 组件设定样式</h2> <p><a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则,详见 <a href="zh/concepts/visual-map">数据的视觉映射</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/concepts/style.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,A,i,t,e,l,d,a,s,r,o,c,n,h,w,y,M,N,p,m,b,B,L,D,z,O,T,E,Y,K,S,G,Z,J,j,W,u,x,k,F,X,v,H,f,U,R,V,Q,P,q,_,$,gg,Ig,Cg){return{layout:"default",data:[{html:'<h1 id="echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B" tabindex="-1">ECharts 中的样式简介</h1>\n<p>本文主要是大略概述,用哪些方法,可以在 Apache ECharts<sup>TM</sup> 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>为了让表述更通俗易懂,我们在这里用了“样式”这种可能不很符合数据可视化思维的词</p>\n</blockquote>\n<p>本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题(Theme)</li>\n<li>调色盘</li>\n<li>直接样式设置(itemStyle、lineStyle、areaStyle、label、...)</li>\n<li>视觉映射(visualMap)</li>\n</ul>\n<h2 id="%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">颜色主题(Theme)</h2>\n<p>最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 <a href="$%7BwebsitePath%7D/examples">示例集合</a> 中,可以通过切换深色模式,直接看到采用主题的效果。</p>\n<p>ECharts5 除了一贯的默认主题外,还内置了<code>\'dark\'</code>主题。可以如下切换成深色模式:</p>\n<md-code-block lang="js" code="\'dmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvbSwgJ2RhcmsnKTs\'" line-highlights="\'\'" />\n<p>其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html">主题编辑器</a> 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:</p>\n<p>如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:</p>\n<md-code-block lang="js" code="\'Ly8g5YGH6K6-5Li76aKY5ZCN56ew5pivICJ2aW50YWdlIgokLmdldEpTT04oJ3h4eC94eHgvdmludGFnZS5qc29uJywgZnVuY3Rpb24odGhlbWVKU09OKSB7CiAgZWNoYXJ0cy5yZWdpc3RlclRoZW1lKCd2aW50YWdlJywgSlNPTi5wYXJzZSh0aGVtZUpTT04pKTsKICB2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tLCAndmludGFnZScpOwp9KTs\'" line-highlights="\'\'" />\n<p>如果保存为 UMD 格式的 JS 文件,那么支持了自注册,直接引入 JS 文件即可:</p>\n<md-code-block lang="js" code="\'Ly8gSFRNTCDlvJXlhaUgdmludGFnZS5qcyDmlofku7blkI7vvIjlgYforr7kuLvpopjlkI3np7DmmK8gInZpbnRhZ2Ui77yJCnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sICd2aW50YWdlJyk7Ci8vIC4uLg\'" line-highlights="\'\'" />\n<h2 id="%E8%B0%83%E8%89%B2%E7%9B%98" tabindex="-1">调色盘</h2>\n<p>调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘,也可以设置系列自己专属的调色盘。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIC8vIOWFqOWxgOiwg-iJsuebmOOAggogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdLAoKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIOatpOezu-WIl-iHquW3seeahOiwg-iJsuebmOOAggogICAgICBjb2xvcjogWwogICAgICAgICcjZGQ2YjY2JywKICAgICAgICAnIzc1OWFhMCcsCiAgICAgICAgJyNlNjlkODcnLAogICAgICAgICcjOGRjMWE5JywKICAgICAgICAnI2VhN2U1MycsCiAgICAgICAgJyNlZWRkNzgnLAogICAgICAgICcjNzNhMzczJywKICAgICAgICAnIzczYjliYycsCiAgICAgICAgJyM3Mjg5YWInLAogICAgICAgICcjOTFjYThjJywKICAgICAgICAnI2Y0OWY0MicKICAgICAgXQogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICAvLyDmraTns7vliJfoh6rlt7HnmoTosIPoibLnm5jjgIIKICAgICAgY29sb3I6IFsKICAgICAgICAnIzM3QTJEQScsCiAgICAgICAgJyMzMkM1RTknLAogICAgICAgICcjNjdFMEUzJywKICAgICAgICAnIzlGRTZCOCcsCiAgICAgICAgJyNGRkRCNUMnLAogICAgICAgICcjZmY5ZjdmJywKICAgICAgICAnI2ZiNzI5MycsCiAgICAgICAgJyNFMDYyQUUnLAogICAgICAgICcjRTY5MEQxJywKICAgICAgICAnI2U3YmNmMycsCiAgICAgICAgJyM5ZDk2ZjUnLAogICAgICAgICcjODM3OEVBJywKICAgICAgICAnIzk2QkZGRicKICAgICAgXQogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h2 id="%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle%2C-linestyle%2C-areastyle%2C-label%2C-..." tabindex="-1">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href="https://echarts.apache.org/option.html#">option</a> 中,很多地方可以设置 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle">itemStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.lineStyle">lineStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.areaStyle">areaStyle</a>、<a href="https://echarts.apache.org/option.html#series-bar.label">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>\n<p>在下面例子中我们给气泡图设置了阴影,渐变色等复杂的样式,你可以修改代码中的样式看修改后的效果:</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbCiAgWwogICAgWzI4NjA0LCA3NywgMTcwOTY4NjksICdBdXN0cmFsaWEnLCAxOTkwXSwKICAgIFszMTE2MywgNzcuNCwgMjc2NjI0NDAsICdDYW5hZGEnLCAxOTkwXSwKICAgIFsxNTE2LCA2OCwgMTE1NDYwNTc3MywgJ0NoaW5hJywgMTk5MF0sCiAgICBbMTM2NzAsIDc0LjcsIDEwNTgyMDgyLCAnQ3ViYScsIDE5OTBdLAogICAgWzI4NTk5LCA3NSwgNDk4NjcwNSwgJ0ZpbmxhbmQnLCAxOTkwXSwKICAgIFsyOTQ3NiwgNzcuMSwgNTY5NDMyOTksICdGcmFuY2UnLCAxOTkwXSwKICAgIFszMTQ3NiwgNzUuNCwgNzg5NTgyMzcsICdHZXJtYW55JywgMTk5MF0sCiAgICBbMjg2NjYsIDc4LjEsIDI1NDgzMCwgJ0ljZWxhbmQnLCAxOTkwXSwKICAgIFsxNzc3LCA1Ny43LCA4NzA2MDE3NzYsICdJbmRpYScsIDE5OTBdLAogICAgWzI5NTUwLCA3OS4xLCAxMjIyNDkyODUsICdKYXBhbicsIDE5OTBdLAogICAgWzIwNzYsIDY3LjksIDIwMTk0MzU0LCAnTm9ydGggS29yZWEnLCAxOTkwXSwKICAgIFsxMjA4NywgNzIsIDQyOTcyMjU0LCAnU291dGggS29yZWEnLCAxOTkwXSwKICAgIFsyNDAyMSwgNzUuNCwgMzM5NzUzNCwgJ05ldyBaZWFsYW5kJywgMTk5MF0sCiAgICBbNDMyOTYsIDc2LjgsIDQyNDAzNzUsICdOb3J3YXknLCAxOTkwXSwKICAgIFsxMDA4OCwgNzAuOCwgMzgxOTUyNTgsICdQb2xhbmQnLCAxOTkwXSwKICAgIFsxOTM0OSwgNjkuNiwgMTQ3NTY4NTUyLCAnUnVzc2lhJywgMTk5MF0sCiAgICBbMTA2NzAsIDY3LjMsIDUzOTk0NjA1LCAnVHVya2V5JywgMTk5MF0sCiAgICBbMjY0MjQsIDc1LjcsIDU3MTEwMTE3LCAnVW5pdGVkIEtpbmdkb20nLCAxOTkwXSwKICAgIFszNzA2MiwgNzUuNCwgMjUyODQ3ODEwLCAnVW5pdGVkIFN0YXRlcycsIDE5OTBdCiAgXSwKICBbCiAgICBbNDQwNTYsIDgxLjgsIDIzOTY4OTczLCAnQXVzdHJhbGlhJywgMjAxNV0sCiAgICBbNDMyOTQsIDgxLjcsIDM1OTM5OTI3LCAnQ2FuYWRhJywgMjAxNV0sCiAgICBbMTMzMzQsIDc2LjksIDEzNzYwNDg5NDMsICdDaGluYScsIDIwMTVdLAogICAgWzIxMjkxLCA3OC41LCAxMTM4OTU2MiwgJ0N1YmEnLCAyMDE1XSwKICAgIFszODkyMywgODAuOCwgNTUwMzQ1NywgJ0ZpbmxhbmQnLCAyMDE1XSwKICAgIFszNzU5OSwgODEuOSwgNjQzOTUzNDUsICdGcmFuY2UnLCAyMDE1XSwKICAgIFs0NDA1MywgODEuMSwgODA2ODg1NDUsICdHZXJtYW55JywgMjAxNV0sCiAgICBbNDIxODIsIDgyLjgsIDMyOTQyNSwgJ0ljZWxhbmQnLCAyMDE1XSwKICAgIFs1OTAzLCA2Ni44LCAxMzExMDUwNTI3LCAnSW5kaWEnLCAyMDE1XSwKICAgIFszNjE2MiwgODMuNSwgMTI2NTczNDgxLCAnSmFwYW4nLCAyMDE1XSwKICAgIFsxMzkwLCA3MS40LCAyNTE1NTMxNywgJ05vcnRoIEtvcmVhJywgMjAxNV0sCiAgICBbMzQ2NDQsIDgwLjcsIDUwMjkzNDM5LCAnU291dGggS29yZWEnLCAyMDE1XSwKICAgIFszNDE4NiwgODAuNiwgNDUyODUyNiwgJ05ldyBaZWFsYW5kJywgMjAxNV0sCiAgICBbNjQzMDQsIDgxLjYsIDUyMTA5NjcsICdOb3J3YXknLCAyMDE1XSwKICAgIFsyNDc4NywgNzcuMywgMzg2MTE3OTQsICdQb2xhbmQnLCAyMDE1XSwKICAgIFsyMzAzOCwgNzMuMTMsIDE0MzQ1NjkxOCwgJ1J1c3NpYScsIDIwMTVdLAogICAgWzE5MzYwLCA3Ni41LCA3ODY2NTgzMCwgJ1R1cmtleScsIDIwMTVdLAogICAgWzM4MjI1LCA4MS40LCA2NDcxNTgxMCwgJ1VuaXRlZCBLaW5nZG9tJywgMjAxNV0sCiAgICBbNTMzNTQsIDc5LjEsIDMyMTc3MzYzMSwgJ1VuaXRlZCBTdGF0ZXMnLCAyMDE1XQogIF0KXTsKCm9wdGlvbiA9IHsKICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgIHR5cGU6ICdyYWRpYWwnLAogICAgeDogMC4zLAogICAgeTogMC4zLAogICAgcjogMC44LAogICAgY29sb3JTdG9wczogWwogICAgICB7CiAgICAgICAgb2Zmc2V0OiAwLAogICAgICAgIGNvbG9yOiAnI2Y3ZjhmYScKICAgICAgfSwKICAgICAgewogICAgICAgIG9mZnNldDogMSwKICAgICAgICBjb2xvcjogJyNjZGQwZDUnCiAgICAgIH0KICAgIF0KICB9LAogIGdyaWQ6IHsKICAgIGxlZnQ6IDEwLAogICAgY29udGFpbkxhYmVsOiB0cnVlLAogICAgYm90dG9tOiAxMCwKICAgIHRvcDogMTAsCiAgICByaWdodDogMzAKICB9LAogIHhBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0KICB9LAogIHlBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0sCiAgICBzY2FsZTogdHJ1ZQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICcxOTkwJywKICAgICAgZGF0YTogZGF0YVswXSwKICAgICAgdHlwZTogJ3NjYXR0ZXInLAogICAgICBzeW1ib2xTaXplOiBmdW5jdGlvbihkYXRhKSB7CiAgICAgICAgcmV0dXJuIE1hdGguc3FydChkYXRhWzJdKSAvIDVlMjsKICAgICAgfSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycsCiAgICAgICAgbGFiZWw6IHsKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IGZ1bmN0aW9uKHBhcmFtKSB7CiAgICAgICAgICAgIHJldHVybiBwYXJhbS5kYXRhWzNdOwogICAgICAgICAgfSwKICAgICAgICAgIHBvc2l0aW9uOiAndG9wJwogICAgICAgIH0KICAgICAgfSwKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgc2hhZG93Qmx1cjogMTAsCiAgICAgICAgc2hhZG93Q29sb3I6ICdyZ2JhKDEyMCwgMzYsIDUwLCAwLjUpJywKICAgICAgICBzaGFkb3dPZmZzZXRZOiA1LAogICAgICAgIGNvbG9yOiB7CiAgICAgICAgICB0eXBlOiAncmFkaWFsJywKICAgICAgICAgIHg6IDAuNCwKICAgICAgICAgIHk6IDAuMywKICAgICAgICAgIHI6IDEsCiAgICAgICAgICBjb2xvclN0b3BzOiBbCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDAsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjUxLCAxMTgsIDEyMyknCiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDEsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjA0LCA0NiwgNzIpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9LAogICAgewogICAgICBuYW1lOiAnMjAxNScsCiAgICAgIGRhdGE6IGRhdGFbMV0sCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgc3ltYm9sU2l6ZTogZnVuY3Rpb24oZGF0YSkgewogICAgICAgIHJldHVybiBNYXRoLnNxcnQoZGF0YVsyXSkgLyA1ZTI7CiAgICAgIH0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgZm9jdXM6ICdzZXJpZXMnLAogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbSkgewogICAgICAgICAgICByZXR1cm4gcGFyYW0uZGF0YVszXTsKICAgICAgICAgIH0sCiAgICAgICAgICBwb3NpdGlvbjogJ3RvcCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgyNSwgMTAwLCAxNTAsIDAuNSknLAogICAgICAgIHNoYWRvd09mZnNldFk6IDUsCiAgICAgICAgY29sb3I6IHsKICAgICAgICAgIHR5cGU6ICdyYWRpYWwnLAogICAgICAgICAgeDogMC40LAogICAgICAgICAgeTogMC4zLAogICAgICAgICAgcjogMSwKICAgICAgICAgIGNvbG9yU3RvcHM6IFsKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMCwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigxMjksIDIyNywgMjM4KScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMSwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigyNSwgMTgzLCAyMDcpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis" tabindex="-1">高亮的样式:emphasis</h2>\n<p>在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> 属性来定制。<a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphsis</a> 中的结构,和普通样式的结构相同,例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIC8vIOaZrumAmuagt-W8j-OAggogICAgaXRlbVN0eWxlOiB7CiAgICAgIC8vIOeCueeahOminOiJsuOAggogICAgICBjb2xvcjogJ3JlZCcKICAgIH0sCiAgICBsYWJlbDogewogICAgICBzaG93OiB0cnVlLAogICAgICAvLyDmoIfnrb7nmoTmloflrZfjgIIKICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIG5vcm1hbCBsYWJlbC4nCiAgICB9LAoKICAgIC8vIOmrmOS6ruagt-W8j-OAggogICAgZW1waGFzaXM6IHsKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgLy8g6auY5Lqu5pe254K555qE6aKc6Imy44CCCiAgICAgICAgY29sb3I6ICdibHVlJwogICAgICB9LAogICAgICBsYWJlbDogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgLy8g6auY5Lqu5pe25qCH562-55qE5paH5a2X44CCCiAgICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIGVtcGhhc2lzIGxhYmVsLicKICAgICAgfQogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIGl0ZW1TdHlsZTogewogICAgICAvLyDmma7pgJrmoLflvI_jgIIKICAgICAgbm9ybWFsOiB7CiAgICAgICAgLy8g54K555qE6aKc6Imy44CCCiAgICAgICAgY29sb3I6ICdyZWQnCiAgICAgIH0sCiAgICAgIC8vIOmrmOS6ruagt-W8j-OAggogICAgICBlbXBoYXNpczogewogICAgICAgIC8vIOmrmOS6ruaXtueCueeahOminOiJsuOAggogICAgICAgIGNvbG9yOiAnYmx1ZScKICAgICAgfQogICAgfSwKCiAgICBsYWJlbDogewogICAgICAvLyDmma7pgJrmoLflvI_jgIIKICAgICAgbm9ybWFsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDmoIfnrb7nmoTmloflrZfjgIIKICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgbm9ybWFsIGxhYmVsLicKICAgICAgfSwKICAgICAgLy8g6auY5Lqu5qC35byP44CCCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDpq5jkuq7ml7bmoIfnrb7nmoTmloflrZfjgIIKICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgZW1waGFzaXMgbGFiZWwuJwogICAgICB9CiAgICB9CiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>这种写法 <strong>仍然被兼容</strong>,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 <code>normal</code> 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。</p>\n<h2 id="%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F" tabindex="-1">通过 visualMap 组件设定样式</h2>\n<p><a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则,详见 <a href="zh/concepts/visual-map">数据的视觉映射</a>。</p>\n',postPath:"zh/concepts/style"}],fetch:{},error:A,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:t,children:[{title:"获取 ECharts",dir:e},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:d,draft:g},{title:"获取灵感",dir:a},{title:"寻求帮助",dir:s},{title:"版本特性",dir:r,children:[{title:"ECharts 5 特性介绍",dir:o},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:n}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:y,draft:g},{title:"系列",dir:M,draft:g},{title:"样式",dir:N},{title:"数据集",dir:p},{title:"数据转换",dir:m},{title:"坐标系",dir:b,draft:g},{title:"坐标轴",dir:B},{title:"视觉映射",dir:C},{title:"图例",dir:L},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:z,children:[{title:"常用图表类型",dir:O,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:K,draft:g},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:j},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:u}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:x},{title:"圆环图",dir:k},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:v}]}]},{title:H,dir:I,draft:g},{title:"跨平台方案",dir:f,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:R,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:H,dir:I,draft:g},{title:gg,dir:Ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Cg}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:t,children:[{title:"Download ECharts",dir:e},{title:"Import ECharts",dir:l},{title:"Resources",dir:d,draft:g},{title:"Inspiration",dir:a},{title:"Get Help",dir:s},{title:"What's New",dir:r,children:[{title:"ECharts 5 Features",dir:o},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:n}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:y,draft:g},{title:"Series",dir:M,draft:g},{title:"Style",dir:N},{title:"Dataset",dir:p},{title:"Data Transform",dir:m},{title:"Coordinate",dir:b,draft:g},{title:"Axis",dir:B},{title:"Visual Mapping",dir:C},{title:"Legend",dir:L},{title:"Event and Action",dir:D}]},{title:"How To Guides",dir:z,children:[{title:"Common Charts",dir:O,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:K,draft:g},{title:"Waterfall",dir:S}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:j},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:u}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:x},{title:"Ring Style",dir:k},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:v}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:f,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:R,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:gg,dir:Ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Cg}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/concepts/style",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:A}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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>这种写法 <strong>仍然被兼容</strong>,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 <code>normal</code> 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。</p> <h2 id="%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F" tabindex="-1">通过 visualMap 组件设定样式</h2> <p><a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则,详见 <a href="zh/concepts/visual-map">数据的视觉映射</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/concepts/style.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,A,i,t,e,l,d,a,s,r,o,c,n,h,w,y,M,N,p,m,b,B,L,D,z,O,T,E,Y,K,S,G,Z,J,j,W,u,x,k,F,X,v,H,f,U,R,V,Q,P,q,_,$,gg,Ig,Cg){return{layout:"default",data:[{html:'<h1 id="echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B" tabindex="-1">ECharts 中的样式简介</h1>\n<p>本文主要是大略概述,用哪些方法,可以在 Apache ECharts<sup>TM</sup> 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>为了让表述更通俗易懂,我们在这里用了“样式”这种可能不很符合数据可视化思维的词</p>\n</blockquote>\n<p>本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题(Theme)</li>\n<li>调色盘</li>\n<li>直接样式设置(itemStyle、lineStyle、areaStyle、label、...)</li>\n<li>视觉映射(visualMap)</li>\n</ul>\n<h2 id="%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">颜色主题(Theme)</h2>\n<p>最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 <a href="$%7BwebsitePath%7D/examples">示例集合</a> 中,可以通过切换深色模式,直接看到采用主题的效果。</p>\n<p>ECharts5 除了一贯的默认主题外,还内置了<code>\'dark\'</code>主题。可以如下切换成深色模式:</p>\n<md-code-block lang="js" code="\'dmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvbSwgJ2RhcmsnKTs\'" line-highlights="\'\'" />\n<p>其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html">主题编辑器</a> 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:</p>\n<p>如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:</p>\n<md-code-block lang="js" code="\'Ly8g5YGH6K6-5Li76aKY5ZCN56ew5pivICJ2aW50YWdlIgokLmdldEpTT04oJ3h4eC94eHgvdmludGFnZS5qc29uJywgZnVuY3Rpb24odGhlbWVKU09OKSB7CiAgZWNoYXJ0cy5yZWdpc3RlclRoZW1lKCd2aW50YWdlJywgSlNPTi5wYXJzZSh0aGVtZUpTT04pKTsKICB2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tLCAndmludGFnZScpOwp9KTs\'" line-highlights="\'\'" />\n<p>如果保存为 UMD 格式的 JS 文件,那么支持了自注册,直接引入 JS 文件即可:</p>\n<md-code-block lang="js" code="\'Ly8gSFRNTCDlvJXlhaUgdmludGFnZS5qcyDmlofku7blkI7vvIjlgYforr7kuLvpopjlkI3np7DmmK8gInZpbnRhZ2Ui77yJCnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sICd2aW50YWdlJyk7Ci8vIC4uLg\'" line-highlights="\'\'" />\n<h2 id="%E8%B0%83%E8%89%B2%E7%9B%98" tabindex="-1">调色盘</h2>\n<p>调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘,也可以设置系列自己专属的调色盘。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIC8vIOWFqOWxgOiwg-iJsuebmOOAggogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdLAoKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIOatpOezu-WIl-iHquW3seeahOiwg-iJsuebmOOAggogICAgICBjb2xvcjogWwogICAgICAgICcjZGQ2YjY2JywKICAgICAgICAnIzc1OWFhMCcsCiAgICAgICAgJyNlNjlkODcnLAogICAgICAgICcjOGRjMWE5JywKICAgICAgICAnI2VhN2U1MycsCiAgICAgICAgJyNlZWRkNzgnLAogICAgICAgICcjNzNhMzczJywKICAgICAgICAnIzczYjliYycsCiAgICAgICAgJyM3Mjg5YWInLAogICAgICAgICcjOTFjYThjJywKICAgICAgICAnI2Y0OWY0MicKICAgICAgXQogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICAvLyDmraTns7vliJfoh6rlt7HnmoTosIPoibLnm5jjgIIKICAgICAgY29sb3I6IFsKICAgICAgICAnIzM3QTJEQScsCiAgICAgICAgJyMzMkM1RTknLAogICAgICAgICcjNjdFMEUzJywKICAgICAgICAnIzlGRTZCOCcsCiAgICAgICAgJyNGRkRCNUMnLAogICAgICAgICcjZmY5ZjdmJywKICAgICAgICAnI2ZiNzI5MycsCiAgICAgICAgJyNFMDYyQUUnLAogICAgICAgICcjRTY5MEQxJywKICAgICAgICAnI2U3YmNmMycsCiAgICAgICAgJyM5ZDk2ZjUnLAogICAgICAgICcjODM3OEVBJywKICAgICAgICAnIzk2QkZGRicKICAgICAgXQogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h2 id="%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle%2C-linestyle%2C-areastyle%2C-label%2C-..." tabindex="-1">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href="https://echarts.apache.org/option.html#">option</a> 中,很多地方可以设置 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle">itemStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.lineStyle">lineStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.areaStyle">areaStyle</a>、<a href="https://echarts.apache.org/option.html#series-bar.label">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>\n<p>在下面例子中我们给气泡图设置了阴影,渐变色等复杂的样式,你可以修改代码中的样式看修改后的效果:</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbCiAgWwogICAgWzI4NjA0LCA3NywgMTcwOTY4NjksICdBdXN0cmFsaWEnLCAxOTkwXSwKICAgIFszMTE2MywgNzcuNCwgMjc2NjI0NDAsICdDYW5hZGEnLCAxOTkwXSwKICAgIFsxNTE2LCA2OCwgMTE1NDYwNTc3MywgJ0NoaW5hJywgMTk5MF0sCiAgICBbMTM2NzAsIDc0LjcsIDEwNTgyMDgyLCAnQ3ViYScsIDE5OTBdLAogICAgWzI4NTk5LCA3NSwgNDk4NjcwNSwgJ0ZpbmxhbmQnLCAxOTkwXSwKICAgIFsyOTQ3NiwgNzcuMSwgNTY5NDMyOTksICdGcmFuY2UnLCAxOTkwXSwKICAgIFszMTQ3NiwgNzUuNCwgNzg5NTgyMzcsICdHZXJtYW55JywgMTk5MF0sCiAgICBbMjg2NjYsIDc4LjEsIDI1NDgzMCwgJ0ljZWxhbmQnLCAxOTkwXSwKICAgIFsxNzc3LCA1Ny43LCA4NzA2MDE3NzYsICdJbmRpYScsIDE5OTBdLAogICAgWzI5NTUwLCA3OS4xLCAxMjIyNDkyODUsICdKYXBhbicsIDE5OTBdLAogICAgWzIwNzYsIDY3LjksIDIwMTk0MzU0LCAnTm9ydGggS29yZWEnLCAxOTkwXSwKICAgIFsxMjA4NywgNzIsIDQyOTcyMjU0LCAnU291dGggS29yZWEnLCAxOTkwXSwKICAgIFsyNDAyMSwgNzUuNCwgMzM5NzUzNCwgJ05ldyBaZWFsYW5kJywgMTk5MF0sCiAgICBbNDMyOTYsIDc2LjgsIDQyNDAzNzUsICdOb3J3YXknLCAxOTkwXSwKICAgIFsxMDA4OCwgNzAuOCwgMzgxOTUyNTgsICdQb2xhbmQnLCAxOTkwXSwKICAgIFsxOTM0OSwgNjkuNiwgMTQ3NTY4NTUyLCAnUnVzc2lhJywgMTk5MF0sCiAgICBbMTA2NzAsIDY3LjMsIDUzOTk0NjA1LCAnVHVya2V5JywgMTk5MF0sCiAgICBbMjY0MjQsIDc1LjcsIDU3MTEwMTE3LCAnVW5pdGVkIEtpbmdkb20nLCAxOTkwXSwKICAgIFszNzA2MiwgNzUuNCwgMjUyODQ3ODEwLCAnVW5pdGVkIFN0YXRlcycsIDE5OTBdCiAgXSwKICBbCiAgICBbNDQwNTYsIDgxLjgsIDIzOTY4OTczLCAnQXVzdHJhbGlhJywgMjAxNV0sCiAgICBbNDMyOTQsIDgxLjcsIDM1OTM5OTI3LCAnQ2FuYWRhJywgMjAxNV0sCiAgICBbMTMzMzQsIDc2LjksIDEzNzYwNDg5NDMsICdDaGluYScsIDIwMTVdLAogICAgWzIxMjkxLCA3OC41LCAxMTM4OTU2MiwgJ0N1YmEnLCAyMDE1XSwKICAgIFszODkyMywgODAuOCwgNTUwMzQ1NywgJ0ZpbmxhbmQnLCAyMDE1XSwKICAgIFszNzU5OSwgODEuOSwgNjQzOTUzNDUsICdGcmFuY2UnLCAyMDE1XSwKICAgIFs0NDA1MywgODEuMSwgODA2ODg1NDUsICdHZXJtYW55JywgMjAxNV0sCiAgICBbNDIxODIsIDgyLjgsIDMyOTQyNSwgJ0ljZWxhbmQnLCAyMDE1XSwKICAgIFs1OTAzLCA2Ni44LCAxMzExMDUwNTI3LCAnSW5kaWEnLCAyMDE1XSwKICAgIFszNjE2MiwgODMuNSwgMTI2NTczNDgxLCAnSmFwYW4nLCAyMDE1XSwKICAgIFsxMzkwLCA3MS40LCAyNTE1NTMxNywgJ05vcnRoIEtvcmVhJywgMjAxNV0sCiAgICBbMzQ2NDQsIDgwLjcsIDUwMjkzNDM5LCAnU291dGggS29yZWEnLCAyMDE1XSwKICAgIFszNDE4NiwgODAuNiwgNDUyODUyNiwgJ05ldyBaZWFsYW5kJywgMjAxNV0sCiAgICBbNjQzMDQsIDgxLjYsIDUyMTA5NjcsICdOb3J3YXknLCAyMDE1XSwKICAgIFsyNDc4NywgNzcuMywgMzg2MTE3OTQsICdQb2xhbmQnLCAyMDE1XSwKICAgIFsyMzAzOCwgNzMuMTMsIDE0MzQ1NjkxOCwgJ1J1c3NpYScsIDIwMTVdLAogICAgWzE5MzYwLCA3Ni41LCA3ODY2NTgzMCwgJ1R1cmtleScsIDIwMTVdLAogICAgWzM4MjI1LCA4MS40LCA2NDcxNTgxMCwgJ1VuaXRlZCBLaW5nZG9tJywgMjAxNV0sCiAgICBbNTMzNTQsIDc5LjEsIDMyMTc3MzYzMSwgJ1VuaXRlZCBTdGF0ZXMnLCAyMDE1XQogIF0KXTsKCm9wdGlvbiA9IHsKICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgIHR5cGU6ICdyYWRpYWwnLAogICAgeDogMC4zLAogICAgeTogMC4zLAogICAgcjogMC44LAogICAgY29sb3JTdG9wczogWwogICAgICB7CiAgICAgICAgb2Zmc2V0OiAwLAogICAgICAgIGNvbG9yOiAnI2Y3ZjhmYScKICAgICAgfSwKICAgICAgewogICAgICAgIG9mZnNldDogMSwKICAgICAgICBjb2xvcjogJyNjZGQwZDUnCiAgICAgIH0KICAgIF0KICB9LAogIGdyaWQ6IHsKICAgIGxlZnQ6IDEwLAogICAgY29udGFpbkxhYmVsOiB0cnVlLAogICAgYm90dG9tOiAxMCwKICAgIHRvcDogMTAsCiAgICByaWdodDogMzAKICB9LAogIHhBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0KICB9LAogIHlBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0sCiAgICBzY2FsZTogdHJ1ZQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICcxOTkwJywKICAgICAgZGF0YTogZGF0YVswXSwKICAgICAgdHlwZTogJ3NjYXR0ZXInLAogICAgICBzeW1ib2xTaXplOiBmdW5jdGlvbihkYXRhKSB7CiAgICAgICAgcmV0dXJuIE1hdGguc3FydChkYXRhWzJdKSAvIDVlMjsKICAgICAgfSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycsCiAgICAgICAgbGFiZWw6IHsKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IGZ1bmN0aW9uKHBhcmFtKSB7CiAgICAgICAgICAgIHJldHVybiBwYXJhbS5kYXRhWzNdOwogICAgICAgICAgfSwKICAgICAgICAgIHBvc2l0aW9uOiAndG9wJwogICAgICAgIH0KICAgICAgfSwKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgc2hhZG93Qmx1cjogMTAsCiAgICAgICAgc2hhZG93Q29sb3I6ICdyZ2JhKDEyMCwgMzYsIDUwLCAwLjUpJywKICAgICAgICBzaGFkb3dPZmZzZXRZOiA1LAogICAgICAgIGNvbG9yOiB7CiAgICAgICAgICB0eXBlOiAncmFkaWFsJywKICAgICAgICAgIHg6IDAuNCwKICAgICAgICAgIHk6IDAuMywKICAgICAgICAgIHI6IDEsCiAgICAgICAgICBjb2xvclN0b3BzOiBbCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDAsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjUxLCAxMTgsIDEyMyknCiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDEsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjA0LCA0NiwgNzIpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9LAogICAgewogICAgICBuYW1lOiAnMjAxNScsCiAgICAgIGRhdGE6IGRhdGFbMV0sCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgc3ltYm9sU2l6ZTogZnVuY3Rpb24oZGF0YSkgewogICAgICAgIHJldHVybiBNYXRoLnNxcnQoZGF0YVsyXSkgLyA1ZTI7CiAgICAgIH0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgZm9jdXM6ICdzZXJpZXMnLAogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbSkgewogICAgICAgICAgICByZXR1cm4gcGFyYW0uZGF0YVszXTsKICAgICAgICAgIH0sCiAgICAgICAgICBwb3NpdGlvbjogJ3RvcCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgyNSwgMTAwLCAxNTAsIDAuNSknLAogICAgICAgIHNoYWRvd09mZnNldFk6IDUsCiAgICAgICAgY29sb3I6IHsKICAgICAgICAgIHR5cGU6ICdyYWRpYWwnLAogICAgICAgICAgeDogMC40LAogICAgICAgICAgeTogMC4zLAogICAgICAgICAgcjogMSwKICAgICAgICAgIGNvbG9yU3RvcHM6IFsKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMCwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigxMjksIDIyNywgMjM4KScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMSwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigyNSwgMTgzLCAyMDcpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis" tabindex="-1">高亮的样式:emphasis</h2>\n<p>在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> 属性来定制。<a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphsis</a> 中的结构,和普通样式的结构相同,例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIC8vIOaZrumAmuagt-W8j-OAggogICAgaXRlbVN0eWxlOiB7CiAgICAgIC8vIOeCueeahOminOiJsuOAggogICAgICBjb2xvcjogJ3JlZCcKICAgIH0sCiAgICBsYWJlbDogewogICAgICBzaG93OiB0cnVlLAogICAgICAvLyDmoIfnrb7nmoTmloflrZfjgIIKICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIG5vcm1hbCBsYWJlbC4nCiAgICB9LAoKICAgIC8vIOmrmOS6ruagt-W8j-OAggogICAgZW1waGFzaXM6IHsKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgLy8g6auY5Lqu5pe254K555qE6aKc6Imy44CCCiAgICAgICAgY29sb3I6ICdibHVlJwogICAgICB9LAogICAgICBsYWJlbDogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgLy8g6auY5Lqu5pe25qCH562-55qE5paH5a2X44CCCiAgICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIGVtcGhhc2lzIGxhYmVsLicKICAgICAgfQogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIGl0ZW1TdHlsZTogewogICAgICAvLyDmma7pgJrmoLflvI_jgIIKICAgICAgbm9ybWFsOiB7CiAgICAgICAgLy8g54K555qE6aKc6Imy44CCCiAgICAgICAgY29sb3I6ICdyZWQnCiAgICAgIH0sCiAgICAgIC8vIOmrmOS6ruagt-W8j-OAggogICAgICBlbXBoYXNpczogewogICAgICAgIC8vIOmrmOS6ruaXtueCueeahOminOiJsuOAggogICAgICAgIGNvbG9yOiAnYmx1ZScKICAgICAgfQogICAgfSwKCiAgICBsYWJlbDogewogICAgICAvLyDmma7pgJrmoLflvI_jgIIKICAgICAgbm9ybWFsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDmoIfnrb7nmoTmloflrZfjgIIKICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgbm9ybWFsIGxhYmVsLicKICAgICAgfSwKICAgICAgLy8g6auY5Lqu5qC35byP44CCCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDpq5jkuq7ml7bmoIfnrb7nmoTmloflrZfjgIIKICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgZW1waGFzaXMgbGFiZWwuJwogICAgICB9CiAgICB9CiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>这种写法 <strong>仍然被兼容</strong>,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 <code>normal</code> 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。</p>\n<h2 id="%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F" tabindex="-1">通过 visualMap 组件设定样式</h2>\n<p><a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则,详见 <a href="zh/concepts/visual-map">数据的视觉映射</a>。</p>\n',postPath:"zh/concepts/style"}],fetch:{},error:A,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:t,children:[{title:"获取 ECharts",dir:e},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:d,draft:g},{title:"获取灵感",dir:a},{title:"寻求帮助",dir:s},{title:"版本特性",dir:r,children:[{title:"ECharts 5 特性介绍",dir:o},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:n}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:y,draft:g},{title:"系列",dir:M,draft:g},{title:"样式",dir:N},{title:"数据集",dir:p},{title:"数据转换",dir:m},{title:"坐标系",dir:b,draft:g},{title:"坐标轴",dir:B},{title:"视觉映射",dir:C},{title:"图例",dir:L},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:z,children:[{title:"常用图表类型",dir:O,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:K,draft:g},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:j},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:u}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:x},{title:"圆环图",dir:k},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:v}]}]},{title:H,dir:I,draft:g},{title:"跨平台方案",dir:f,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:R,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:H,dir:I,draft:g},{title:gg,dir:Ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Cg}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:t,children:[{title:"Download ECharts",dir:e},{title:"Import ECharts",dir:l},{title:"Resources",dir:d,draft:g},{title:"Inspiration",dir:a},{title:"Get Help",dir:s},{title:"What's New",dir:r,children:[{title:"ECharts 5 Features",dir:o},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:n}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:y,draft:g},{title:"Series",dir:M,draft:g},{title:"Style",dir:N},{title:"Dataset",dir:p},{title:"Data Transform",dir:m},{title:"Coordinate",dir:b,draft:g},{title:"Axis",dir:B},{title:"Visual Mapping",dir:C},{title:"Legend",dir:L},{title:"Event and Action",dir:D}]},{title:"How To Guides",dir:z,children:[{title:"Common Charts",dir:O,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:K,draft:g},{title:"Waterfall",dir:S}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:j},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:u}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:x},{title:"Ring Style",dir:k},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:v}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:f,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:R,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:gg,dir:Ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Cg}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/concepts/style",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:A}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/concepts/visual-map/index.html b/handbook/zh/concepts/visual-map/index.html
index e1ecb79..9323653 100644
--- a/handbook/zh/concepts/visual-map/index.html
+++ b/handbook/zh/concepts/visual-map/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">数据的视觉映射</h1> <p>数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。</p> <p>ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。</p> <p>此外,ECharts 还提供了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有:</p> <ul><li>图形类别(symbol)、图形大小(symbolSize)</li> <li>颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、</li> <li>颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)</li></ul> <p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p> <h2 id="%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6" tabindex="-1">数据和维度</h2> <p>ECharts 中的数据,一般存放于 <a href="https://echarts.apache.org/option.html#series.data"><code>series.data</code></a> 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。</p> <p>例如,<a href="https://echarts.apache.org/option.html#series.data">series.data</a> 最常见的形式,是“线性表“,即一个普通数组:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">数据的视觉映射</h1> <p>数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。</p> <p>ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。</p> <p>此外,ECharts 还提供了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有:</p> <ul><li>图形类别(symbol)、图形大小(symbolSize)</li> <li>颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、</li> <li>颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)</li></ul> <p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p> <h2 id="%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6" tabindex="-1">数据和维度</h2> <p>ECharts 中的数据,一般存放于 <a href="https://echarts.apache.org/option.html#series.data"><code>series.data</code></a> 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。</p> <p>例如,<a href="https://echarts.apache.org/option.html#series.data">series.data</a> 最常见的形式,是“线性表“,即一个普通数组:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>series<span class="token operator">:</span> <span class="token punctuation">{</span>
data<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token comment">// 这里每一个项就是数据项(dataItem)</span>
@@ -73,7 +73,8 @@
<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></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>其中,<a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> 表示在数据映射范围内的数据采用的样式;而 <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> 则指定了超出映射范围外的数据的样式。</p> <p><a href="~visualMap.dimension">visualMap.dimension</a> 则指定了将数据的哪个维度做视觉映射。</p> <h3 id="%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">分段型视觉映射</h3> <p>分段型视觉映射组件有三种模式:</p> <ul><li>连续型数据平均分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li> <li>连续型数据自定义分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> 来定义每块范围。</li> <li>离散数据(类别性数据):类别定义在 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a> 中。</li></ul> <p>使用分段型视觉映射时,需要将 <code>type</code> 设为 <code>'piecewise'</code>,并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。</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/concepts/visual-map.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,a,r,l,d,o,n,g,s,h,p,c,I,C,A,u,m,b,v,E,y,L,B,f,M,w,D,W,O,K,S,Y,z,k,Z,j,T,X,x,V,G,R,H,q,J,P,F,N,_,Q,U,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">数据的视觉映射</h1>\n<p>数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。</p>\n<p>ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。</p>\n<p>此外,ECharts 还提供了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有:</p>\n<ul>\n<li>图形类别(symbol)、图形大小(symbolSize)</li>\n<li>颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、</li>\n<li>颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)</li>\n</ul>\n<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<h2 id="%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6" tabindex="-1">数据和维度</h2>\n<p>ECharts 中的数据,一般存放于 <a href="https://echarts.apache.org/option.html#series.data"><code>series.data</code></a> 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。</p>\n<p>例如,<a href="https://echarts.apache.org/option.html#series.data">series.data</a> 最常见的形式,是“线性表“,即一个普通数组:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyDov5nph4zmr4_kuIDkuKrpobnlsLHmmK_mlbDmja7pobnvvIhkYXRhSXRlbe-8iQogICAgICB2YWx1ZTogMjMyMywgLy8g6L-Z5piv5pWw5o2u6aG555qE5pWw5o2u5YC877yIdmFsdWXvvIkKICAgICAgaXRlbVN0eWxlOiB7fQogICAgfSwKICAgIDEyMTIsIC8vIOS5n-WPr-S7peebtOaOpeaYryBkYXRhSXRlbSDnmoQgdmFsdWXvvIzov5nmm7TluLjop4HjgIIKICAgIDIzMjMsIC8vIOavj-S4qiB2YWx1ZSDpg73mmK_igJzkuIDnu7TigJznmoTjgIIKICAgIDQzNDMsCiAgICAzNDM0CiAgXTsKfQ\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyDov5nph4zmr4_kuIDkuKrpobnlsLHmmK_mlbDmja7pobnvvIhkYXRhSXRlbe-8iQogICAgICB2YWx1ZTogWzM0MzQsIDEyOSwgJ-Wco-mprOWKm-ivuiddLCAvLyDov5nmmK_mlbDmja7pobnnmoTmlbDmja7lgLzvvIh2YWx1Ze-8iQogICAgICBpdGVtU3R5bGU6IHt9CiAgICB9LAogICAgWzEyMTIsIDU0NTQsICfmorXokoLlhognXSwgLy8g5Lmf5Y-v5Lul55u05o6l5pivIGRhdGFJdGVtIOeahCB2YWx1Ze-8jOi_meabtOW4uOingeOAggogICAgWzIzMjMsIDMyMjMsICfnkZnpsoEnXSwgLy8g5q-P5LiqIHZhbHVlIOmDveaYr-KAnOS4iee7tOKAnOeahO-8jOavj-WIl-aYr-S4gOS4que7tOW6puOAggogICAgWzQzNDMsIDIzLCAn5Zu-55Om5Y2iJ10gLy8g5YGH5aaC5piv4oCc5rCU5rOh5Zu-4oCc77yM5bi46KeB56ys5LiA57u05bqm5pig5bCE5YiweOi9tO-8jAogICAgLy8g56ys5LqM57u05bqm5pig5bCE5Yiweei9tO-8jAogICAgLy8g56ys5LiJ57u05bqm5pig5bCE5Yiw5rCU5rOh5Y2K5b6E77yIc3ltYm9sU2l6Ze-8iQogIF07Cn0\'" line-highlights="\'\'" />\n<p>在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到 y 轴。如果想要把更多的维度展现出来,可以借助 <code>visualMap</code>。最常见的情况,<a href="https://echarts.apache.org/option.html#series-scatter">散点图(scatter)</a> 使用半径展现了第三个维度。</p>\n<h2 id="visualmap-%E7%BB%84%E4%BB%B6" tabindex="-1">visualMap 组件</h2>\n<p>visualMap 组件定义了把数据的<em>哪个维度</em>映射到<em>什么视觉元素上</em>。</p>\n<p>现在提供如下两种类型的 visualMap 组件,通过 <a href="https://echarts.apache.org/option.html#visualMap.type">visualMap.type</a> 来区分。</p>\n<p>其定义结构例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgLy8g5Y-v5Lul5ZCM5pe25a6a5LmJ5aSa5LiqIHZpc3VhbE1hcCDnu4Tku7bjgIIKICAgIHsKICAgICAgLy8g56ys5LiA5LiqIHZpc3VhbE1hcCDnu4Tku7YKICAgICAgdHlwZTogJ2NvbnRpbnVvdXMnIC8vIOWumuS5ieS4uui_nue7reWeiyB2aXN1YWxNYXAKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyDnrKzkuozkuKogdmlzdWFsTWFwIOe7hOS7tgogICAgICB0eXBlOiAncGllY2V3aXNlJyAvLyDlrprkuYnkuLrliIbmrrXlnosgdmlzdWFsTWFwCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E8%BF%9E%E7%BB%AD%E5%9E%8B%E4%B8%8E%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84%E7%BB%84%E4%BB%B6" tabindex="-1">连续型与分段型视觉映射组件</h2>\n<p>ECharts 的视觉映射组件分为连续型(<a href="https://echarts.apache.org/option.html#visualMap-continuous">visualMapContinuous</a>)与分段型(<a href="https://echarts.apache.org/option.html#visualMap-piecewise">visualMapPiecewise</a>)。</p>\n<p>连续型的意思是,进行视觉映射的数据维度是连续的数值;而分段型则是数据被分成了多段或者是离散型的数据。</p>\n<h3 id="%E8%BF%9E%E7%BB%AD%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">连续型视觉映射</h3>\n<p>连续型视觉映射通过指定最大值、最小值,就可以确定视觉映射的范围。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgewogICAgICB0eXBlOiAncGllY2V3aXNlJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDUwMDAsCiAgICAgIGRpbWVuc2lvbjogMywgLy8gc2VyaWVzLmRhdGEg55qE56ys5Zub5Liq57u05bqm77yI5Y2zIHZhbHVlWzNd77yJ6KKr5pig5bCECiAgICAgIHNlcmllc0luZGV4OiA0LCAvLyDlr7nnrKzlm5vkuKrns7vliJfov5vooYzmmKDlsITjgIIKICAgICAgaW5SYW5nZTogewogICAgICAgIC8vIOmAieS4reiMg-WbtOS4reeahOinhuiniemFjee9rgogICAgICAgIGNvbG9yOiBbJ2JsdWUnLCAnIzEyMTEyMicsICdyZWQnXSwgLy8g5a6a5LmJ5LqG5Zu-5b2i6aKc6Imy5pig5bCE55qE6aKc6Imy5YiX6KGo77yMCiAgICAgICAgLy8g5pWw5o2u5pyA5bCP5YC85pig5bCE5YiwJ2JsdWUn5LiK77yMCiAgICAgICAgLy8g5pyA5aSn5YC85pig5bCE5YiwJ3JlZCfkuIrvvIwKICAgICAgICAvLyDlhbbkvZnoh6rliqjnur_mgKforqHnrpfjgIIKICAgICAgICBzeW1ib2xTaXplOiBbMzAsIDEwMF0gLy8g5a6a5LmJ5LqG5Zu-5b2i5bC65a-455qE5pig5bCE6IyD5Zu077yMCiAgICAgICAgLy8g5pWw5o2u5pyA5bCP5YC85pig5bCE5YiwMzDkuIrvvIwKICAgICAgICAvLyDmnIDlpKflgLzmmKDlsITliLAxMDDkuIrvvIwKICAgICAgICAvLyDlhbbkvZnoh6rliqjnur_mgKforqHnrpfjgIIKICAgICAgfSwKICAgICAgb3V0T2ZSYW5nZTogewogICAgICAgIC8vIOmAieS4reiMg-WbtOWklueahOinhuiniemFjee9rgogICAgICAgIHN5bWJvbFNpemU6IFszMCwgMTAwXQogICAgICB9CiAgICB9CiAgICAvLyAgICAuLi4KICBdCn07\'" line-highlights="\'\'" />\n<p>其中,<a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> 表示在数据映射范围内的数据采用的样式;而 <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> 则指定了超出映射范围外的数据的样式。</p>\n<p><a href="~visualMap.dimension">visualMap.dimension</a> 则指定了将数据的哪个维度做视觉映射。</p>\n<h3 id="%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">分段型视觉映射</h3>\n<p>分段型视觉映射组件有三种模式:</p>\n<ul>\n<li>连续型数据平均分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>\n<li>连续型数据自定义分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> 来定义每块范围。</li>\n<li>离散数据(类别性数据):类别定义在 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a> 中。</li>\n</ul>\n<p>使用分段型视觉映射时,需要将 <code>type</code> 设为 <code>\'piecewise\'</code>,并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。</p>\n',postPath:"zh/concepts/visual-map"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:g},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:I}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:u,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:b},{title:"数据集",dir:v},{title:"数据转换",dir:E},{title:"坐标系",dir:y,draft:i},{title:"坐标轴",dir:L},{title:"视觉映射",dir:e},{title:"图例",dir:B},{title:"事件与行为",dir:f}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:w,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:K,draft:i},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:Z},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:X},{title:"圆环图",dir:x},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:G,children:[{title:"基础散点图",dir:R}]}]},{title:H,dir:t,draft:i},{title:"跨平台方案",dir:q,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:F},{title:"数据下钻",dir:N,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:U,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:H,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:g},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:I}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:u,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:v},{title:"Data Transform",dir:E},{title:"Coordinate",dir:y,draft:i},{title:"Axis",dir:L},{title:"Visual Mapping",dir:e},{title:"Legend",dir:B},{title:"Event and Action",dir:f}]},{title:"How To Guides",dir:M,children:[{title:"Common Charts",dir:w,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:K,draft:i},{title:"Waterfall",dir:S}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:Z},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:X},{title:"Ring Style",dir:x},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:G,children:[{title:"Basic Scatter",dir:R}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:q,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:F},{title:"Drilldown",dir:N,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:U,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/visual-map",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>其中,<a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> 表示在数据映射范围内的数据采用的样式;而 <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> 则指定了超出映射范围外的数据的样式。</p> <p><a href="~visualMap.dimension">visualMap.dimension</a> 则指定了将数据的哪个维度做视觉映射。</p> <h3 id="%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">分段型视觉映射</h3> <p>分段型视觉映射组件有三种模式:</p> <ul><li>连续型数据平均分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li> <li>连续型数据自定义分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> 来定义每块范围。</li> <li>离散数据(类别性数据):类别定义在 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a> 中。</li></ul> <p>使用分段型视觉映射时,需要将 <code>type</code> 设为 <code>'piecewise'</code>,并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。</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/concepts/visual-map.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,a,r,l,d,o,n,g,s,h,p,c,I,C,A,u,m,b,v,E,y,L,B,f,M,w,D,W,O,K,S,Y,z,k,Z,j,T,X,x,V,G,R,H,q,J,P,F,N,_,Q,U,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">数据的视觉映射</h1>\n<p>数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。</p>\n<p>ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。</p>\n<p>此外,ECharts 还提供了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有:</p>\n<ul>\n<li>图形类别(symbol)、图形大小(symbolSize)</li>\n<li>颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、</li>\n<li>颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)</li>\n</ul>\n<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<h2 id="%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6" tabindex="-1">数据和维度</h2>\n<p>ECharts 中的数据,一般存放于 <a href="https://echarts.apache.org/option.html#series.data"><code>series.data</code></a> 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。</p>\n<p>例如,<a href="https://echarts.apache.org/option.html#series.data">series.data</a> 最常见的形式,是“线性表“,即一个普通数组:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyDov5nph4zmr4_kuIDkuKrpobnlsLHmmK_mlbDmja7pobnvvIhkYXRhSXRlbe-8iQogICAgICB2YWx1ZTogMjMyMywgLy8g6L-Z5piv5pWw5o2u6aG555qE5pWw5o2u5YC877yIdmFsdWXvvIkKICAgICAgaXRlbVN0eWxlOiB7fQogICAgfSwKICAgIDEyMTIsIC8vIOS5n-WPr-S7peebtOaOpeaYryBkYXRhSXRlbSDnmoQgdmFsdWXvvIzov5nmm7TluLjop4HjgIIKICAgIDIzMjMsIC8vIOavj-S4qiB2YWx1ZSDpg73mmK_igJzkuIDnu7TigJznmoTjgIIKICAgIDQzNDMsCiAgICAzNDM0CiAgXTsKfQ\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyDov5nph4zmr4_kuIDkuKrpobnlsLHmmK_mlbDmja7pobnvvIhkYXRhSXRlbe-8iQogICAgICB2YWx1ZTogWzM0MzQsIDEyOSwgJ-Wco-mprOWKm-ivuiddLCAvLyDov5nmmK_mlbDmja7pobnnmoTmlbDmja7lgLzvvIh2YWx1Ze-8iQogICAgICBpdGVtU3R5bGU6IHt9CiAgICB9LAogICAgWzEyMTIsIDU0NTQsICfmorXokoLlhognXSwgLy8g5Lmf5Y-v5Lul55u05o6l5pivIGRhdGFJdGVtIOeahCB2YWx1Ze-8jOi_meabtOW4uOingeOAggogICAgWzIzMjMsIDMyMjMsICfnkZnpsoEnXSwgLy8g5q-P5LiqIHZhbHVlIOmDveaYr-KAnOS4iee7tOKAnOeahO-8jOavj-WIl-aYr-S4gOS4que7tOW6puOAggogICAgWzQzNDMsIDIzLCAn5Zu-55Om5Y2iJ10gLy8g5YGH5aaC5piv4oCc5rCU5rOh5Zu-4oCc77yM5bi46KeB56ys5LiA57u05bqm5pig5bCE5YiweOi9tO-8jAogICAgLy8g56ys5LqM57u05bqm5pig5bCE5Yiweei9tO-8jAogICAgLy8g56ys5LiJ57u05bqm5pig5bCE5Yiw5rCU5rOh5Y2K5b6E77yIc3ltYm9sU2l6Ze-8iQogIF07Cn0\'" line-highlights="\'\'" />\n<p>在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到 y 轴。如果想要把更多的维度展现出来,可以借助 <code>visualMap</code>。最常见的情况,<a href="https://echarts.apache.org/option.html#series-scatter">散点图(scatter)</a> 使用半径展现了第三个维度。</p>\n<h2 id="visualmap-%E7%BB%84%E4%BB%B6" tabindex="-1">visualMap 组件</h2>\n<p>visualMap 组件定义了把数据的<em>哪个维度</em>映射到<em>什么视觉元素上</em>。</p>\n<p>现在提供如下两种类型的 visualMap 组件,通过 <a href="https://echarts.apache.org/option.html#visualMap.type">visualMap.type</a> 来区分。</p>\n<p>其定义结构例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgLy8g5Y-v5Lul5ZCM5pe25a6a5LmJ5aSa5LiqIHZpc3VhbE1hcCDnu4Tku7bjgIIKICAgIHsKICAgICAgLy8g56ys5LiA5LiqIHZpc3VhbE1hcCDnu4Tku7YKICAgICAgdHlwZTogJ2NvbnRpbnVvdXMnIC8vIOWumuS5ieS4uui_nue7reWeiyB2aXN1YWxNYXAKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyDnrKzkuozkuKogdmlzdWFsTWFwIOe7hOS7tgogICAgICB0eXBlOiAncGllY2V3aXNlJyAvLyDlrprkuYnkuLrliIbmrrXlnosgdmlzdWFsTWFwCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E8%BF%9E%E7%BB%AD%E5%9E%8B%E4%B8%8E%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84%E7%BB%84%E4%BB%B6" tabindex="-1">连续型与分段型视觉映射组件</h2>\n<p>ECharts 的视觉映射组件分为连续型(<a href="https://echarts.apache.org/option.html#visualMap-continuous">visualMapContinuous</a>)与分段型(<a href="https://echarts.apache.org/option.html#visualMap-piecewise">visualMapPiecewise</a>)。</p>\n<p>连续型的意思是,进行视觉映射的数据维度是连续的数值;而分段型则是数据被分成了多段或者是离散型的数据。</p>\n<h3 id="%E8%BF%9E%E7%BB%AD%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">连续型视觉映射</h3>\n<p>连续型视觉映射通过指定最大值、最小值,就可以确定视觉映射的范围。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgewogICAgICB0eXBlOiAncGllY2V3aXNlJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDUwMDAsCiAgICAgIGRpbWVuc2lvbjogMywgLy8gc2VyaWVzLmRhdGEg55qE56ys5Zub5Liq57u05bqm77yI5Y2zIHZhbHVlWzNd77yJ6KKr5pig5bCECiAgICAgIHNlcmllc0luZGV4OiA0LCAvLyDlr7nnrKzlm5vkuKrns7vliJfov5vooYzmmKDlsITjgIIKICAgICAgaW5SYW5nZTogewogICAgICAgIC8vIOmAieS4reiMg-WbtOS4reeahOinhuiniemFjee9rgogICAgICAgIGNvbG9yOiBbJ2JsdWUnLCAnIzEyMTEyMicsICdyZWQnXSwgLy8g5a6a5LmJ5LqG5Zu-5b2i6aKc6Imy5pig5bCE55qE6aKc6Imy5YiX6KGo77yMCiAgICAgICAgLy8g5pWw5o2u5pyA5bCP5YC85pig5bCE5YiwJ2JsdWUn5LiK77yMCiAgICAgICAgLy8g5pyA5aSn5YC85pig5bCE5YiwJ3JlZCfkuIrvvIwKICAgICAgICAvLyDlhbbkvZnoh6rliqjnur_mgKforqHnrpfjgIIKICAgICAgICBzeW1ib2xTaXplOiBbMzAsIDEwMF0gLy8g5a6a5LmJ5LqG5Zu-5b2i5bC65a-455qE5pig5bCE6IyD5Zu077yMCiAgICAgICAgLy8g5pWw5o2u5pyA5bCP5YC85pig5bCE5YiwMzDkuIrvvIwKICAgICAgICAvLyDmnIDlpKflgLzmmKDlsITliLAxMDDkuIrvvIwKICAgICAgICAvLyDlhbbkvZnoh6rliqjnur_mgKforqHnrpfjgIIKICAgICAgfSwKICAgICAgb3V0T2ZSYW5nZTogewogICAgICAgIC8vIOmAieS4reiMg-WbtOWklueahOinhuiniemFjee9rgogICAgICAgIHN5bWJvbFNpemU6IFszMCwgMTAwXQogICAgICB9CiAgICB9CiAgICAvLyAgICAuLi4KICBdCn07\'" line-highlights="\'\'" />\n<p>其中,<a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> 表示在数据映射范围内的数据采用的样式;而 <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> 则指定了超出映射范围外的数据的样式。</p>\n<p><a href="~visualMap.dimension">visualMap.dimension</a> 则指定了将数据的哪个维度做视觉映射。</p>\n<h3 id="%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">分段型视觉映射</h3>\n<p>分段型视觉映射组件有三种模式:</p>\n<ul>\n<li>连续型数据平均分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>\n<li>连续型数据自定义分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> 来定义每块范围。</li>\n<li>离散数据(类别性数据):类别定义在 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a> 中。</li>\n</ul>\n<p>使用分段型视觉映射时,需要将 <code>type</code> 设为 <code>\'piecewise\'</code>,并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。</p>\n',postPath:"zh/concepts/visual-map"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:g},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:I}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:u,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:b},{title:"数据集",dir:v},{title:"数据转换",dir:E},{title:"坐标系",dir:y,draft:i},{title:"坐标轴",dir:L},{title:"视觉映射",dir:e},{title:"图例",dir:B},{title:"事件与行为",dir:f}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:w,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:K,draft:i},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:Z},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:X},{title:"圆环图",dir:x},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:G,children:[{title:"基础散点图",dir:R}]}]},{title:H,dir:t,draft:i},{title:"跨平台方案",dir:q,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:F},{title:"数据下钻",dir:N,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:U,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:H,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:g},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:I}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:u,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:v},{title:"Data Transform",dir:E},{title:"Coordinate",dir:y,draft:i},{title:"Axis",dir:L},{title:"Visual Mapping",dir:e},{title:"Legend",dir:B},{title:"Event and Action",dir:f}]},{title:"How To Guides",dir:M,children:[{title:"Common Charts",dir:w,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:K,draft:i},{title:"Waterfall",dir:S}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:Z},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:X},{title:"Ring Style",dir:x},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:G,children:[{title:"Basic Scatter",dir:R}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:q,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:F},{title:"Drilldown",dir:N,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:U,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/visual-map",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/get-started/index.html b/handbook/zh/get-started/index.html
index c3eec5f..e0bcd17 100644
--- a/handbook/zh/get-started/index.html
+++ b/handbook/zh/get-started/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B" tabindex="-1">快速上手</h1> <h2 id="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h2> <p>Apache ECharts 支持多种下载方式,可以在下一篇教程<a href="zh/basics/download">安装</a>中查看所有方式。这里,我们以从 <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN 上获取为例,介绍如何快速安装。</p> <p>在 <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> 选择 <code>dist/echarts.js</code>,点击并保存为 <code>echarts.js</code> 文件。</p> <blockquote><p>关于这些文件的介绍,可以在下一篇教程<a href="zh/basics/download">安装</a>中了解更多信息。</p></blockquote> <h2 id="%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">引入 Apache ECharts</h2> <p>在刚才保存 <code>echarts.js</code> 的目录新建一个 <code>index.html</code> 文件,内容如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B" tabindex="-1">快速上手</h1> <h2 id="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h2> <p>Apache ECharts 支持多种下载方式,可以在下一篇教程<a href="zh/basics/download">安装</a>中查看所有方式。这里,我们以从 <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN 上获取为例,介绍如何快速安装。</p> <p>在 <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> 选择 <code>dist/echarts.js</code>,点击并保存为 <code>echarts.js</code> 文件。</p> <blockquote><p>关于这些文件的介绍,可以在下一篇教程<a href="zh/basics/download">安装</a>中了解更多信息。</p></blockquote> <h2 id="%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">引入 Apache ECharts</h2> <p>在刚才保存 <code>echarts.js</code> 的目录新建一个 <code>index.html</code> 文件,内容如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
@@ -58,7 +58,8 @@
myChart.setOption(option);
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</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>这样你的第一个图表就诞生了!</p> <p><iframe width="100%" height="350" src=""></iframe></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/get-started.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,h,c,n,o,g,s,C,I,p,A,m,b,u,B,f,w,E,W,k,P,D,G,v,O,R,S,L,j,Y,x,H,F,J,N,X,Z,y,K,z,Q,M,T,U,q,V,_,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B" tabindex="-1">快速上手</h1>\n<h2 id="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h2>\n<p>Apache ECharts 支持多种下载方式,可以在下一篇教程<a href="zh/basics/download">安装</a>中查看所有方式。这里,我们以从 <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN 上获取为例,介绍如何快速安装。</p>\n<p>在 <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> 选择 <code>dist/echarts.js</code>,点击并保存为 <code>echarts.js</code> 文件。</p>\n<blockquote>\n<p>关于这些文件的介绍,可以在下一篇教程<a href="zh/basics/download">安装</a>中了解更多信息。</p>\n</blockquote>\n<h2 id="%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">引入 Apache ECharts</h2>\n<p>在刚才保存 <code>echarts.js</code> 的目录新建一个 <code>index.html</code> 文件,内容如下:</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8IS0tIOW8leWFpeWImuWImuS4i-i9veeahCBFQ2hhcnRzIOaWh-S7tiAtLT4KICAgIDxzY3JpcHQgc3JjPSJlY2hhcnRzLmpzIj48L3NjcmlwdD4KICA8L2hlYWQ-CjwvaHRtbD4\'" line-highlights="\'\'" />\n<p>打开这个 <code>index.html</code>,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。</p>\n<h2 id="%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8" tabindex="-1">绘制一个简单的图表</h2>\n<p>在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 <code></head></code> 之后,添加:</p>\n<md-code-block lang="html" code="\'PGJvZHk-CiAgPCEtLSDkuLogRUNoYXJ0cyDlh4blpIfkuIDkuKrlrprkuYnkuoblrr3pq5jnmoQgRE9NIC0tPgogIDxkaXYgaWQ9Im1haW4iIHN0eWxlPSJ3aWR0aDogNjAwcHg7aGVpZ2h0OjQwMHB4OyI-PC9kaXY-CjwvYm9keT4\'" line-highlights="\'\'" />\n<p>然后就可以通过 <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a> 方法生成一个简单的柱状图,下面是完整代码。</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8dGl0bGU-RUNoYXJ0czwvdGl0bGU-CiAgICA8IS0tIOW8leWFpeWImuWImuS4i-i9veeahCBFQ2hhcnRzIOaWh-S7tiAtLT4KICAgIDxzY3JpcHQgc3JjPSJlY2hhcnRzLm1pbi5qcyI-PC9zY3JpcHQ-CiAgPC9oZWFkPgogIDxib2R5PgogICAgPCEtLSDkuLogRUNoYXJ0cyDlh4blpIfkuIDkuKrlrprkuYnkuoblrr3pq5jnmoQgRE9NIC0tPgogICAgPGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICAgICAgLy8g5Z-65LqO5YeG5aSH5aW955qEZG9t77yM5Yid5aeL5YyWZWNoYXJ0c-WunuS-iwogICAgICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCiAgICAgIC8vIOaMh-WumuWbvuihqOeahOmFjee9rumhueWSjOaVsOaNrgogICAgICB2YXIgb3B0aW9uID0gewogICAgICAgIHRpdGxlOiB7CiAgICAgICAgICB0ZXh0OiAnRUNoYXJ0cyDlhaXpl6jnpLrkvosnCiAgICAgICAgfSwKICAgICAgICB0b29sdGlwOiB7fSwKICAgICAgICBsZWdlbmQ6IHsKICAgICAgICAgIGRhdGE6IFsn6ZSA6YePJ10KICAgICAgICB9LAogICAgICAgIHhBeGlzOiB7CiAgICAgICAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICAgICAgICB9LAogICAgICAgIHlBeGlzOiB7fSwKICAgICAgICBzZXJpZXM6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgICAgICAgfQogICAgICAgIF0KICAgICAgfTsKCiAgICAgIC8vIOS9v-eUqOWImuaMh-WumueahOmFjee9rumhueWSjOaVsOaNruaYvuekuuWbvuihqOOAggogICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwogICAgPC9zY3JpcHQ-CiAgPC9ib2R5Pgo8L2h0bWw-\'" line-highlights="\'\'" />\n<p>这样你的第一个图表就诞生了!</p>\n<p><md-example src="doc-example/getting-started"></md-example></p>\n',postPath:"zh/get-started"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:o},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:u},{title:"数据集",dir:B},{title:"数据转换",dir:f},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:j},{title:"堆叠折线图",dir:Y},{title:"区域面积图",dir:x},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:J},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:X}]},{title:"散点图",dir:Z,children:[{title:"基础散点图",dir:y}]}]},{title:K,dir:i,draft:t},{title:"跨平台方案",dir:z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:V,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:o},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:B},{title:"Data Transform",dir:f},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:P,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:S}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:j},{title:"Stacked Line",dir:Y},{title:"Area Chart",dir:x},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:J},{title:"Ring Style",dir:N},{title:"Rose Style",dir:X}]},{title:"Scatter",dir:Z,children:[{title:"Basic Scatter",dir:y}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:z,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:V,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/get-started",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</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>这样你的第一个图表就诞生了!</p> <p><iframe width="100%" height="350" src=""></iframe></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/get-started.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,h,c,n,o,g,s,C,I,p,A,m,b,u,B,f,w,E,W,k,P,D,G,v,O,R,S,L,j,Y,x,H,F,J,N,X,Z,y,K,z,Q,M,T,U,q,V,_,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B" tabindex="-1">快速上手</h1>\n<h2 id="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h2>\n<p>Apache ECharts 支持多种下载方式,可以在下一篇教程<a href="zh/basics/download">安装</a>中查看所有方式。这里,我们以从 <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN 上获取为例,介绍如何快速安装。</p>\n<p>在 <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> 选择 <code>dist/echarts.js</code>,点击并保存为 <code>echarts.js</code> 文件。</p>\n<blockquote>\n<p>关于这些文件的介绍,可以在下一篇教程<a href="zh/basics/download">安装</a>中了解更多信息。</p>\n</blockquote>\n<h2 id="%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">引入 Apache ECharts</h2>\n<p>在刚才保存 <code>echarts.js</code> 的目录新建一个 <code>index.html</code> 文件,内容如下:</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8IS0tIOW8leWFpeWImuWImuS4i-i9veeahCBFQ2hhcnRzIOaWh-S7tiAtLT4KICAgIDxzY3JpcHQgc3JjPSJlY2hhcnRzLmpzIj48L3NjcmlwdD4KICA8L2hlYWQ-CjwvaHRtbD4\'" line-highlights="\'\'" />\n<p>打开这个 <code>index.html</code>,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。</p>\n<h2 id="%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8" tabindex="-1">绘制一个简单的图表</h2>\n<p>在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 <code></head></code> 之后,添加:</p>\n<md-code-block lang="html" code="\'PGJvZHk-CiAgPCEtLSDkuLogRUNoYXJ0cyDlh4blpIfkuIDkuKrlrprkuYnkuoblrr3pq5jnmoQgRE9NIC0tPgogIDxkaXYgaWQ9Im1haW4iIHN0eWxlPSJ3aWR0aDogNjAwcHg7aGVpZ2h0OjQwMHB4OyI-PC9kaXY-CjwvYm9keT4\'" line-highlights="\'\'" />\n<p>然后就可以通过 <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a> 方法生成一个简单的柱状图,下面是完整代码。</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8dGl0bGU-RUNoYXJ0czwvdGl0bGU-CiAgICA8IS0tIOW8leWFpeWImuWImuS4i-i9veeahCBFQ2hhcnRzIOaWh-S7tiAtLT4KICAgIDxzY3JpcHQgc3JjPSJlY2hhcnRzLm1pbi5qcyI-PC9zY3JpcHQ-CiAgPC9oZWFkPgogIDxib2R5PgogICAgPCEtLSDkuLogRUNoYXJ0cyDlh4blpIfkuIDkuKrlrprkuYnkuoblrr3pq5jnmoQgRE9NIC0tPgogICAgPGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICAgICAgLy8g5Z-65LqO5YeG5aSH5aW955qEZG9t77yM5Yid5aeL5YyWZWNoYXJ0c-WunuS-iwogICAgICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCiAgICAgIC8vIOaMh-WumuWbvuihqOeahOmFjee9rumhueWSjOaVsOaNrgogICAgICB2YXIgb3B0aW9uID0gewogICAgICAgIHRpdGxlOiB7CiAgICAgICAgICB0ZXh0OiAnRUNoYXJ0cyDlhaXpl6jnpLrkvosnCiAgICAgICAgfSwKICAgICAgICB0b29sdGlwOiB7fSwKICAgICAgICBsZWdlbmQ6IHsKICAgICAgICAgIGRhdGE6IFsn6ZSA6YePJ10KICAgICAgICB9LAogICAgICAgIHhBeGlzOiB7CiAgICAgICAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICAgICAgICB9LAogICAgICAgIHlBeGlzOiB7fSwKICAgICAgICBzZXJpZXM6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgICAgICAgfQogICAgICAgIF0KICAgICAgfTsKCiAgICAgIC8vIOS9v-eUqOWImuaMh-WumueahOmFjee9rumhueWSjOaVsOaNruaYvuekuuWbvuihqOOAggogICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwogICAgPC9zY3JpcHQ-CiAgPC9ib2R5Pgo8L2h0bWw-\'" line-highlights="\'\'" />\n<p>这样你的第一个图表就诞生了!</p>\n<p><md-example src="doc-example/getting-started"></md-example></p>\n',postPath:"zh/get-started"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:o},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:u},{title:"数据集",dir:B},{title:"数据转换",dir:f},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:j},{title:"堆叠折线图",dir:Y},{title:"区域面积图",dir:x},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:J},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:X}]},{title:"散点图",dir:Z,children:[{title:"基础散点图",dir:y}]}]},{title:K,dir:i,draft:t},{title:"跨平台方案",dir:z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:V,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:o},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:B},{title:"Data Transform",dir:f},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:P,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:S}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:j},{title:"Stacked Line",dir:Y},{title:"Area Chart",dir:x},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:J},{title:"Ring Style",dir:N},{title:"Rose Style",dir:X}]},{title:"Scatter",dir:Z,children:[{title:"Basic Scatter",dir:y}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:z,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:V,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/get-started",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/bar/bar-race/index.html b/handbook/zh/how-to/chart-types/bar/bar-race/index.html
index 38f0ead..48a70f3 100644
--- a/handbook/zh/how-to/chart-types/bar/bar-race/index.html
+++ b/handbook/zh/how-to/chart-types/bar/bar-race/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">动态排序柱状图</h1> <h2 id="%E5%9F%BA%E6%9C%AC%E8%AE%BE%E7%BD%AE" tabindex="-1">基本设置</h2> <p>动态排序柱状图是一种展示随时间变化的数据排名变化的图表,从 ECharts 5 开始内置支持。</p> <blockquote><p>动态排序柱状图通常是横向的柱条,如果想要采用纵向的柱条,只要把本教程中的 X 轴和 Y 轴相反设置即可。</p></blockquote> <ol><li><code>yAxis.realtimeSort</code> 设为 <code>true</code>,表示开启 Y 轴的动态排序效果</li> <li><code>yAxis.inverse</code> 设为 <code>true</code>,表示 Y 轴从下往上是从小到大的排列</li> <li><code>yAxis.animationDuration</code> 建议设为 <code>300</code>,表示第一次柱条排序动画的时长</li> <li><code>yAxis.animationDurationUpdate</code> 建议设为 <code>300</code>,表示第一次后柱条排序动画的时长</li> <li>如果想只显示前 <em>n</em> 名,将 <code>yAxis.max</code> 设为 <em>n - 1</em>,否则显示所有柱条</li> <li><code>xAxis.max</code> 建议设为 <code>'dataMax'</code> 表示用数据的最大值作为 X 轴最大值,视觉效果更好</li> <li>如果想要实时改变标签,需要将 <code>series.label.valueAnimation</code> 设为 <code>true</code></li> <li><code>animationDuration</code> 设为 <code>0</code>,表示第一份数据不需要从 <code>0</code> 开始动画(如果希望从 <code>0</code> 开始则设为和 <code>animationDurationUpdate</code> 相同的值)</li> <li><code>animationDurationUpdate</code> 建议设为 <code>3000</code> 表示每次更新动画时长,这一数值应与调用 <code>setOption</code> 改变数据的频率相同</li> <li>以 <code>animationDurationUpdate</code> 的频率调用 <code>setInterval</code>,更新数据值,显示下一个时间点对应的柱条排序</li></ol> <h2 id="%E7%A4%BA%E4%BE%8B" tabindex="-1">示例</h2> <p>完整的例子如下:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var data = [];
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">动态排序柱状图</h1> <h2 id="%E5%9F%BA%E6%9C%AC%E8%AE%BE%E7%BD%AE" tabindex="-1">基本设置</h2> <p>动态排序柱状图是一种展示随时间变化的数据排名变化的图表,从 ECharts 5 开始内置支持。</p> <blockquote><p>动态排序柱状图通常是横向的柱条,如果想要采用纵向的柱条,只要把本教程中的 X 轴和 Y 轴相反设置即可。</p></blockquote> <ol><li><code>yAxis.realtimeSort</code> 设为 <code>true</code>,表示开启 Y 轴的动态排序效果</li> <li><code>yAxis.inverse</code> 设为 <code>true</code>,表示 Y 轴从下往上是从小到大的排列</li> <li><code>yAxis.animationDuration</code> 建议设为 <code>300</code>,表示第一次柱条排序动画的时长</li> <li><code>yAxis.animationDurationUpdate</code> 建议设为 <code>300</code>,表示第一次后柱条排序动画的时长</li> <li>如果想只显示前 <em>n</em> 名,将 <code>yAxis.max</code> 设为 <em>n - 1</em>,否则显示所有柱条</li> <li><code>xAxis.max</code> 建议设为 <code>'dataMax'</code> 表示用数据的最大值作为 X 轴最大值,视觉效果更好</li> <li>如果想要实时改变标签,需要将 <code>series.label.valueAnimation</code> 设为 <code>true</code></li> <li><code>animationDuration</code> 设为 <code>0</code>,表示第一份数据不需要从 <code>0</code> 开始动画(如果希望从 <code>0</code> 开始则设为和 <code>animationDurationUpdate</code> 相同的值)</li> <li><code>animationDurationUpdate</code> 建议设为 <code>3000</code> 表示每次更新动画时长,这一数值应与调用 <code>setOption</code> 改变数据的频率相同</li> <li>以 <code>animationDurationUpdate</code> 的频率调用 <code>setInterval</code>,更新数据值,显示下一个时间点对应的柱条排序</li></ol> <h2 id="%E7%A4%BA%E4%BE%8B" tabindex="-1">示例</h2> <p>完整的例子如下:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var data = [];
for (let i = 0; i < 5; ++i) {
data.push(Math.round(Math.random() * 200));
}
@@ -113,7 +113,8 @@
<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/bar/bar-race.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,l,a,o,n,c,h,s,g,C,A,p,I,b,m,B,u,G,y,W,w,E,R,f,S,v,Y,D,F,H,K,X,x,k,Z,L,V,P,M,U,J,O,z,T,N,Q,_,j,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">动态排序柱状图</h1>\n<h2 id="%E5%9F%BA%E6%9C%AC%E8%AE%BE%E7%BD%AE" tabindex="-1">基本设置</h2>\n<p>动态排序柱状图是一种展示随时间变化的数据排名变化的图表,从 ECharts 5 开始内置支持。</p>\n<blockquote>\n<p>动态排序柱状图通常是横向的柱条,如果想要采用纵向的柱条,只要把本教程中的 X 轴和 Y 轴相反设置即可。</p>\n</blockquote>\n<ol>\n<li><code>yAxis.realtimeSort</code> 设为 <code>true</code>,表示开启 Y 轴的动态排序效果</li>\n<li><code>yAxis.inverse</code> 设为 <code>true</code>,表示 Y 轴从下往上是从小到大的排列</li>\n<li><code>yAxis.animationDuration</code> 建议设为 <code>300</code>,表示第一次柱条排序动画的时长</li>\n<li><code>yAxis.animationDurationUpdate</code> 建议设为 <code>300</code>,表示第一次后柱条排序动画的时长</li>\n<li>如果想只显示前 <em>n</em> 名,将 <code>yAxis.max</code> 设为 <em>n - 1</em>,否则显示所有柱条</li>\n<li><code>xAxis.max</code> 建议设为 <code>\'dataMax\'</code> 表示用数据的最大值作为 X 轴最大值,视觉效果更好</li>\n<li>如果想要实时改变标签,需要将 <code>series.label.valueAnimation</code> 设为 <code>true</code></li>\n<li><code>animationDuration</code> 设为 <code>0</code>,表示第一份数据不需要从 <code>0</code> 开始动画(如果希望从 <code>0</code> 开始则设为和 <code>animationDurationUpdate</code> 相同的值)</li>\n<li><code>animationDurationUpdate</code> 建议设为 <code>3000</code> 表示每次更新动画时长,这一数值应与调用 <code>setOption</code> 改变数据的频率相同</li>\n<li>以 <code>animationDurationUpdate</code> 的频率调用 <code>setInterval</code>,更新数据值,显示下一个时间点对应的柱条排序</li>\n</ol>\n<h2 id="%E7%A4%BA%E4%BE%8B" tabindex="-1">示例</h2>\n<p>完整的例子如下:</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbXTsKZm9yIChsZXQgaSA9IDA7IGkgPCA1OyArK2kpIHsKICBkYXRhLnB1c2goTWF0aC5yb3VuZChNYXRoLnJhbmRvbSgpICogMjAwKSk7Cn0KCm9wdGlvbiA9IHsKICB4QXhpczogewogICAgbWF4OiAnZGF0YU1heCcKICB9LAogIHlBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXSwKICAgIGludmVyc2U6IHRydWUsCiAgICBhbmltYXRpb25EdXJhdGlvbjogMzAwLAogICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMCwKICAgIG1heDogMiAvLyBvbmx5IHRoZSBsYXJnZXN0IDMgYmFycyB3aWxsIGJlIGRpc3BsYXllZAogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHJlYWx0aW1lU29ydDogdHJ1ZSwKICAgICAgbmFtZTogJ1gnLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogZGF0YSwKICAgICAgbGFiZWw6IHsKICAgICAgICBzaG93OiB0cnVlLAogICAgICAgIHBvc2l0aW9uOiAncmlnaHQnLAogICAgICAgIHZhbHVlQW5pbWF0aW9uOiB0cnVlCiAgICAgIH0KICAgIH0KICBdLAogIGxlZ2VuZDogewogICAgc2hvdzogdHJ1ZQogIH0sCiAgYW5pbWF0aW9uRHVyYXRpb246IDMwMDAsCiAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMDAsCiAgYW5pbWF0aW9uRWFzaW5nOiAnbGluZWFyJywKICBhbmltYXRpb25FYXNpbmdVcGRhdGU6ICdsaW5lYXInCn07CgpmdW5jdGlvbiB1cGRhdGUoKSB7CiAgdmFyIGRhdGEgPSBvcHRpb24uc2VyaWVzWzBdLmRhdGE7CiAgZm9yICh2YXIgaSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgICBpZiAoTWF0aC5yYW5kb20oKSA-IDAuOSkgewogICAgICBkYXRhW2ldICs9IE1hdGgucm91bmQoTWF0aC5yYW5kb20oKSAqIDIwMDApOwogICAgfSBlbHNlIHsKICAgICAgZGF0YVtpXSArPSBNYXRoLnJvdW5kKE1hdGgucmFuZG9tKCkgKiAyMDApOwogICAgfQogIH0KICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwp9CgpzZXRJbnRlcnZhbChmdW5jdGlvbigpIHsKICB1cGRhdGUoKTsKfSwgMzAwMCk7\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/bar/bar-race"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:A}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:b,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:B},{title:"数据集",dir:u},{title:"数据转换",dir:G},{title:"坐标系",dir:y,draft:i},{title:"坐标轴",dir:W},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:E}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:f,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:D,draft:i},{title:"阶梯瀑布图",dir:F},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:H,children:[{title:"基础折线图",dir:K},{title:"堆叠折线图",dir:X},{title:"区域面积图",dir:x},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:Z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:L},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:U}]}]},{title:J,dir:t,draft:i},{title:"跨平台方案",dir:O,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:z}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:J,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:A}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:b,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:B},{title:"Dataset",dir:u},{title:"Data Transform",dir:G},{title:"Coordinate",dir:y,draft:i},{title:"Axis",dir:W},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:E}]},{title:"How To Guides",dir:R,children:[{title:"Common Charts",dir:f,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:D,draft:i},{title:"Waterfall",dir:F}]},{title:"Line",dir:H,children:[{title:"Basic Line",dir:K},{title:"Stacked Line",dir:X},{title:"Area Chart",dir:x},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:Z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:L},{title:"Ring Style",dir:V},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:O,children:[{title:"Server Side Rendering",dir:z}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/bar/bar-race",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/bar/bar-race.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,l,a,o,n,c,h,s,g,C,A,p,I,b,m,B,u,G,y,W,w,E,R,f,S,v,Y,D,F,H,K,X,x,k,Z,L,V,P,M,U,J,O,z,T,N,Q,_,j,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">动态排序柱状图</h1>\n<h2 id="%E5%9F%BA%E6%9C%AC%E8%AE%BE%E7%BD%AE" tabindex="-1">基本设置</h2>\n<p>动态排序柱状图是一种展示随时间变化的数据排名变化的图表,从 ECharts 5 开始内置支持。</p>\n<blockquote>\n<p>动态排序柱状图通常是横向的柱条,如果想要采用纵向的柱条,只要把本教程中的 X 轴和 Y 轴相反设置即可。</p>\n</blockquote>\n<ol>\n<li><code>yAxis.realtimeSort</code> 设为 <code>true</code>,表示开启 Y 轴的动态排序效果</li>\n<li><code>yAxis.inverse</code> 设为 <code>true</code>,表示 Y 轴从下往上是从小到大的排列</li>\n<li><code>yAxis.animationDuration</code> 建议设为 <code>300</code>,表示第一次柱条排序动画的时长</li>\n<li><code>yAxis.animationDurationUpdate</code> 建议设为 <code>300</code>,表示第一次后柱条排序动画的时长</li>\n<li>如果想只显示前 <em>n</em> 名,将 <code>yAxis.max</code> 设为 <em>n - 1</em>,否则显示所有柱条</li>\n<li><code>xAxis.max</code> 建议设为 <code>\'dataMax\'</code> 表示用数据的最大值作为 X 轴最大值,视觉效果更好</li>\n<li>如果想要实时改变标签,需要将 <code>series.label.valueAnimation</code> 设为 <code>true</code></li>\n<li><code>animationDuration</code> 设为 <code>0</code>,表示第一份数据不需要从 <code>0</code> 开始动画(如果希望从 <code>0</code> 开始则设为和 <code>animationDurationUpdate</code> 相同的值)</li>\n<li><code>animationDurationUpdate</code> 建议设为 <code>3000</code> 表示每次更新动画时长,这一数值应与调用 <code>setOption</code> 改变数据的频率相同</li>\n<li>以 <code>animationDurationUpdate</code> 的频率调用 <code>setInterval</code>,更新数据值,显示下一个时间点对应的柱条排序</li>\n</ol>\n<h2 id="%E7%A4%BA%E4%BE%8B" tabindex="-1">示例</h2>\n<p>完整的例子如下:</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbXTsKZm9yIChsZXQgaSA9IDA7IGkgPCA1OyArK2kpIHsKICBkYXRhLnB1c2goTWF0aC5yb3VuZChNYXRoLnJhbmRvbSgpICogMjAwKSk7Cn0KCm9wdGlvbiA9IHsKICB4QXhpczogewogICAgbWF4OiAnZGF0YU1heCcKICB9LAogIHlBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXSwKICAgIGludmVyc2U6IHRydWUsCiAgICBhbmltYXRpb25EdXJhdGlvbjogMzAwLAogICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMCwKICAgIG1heDogMiAvLyBvbmx5IHRoZSBsYXJnZXN0IDMgYmFycyB3aWxsIGJlIGRpc3BsYXllZAogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHJlYWx0aW1lU29ydDogdHJ1ZSwKICAgICAgbmFtZTogJ1gnLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogZGF0YSwKICAgICAgbGFiZWw6IHsKICAgICAgICBzaG93OiB0cnVlLAogICAgICAgIHBvc2l0aW9uOiAncmlnaHQnLAogICAgICAgIHZhbHVlQW5pbWF0aW9uOiB0cnVlCiAgICAgIH0KICAgIH0KICBdLAogIGxlZ2VuZDogewogICAgc2hvdzogdHJ1ZQogIH0sCiAgYW5pbWF0aW9uRHVyYXRpb246IDMwMDAsCiAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMDAsCiAgYW5pbWF0aW9uRWFzaW5nOiAnbGluZWFyJywKICBhbmltYXRpb25FYXNpbmdVcGRhdGU6ICdsaW5lYXInCn07CgpmdW5jdGlvbiB1cGRhdGUoKSB7CiAgdmFyIGRhdGEgPSBvcHRpb24uc2VyaWVzWzBdLmRhdGE7CiAgZm9yICh2YXIgaSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgICBpZiAoTWF0aC5yYW5kb20oKSA-IDAuOSkgewogICAgICBkYXRhW2ldICs9IE1hdGgucm91bmQoTWF0aC5yYW5kb20oKSAqIDIwMDApOwogICAgfSBlbHNlIHsKICAgICAgZGF0YVtpXSArPSBNYXRoLnJvdW5kKE1hdGgucmFuZG9tKCkgKiAyMDApOwogICAgfQogIH0KICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwp9CgpzZXRJbnRlcnZhbChmdW5jdGlvbigpIHsKICB1cGRhdGUoKTsKfSwgMzAwMCk7\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/bar/bar-race"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:A}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:b,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:B},{title:"数据集",dir:u},{title:"数据转换",dir:G},{title:"坐标系",dir:y,draft:i},{title:"坐标轴",dir:W},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:E}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:f,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:D,draft:i},{title:"阶梯瀑布图",dir:F},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:H,children:[{title:"基础折线图",dir:K},{title:"堆叠折线图",dir:X},{title:"区域面积图",dir:x},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:Z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:L},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:U}]}]},{title:J,dir:t,draft:i},{title:"跨平台方案",dir:O,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:z}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:J,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:A}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:b,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:B},{title:"Dataset",dir:u},{title:"Data Transform",dir:G},{title:"Coordinate",dir:y,draft:i},{title:"Axis",dir:W},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:E}]},{title:"How To Guides",dir:R,children:[{title:"Common Charts",dir:f,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:D,draft:i},{title:"Waterfall",dir:F}]},{title:"Line",dir:H,children:[{title:"Basic Line",dir:K},{title:"Stacked Line",dir:X},{title:"Area Chart",dir:x},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:Z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:L},{title:"Ring Style",dir:V},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:O,children:[{title:"Server Side Rendering",dir:z}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/bar/bar-race",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/bar/basic-bar/index.html b/handbook/zh/how-to/chart-types/bar/basic-bar/index.html
index e1ecdc0..ddfae21 100644
--- a/handbook/zh/how-to/chart-types/bar/basic-bar/index.html
+++ b/handbook/zh/how-to/chart-types/bar/basic-bar/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E6%9C%AC%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">基本柱状图</h1> <p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p> <p>设置柱状图的方式,是将 <code>series</code> 的 <code>type</code> 设为 <code>'bar'</code>。</p> <p><a href="https://echarts.apache.org/option.html#series-bar">[配置项手册]</a></p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">最简单的柱状图</h2> <p>最简单的柱状图可以这样设置:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E6%9C%AC%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">基本柱状图</h1> <p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p> <p>设置柱状图的方式,是将 <code>series</code> 的 <code>type</code> 设为 <code>'bar'</code>。</p> <p><a href="https://echarts.apache.org/option.html#series-bar">[配置项手册]</a></p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">最简单的柱状图</h2> <p>最简单的柱状图可以这样设置:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
@@ -197,7 +197,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/bar/basic-bar.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,d,r,a,o,l,c,n,C,s,g,h,I,A,p,B,b,w,E,y,m,f,D,u,O,L,M,S,F,W,J,G,R,X,Y,x,H,k,v,z,K,U,V,j,Q,T,N,P,Z,_,q,$,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E6%9C%AC%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">基本柱状图</h1>\n<p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p>\n<p>设置柱状图的方式,是将 <code>series</code> 的 <code>type</code> 设为 <code>\'bar\'</code>。</p>\n<p><a href="https://echarts.apache.org/option.html#series-bar">[配置项手册]</a></p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">最简单的柱状图</h2>\n<p>最简单的柱状图可以这样设置:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>在这个例子中,横坐标是类目型的,因此需要在 <code>xAxis</code> 中指定对应的值;而纵坐标是数值型的,可以根据 <code>series</code> 中的 <code>data</code>,自动生成对应的坐标范围。</p>\n<h2 id="%E5%A4%9A%E7%B3%BB%E5%88%97%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">多系列的柱状图</h2>\n<p>我们可以用一个系列表示一组相关的数据,如果需要实现多系列的柱状图,只需要在 <code>series</code> 多添加一项就可以了——</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzI2LCAyNCwgMTgsIDIyLCAyMywgMjAsIDI3XQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E6%9F%B1%E7%8A%B6%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">柱状图样式设置</h2>\n<h3 id="%E6%9F%B1%E6%9D%A1%E6%A0%B7%E5%BC%8F" tabindex="-1">柱条样式</h3>\n<p>柱条的样式可以通过 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a> 设置,包括:</p>\n<ul>\n<li>柱条的颜色(<code>color</code>);</li>\n<li>柱条的描边颜色(<code>borderColor</code>)、宽度(<code>borderWidth</code>)、样式(<code>borderType</code>);</li>\n<li>柱条圆角的半径(<code>barBorderRadius</code>);</li>\n<li>柱条透明度(<code>opacity</code>);</li>\n<li>阴影(<code>shadowBlur</code>、<code>shadowColor</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>)。</li>\n</ul>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>在这个例子中,我们通过设置柱状图对应 <code>series</code> 的<code>itemStyle</code>,设置了柱条的样式。完整的配置项及其用法请参见配置项手册 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a>。</p>\n<h3 id="%E6%9F%B1%E6%9D%A1%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6" tabindex="-1">柱条宽度和高度</h3>\n<p>柱条宽度可以通过 <a href="https://echarts.apache.org/option.html##series-bar.barWidth"><code>barWidth</code></a> 设置。比如在下面的例子中,将 <code>barWidth</code> 设为 <code>\'20%\'</code>,表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中,每个系列有 5 个数据,20% 的类目宽度也就是整个 x 轴宽度的 4%。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>另外,还可以设置 <a href="https://echarts.apache.org/option.html#series-bar.barMaxWidth"><code>barMaxWidth</code></a> 限制柱条的最大宽度。对于一些特别小的数据,我们也可以为柱条指定最小高度 <a href="https://echarts.apache.org/option.html#series-bar.barMinHeight"><code>barMinHeight</code></a>,当数据对应的柱条高度小于该值时,柱条高度将采用这个最小高度。</p>\n<h3 id="%E6%9F%B1%E6%9D%A1%E9%97%B4%E8%B7%9D" tabindex="-1">柱条间距</h3>\n<p>柱条间距分为两种,一种是不同系列在同一类目下的距离 <a href="https://echarts.apache.org/option.html#series-bar.barWidth"><code>barWidth</code></a>,另一种是类目与类目的距离 <a href="https://echarts.apache.org/option.html#series-bar.barCategoryGap"><code>barCategoryGap</code></a>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDE4XSwKICAgICAgYmFyR2FwOiAnMjAlJywKICAgICAgYmFyQ2F0ZWdvcnlHYXA6ICc0MCUnCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzEyLCAxNCwgOSwgOSwgMTFdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>在这个例子中,<code>barGap</code> 被设为 <code>\'20%\'</code>,这意味着每个类目(比如 <code>A</code>)下的两个柱子之间的距离,相对于柱条宽度的百分比。而 <code>barCategoryGap</code> 是 <code>\'40%\'</code>,意味着柱条每侧空余的距离,相对于柱条宽度的百分比。</p>\n<p>通常而言,设置 <code>barGap</code> 及 <code>barCategoryGap</code> 后,就不需要设置 <code>barWidth</code> 了,这时候的宽度会自动调整。如果有需要的话,可以设置 <code>barMaxWidth</code> 作为柱条宽度的上限,当图表宽度很大的时候,柱条宽度也不会太宽。</p>\n<blockquote>\n<p>在同一坐标系上,此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效,并且是对此坐标系中所有柱状图系列生效。</p>\n</blockquote>\n<h3 id="%E4%B8%BA%E6%9F%B1%E6%9D%A1%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E8%89%B2" tabindex="-1">为柱条添加背景色</h3>\n<p>有时,我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始,这一功能可以简单地用 <a href="https://echarts.apache.org/option.html#series-bar.showBackground"><code>showBackground</code></a> 开启,并且可以通过 <a href="https://echarts.apache.org/option.html#series-bar.backgroundStyle"><code>backgroundStyle</code></a> 配置。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzaG93QmFja2dyb3VuZDogdHJ1ZSwKICAgICAgYmFja2dyb3VuZFN0eWxlOiB7CiAgICAgICAgY29sb3I6ICdyZ2JhKDIyMCwgMjIwLCAyMjAsIDAuOCknCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/bar/basic-bar"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:c,draft:i},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:C},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:w},{title:"数据集",dir:E},{title:"数据转换",dir:y},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:f},{title:"视觉映射",dir:t},{title:"图例",dir:D},{title:"事件与行为",dir:u}]},{title:"应用篇",dir:O,children:[{title:"常用图表类型",dir:L,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:M},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:F},{title:"极坐标系柱状图",dir:W,draft:i},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:R},{title:"堆叠折线图",dir:X},{title:"区域面积图",dir:Y},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:U}]}]},{title:V,dir:e,draft:i},{title:"跨平台方案",dir:j,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:P,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:V,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:l},{title:"Resources",dir:c,draft:i},{title:"Inspiration",dir:n},{title:"Get Help",dir:C},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:w},{title:"Dataset",dir:E},{title:"Data Transform",dir:y},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:f},{title:"Visual Mapping",dir:t},{title:"Legend",dir:D},{title:"Event and Action",dir:u}]},{title:"How To Guides",dir:O,children:[{title:"Common Charts",dir:L,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:M},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:F},{title:"Bar Polar",dir:W,draft:i},{title:"Waterfall",dir:J}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:R},{title:"Stacked Line",dir:X},{title:"Area Chart",dir:Y},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:v},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:P,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/bar/basic-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/bar/basic-bar.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,d,r,a,o,l,c,n,C,s,g,h,I,A,p,B,b,w,E,y,m,f,D,u,O,L,M,S,F,W,J,G,R,X,Y,x,H,k,v,z,K,U,V,j,Q,T,N,P,Z,_,q,$,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E6%9C%AC%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">基本柱状图</h1>\n<p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p>\n<p>设置柱状图的方式,是将 <code>series</code> 的 <code>type</code> 设为 <code>\'bar\'</code>。</p>\n<p><a href="https://echarts.apache.org/option.html#series-bar">[配置项手册]</a></p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">最简单的柱状图</h2>\n<p>最简单的柱状图可以这样设置:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>在这个例子中,横坐标是类目型的,因此需要在 <code>xAxis</code> 中指定对应的值;而纵坐标是数值型的,可以根据 <code>series</code> 中的 <code>data</code>,自动生成对应的坐标范围。</p>\n<h2 id="%E5%A4%9A%E7%B3%BB%E5%88%97%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">多系列的柱状图</h2>\n<p>我们可以用一个系列表示一组相关的数据,如果需要实现多系列的柱状图,只需要在 <code>series</code> 多添加一项就可以了——</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzI2LCAyNCwgMTgsIDIyLCAyMywgMjAsIDI3XQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E6%9F%B1%E7%8A%B6%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">柱状图样式设置</h2>\n<h3 id="%E6%9F%B1%E6%9D%A1%E6%A0%B7%E5%BC%8F" tabindex="-1">柱条样式</h3>\n<p>柱条的样式可以通过 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a> 设置,包括:</p>\n<ul>\n<li>柱条的颜色(<code>color</code>);</li>\n<li>柱条的描边颜色(<code>borderColor</code>)、宽度(<code>borderWidth</code>)、样式(<code>borderType</code>);</li>\n<li>柱条圆角的半径(<code>barBorderRadius</code>);</li>\n<li>柱条透明度(<code>opacity</code>);</li>\n<li>阴影(<code>shadowBlur</code>、<code>shadowColor</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>)。</li>\n</ul>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>在这个例子中,我们通过设置柱状图对应 <code>series</code> 的<code>itemStyle</code>,设置了柱条的样式。完整的配置项及其用法请参见配置项手册 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a>。</p>\n<h3 id="%E6%9F%B1%E6%9D%A1%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6" tabindex="-1">柱条宽度和高度</h3>\n<p>柱条宽度可以通过 <a href="https://echarts.apache.org/option.html##series-bar.barWidth"><code>barWidth</code></a> 设置。比如在下面的例子中,将 <code>barWidth</code> 设为 <code>\'20%\'</code>,表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中,每个系列有 5 个数据,20% 的类目宽度也就是整个 x 轴宽度的 4%。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>另外,还可以设置 <a href="https://echarts.apache.org/option.html#series-bar.barMaxWidth"><code>barMaxWidth</code></a> 限制柱条的最大宽度。对于一些特别小的数据,我们也可以为柱条指定最小高度 <a href="https://echarts.apache.org/option.html#series-bar.barMinHeight"><code>barMinHeight</code></a>,当数据对应的柱条高度小于该值时,柱条高度将采用这个最小高度。</p>\n<h3 id="%E6%9F%B1%E6%9D%A1%E9%97%B4%E8%B7%9D" tabindex="-1">柱条间距</h3>\n<p>柱条间距分为两种,一种是不同系列在同一类目下的距离 <a href="https://echarts.apache.org/option.html#series-bar.barWidth"><code>barWidth</code></a>,另一种是类目与类目的距离 <a href="https://echarts.apache.org/option.html#series-bar.barCategoryGap"><code>barCategoryGap</code></a>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDE4XSwKICAgICAgYmFyR2FwOiAnMjAlJywKICAgICAgYmFyQ2F0ZWdvcnlHYXA6ICc0MCUnCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzEyLCAxNCwgOSwgOSwgMTFdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>在这个例子中,<code>barGap</code> 被设为 <code>\'20%\'</code>,这意味着每个类目(比如 <code>A</code>)下的两个柱子之间的距离,相对于柱条宽度的百分比。而 <code>barCategoryGap</code> 是 <code>\'40%\'</code>,意味着柱条每侧空余的距离,相对于柱条宽度的百分比。</p>\n<p>通常而言,设置 <code>barGap</code> 及 <code>barCategoryGap</code> 后,就不需要设置 <code>barWidth</code> 了,这时候的宽度会自动调整。如果有需要的话,可以设置 <code>barMaxWidth</code> 作为柱条宽度的上限,当图表宽度很大的时候,柱条宽度也不会太宽。</p>\n<blockquote>\n<p>在同一坐标系上,此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效,并且是对此坐标系中所有柱状图系列生效。</p>\n</blockquote>\n<h3 id="%E4%B8%BA%E6%9F%B1%E6%9D%A1%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E8%89%B2" tabindex="-1">为柱条添加背景色</h3>\n<p>有时,我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始,这一功能可以简单地用 <a href="https://echarts.apache.org/option.html#series-bar.showBackground"><code>showBackground</code></a> 开启,并且可以通过 <a href="https://echarts.apache.org/option.html#series-bar.backgroundStyle"><code>backgroundStyle</code></a> 配置。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzaG93QmFja2dyb3VuZDogdHJ1ZSwKICAgICAgYmFja2dyb3VuZFN0eWxlOiB7CiAgICAgICAgY29sb3I6ICdyZ2JhKDIyMCwgMjIwLCAyMjAsIDAuOCknCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/bar/basic-bar"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:c,draft:i},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:C},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:w},{title:"数据集",dir:E},{title:"数据转换",dir:y},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:f},{title:"视觉映射",dir:t},{title:"图例",dir:D},{title:"事件与行为",dir:u}]},{title:"应用篇",dir:O,children:[{title:"常用图表类型",dir:L,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:M},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:F},{title:"极坐标系柱状图",dir:W,draft:i},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:R},{title:"堆叠折线图",dir:X},{title:"区域面积图",dir:Y},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:U}]}]},{title:V,dir:e,draft:i},{title:"跨平台方案",dir:j,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:P,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:V,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:l},{title:"Resources",dir:c,draft:i},{title:"Inspiration",dir:n},{title:"Get Help",dir:C},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:w},{title:"Dataset",dir:E},{title:"Data Transform",dir:y},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:f},{title:"Visual Mapping",dir:t},{title:"Legend",dir:D},{title:"Event and Action",dir:u}]},{title:"How To Guides",dir:O,children:[{title:"Common Charts",dir:L,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:M},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:F},{title:"Bar Polar",dir:W,draft:i},{title:"Waterfall",dir:J}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:R},{title:"Stacked Line",dir:X},{title:"Area Chart",dir:Y},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:v},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:P,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/bar/basic-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/bar/stacked-bar/index.html b/handbook/zh/how-to/chart-types/bar/stacked-bar/index.html
index 4ef950f..50bb52a 100644
--- a/handbook/zh/how-to/chart-types/bar/stacked-bar/index.html
+++ b/handbook/zh/how-to/chart-types/bar/stacked-bar/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">堆叠柱状图</h1> <p>有时候,我们不仅希望知道不同系列各自的数值,还希望知道它们之和的变化,这时候通常使用堆积柱状图图来表现。顾名思义,堆积柱状图就是一个系列的数值“堆积”在另一个系列上,因而从他们的高度总和就能表达总量的变化。</p> <p>使用 EChart 实现堆积折线图的方法非常简单,只需要给一个系列的 <code>stack</code> 值设置一个字符串类型的值,这一个值表示该系列堆积的类别。也就是说,拥有同样 <code>stack</code> 值的系列将堆积在一组。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">堆叠柱状图</h1> <p>有时候,我们不仅希望知道不同系列各自的数值,还希望知道它们之和的变化,这时候通常使用堆积柱状图图来表现。顾名思义,堆积柱状图就是一个系列的数值“堆积”在另一个系列上,因而从他们的高度总和就能表达总量的变化。</p> <p>使用 EChart 实现堆积折线图的方法非常简单,只需要给一个系列的 <code>stack</code> 值设置一个字符串类型的值,这一个值表示该系列堆积的类别。也就是说,拥有同样 <code>stack</code> 值的系列将堆积在一组。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
@@ -41,7 +41,8 @@
stack<span class="token operator">:</span> <span class="token string">'x'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>在这个例子中,第二个系列所在的位置是在第一个系列的位置的基础上,上升了第二个系列数值对应的高度。因此,从第二个系列的位置,就能看出这两者总和的变化趋势。</p> <blockquote><p><code>stack</code> 的取值用来表明哪些系列将被堆积在一起,理论上只要取值相同即可,具体的取值并没有什么区别。但在实际的应用中,我们建议使用一些有意义的字符串方便阅读。</p> <p>比如,在一个统计男女人数的图中,有四个系列,“成年男性”和“男孩”系列需要进行堆积,“成年女性”和“女孩”系列需要堆积。这时,这两组的的 <code>stack</code> 值就建议分别设为 <code>'男'</code> 和 <code>'女'</code>。虽然使用 <code>'a'</code> 和 <code>'b'</code> 这样没有意义的字符串也能实现同样的效果,但是代码的可阅读性就差了。</p></blockquote></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/bar/stacked-bar.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,c,n,o,s,h,p,g,C,b,f,I,A,m,u,B,w,E,k,S,v,D,y,P,R,x,L,G,z,H,M,J,K,O,V,F,T,W,_,N,U,X,Y,Q,j,q,Z,$,tt,it,et){return{layout:"default",data:[{html:"<h1 id=\"%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE\" tabindex=\"-1\">堆叠柱状图</h1>\n<p>有时候,我们不仅希望知道不同系列各自的数值,还希望知道它们之和的变化,这时候通常使用堆积柱状图图来表现。顾名思义,堆积柱状图就是一个系列的数值“堆积”在另一个系列上,因而从他们的高度总和就能表达总量的变化。</p>\n<p>使用 EChart 实现堆积折线图的方法非常简单,只需要给一个系列的 <code>stack</code> 值设置一个字符串类型的值,这一个值表示该系列堆积的类别。也就是说,拥有同样 <code>stack</code> 值的系列将堆积在一组。</p>\n<md-live lang=\"js\" code=\"'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07'\" v-bind=\"{}\" />\n<p>在这个例子中,第二个系列所在的位置是在第一个系列的位置的基础上,上升了第二个系列数值对应的高度。因此,从第二个系列的位置,就能看出这两者总和的变化趋势。</p>\n<blockquote>\n<p><code>stack</code> 的取值用来表明哪些系列将被堆积在一起,理论上只要取值相同即可,具体的取值并没有什么区别。但在实际的应用中,我们建议使用一些有意义的字符串方便阅读。</p>\n<p>比如,在一个统计男女人数的图中,有四个系列,“成年男性”和“男孩”系列需要进行堆积,“成年女性”和“女孩”系列需要堆积。这时,这两组的的 <code>stack</code> 值就建议分别设为 <code>'男'</code> 和 <code>'女'</code>。虽然使用 <code>'a'</code> 和 <code>'b'</code> 这样没有意义的字符串也能实现同样的效果,但是代码的可阅读性就差了。</p>\n</blockquote>\n",postPath:"zh/how-to/chart-types/bar/stacked-bar"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:c},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:C}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:I,draft:t},{title:"系列",dir:A,draft:t},{title:"样式",dir:m},{title:"数据集",dir:u},{title:"数据转换",dir:B},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:x,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:W}]}]},{title:_,dir:i,draft:t},{title:"跨平台方案",dir:N,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Z,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:_,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:c},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:C}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:A,draft:t},{title:"Style",dir:m},{title:"Dataset",dir:u},{title:"Data Transform",dir:B},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:x,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:N,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Z,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/bar/stacked-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>在这个例子中,第二个系列所在的位置是在第一个系列的位置的基础上,上升了第二个系列数值对应的高度。因此,从第二个系列的位置,就能看出这两者总和的变化趋势。</p> <blockquote><p><code>stack</code> 的取值用来表明哪些系列将被堆积在一起,理论上只要取值相同即可,具体的取值并没有什么区别。但在实际的应用中,我们建议使用一些有意义的字符串方便阅读。</p> <p>比如,在一个统计男女人数的图中,有四个系列,“成年男性”和“男孩”系列需要进行堆积,“成年女性”和“女孩”系列需要堆积。这时,这两组的的 <code>stack</code> 值就建议分别设为 <code>'男'</code> 和 <code>'女'</code>。虽然使用 <code>'a'</code> 和 <code>'b'</code> 这样没有意义的字符串也能实现同样的效果,但是代码的可阅读性就差了。</p></blockquote></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/bar/stacked-bar.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,c,n,o,s,h,p,g,C,b,f,I,A,m,u,B,w,E,k,S,v,D,y,P,R,x,L,G,z,H,M,J,K,O,V,F,T,W,_,N,U,X,Y,Q,j,q,Z,$,tt,it,et){return{layout:"default",data:[{html:"<h1 id=\"%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE\" tabindex=\"-1\">堆叠柱状图</h1>\n<p>有时候,我们不仅希望知道不同系列各自的数值,还希望知道它们之和的变化,这时候通常使用堆积柱状图图来表现。顾名思义,堆积柱状图就是一个系列的数值“堆积”在另一个系列上,因而从他们的高度总和就能表达总量的变化。</p>\n<p>使用 EChart 实现堆积折线图的方法非常简单,只需要给一个系列的 <code>stack</code> 值设置一个字符串类型的值,这一个值表示该系列堆积的类别。也就是说,拥有同样 <code>stack</code> 值的系列将堆积在一组。</p>\n<md-live lang=\"js\" code=\"'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07'\" v-bind=\"{}\" />\n<p>在这个例子中,第二个系列所在的位置是在第一个系列的位置的基础上,上升了第二个系列数值对应的高度。因此,从第二个系列的位置,就能看出这两者总和的变化趋势。</p>\n<blockquote>\n<p><code>stack</code> 的取值用来表明哪些系列将被堆积在一起,理论上只要取值相同即可,具体的取值并没有什么区别。但在实际的应用中,我们建议使用一些有意义的字符串方便阅读。</p>\n<p>比如,在一个统计男女人数的图中,有四个系列,“成年男性”和“男孩”系列需要进行堆积,“成年女性”和“女孩”系列需要堆积。这时,这两组的的 <code>stack</code> 值就建议分别设为 <code>'男'</code> 和 <code>'女'</code>。虽然使用 <code>'a'</code> 和 <code>'b'</code> 这样没有意义的字符串也能实现同样的效果,但是代码的可阅读性就差了。</p>\n</blockquote>\n",postPath:"zh/how-to/chart-types/bar/stacked-bar"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:c},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:C}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:I,draft:t},{title:"系列",dir:A,draft:t},{title:"样式",dir:m},{title:"数据集",dir:u},{title:"数据转换",dir:B},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:x,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:W}]}]},{title:_,dir:i,draft:t},{title:"跨平台方案",dir:N,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Z,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:_,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:c},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:C}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:A,draft:t},{title:"Style",dir:m},{title:"Dataset",dir:u},{title:"Data Transform",dir:B},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:x,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:N,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Z,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/bar/stacked-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/bar/waterfall/index.html b/handbook/zh/how-to/chart-types/bar/waterfall/index.html
index 447af2f..ac2ed14 100644
--- a/handbook/zh/how-to/chart-types/bar/waterfall/index.html
+++ b/handbook/zh/how-to/chart-types/bar/waterfall/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E9%98%B6%E6%A2%AF%E7%80%91%E5%B8%83%E5%9B%BE" tabindex="-1">阶梯瀑布图</h1> <p>Apache ECharts 中并没有单独的瀑布图类型,但是我们可以使用堆叠的柱状图模拟该效果。</p> <p>假设数据数组中的值是表示对前一个值的增减:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">900</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">393</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">108</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">154</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">178</span><span class="token punctuation">,</span> <span class="token number">286</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">119</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">361</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">203</span><span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>也就是第一个数据是 <code>900</code>,第二个数据 <code>345</code> 表示的是在 <code>900</code> 的基础上增加了 <code>345</code>……将这个数据展示为阶梯瀑布图时,我们可以使用三个系列:第一个是不可交互的透明系列,用来实现“悬空”的柱状图效果;第二个系列用来表示正数;第二个系列用来表示负数。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E9%98%B6%E6%A2%AF%E7%80%91%E5%B8%83%E5%9B%BE" tabindex="-1">阶梯瀑布图</h1> <p>Apache ECharts 中并没有单独的瀑布图类型,但是我们可以使用堆叠的柱状图模拟该效果。</p> <p>假设数据数组中的值是表示对前一个值的增减:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">900</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">393</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">108</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">154</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">178</span><span class="token punctuation">,</span> <span class="token number">286</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">119</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">361</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">203</span><span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>也就是第一个数据是 <code>900</code>,第二个数据 <code>345</code> 表示的是在 <code>900</code> 的基础上增加了 <code>345</code>……将这个数据展示为阶梯瀑布图时,我们可以使用三个系列:第一个是不可交互的透明系列,用来实现“悬空”的柱状图效果;第二个系列用来表示正数;第二个系列用来表示负数。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
var help = [];
var positive = [];
var negative = [];
@@ -169,7 +169,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/bar/waterfall.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,r,d,l,a,g,C,I,c,o,s,n,A,h,p,w,b,B,G,m,S,f,H,Z,K,L,y,u,R,X,D,E,M,T,V,z,k,N,Y,v,x,J,O,F,P,W,U,j,Q,_,$,q,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E9%98%B6%E6%A2%AF%E7%80%91%E5%B8%83%E5%9B%BE" tabindex="-1">阶梯瀑布图</h1>\n<p>Apache ECharts 中并没有单独的瀑布图类型,但是我们可以使用堆叠的柱状图模拟该效果。</p>\n<p>假设数据数组中的值是表示对前一个值的增减:</p>\n<md-code-block lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107\'" line-highlights="\'\'" />\n<p>也就是第一个数据是 <code>900</code>,第二个数据 <code>345</code> 表示的是在 <code>900</code> 的基础上增加了 <code>345</code>……将这个数据展示为阶梯瀑布图时,我们可以使用三个系列:第一个是不可交互的透明系列,用来实现“悬空”的柱状图效果;第二个系列用来表示正数;第二个系列用来表示负数。</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107CnZhciBoZWxwID0gW107CnZhciBwb3NpdGl2ZSA9IFtdOwp2YXIgbmVnYXRpdmUgPSBbXTsKZm9yICh2YXIgaSA9IDAsIHN1bSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgaWYgKGRhdGFbaV0gPj0gMCkgewogICAgcG9zaXRpdmUucHVzaChkYXRhW2ldKTsKICAgIG5lZ2F0aXZlLnB1c2goJy0nKTsKICB9IGVsc2UgewogICAgcG9zaXRpdmUucHVzaCgnLScpOwogICAgbmVnYXRpdmUucHVzaCgtZGF0YVtpXSk7CiAgfQoKICBpZiAoaSA9PT0gMCkgewogICAgaGVscC5wdXNoKDApOwogIH0gZWxzZSB7CiAgICBzdW0gKz0gZGF0YVtpIC0gMV07CiAgICBpZiAoZGF0YVtpXSA8IDApIHsKICAgICAgaGVscC5wdXNoKHN1bSArIGRhdGFbaV0pOwogICAgfSBlbHNlIHsKICAgICAgaGVscC5wdXNoKHN1bSk7CiAgICB9CiAgfQp9CgpvcHRpb24gPSB7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICdXYXRlcmZhbGwnCiAgfSwKICBncmlkOiB7CiAgICBsZWZ0OiAnMyUnLAogICAgcmlnaHQ6ICc0JScsCiAgICBib3R0b206ICczJScsCiAgICBjb250YWluTGFiZWw6IHRydWUKICB9LAogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgc3BsaXRMaW5lOiB7IHNob3c6IGZhbHNlIH0sCiAgICBkYXRhOiAoZnVuY3Rpb24oKSB7CiAgICAgIHZhciBsaXN0ID0gW107CiAgICAgIGZvciAodmFyIGkgPSAxOyBpIDw9IDExOyBpKyspIHsKICAgICAgICBsaXN0LnB1c2goJ09jdC8nICsgaSk7CiAgICAgIH0KICAgICAgcmV0dXJuIGxpc3Q7CiAgICB9KSgpCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgYmFyQm9yZGVyQ29sb3I6ICdyZ2JhKDAsMCwwLDApJywKICAgICAgICAgIGNvbG9yOiAncmdiYSgwLDAsMCwwKScKICAgICAgICB9LAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBiYXJCb3JkZXJDb2xvcjogJ3JnYmEoMCwwLDAsMCknLAogICAgICAgICAgY29sb3I6ICdyZ2JhKDAsMCwwLDApJwogICAgICAgIH0KICAgICAgfSwKICAgICAgZGF0YTogaGVscAogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ3Bvc2l0aXZlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAnYWxsJywKICAgICAgZGF0YTogcG9zaXRpdmUKICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICduZWdhdGl2ZScsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGRhdGE6IG5lZ2F0aXZlLAogICAgICBpdGVtU3R5bGU6IHsKICAgICAgICBjb2xvcjogJyNmMzMnCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/bar/waterfall"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:C,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:c},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:n},{title:5.2,dir:A}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:w,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:B},{title:"数据集",dir:G},{title:"数据转换",dir:m},{title:"坐标系",dir:S,draft:i},{title:"坐标轴",dir:f},{title:"视觉映射",dir:e},{title:"图例",dir:H},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:K,children:[{title:"常用图表类型",dir:L,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:u},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:X,draft:i},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:E,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:Y},{title:"南丁格尔图(玫瑰图)",dir:v}]},{title:"散点图",dir:x,children:[{title:"基础散点图",dir:J}]}]},{title:O,dir:t,draft:i},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:P}]},{title:"数据处理",dir:W,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:j,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:i}]}]},{title:"最佳实践",dir:q,children:[{title:O,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:g},{title:"Resources",dir:C,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:c},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:n},{title:5.2,dir:A}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:w,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:B},{title:"Dataset",dir:G},{title:"Data Transform",dir:m},{title:"Coordinate",dir:S,draft:i},{title:"Axis",dir:f},{title:"Visual Mapping",dir:e},{title:"Legend",dir:H},{title:"Event and Action",dir:Z}]},{title:"How To Guides",dir:K,children:[{title:"Common Charts",dir:L,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:u},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:X,draft:i},{title:"Waterfall",dir:D}]},{title:"Line",dir:E,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:Y},{title:"Rose Style",dir:v}]},{title:"Scatter",dir:x,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:P}]},{title:"Data",dir:W,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:j,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:i}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/bar/waterfall",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/bar/waterfall.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,r,d,l,a,g,C,I,c,o,s,n,A,h,p,w,b,B,G,m,S,f,H,Z,K,L,y,u,R,X,D,E,M,T,V,z,k,N,Y,v,x,J,O,F,P,W,U,j,Q,_,$,q,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E9%98%B6%E6%A2%AF%E7%80%91%E5%B8%83%E5%9B%BE" tabindex="-1">阶梯瀑布图</h1>\n<p>Apache ECharts 中并没有单独的瀑布图类型,但是我们可以使用堆叠的柱状图模拟该效果。</p>\n<p>假设数据数组中的值是表示对前一个值的增减:</p>\n<md-code-block lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107\'" line-highlights="\'\'" />\n<p>也就是第一个数据是 <code>900</code>,第二个数据 <code>345</code> 表示的是在 <code>900</code> 的基础上增加了 <code>345</code>……将这个数据展示为阶梯瀑布图时,我们可以使用三个系列:第一个是不可交互的透明系列,用来实现“悬空”的柱状图效果;第二个系列用来表示正数;第二个系列用来表示负数。</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107CnZhciBoZWxwID0gW107CnZhciBwb3NpdGl2ZSA9IFtdOwp2YXIgbmVnYXRpdmUgPSBbXTsKZm9yICh2YXIgaSA9IDAsIHN1bSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgaWYgKGRhdGFbaV0gPj0gMCkgewogICAgcG9zaXRpdmUucHVzaChkYXRhW2ldKTsKICAgIG5lZ2F0aXZlLnB1c2goJy0nKTsKICB9IGVsc2UgewogICAgcG9zaXRpdmUucHVzaCgnLScpOwogICAgbmVnYXRpdmUucHVzaCgtZGF0YVtpXSk7CiAgfQoKICBpZiAoaSA9PT0gMCkgewogICAgaGVscC5wdXNoKDApOwogIH0gZWxzZSB7CiAgICBzdW0gKz0gZGF0YVtpIC0gMV07CiAgICBpZiAoZGF0YVtpXSA8IDApIHsKICAgICAgaGVscC5wdXNoKHN1bSArIGRhdGFbaV0pOwogICAgfSBlbHNlIHsKICAgICAgaGVscC5wdXNoKHN1bSk7CiAgICB9CiAgfQp9CgpvcHRpb24gPSB7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICdXYXRlcmZhbGwnCiAgfSwKICBncmlkOiB7CiAgICBsZWZ0OiAnMyUnLAogICAgcmlnaHQ6ICc0JScsCiAgICBib3R0b206ICczJScsCiAgICBjb250YWluTGFiZWw6IHRydWUKICB9LAogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgc3BsaXRMaW5lOiB7IHNob3c6IGZhbHNlIH0sCiAgICBkYXRhOiAoZnVuY3Rpb24oKSB7CiAgICAgIHZhciBsaXN0ID0gW107CiAgICAgIGZvciAodmFyIGkgPSAxOyBpIDw9IDExOyBpKyspIHsKICAgICAgICBsaXN0LnB1c2goJ09jdC8nICsgaSk7CiAgICAgIH0KICAgICAgcmV0dXJuIGxpc3Q7CiAgICB9KSgpCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgYmFyQm9yZGVyQ29sb3I6ICdyZ2JhKDAsMCwwLDApJywKICAgICAgICAgIGNvbG9yOiAncmdiYSgwLDAsMCwwKScKICAgICAgICB9LAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBiYXJCb3JkZXJDb2xvcjogJ3JnYmEoMCwwLDAsMCknLAogICAgICAgICAgY29sb3I6ICdyZ2JhKDAsMCwwLDApJwogICAgICAgIH0KICAgICAgfSwKICAgICAgZGF0YTogaGVscAogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ3Bvc2l0aXZlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAnYWxsJywKICAgICAgZGF0YTogcG9zaXRpdmUKICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICduZWdhdGl2ZScsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGRhdGE6IG5lZ2F0aXZlLAogICAgICBpdGVtU3R5bGU6IHsKICAgICAgICBjb2xvcjogJyNmMzMnCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/bar/waterfall"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:C,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:c},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:n},{title:5.2,dir:A}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:w,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:B},{title:"数据集",dir:G},{title:"数据转换",dir:m},{title:"坐标系",dir:S,draft:i},{title:"坐标轴",dir:f},{title:"视觉映射",dir:e},{title:"图例",dir:H},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:K,children:[{title:"常用图表类型",dir:L,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:u},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:X,draft:i},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:E,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:Y},{title:"南丁格尔图(玫瑰图)",dir:v}]},{title:"散点图",dir:x,children:[{title:"基础散点图",dir:J}]}]},{title:O,dir:t,draft:i},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:P}]},{title:"数据处理",dir:W,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:j,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:i}]}]},{title:"最佳实践",dir:q,children:[{title:O,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:g},{title:"Resources",dir:C,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:c},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:n},{title:5.2,dir:A}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:w,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:B},{title:"Dataset",dir:G},{title:"Data Transform",dir:m},{title:"Coordinate",dir:S,draft:i},{title:"Axis",dir:f},{title:"Visual Mapping",dir:e},{title:"Legend",dir:H},{title:"Event and Action",dir:Z}]},{title:"How To Guides",dir:K,children:[{title:"Common Charts",dir:L,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:u},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:X,draft:i},{title:"Waterfall",dir:D}]},{title:"Line",dir:E,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:Y},{title:"Rose Style",dir:v}]},{title:"Scatter",dir:x,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:P}]},{title:"Data",dir:W,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:j,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:i}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/bar/waterfall",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/line/area-line/index.html b/handbook/zh/how-to/chart-types/line/area-line/index.html
index 8666b69..7044adf 100644
--- a/handbook/zh/how-to/chart-types/line/area-line/index.html
+++ b/handbook/zh/how-to/chart-types/line/area-line/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%8C%BA%E5%9F%9F%E9%9D%A2%E7%A7%AF%E5%9B%BE" tabindex="-1">区域面积图</h1> <p>区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据。相比普通的折线图,区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%8C%BA%E5%9F%9F%E9%9D%A2%E7%A7%AF%E5%9B%BE" tabindex="-1">区域面积图</h1> <p>区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据。相比普通的折线图,区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
@@ -47,7 +47,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>通过 <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a> 设置折线图的填充区域样式,将其设为为 <code>{}</code> 表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式,可以通过设置 <code>areaStyle</code> 下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。</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/how-to/chart-types/line/area-line.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,s,c,h,g,p,C,A,I,f,b,B,m,u,S,w,y,E,v,G,P,L,D,R,k,x,M,T,z,F,H,O,V,Z,W,_,N,X,K,Q,J,U,j,Y,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%8C%BA%E5%9F%9F%E9%9D%A2%E7%A7%AF%E5%9B%BE" tabindex="-1">区域面积图</h1>\n<p>区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据。相比普通的折线图,区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFsyNSwgMTQsIDIzLCAzNSwgMTBdLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZTogewogICAgICAgIGNvbG9yOiAnI2ZmMCcsCiAgICAgICAgb3BhY2l0eTogMC41CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>通过 <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a> 设置折线图的填充区域样式,将其设为为 <code>{}</code> 表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式,可以通过设置 <code>areaStyle</code> 下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。</p>\n',postPath:"zh/how-to/chart-types/line/area-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:C}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:S,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:E}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:P},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:k},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:x,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:Z}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:_}]}]},{title:N,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:Y,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:N,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:C}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:S,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:E}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:P},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:k}]},{title:"Line",dir:x,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:Z}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:Y,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/line/area-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>通过 <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a> 设置折线图的填充区域样式,将其设为为 <code>{}</code> 表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式,可以通过设置 <code>areaStyle</code> 下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。</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/how-to/chart-types/line/area-line.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,s,c,h,g,p,C,A,I,f,b,B,m,u,S,w,y,E,v,G,P,L,D,R,k,x,M,T,z,F,H,O,V,Z,W,_,N,X,K,Q,J,U,j,Y,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%8C%BA%E5%9F%9F%E9%9D%A2%E7%A7%AF%E5%9B%BE" tabindex="-1">区域面积图</h1>\n<p>区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据。相比普通的折线图,区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFsyNSwgMTQsIDIzLCAzNSwgMTBdLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZTogewogICAgICAgIGNvbG9yOiAnI2ZmMCcsCiAgICAgICAgb3BhY2l0eTogMC41CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>通过 <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a> 设置折线图的填充区域样式,将其设为为 <code>{}</code> 表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式,可以通过设置 <code>areaStyle</code> 下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。</p>\n',postPath:"zh/how-to/chart-types/line/area-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:C}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:S,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:E}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:P},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:k},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:x,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:Z}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:_}]}]},{title:N,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:Y,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:N,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:C}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:S,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:E}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:P},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:k}]},{title:"Line",dir:x,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:Z}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:Y,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/line/area-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/line/basic-line/index.html b/handbook/zh/how-to/chart-types/line/basic-line/index.html
index 4204cbf..308d8f9 100644
--- a/handbook/zh/how-to/chart-types/line/basic-line/index.html
+++ b/handbook/zh/how-to/chart-types/line/basic-line/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">基础折线图</h1> <p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">最简单的折线图</h2> <p>如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">基础折线图</h1> <p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">最简单的折线图</h2> <p>如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C']
@@ -155,7 +155,8 @@
type<span class="token operator">:</span> <span class="token string">'line'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>注意区别这个例子中,“空”数据与取值为 0 的数据。</p></blockquote></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/line/basic-line.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,d,r,l,a,o,c,n,s,g,C,h,A,I,B,p,E,b,w,f,m,y,u,S,v,x,G,D,L,R,M,O,z,F,k,H,V,W,J,Q,T,X,K,P,Z,j,U,Y,N,_,q,$,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">基础折线图</h1>\n<p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">最简单的折线图</h2>\n<p>如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQyddCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMjAsIDIwMCwgMTUwXSwKICAgICAgdHlwZTogJ2xpbmUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>在这个例子中,我们通过 <code>xAxis</code> 将横坐标设为类目型,并指定了对应的值;通过 <code>type</code> 将 <code>yAxis</code> 的类型设定为数值型。在 <code>series</code> 中,我们将系列类型设为 <code>line</code>,并且通过 <code>data</code> 指定了折线图三个点的取值。这样,就能得到一个最简单的折线图了。</p>\n<blockquote>\n<p>这里 <code>xAxis</code> 和 <code>yAxis</code> 的 <code>type</code> 属性都可以隐去不写。因为坐标轴的默认类型是数值型,而 <code>xAxis</code> 指定了类目型的 <code>data</code>,所以 <code>ECharts</code> 也能识别出这是类目型的坐标轴。为了让大家更容易理解,我们特意写了 <code>type</code>。在实际的应用中,如果是 <code>\'value\'</code> 类型,也可以省略不写。</p>\n</blockquote>\n<h2 id="%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%AD%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">笛卡尔坐标系中的折线图</h2>\n<p>如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 <code>series</code> 的 <code>data</code> 每个数据用一个包含两个元素的数组表示就行了。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsKICAgICAgICBbMjAsIDEyMF0sCiAgICAgICAgWzUwLCAyMDBdLAogICAgICAgIFs0MCwgNTBdCiAgICAgIF0sCiAgICAgIHR5cGU6ICdsaW5lJwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">折线图样式设置</h2>\n<h3 id="%E6%8A%98%E7%BA%BF%E7%9A%84%E6%A0%B7%E5%BC%8F" tabindex="-1">折线的样式</h3>\n<p>折线图中折线的样式可以通过 <code>lineStyle</code> 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 <a href="https://echarts.apache.org/option.html#series-line.lineStyle"><code>series.lineStyle</code></a> 了解。这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgY29sb3I6ICdncmVlbicsCiAgICAgICAgICB3aWR0aDogNCwKICAgICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>这里设置折线宽度时,数据点描边的宽度是不会跟着改变的,而应该在数据点的配置项中另外设置。</p>\n<h3 id="%E6%95%B0%E6%8D%AE%E7%82%B9%E7%9A%84%E6%A0%B7%E5%BC%8F" tabindex="-1">数据点的样式</h3>\n<p>数据点的样式可以通过 <a href="https://echarts.apache.org/option.html#series-line.itemStyle"><code>series.itemStyle</code></a> 指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。与折线样式的设置十分相似,这里不再展开说明。</p>\n<h2 id="%E5%9C%A8%E6%95%B0%E6%8D%AE%E7%82%B9%E5%A4%84%E6%98%BE%E7%A4%BA%E6%95%B0%E5%80%BC" tabindex="-1">在数据点处显示数值</h2>\n<p>在系列中,这数据点的标签通过 <a href="https://echarts.apache.org/option.html#series-line.label"><code>series.label</code></a> 属性指定。如果将 <code>label</code> 下的 <code>show</code> 指定为<code>true</code>,则表示该数值默认时就显示;如果为 <code>false</code>,而 <a href="https://echarts.apache.org/option.html#series-line.emphasis.label.show"><code>series.emphasis.label.show</code></a> 为 <code>true</code>,则表示只有在鼠标移动到该数据时,才显示数值。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICBwb3NpdGlvbjogJ2JvdHRvbScsCiAgICAgICAgdGV4dFN0eWxlOiB7CiAgICAgICAgICBmb250U2l6ZTogMjAKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="%E7%A9%BA%E6%95%B0%E6%8D%AE" tabindex="-1">空数据</h2>\n<p>在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。</p>\n<p>在 ECharts 中,我们使用字符串 <code>\'-\'</code> 表示空数据,这对其他系列的数据也是适用的。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFswLCAyMiwgJy0nLCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScKICAgIH0KICBdCn07\'" v-bind="{}" />\n<blockquote>\n<p>注意区别这个例子中,“空”数据与取值为 0 的数据。</p>\n</blockquote>\n',postPath:"zh/how-to/chart-types/line/basic-line"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:c,draft:i},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:s},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:B},{title:"配置项",dir:p,draft:i},{title:"系列",dir:E,draft:i},{title:"样式",dir:b},{title:"数据集",dir:w},{title:"数据转换",dir:f},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:y},{title:"视觉映射",dir:t},{title:"图例",dir:u},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:R,draft:i},{title:"阶梯瀑布图",dir:M},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:W},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:X}]}]},{title:K,dir:e,draft:i},{title:"跨平台方案",dir:P,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Y,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:o},{title:"Resources",dir:c,draft:i},{title:"Inspiration",dir:n},{title:"Get Help",dir:s},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:B},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:E,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:w},{title:"Data Transform",dir:f},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:y},{title:"Visual Mapping",dir:t},{title:"Legend",dir:u},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:R,draft:i},{title:"Waterfall",dir:M}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:W},{title:"Ring Style",dir:J},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:X}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:P,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Y,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/line/basic-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>注意区别这个例子中,“空”数据与取值为 0 的数据。</p></blockquote></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/line/basic-line.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,d,r,l,a,o,c,n,s,g,C,h,A,I,B,p,E,b,w,f,m,y,u,S,v,x,G,D,L,R,M,O,z,F,k,H,V,W,J,Q,T,X,K,P,Z,j,U,Y,N,_,q,$,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">基础折线图</h1>\n<p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">最简单的折线图</h2>\n<p>如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQyddCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMjAsIDIwMCwgMTUwXSwKICAgICAgdHlwZTogJ2xpbmUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>在这个例子中,我们通过 <code>xAxis</code> 将横坐标设为类目型,并指定了对应的值;通过 <code>type</code> 将 <code>yAxis</code> 的类型设定为数值型。在 <code>series</code> 中,我们将系列类型设为 <code>line</code>,并且通过 <code>data</code> 指定了折线图三个点的取值。这样,就能得到一个最简单的折线图了。</p>\n<blockquote>\n<p>这里 <code>xAxis</code> 和 <code>yAxis</code> 的 <code>type</code> 属性都可以隐去不写。因为坐标轴的默认类型是数值型,而 <code>xAxis</code> 指定了类目型的 <code>data</code>,所以 <code>ECharts</code> 也能识别出这是类目型的坐标轴。为了让大家更容易理解,我们特意写了 <code>type</code>。在实际的应用中,如果是 <code>\'value\'</code> 类型,也可以省略不写。</p>\n</blockquote>\n<h2 id="%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%AD%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">笛卡尔坐标系中的折线图</h2>\n<p>如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 <code>series</code> 的 <code>data</code> 每个数据用一个包含两个元素的数组表示就行了。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsKICAgICAgICBbMjAsIDEyMF0sCiAgICAgICAgWzUwLCAyMDBdLAogICAgICAgIFs0MCwgNTBdCiAgICAgIF0sCiAgICAgIHR5cGU6ICdsaW5lJwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">折线图样式设置</h2>\n<h3 id="%E6%8A%98%E7%BA%BF%E7%9A%84%E6%A0%B7%E5%BC%8F" tabindex="-1">折线的样式</h3>\n<p>折线图中折线的样式可以通过 <code>lineStyle</code> 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 <a href="https://echarts.apache.org/option.html#series-line.lineStyle"><code>series.lineStyle</code></a> 了解。这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgY29sb3I6ICdncmVlbicsCiAgICAgICAgICB3aWR0aDogNCwKICAgICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>这里设置折线宽度时,数据点描边的宽度是不会跟着改变的,而应该在数据点的配置项中另外设置。</p>\n<h3 id="%E6%95%B0%E6%8D%AE%E7%82%B9%E7%9A%84%E6%A0%B7%E5%BC%8F" tabindex="-1">数据点的样式</h3>\n<p>数据点的样式可以通过 <a href="https://echarts.apache.org/option.html#series-line.itemStyle"><code>series.itemStyle</code></a> 指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。与折线样式的设置十分相似,这里不再展开说明。</p>\n<h2 id="%E5%9C%A8%E6%95%B0%E6%8D%AE%E7%82%B9%E5%A4%84%E6%98%BE%E7%A4%BA%E6%95%B0%E5%80%BC" tabindex="-1">在数据点处显示数值</h2>\n<p>在系列中,这数据点的标签通过 <a href="https://echarts.apache.org/option.html#series-line.label"><code>series.label</code></a> 属性指定。如果将 <code>label</code> 下的 <code>show</code> 指定为<code>true</code>,则表示该数值默认时就显示;如果为 <code>false</code>,而 <a href="https://echarts.apache.org/option.html#series-line.emphasis.label.show"><code>series.emphasis.label.show</code></a> 为 <code>true</code>,则表示只有在鼠标移动到该数据时,才显示数值。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICBwb3NpdGlvbjogJ2JvdHRvbScsCiAgICAgICAgdGV4dFN0eWxlOiB7CiAgICAgICAgICBmb250U2l6ZTogMjAKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="%E7%A9%BA%E6%95%B0%E6%8D%AE" tabindex="-1">空数据</h2>\n<p>在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。</p>\n<p>在 ECharts 中,我们使用字符串 <code>\'-\'</code> 表示空数据,这对其他系列的数据也是适用的。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFswLCAyMiwgJy0nLCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScKICAgIH0KICBdCn07\'" v-bind="{}" />\n<blockquote>\n<p>注意区别这个例子中,“空”数据与取值为 0 的数据。</p>\n</blockquote>\n',postPath:"zh/how-to/chart-types/line/basic-line"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:c,draft:i},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:s},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:B},{title:"配置项",dir:p,draft:i},{title:"系列",dir:E,draft:i},{title:"样式",dir:b},{title:"数据集",dir:w},{title:"数据转换",dir:f},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:y},{title:"视觉映射",dir:t},{title:"图例",dir:u},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:R,draft:i},{title:"阶梯瀑布图",dir:M},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:W},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:X}]}]},{title:K,dir:e,draft:i},{title:"跨平台方案",dir:P,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Y,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:o},{title:"Resources",dir:c,draft:i},{title:"Inspiration",dir:n},{title:"Get Help",dir:s},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:B},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:E,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:w},{title:"Data Transform",dir:f},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:y},{title:"Visual Mapping",dir:t},{title:"Legend",dir:u},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:R,draft:i},{title:"Waterfall",dir:M}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:W},{title:"Ring Style",dir:J},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:X}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:P,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Y,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/line/basic-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/line/smooth-line/index.html b/handbook/zh/how-to/chart-types/line/smooth-line/index.html
index 6999d86..97bc342 100644
--- a/handbook/zh/how-to/chart-types/line/smooth-line/index.html
+++ b/handbook/zh/how-to/chart-types/line/smooth-line/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%B9%B3%E6%BB%91%E6%9B%B2%E7%BA%BF%E5%9B%BE" tabindex="-1">平滑曲线图</h1> <p>平滑曲线图也是折线图的一种变形,这种更柔和的样式也是一种不错的视觉选择。使用时,只需要将折线图系列的 <code>smooth</code> 属性设置为 <code>true</code> 即可。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%B9%B3%E6%BB%91%E6%9B%B2%E7%BA%BF%E5%9B%BE" tabindex="-1">平滑曲线图</h1> <p>平滑曲线图也是折线图的一种变形,这种更柔和的样式也是一种不错的视觉选择。使用时,只需要将折线图系列的 <code>smooth</code> 属性设置为 <code>true</code> 即可。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
@@ -31,7 +31,8 @@
smooth<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/line/smooth-line.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,s,c,h,p,g,f,C,b,B,m,u,A,I,w,E,S,v,P,y,k,x,D,L,R,G,z,M,V,H,O,T,_,Q,F,J,W,X,N,U,j,K,Z,$,Y,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%B9%B3%E6%BB%91%E6%9B%B2%E7%BA%BF%E5%9B%BE" tabindex="-1">平滑曲线图</h1>\n<p>平滑曲线图也是折线图的一种变形,这种更柔和的样式也是一种不错的视觉选择。使用时,只需要将折线图系列的 <code>smooth</code> 属性设置为 <code>true</code> 即可。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/line/smooth-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:B,draft:t},{title:"系列",dir:m,draft:t},{title:"样式",dir:u},{title:"数据集",dir:A},{title:"数据转换",dir:I},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:k},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:O}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:T},{title:"圆环图",dir:_},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:J}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:m,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:A},{title:"Data Transform",dir:I},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:P,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:k},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:R}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:O}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:T},{title:"Ring Style",dir:_},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/line/smooth-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/line/smooth-line.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,s,c,h,p,g,f,C,b,B,m,u,A,I,w,E,S,v,P,y,k,x,D,L,R,G,z,M,V,H,O,T,_,Q,F,J,W,X,N,U,j,K,Z,$,Y,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%B9%B3%E6%BB%91%E6%9B%B2%E7%BA%BF%E5%9B%BE" tabindex="-1">平滑曲线图</h1>\n<p>平滑曲线图也是折线图的一种变形,这种更柔和的样式也是一种不错的视觉选择。使用时,只需要将折线图系列的 <code>smooth</code> 属性设置为 <code>true</code> 即可。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/line/smooth-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:B,draft:t},{title:"系列",dir:m,draft:t},{title:"样式",dir:u},{title:"数据集",dir:A},{title:"数据转换",dir:I},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:k},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:O}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:T},{title:"圆环图",dir:_},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:J}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:m,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:A},{title:"Data Transform",dir:I},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:P,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:k},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:R}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:O}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:T},{title:"Ring Style",dir:_},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/line/smooth-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/line/stacked-line/index.html b/handbook/zh/how-to/chart-types/line/stacked-line/index.html
index eba1ab4..aa905ce 100644
--- a/handbook/zh/how-to/chart-types/line/stacked-line/index.html
+++ b/handbook/zh/how-to/chart-types/line/stacked-line/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%A0%86%E5%8F%A0%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">堆叠折线图</h1> <p>与<a href="./zh/application/chart-types/bar/stacked-bar">堆叠柱状图</a>类似,堆叠折线图也是用系列的 <code>stack</code> 设置哪些系列堆叠在一起。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%A0%86%E5%8F%A0%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">堆叠折线图</h1> <p>与<a href="./zh/application/chart-types/bar/stacked-bar">堆叠柱状图</a>类似,堆叠折线图也是用系列的 <code>stack</code> 设置哪些系列堆叠在一起。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
@@ -79,7 +79,8 @@
areaStyle<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/line/stacked-line.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,s,c,o,h,C,g,A,I,p,f,b,B,m,u,w,E,L,y,G,R,S,v,k,x,D,P,z,F,O,H,M,W,J,V,K,N,Q,T,X,Y,_,U,j,Z,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%A0%86%E5%8F%A0%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">堆叠折线图</h1>\n<p>与<a href="./zh/application/chart-types/bar/stacked-bar">堆叠柱状图</a>类似,堆叠折线图也是用系列的 <code>stack</code> 设置哪些系列堆叠在一起。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcKICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>但是不同的是,如果不加说明的话,我们很难判断出这是一个堆叠折线图,还是一个普通的折线图。所以,对于堆叠折线图而言,一般建议使用区域填充色以表明堆叠的情况。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JywKICAgICAgYXJlYVN0eWxlOiB7fQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/line/stacked-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:L},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:k},{title:"极坐标系柱状图",dir:x,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:P,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:W},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:N}]}]},{title:Q,dir:i,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:_},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:Z,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:Q,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:L},{title:"Event and Action",dir:y}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:k},{title:"Bar Polar",dir:x,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:P,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:W},{title:"Ring Style",dir:J},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:_},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:Z,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/line/stacked-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/line/stacked-line.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,s,c,o,h,C,g,A,I,p,f,b,B,m,u,w,E,L,y,G,R,S,v,k,x,D,P,z,F,O,H,M,W,J,V,K,N,Q,T,X,Y,_,U,j,Z,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%A0%86%E5%8F%A0%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">堆叠折线图</h1>\n<p>与<a href="./zh/application/chart-types/bar/stacked-bar">堆叠柱状图</a>类似,堆叠折线图也是用系列的 <code>stack</code> 设置哪些系列堆叠在一起。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcKICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>但是不同的是,如果不加说明的话,我们很难判断出这是一个堆叠折线图,还是一个普通的折线图。所以,对于堆叠折线图而言,一般建议使用区域填充色以表明堆叠的情况。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JywKICAgICAgYXJlYVN0eWxlOiB7fQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/line/stacked-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:L},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:k},{title:"极坐标系柱状图",dir:x,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:P,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:W},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:N}]}]},{title:Q,dir:i,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:_},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:Z,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:Q,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:L},{title:"Event and Action",dir:y}]},{title:"How To Guides",dir:G,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:k},{title:"Bar Polar",dir:x,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:P,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:W},{title:"Ring Style",dir:J},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:_},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:Z,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/line/stacked-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/line/step-line/index.html b/handbook/zh/how-to/chart-types/line/step-line/index.html
index 6303cbd..2372801 100644
--- a/handbook/zh/how-to/chart-types/line/step-line/index.html
+++ b/handbook/zh/how-to/chart-types/line/step-line/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E9%98%B6%E6%A2%AF%E7%BA%BF%E5%9B%BE" tabindex="-1">阶梯线图</h1> <p>阶梯线图又称方波图,它使用水平和垂直的线来连接两个数据点,而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。</p> <p>在 ECharts 中,系列的 <code>step</code> 属性用来表征阶梯线图的连接类型,它共有三种取值:<code>'start'</code>、<code>'middle'</code> 和 <code>'end'</code>,分别表示在当前点,当前点与下个点的中间点,下个点拐弯。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" 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="%E9%98%B6%E6%A2%AF%E7%BA%BF%E5%9B%BE" tabindex="-1">阶梯线图</h1> <p>阶梯线图又称方波图,它使用水平和垂直的线来连接两个数据点,而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。</p> <p>在 ECharts 中,系列的 <code>step</code> 属性用来表征阶梯线图的连接类型,它共有三种取值:<code>'start'</code>、<code>'middle'</code> 和 <code>'end'</code>,分别表示在当前点,当前点与下个点的中间点,下个点拐弯。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
@@ -63,7 +63,8 @@
data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">450</span><span class="token punctuation">,</span> <span class="token number">432</span><span class="token punctuation">,</span> <span class="token number">401</span><span class="token punctuation">,</span> <span class="token number">454</span><span class="token punctuation">,</span> <span class="token number">590</span><span class="token punctuation">,</span> <span class="token number">530</span><span class="token punctuation">,</span> <span class="token number">510</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>请注意这个例子中不同的 <code>step</code> 取值对应的数据点和连线的区别。</p></blockquote></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/line/step-line.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,c,s,h,g,C,p,I,A,w,b,f,m,u,B,E,y,G,M,D,T,v,x,L,k,R,S,W,z,H,J,P,N,U,Z,F,V,K,O,X,Y,Q,_,j,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E9%98%B6%E6%A2%AF%E7%BA%BF%E5%9B%BE" tabindex="-1">阶梯线图</h1>\n<p>阶梯线图又称方波图,它使用水平和垂直的线来连接两个数据点,而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。</p>\n<p>在 ECharts 中,系列的 <code>step</code> 属性用来表征阶梯线图的连接类型,它共有三种取值:<code>\'start\'</code>、<code>\'middle\'</code> 和 <code>\'end\'</code>,分别表示在当前点,当前点与下个点的中间点,下个点拐弯。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnU3RlcCBTdGFydCcsCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RlcDogJ3N0YXJ0JywKICAgICAgZGF0YTogWzEyMCwgMTMyLCAxMDEsIDEzNCwgOTAsIDIzMCwgMjEwXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1N0ZXAgTWlkZGxlJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzdGVwOiAnbWlkZGxlJywKICAgICAgZGF0YTogWzIyMCwgMjgyLCAyMDEsIDIzNCwgMjkwLCA0MzAsIDQxMF0KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICdTdGVwIEVuZCcsCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RlcDogJ2VuZCcsCiAgICAgIGRhdGE6IFs0NTAsIDQzMiwgNDAxLCA0NTQsIDU5MCwgNTMwLCA1MTBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<blockquote>\n<p>请注意这个例子中不同的 <code>step</code> 取值对应的数据点和连线的区别。</p>\n</blockquote>\n',postPath:"zh/how-to/chart-types/line/step-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:w,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:f},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:G}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:k},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:W},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:J}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:P},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:Z,children:[{title:"基础散点图",dir:F}]}]},{title:V,dir:i,draft:t},{title:"跨平台方案",dir:K,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:O}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:V,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:w,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:f},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:G}]},{title:"How To Guides",dir:M,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:k}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:W},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:J}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:P},{title:"Ring Style",dir:N},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:Z,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:K,children:[{title:"Server Side Rendering",dir:O}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/line/step-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>请注意这个例子中不同的 <code>step</code> 取值对应的数据点和连线的区别。</p></blockquote></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/line/step-line.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,c,s,h,g,C,p,I,A,w,b,f,m,u,B,E,y,G,M,D,T,v,x,L,k,R,S,W,z,H,J,P,N,U,Z,F,V,K,O,X,Y,Q,_,j,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E9%98%B6%E6%A2%AF%E7%BA%BF%E5%9B%BE" tabindex="-1">阶梯线图</h1>\n<p>阶梯线图又称方波图,它使用水平和垂直的线来连接两个数据点,而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。</p>\n<p>在 ECharts 中,系列的 <code>step</code> 属性用来表征阶梯线图的连接类型,它共有三种取值:<code>\'start\'</code>、<code>\'middle\'</code> 和 <code>\'end\'</code>,分别表示在当前点,当前点与下个点的中间点,下个点拐弯。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnU3RlcCBTdGFydCcsCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RlcDogJ3N0YXJ0JywKICAgICAgZGF0YTogWzEyMCwgMTMyLCAxMDEsIDEzNCwgOTAsIDIzMCwgMjEwXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1N0ZXAgTWlkZGxlJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzdGVwOiAnbWlkZGxlJywKICAgICAgZGF0YTogWzIyMCwgMjgyLCAyMDEsIDIzNCwgMjkwLCA0MzAsIDQxMF0KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICdTdGVwIEVuZCcsCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RlcDogJ2VuZCcsCiAgICAgIGRhdGE6IFs0NTAsIDQzMiwgNDAxLCA0NTQsIDU5MCwgNTMwLCA1MTBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<blockquote>\n<p>请注意这个例子中不同的 <code>step</code> 取值对应的数据点和连线的区别。</p>\n</blockquote>\n',postPath:"zh/how-to/chart-types/line/step-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:w,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:f},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:G}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:k},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:W},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:J}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:P},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:Z,children:[{title:"基础散点图",dir:F}]}]},{title:V,dir:i,draft:t},{title:"跨平台方案",dir:K,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:O}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:V,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:w,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:f},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:G}]},{title:"How To Guides",dir:M,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:k}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:W},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:J}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:P},{title:"Ring Style",dir:N},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:Z,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:K,children:[{title:"Server Side Rendering",dir:O}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/line/step-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/pie/basic-pie/index.html b/handbook/zh/how-to/chart-types/pie/basic-pie/index.html
index e78274e..9440e5d 100644
--- a/handbook/zh/how-to/chart-types/pie/basic-pie/index.html
+++ b/handbook/zh/how-to/chart-types/pie/basic-pie/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E7%A1%80%E9%A5%BC%E5%9B%BE" tabindex="-1">基础饼图</h1> <p>饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。</p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E9%A5%BC%E5%9B%BE" tabindex="-1">最简单的饼图</h2> <p>饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E7%A1%80%E9%A5%BC%E5%9B%BE" tabindex="-1">基础饼图</h1> <p>饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。</p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E9%A5%BC%E5%9B%BE" tabindex="-1">最简单的饼图</h2> <p>饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
series: [
{
type: 'pie',
@@ -179,7 +179,8 @@
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/pie/basic-pie.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,r,d,l,g,C,a,I,A,o,n,c,s,h,p,B,b,m,w,E,f,u,W,K,v,G,T,Z,H,S,x,O,k,U,z,D,y,F,L,J,P,Y,_,R,X,M,V,N,Q,j,$,q,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E7%A1%80%E9%A5%BC%E5%9B%BE" tabindex="-1">基础饼图</h1>\n<p>饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。</p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E9%A5%BC%E5%9B%BE" tabindex="-1">最简单的饼图</h2>\n<p>饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAn55u05o6l6K6_6ZeuJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICfogZTnm5_lub_lkYonCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMTU0OCwKICAgICAgICAgIG5hbWU6ICfmkJzntKLlvJXmk44nCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>需要注意的是,这里是 <code>value</code> 不需要是百分比数据,ECharts 会根据所有数据的 <code>value</code> ,按比例分配它们在饼图中对应的弧度。</p>\n<h2 id="%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">饼图样式设置</h2>\n<h3 id="%E9%A5%BC%E5%9B%BE%E7%9A%84%E5%8D%8A%E5%BE%84" tabindex="-1">饼图的半径</h3>\n<p>饼图的半径可以通过 <a href="https://echarts.apache.org/option.html#series-pie.radius"><code>series.radius</code></a> 设置,可以是诸如 <code>\'60%\'</code> 这样相对的百分比字符串,或是 <code>200</code> 这样的绝对像素数值。当它是百分比字符串时,它是相对于容器宽高中较小的一条边的。也就是说,如果宽度大于高度,则百分比是相对于高度的,反之则反;当它是数值型时,它表示绝对的像素大小。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAn55u05o6l6K6_6ZeuJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICfogZTnm5_lub_lkYonCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMTU0OCwKICAgICAgICAgIG5hbWU6ICfmkJzntKLlvJXmk44nCiAgICAgICAgfQogICAgICBdLAogICAgICByYWRpdXM6ICc1MCUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="%E5%A6%82%E6%9E%9C%E6%95%B0%E6%8D%AE%E5%92%8C%E4%B8%BA-0%EF%BC%8C%E4%B8%8D%E6%98%BE%E7%A4%BA%E9%A5%BC%E5%9B%BE" tabindex="-1">如果数据和为 0,不显示饼图</h2>\n<p>在默认情况下,如果数据值和为 0,会显示平均分割的扇形。比如,如果有 4 个数据项,并且每个数据项都是 0,则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形,可以将 <a href="https://echarts.apache.org/option.html#series-pie.stillShowZeroSum"><code>series.stillShowZeroSum</code></a> 设为 <code>false</code>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgc3RpbGxTaG93WmVyb1N1bTogZmFsc2UsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICfnm7TmjqXorr_pl64nCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICfogZTnm5_lub_lkYonCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICfmkJzntKLlvJXmk44nCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>如果希望扇形对应的标签也不显示,可以将 <a href="https://echarts.apache.org/option.html#series-pie.label.show"><code>series.label.show</code></a> 设为 <code>false</code>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgc3RpbGxTaG93WmVyb1N1bTogZmFsc2UsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UKICAgICAgfSwKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ-ebtOaOpeiuv-mXricKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ-iBlOebn-W5v-WRiicKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ-aQnOe0ouW8leaTjicKICAgICAgICB9CiAgICAgIF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/pie/basic-pie"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:C},{title:"资源列表",dir:a,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:A},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:w},{title:"数据转换",dir:E},{title:"坐标系",dir:f,draft:i},{title:"坐标轴",dir:u},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:K}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:H},{title:"极坐标系柱状图",dir:S,draft:i},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:U},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:D},{title:"阶梯线图",dir:y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:L},{title:"南丁格尔图(玫瑰图)",dir:J}]},{title:"散点图",dir:P,children:[{title:"基础散点图",dir:Y}]}]},{title:_,dir:t,draft:i},{title:"跨平台方案",dir:R,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:N,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:i}]}]},{title:"最佳实践",dir:q,children:[{title:_,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:C},{title:"Resources",dir:a,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:A},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:w},{title:"Data Transform",dir:E},{title:"Coordinate",dir:f,draft:i},{title:"Axis",dir:u},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:K}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:H},{title:"Bar Polar",dir:S,draft:i},{title:"Waterfall",dir:x}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:U},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:D},{title:"Step Line",dir:y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:L},{title:"Rose Style",dir:J}]},{title:"Scatter",dir:P,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:R,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:N,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:i}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/pie/basic-pie",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/pie/basic-pie.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,r,d,l,g,C,a,I,A,o,n,c,s,h,p,B,b,m,w,E,f,u,W,K,v,G,T,Z,H,S,x,O,k,U,z,D,y,F,L,J,P,Y,_,R,X,M,V,N,Q,j,$,q,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E7%A1%80%E9%A5%BC%E5%9B%BE" tabindex="-1">基础饼图</h1>\n<p>饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。</p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E9%A5%BC%E5%9B%BE" tabindex="-1">最简单的饼图</h2>\n<p>饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAn55u05o6l6K6_6ZeuJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICfogZTnm5_lub_lkYonCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMTU0OCwKICAgICAgICAgIG5hbWU6ICfmkJzntKLlvJXmk44nCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>需要注意的是,这里是 <code>value</code> 不需要是百分比数据,ECharts 会根据所有数据的 <code>value</code> ,按比例分配它们在饼图中对应的弧度。</p>\n<h2 id="%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">饼图样式设置</h2>\n<h3 id="%E9%A5%BC%E5%9B%BE%E7%9A%84%E5%8D%8A%E5%BE%84" tabindex="-1">饼图的半径</h3>\n<p>饼图的半径可以通过 <a href="https://echarts.apache.org/option.html#series-pie.radius"><code>series.radius</code></a> 设置,可以是诸如 <code>\'60%\'</code> 这样相对的百分比字符串,或是 <code>200</code> 这样的绝对像素数值。当它是百分比字符串时,它是相对于容器宽高中较小的一条边的。也就是说,如果宽度大于高度,则百分比是相对于高度的,反之则反;当它是数值型时,它表示绝对的像素大小。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAn55u05o6l6K6_6ZeuJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICfogZTnm5_lub_lkYonCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMTU0OCwKICAgICAgICAgIG5hbWU6ICfmkJzntKLlvJXmk44nCiAgICAgICAgfQogICAgICBdLAogICAgICByYWRpdXM6ICc1MCUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="%E5%A6%82%E6%9E%9C%E6%95%B0%E6%8D%AE%E5%92%8C%E4%B8%BA-0%EF%BC%8C%E4%B8%8D%E6%98%BE%E7%A4%BA%E9%A5%BC%E5%9B%BE" tabindex="-1">如果数据和为 0,不显示饼图</h2>\n<p>在默认情况下,如果数据值和为 0,会显示平均分割的扇形。比如,如果有 4 个数据项,并且每个数据项都是 0,则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形,可以将 <a href="https://echarts.apache.org/option.html#series-pie.stillShowZeroSum"><code>series.stillShowZeroSum</code></a> 设为 <code>false</code>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgc3RpbGxTaG93WmVyb1N1bTogZmFsc2UsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICfnm7TmjqXorr_pl64nCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICfogZTnm5_lub_lkYonCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICfmkJzntKLlvJXmk44nCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>如果希望扇形对应的标签也不显示,可以将 <a href="https://echarts.apache.org/option.html#series-pie.label.show"><code>series.label.show</code></a> 设为 <code>false</code>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgc3RpbGxTaG93WmVyb1N1bTogZmFsc2UsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UKICAgICAgfSwKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ-ebtOaOpeiuv-mXricKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ-iBlOebn-W5v-WRiicKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ-aQnOe0ouW8leaTjicKICAgICAgICB9CiAgICAgIF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/pie/basic-pie"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:C},{title:"资源列表",dir:a,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:A},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:w},{title:"数据转换",dir:E},{title:"坐标系",dir:f,draft:i},{title:"坐标轴",dir:u},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:K}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:H},{title:"极坐标系柱状图",dir:S,draft:i},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:U},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:D},{title:"阶梯线图",dir:y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:L},{title:"南丁格尔图(玫瑰图)",dir:J}]},{title:"散点图",dir:P,children:[{title:"基础散点图",dir:Y}]}]},{title:_,dir:t,draft:i},{title:"跨平台方案",dir:R,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:N,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:i}]}]},{title:"最佳实践",dir:q,children:[{title:_,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:C},{title:"Resources",dir:a,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:A},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:w},{title:"Data Transform",dir:E},{title:"Coordinate",dir:f,draft:i},{title:"Axis",dir:u},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:K}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:H},{title:"Bar Polar",dir:S,draft:i},{title:"Waterfall",dir:x}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:U},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:D},{title:"Step Line",dir:y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:L},{title:"Rose Style",dir:J}]},{title:"Scatter",dir:P,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:R,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:N,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:i}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/pie/basic-pie",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/pie/doughnut/index.html b/handbook/zh/how-to/chart-types/pie/doughnut/index.html
index 8bdb994..43ad553 100644
--- a/handbook/zh/how-to/chart-types/pie/doughnut/index.html
+++ b/handbook/zh/how-to/chart-types/pie/doughnut/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">圆环图</h1> <p>圆环图同样可以用来表示数据占总体的比例,相比于饼图,它中间空余的部分可以用来显示一些额外的文字等信息,因而也是一种常用的图表类型。</p> <h2 id="%E5%9F%BA%E7%A1%80%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">基础圆环图</h2> <p>在 ECharts 中,饼图的半径除了上一小节提到的,可以是一个数值或者字符串之外,还可以是一个包含两个元素的数组,每个元素可以为数值或字符串。当它是一个数组时,它的前一项表示内半径,后一项表示外半径,这样就形成了一个圆环图。</p> <p>从这个角度上来说,可以认为饼图是一个内半径为 0 的圆环图,也就是说,饼图是圆环图的特例。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">圆环图</h1> <p>圆环图同样可以用来表示数据占总体的比例,相比于饼图,它中间空余的部分可以用来显示一些额外的文字等信息,因而也是一种常用的图表类型。</p> <h2 id="%E5%9F%BA%E7%A1%80%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">基础圆环图</h2> <p>在 ECharts 中,饼图的半径除了上一小节提到的,可以是一个数值或者字符串之外,还可以是一个包含两个元素的数组,每个元素可以为数值或字符串。当它是一个数组时,它的前一项表示内半径,后一项表示外半径,这样就形成了一个圆环图。</p> <p>从这个角度上来说,可以认为饼图是一个内半径为 0 的圆环图,也就是说,饼图是圆环图的特例。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
title: {
text: '圆环图的例子',
left: 'center',
@@ -133,7 +133,8 @@
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>其中,<code>avoidLabelOverlap</code> 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 <code>true</code>,而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 <code>false</code>。</p> <p>这样,圆环图中间会显示高亮数据的 <code>name</code> 值。</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/how-to/chart-types/pie/doughnut.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,d,r,l,a,g,C,I,n,o,A,c,s,h,p,B,E,b,m,f,u,w,G,W,y,x,L,Z,U,z,v,D,V,H,F,O,J,S,R,P,Y,M,k,K,N,X,Q,T,j,_,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">圆环图</h1>\n<p>圆环图同样可以用来表示数据占总体的比例,相比于饼图,它中间空余的部分可以用来显示一些额外的文字等信息,因而也是一种常用的图表类型。</p>\n<h2 id="%E5%9F%BA%E7%A1%80%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">基础圆环图</h2>\n<p>在 ECharts 中,饼图的半径除了上一小节提到的,可以是一个数值或者字符串之外,还可以是一个包含两个元素的数组,每个元素可以为数值或字符串。当它是一个数组时,它的前一项表示内半径,后一项表示外半径,这样就形成了一个圆环图。</p>\n<p>从这个角度上来说,可以认为饼图是一个内半径为 0 的圆环图,也就是说,饼图是圆环图的特例。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRpdGxlOiB7CiAgICB0ZXh0OiAn5ZyG546v5Zu-55qE5L6L5a2QJywKICAgIGxlZnQ6ICdjZW50ZXInLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICBkYXRhOiBbCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDMzNSwKICAgICAgICAgIG5hbWU6ICdBJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdCJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJhZGl1czogWyc0MCUnLCAnNzAlJ10KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>如果半径是数组,其中的两项也可以一项是数值,另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下,内半径小于外半径。ECharts 会自动使用小的一项作为内半径,但是仍应小心这样可能会导致的非预期效果。</p>\n<h2 id="%E5%9C%A8%E5%9C%86%E7%8E%AF%E5%9B%BE%E4%B8%AD%E9%97%B4%E6%98%BE%E7%A4%BA%E9%AB%98%E4%BA%AE%E6%89%87%E5%BD%A2%E5%AF%B9%E5%BA%94%E7%9A%84%E6%96%87%E5%AD%97" tabindex="-1">在圆环图中间显示高亮扇形对应的文字</h2>\n<p>上面的例子展现了在圆环图中间显示固定文字的例子,下面我们要介绍,如何在圆环图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是,利用系列的 <code>label</code>(默认用扇形颜色显示数据的 <code>name</code>),显示在圆环图中间。在默认情况下不显示系列的 <code>label</code>,在高亮时显示。具体的代码如下:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgeDogJ2xlZnQnLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IFsnNTAlJywgJzcwJSddLAogICAgICBhdm9pZExhYmVsT3ZlcmxhcDogZmFsc2UsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UsCiAgICAgICAgcG9zaXRpb246ICdjZW50ZXInLAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBzaG93OiB0cnVlCiAgICAgICAgfQogICAgICB9LAogICAgICBsYWJlbExpbmU6IHsKICAgICAgICBzaG93OiBmYWxzZQogICAgICB9LAogICAgICBlbXBoYXNpczogewogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9udFNpemU6ICczMCcsCiAgICAgICAgICBmb250V2VpZ2h0OiAnYm9sZCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdBJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ0InIH0sCiAgICAgICAgeyB2YWx1ZTogMjM0LCBuYW1lOiAnQycgfSwKICAgICAgICB7IHZhbHVlOiAxMzUsIG5hbWU6ICdEJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICdFJyB9CiAgICAgIF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>其中,<code>avoidLabelOverlap</code> 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 <code>true</code>,而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 <code>false</code>。</p>\n<p>这样,圆环图中间会显示高亮数据的 <code>name</code> 值。</p>\n',postPath:"zh/how-to/chart-types/pie/doughnut"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:C,draft:t},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:n},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:A},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:t},{title:"系列",dir:E,draft:t},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:f},{title:"坐标系",dir:u,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:G},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:y,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:U},{title:"极坐标系柱状图",dir:z,draft:t},{title:"阶梯瀑布图",dir:v},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:D,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:F},{title:"平滑曲线图",dir:O},{title:"阶梯线图",dir:J}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:R},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:Y,children:[{title:"基础散点图",dir:M}]}]},{title:k,dir:i,draft:t},{title:"跨平台方案",dir:K,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:T,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:k,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:g},{title:"Resources",dir:C,draft:t},{title:"Inspiration",dir:I},{title:"Get Help",dir:n},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:A},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:E,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:f},{title:"Coordinate",dir:u,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:G},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:y,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:U},{title:"Bar Polar",dir:z,draft:t},{title:"Waterfall",dir:v}]},{title:"Line",dir:D,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:F},{title:"Smoothed Line",dir:O},{title:"Step Line",dir:J}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:R},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:Y,children:[{title:"Basic Scatter",dir:M}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:K,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:T,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/pie/doughnut",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>其中,<code>avoidLabelOverlap</code> 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 <code>true</code>,而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 <code>false</code>。</p> <p>这样,圆环图中间会显示高亮数据的 <code>name</code> 值。</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/how-to/chart-types/pie/doughnut.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/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,d,r,l,a,g,C,I,n,o,A,c,s,h,p,B,E,b,m,f,u,w,G,W,y,x,L,Z,U,z,v,D,V,H,F,O,J,S,R,P,Y,M,k,K,N,X,Q,T,j,_,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">圆环图</h1>\n<p>圆环图同样可以用来表示数据占总体的比例,相比于饼图,它中间空余的部分可以用来显示一些额外的文字等信息,因而也是一种常用的图表类型。</p>\n<h2 id="%E5%9F%BA%E7%A1%80%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">基础圆环图</h2>\n<p>在 ECharts 中,饼图的半径除了上一小节提到的,可以是一个数值或者字符串之外,还可以是一个包含两个元素的数组,每个元素可以为数值或字符串。当它是一个数组时,它的前一项表示内半径,后一项表示外半径,这样就形成了一个圆环图。</p>\n<p>从这个角度上来说,可以认为饼图是一个内半径为 0 的圆环图,也就是说,饼图是圆环图的特例。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRpdGxlOiB7CiAgICB0ZXh0OiAn5ZyG546v5Zu-55qE5L6L5a2QJywKICAgIGxlZnQ6ICdjZW50ZXInLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICBkYXRhOiBbCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDMzNSwKICAgICAgICAgIG5hbWU6ICdBJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdCJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJhZGl1czogWyc0MCUnLCAnNzAlJ10KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>如果半径是数组,其中的两项也可以一项是数值,另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下,内半径小于外半径。ECharts 会自动使用小的一项作为内半径,但是仍应小心这样可能会导致的非预期效果。</p>\n<h2 id="%E5%9C%A8%E5%9C%86%E7%8E%AF%E5%9B%BE%E4%B8%AD%E9%97%B4%E6%98%BE%E7%A4%BA%E9%AB%98%E4%BA%AE%E6%89%87%E5%BD%A2%E5%AF%B9%E5%BA%94%E7%9A%84%E6%96%87%E5%AD%97" tabindex="-1">在圆环图中间显示高亮扇形对应的文字</h2>\n<p>上面的例子展现了在圆环图中间显示固定文字的例子,下面我们要介绍,如何在圆环图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是,利用系列的 <code>label</code>(默认用扇形颜色显示数据的 <code>name</code>),显示在圆环图中间。在默认情况下不显示系列的 <code>label</code>,在高亮时显示。具体的代码如下:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgeDogJ2xlZnQnLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IFsnNTAlJywgJzcwJSddLAogICAgICBhdm9pZExhYmVsT3ZlcmxhcDogZmFsc2UsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UsCiAgICAgICAgcG9zaXRpb246ICdjZW50ZXInLAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBzaG93OiB0cnVlCiAgICAgICAgfQogICAgICB9LAogICAgICBsYWJlbExpbmU6IHsKICAgICAgICBzaG93OiBmYWxzZQogICAgICB9LAogICAgICBlbXBoYXNpczogewogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9udFNpemU6ICczMCcsCiAgICAgICAgICBmb250V2VpZ2h0OiAnYm9sZCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdBJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ0InIH0sCiAgICAgICAgeyB2YWx1ZTogMjM0LCBuYW1lOiAnQycgfSwKICAgICAgICB7IHZhbHVlOiAxMzUsIG5hbWU6ICdEJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICdFJyB9CiAgICAgIF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>其中,<code>avoidLabelOverlap</code> 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 <code>true</code>,而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 <code>false</code>。</p>\n<p>这样,圆环图中间会显示高亮数据的 <code>name</code> 值。</p>\n',postPath:"zh/how-to/chart-types/pie/doughnut"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:C,draft:t},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:n},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:A},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:t},{title:"系列",dir:E,draft:t},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:f},{title:"坐标系",dir:u,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:G},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:y,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:U},{title:"极坐标系柱状图",dir:z,draft:t},{title:"阶梯瀑布图",dir:v},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:D,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:F},{title:"平滑曲线图",dir:O},{title:"阶梯线图",dir:J}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:R},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:Y,children:[{title:"基础散点图",dir:M}]}]},{title:k,dir:i,draft:t},{title:"跨平台方案",dir:K,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:T,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:k,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:g},{title:"Resources",dir:C,draft:t},{title:"Inspiration",dir:I},{title:"Get Help",dir:n},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:A},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:E,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:f},{title:"Coordinate",dir:u,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:G},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:y,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:U},{title:"Bar Polar",dir:z,draft:t},{title:"Waterfall",dir:v}]},{title:"Line",dir:D,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:F},{title:"Smoothed Line",dir:O},{title:"Step Line",dir:J}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:R},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:Y,children:[{title:"Basic Scatter",dir:M}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:K,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:T,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/pie/doughnut",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/pie/rose/index.html b/handbook/zh/how-to/chart-types/pie/rose/index.html
index 974ddaa..b67584c 100644
--- a/handbook/zh/how-to/chart-types/pie/rose/index.html
+++ b/handbook/zh/how-to/chart-types/pie/rose/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%8D%97%E4%B8%81%E6%A0%BC%E5%B0%94%E5%9B%BE%EF%BC%88%E7%8E%AB%E7%91%B0%E5%9B%BE%EF%BC%89" tabindex="-1">南丁格尔图(玫瑰图)</h1> <p>南丁格尔图又称玫瑰图,通常用弧度相同但半径不同的扇形表示各个类目。</p> <p>ECharts 可以通过将饼图的 <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> 值设为 <code>'area'</code> 实现南丁格尔图,其他配置项和饼图是相同的。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%8D%97%E4%B8%81%E6%A0%BC%E5%B0%94%E5%9B%BE%EF%BC%88%E7%8E%AB%E7%91%B0%E5%9B%BE%EF%BC%89" tabindex="-1">南丁格尔图(玫瑰图)</h1> <p>南丁格尔图又称玫瑰图,通常用弧度相同但半径不同的扇形表示各个类目。</p> <p>ECharts 可以通过将饼图的 <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> 值设为 <code>'area'</code> 实现南丁格尔图,其他配置项和饼图是相同的。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
series: [
{
type: 'pie',
@@ -65,7 +65,8 @@
roseType<span class="token operator">:</span> <span class="token string">'area'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/pie/rose.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,s,c,h,g,C,A,I,p,B,f,b,m,u,E,H,w,v,S,y,D,P,O,K,x,L,k,R,V,W,M,G,Y,z,T,Z,_,F,U,X,J,N,Q,$,j,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%8D%97%E4%B8%81%E6%A0%BC%E5%B0%94%E5%9B%BE%EF%BC%88%E7%8E%AB%E7%91%B0%E5%9B%BE%EF%BC%89" tabindex="-1">南丁格尔图(玫瑰图)</h1>\n<p>南丁格尔图又称玫瑰图,通常用弧度相同但半径不同的扇形表示各个类目。</p>\n<p>ECharts 可以通过将饼图的 <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> 值设为 <code>\'area\'</code> 实现南丁格尔图,其他配置项和饼图是相同的。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxMDAsCiAgICAgICAgICBuYW1lOiAnQScKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAyMDAsCiAgICAgICAgICBuYW1lOiAnQicKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMDAsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA0MDAsCiAgICAgICAgICBuYW1lOiAnRCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA1MDAsCiAgICAgICAgICBuYW1lOiAnRScKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJvc2VUeXBlOiAnYXJlYScKICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/pie/rose"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:t},{title:"系列",dir:f,draft:t},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:H},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:K,draft:t},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:R},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:G},{title:"圆环图",dir:Y},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:Z}]}]},{title:_,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:N,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:j,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:_,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:f,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:H},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:K,draft:t},{title:"Waterfall",dir:x}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:R},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:G},{title:"Ring Style",dir:Y},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:Z}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:N,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:j,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/pie/rose",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/pie/rose.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,s,c,h,g,C,A,I,p,B,f,b,m,u,E,H,w,v,S,y,D,P,O,K,x,L,k,R,V,W,M,G,Y,z,T,Z,_,F,U,X,J,N,Q,$,j,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%8D%97%E4%B8%81%E6%A0%BC%E5%B0%94%E5%9B%BE%EF%BC%88%E7%8E%AB%E7%91%B0%E5%9B%BE%EF%BC%89" tabindex="-1">南丁格尔图(玫瑰图)</h1>\n<p>南丁格尔图又称玫瑰图,通常用弧度相同但半径不同的扇形表示各个类目。</p>\n<p>ECharts 可以通过将饼图的 <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> 值设为 <code>\'area\'</code> 实现南丁格尔图,其他配置项和饼图是相同的。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxMDAsCiAgICAgICAgICBuYW1lOiAnQScKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAyMDAsCiAgICAgICAgICBuYW1lOiAnQicKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMDAsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA0MDAsCiAgICAgICAgICBuYW1lOiAnRCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA1MDAsCiAgICAgICAgICBuYW1lOiAnRScKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJvc2VUeXBlOiAnYXJlYScKICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/pie/rose"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:t},{title:"系列",dir:f,draft:t},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:H},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:K,draft:t},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:R},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:G},{title:"圆环图",dir:Y},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:Z}]}]},{title:_,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:N,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:j,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:_,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:f,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:H},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:v}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:K,draft:t},{title:"Waterfall",dir:x}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:R},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:G},{title:"Ring Style",dir:Y},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:Z}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:N,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:j,draft:t}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/chart-types/pie/rose",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/chart-types/scatter/basic-scatter/index.html b/handbook/zh/how-to/chart-types/scatter/basic-scatter/index.html
index 6a7e69f..dd183bc 100644
--- a/handbook/zh/how-to/chart-types/scatter/basic-scatter/index.html
+++ b/handbook/zh/how-to/chart-types/scatter/basic-scatter/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E7%A1%80%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">基础散点图</h1> <p>散点图,也是一种常见的图表类型。散点图由许多“点”组成,有时,这些点用来表示数据在坐标系中的位置(比如在笛卡尔坐标系下,表示数据在 x 轴和 y 轴上的坐标;在地图坐标系下,表示数据在地图上的某个位置等);有时,这些点的大小、颜色等属性也可以映射到数据值,用以表现高维数据。</p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">最简单的散点图</h2> <p>下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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/baidu-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/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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E7%A1%80%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">基础散点图</h1> <p>散点图,也是一种常见的图表类型。散点图由许多“点”组成,有时,这些点用来表示数据在坐标系中的位置(比如在笛卡尔坐标系下,表示数据在 x 轴和 y 轴上的坐标;在地图坐标系下,表示数据在地图上的某个位置等);有时,这些点的大小、颜色等属性也可以映射到数据值,用以表现高维数据。</p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">最简单的散点图</h2> <p>下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
@@ -118,7 +118,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/scatter/basic-scatter.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"> <span>Ovilia</span></a><a href="https://github.com/Wdingding" target="_blank" class="post-contributor"><img alt="Wdingding" src="https://avatars.githubusercontent.com/Wdingding?size=60"> <span>Wdingding</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,l,a,c,n,o,s,g,C,h,I,A,M,p,E,w,L,N,B,b,y,T,j,x,u,z,m,D,S,O,f,k,G,J,V,H,v,Q,W,Y,F,U,Z,P,R,K,X,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E7%A1%80%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">基础散点图</h1>\n<p>散点图,也是一种常见的图表类型。散点图由许多“点”组成,有时,这些点用来表示数据在坐标系中的位置(比如在笛卡尔坐标系下,表示数据在 x 轴和 y 轴上的坐标;在地图坐标系下,表示数据在地图上的某个位置等);有时,这些点的大小、颜色等属性也可以映射到数据值,用以表现高维数据。</p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">最简单的散点图</h2>\n<p>下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%8B%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">笛卡尔坐标系下的散点图</h2>\n<p>在上文的例子中,散点图的横坐标都是离散的类目轴,而纵坐标都是连续的数值轴。而对于散点图而言,另一种常见的场景是,两个坐标轴均为连续的数值轴,也就是笛卡尔坐标系。这时的系列形式略有不同,数据的横坐标和纵坐标一同写在 <code>data</code> 中,而非坐标轴中。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWwogICAgICAgIFsxMCwgNV0sCiAgICAgICAgWzAsIDhdLAogICAgICAgIFs2LCAxMF0sCiAgICAgICAgWzIsIDEyXSwKICAgICAgICBbOCwgOV0KICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E6%95%A3%E7%82%B9%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">散点图样式设置</h2>\n<h3 id="%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%BD%A2%E7%8A%B6" tabindex="-1">图形的形状</h3>\n<p>图形(symbol)指的是散点图中数据“点”的形状。有三类图形可选,一种是 ECharts 内置形状,第二种是图片,第三种是 SVG 的路径。</p>\n<p>ECharts 内置形状包括:圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形,分别对应<code>\'circle\'</code>、<code>\'rect\'</code>、<code>\'roundRect\'</code>、<code>\'triangle\'</code>、<code>\'diamond\'</code>、<code>\'pin\'</code>、<code>\'arrow\'</code>。使用内置形状时,只要将 <code>symbol</code> 属性指定为形状名称对应的字符串即可。</p>\n<p>如果想要将图形指定为任意的图片,以 <code>\'image://\'</code> 开头,后面跟图片的绝对或相对地址。形如:<code>\'image://http://example.com/xxx.png\'</code> 或 <code>\'image://./xxx.png\'</code>。</p>\n<p>除此之外,还支持 SVG 的路径作为矢量图形,将 <code>symbol</code> 设置为以 <code>\'path://\'</code> 开头的 SVG 路径即可。使用矢量图形的好处是,图片不会因为缩放而产生锯齿或模糊,并且通常而言比图片形式的文件大小更小。路径的查看方法为,打开一个 <code>SVG</code> 文件,找到形如 <code><path d="M… L…"></path></code> 的路径,将 <code>d</code> 的值添加在 <code>\'path://\'</code> 后即可。</p>\n<p>下面,我们展示一个将图形设置为矢量爱心形状的方式。</p>\n<p>首先,我们需要一个爱心的 SVG 文件,可以使用矢量编辑软件绘制,或者从网上下载到相关资源。其内容如下:</p>\n<md-code-block lang="xml" code="\'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI_Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MS45OTcgNTEuOTk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MS45OTcgNTEuOTk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI-CiAgICA8cGF0aCBkPSJNNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6Ii8-Cjwvc3ZnPg\'" line-highlights="\'\'" />\n<p>在 ECharts 的 <code>symbol</code> 配置项中,我们使用 <code>d</code> 的值作为路径。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IDIwLAogICAgICBzeW1ib2w6CiAgICAgICAgJ3BhdGg6Ly9NNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>这样,就能得到爱心形状的图形作为点的形状了。</p>\n<h3 id="%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">图形的大小</h3>\n<p>图形大小可以使用 <a href="https://echarts.apache.org/option.html#series-scatter.symbolSize"><code>series.symbolSize</code></a> 控制。它既可以是一个表示图形大小的像素值,也可以是一个包含两个 number 元素的数组,分别表示图形的宽和高。</p>\n<p>除此之外,它还可以是一个回调函数,其参数格式为:</p>\n<md-code-block lang="ts" code="\'KHZhbHVlOiBBcnJheSB8IG51bWJlciwgcGFyYW1zOiBPYmplY3QpID0-IG51bWJlciB8IEFycmF5Ow\'" line-highlights="\'\'" />\n<p>第一个参数为数据值,第二个参数是数据项的其他参数。</p>\n<p>在下面的例子中,我们将散点图点的大小设置为与其数据值成正比。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IGZ1bmN0aW9uKHZhbHVlKSB7CiAgICAgICAgcmV0dXJuIHZhbHVlIC8gMTA7CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/scatter/basic-scatter"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:c},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:M},{title:"配置项",dir:p,draft:i},{title:"系列",dir:E,draft:i},{title:"样式",dir:w},{title:"数据集",dir:L},{title:"数据转换",dir:N},{title:"坐标系",dir:B,draft:i},{title:"坐标轴",dir:b},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:T}]},{title:"应用篇",dir:j,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:u},{title:"堆叠柱状图",dir:z},{title:"动态排序柱状图",dir:m},{title:"极坐标系柱状图",dir:D,draft:i},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:f},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:G},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:Y}]}]},{title:F,dir:t,draft:i},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:R},{title:"数据下钻",dir:K,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:X}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:c},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:M},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:E,draft:i},{title:"Style",dir:w},{title:"Dataset",dir:L},{title:"Data Transform",dir:N},{title:"Coordinate",dir:B,draft:i},{title:"Axis",dir:b},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:T}]},{title:"How To Guides",dir:j,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:u},{title:"Stacked Bar",dir:z},{title:"Bar Racing",dir:m},{title:"Bar Polar",dir:D,draft:i},{title:"Waterfall",dir:S}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:f},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:G},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:v},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:R},{title:"Drilldown",dir:K,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:X}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/scatter/basic-scatter",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/chart-types/scatter/basic-scatter.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"> <span>Ovilia</span></a><a href="https://github.com/Wdingding" target="_blank" class="post-contributor"><img alt="Wdingding" src="https://avatars.githubusercontent.com/Wdingding?size=60"> <span>Wdingding</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,l,a,c,n,o,s,g,C,h,I,A,M,p,E,w,L,N,B,b,y,T,j,x,u,z,m,D,S,O,f,k,G,J,V,H,v,Q,W,Y,F,U,Z,P,R,K,X,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E7%A1%80%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">基础散点图</h1>\n<p>散点图,也是一种常见的图表类型。散点图由许多“点”组成,有时,这些点用来表示数据在坐标系中的位置(比如在笛卡尔坐标系下,表示数据在 x 轴和 y 轴上的坐标;在地图坐标系下,表示数据在地图上的某个位置等);有时,这些点的大小、颜色等属性也可以映射到数据值,用以表现高维数据。</p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">最简单的散点图</h2>\n<p>下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%8B%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">笛卡尔坐标系下的散点图</h2>\n<p>在上文的例子中,散点图的横坐标都是离散的类目轴,而纵坐标都是连续的数值轴。而对于散点图而言,另一种常见的场景是,两个坐标轴均为连续的数值轴,也就是笛卡尔坐标系。这时的系列形式略有不同,数据的横坐标和纵坐标一同写在 <code>data</code> 中,而非坐标轴中。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWwogICAgICAgIFsxMCwgNV0sCiAgICAgICAgWzAsIDhdLAogICAgICAgIFs2LCAxMF0sCiAgICAgICAgWzIsIDEyXSwKICAgICAgICBbOCwgOV0KICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E6%95%A3%E7%82%B9%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">散点图样式设置</h2>\n<h3 id="%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%BD%A2%E7%8A%B6" tabindex="-1">图形的形状</h3>\n<p>图形(symbol)指的是散点图中数据“点”的形状。有三类图形可选,一种是 ECharts 内置形状,第二种是图片,第三种是 SVG 的路径。</p>\n<p>ECharts 内置形状包括:圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形,分别对应<code>\'circle\'</code>、<code>\'rect\'</code>、<code>\'roundRect\'</code>、<code>\'triangle\'</code>、<code>\'diamond\'</code>、<code>\'pin\'</code>、<code>\'arrow\'</code>。使用内置形状时,只要将 <code>symbol</code> 属性指定为形状名称对应的字符串即可。</p>\n<p>如果想要将图形指定为任意的图片,以 <code>\'image://\'</code> 开头,后面跟图片的绝对或相对地址。形如:<code>\'image://http://example.com/xxx.png\'</code> 或 <code>\'image://./xxx.png\'</code>。</p>\n<p>除此之外,还支持 SVG 的路径作为矢量图形,将 <code>symbol</code> 设置为以 <code>\'path://\'</code> 开头的 SVG 路径即可。使用矢量图形的好处是,图片不会因为缩放而产生锯齿或模糊,并且通常而言比图片形式的文件大小更小。路径的查看方法为,打开一个 <code>SVG</code> 文件,找到形如 <code><path d="M… L…"></path></code> 的路径,将 <code>d</code> 的值添加在 <code>\'path://\'</code> 后即可。</p>\n<p>下面,我们展示一个将图形设置为矢量爱心形状的方式。</p>\n<p>首先,我们需要一个爱心的 SVG 文件,可以使用矢量编辑软件绘制,或者从网上下载到相关资源。其内容如下:</p>\n<md-code-block lang="xml" code="\'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI_Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MS45OTcgNTEuOTk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MS45OTcgNTEuOTk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI-CiAgICA8cGF0aCBkPSJNNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6Ii8-Cjwvc3ZnPg\'" line-highlights="\'\'" />\n<p>在 ECharts 的 <code>symbol</code> 配置项中,我们使用 <code>d</code> 的值作为路径。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IDIwLAogICAgICBzeW1ib2w6CiAgICAgICAgJ3BhdGg6Ly9NNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>这样,就能得到爱心形状的图形作为点的形状了。</p>\n<h3 id="%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">图形的大小</h3>\n<p>图形大小可以使用 <a href="https://echarts.apache.org/option.html#series-scatter.symbolSize"><code>series.symbolSize</code></a> 控制。它既可以是一个表示图形大小的像素值,也可以是一个包含两个 number 元素的数组,分别表示图形的宽和高。</p>\n<p>除此之外,它还可以是一个回调函数,其参数格式为:</p>\n<md-code-block lang="ts" code="\'KHZhbHVlOiBBcnJheSB8IG51bWJlciwgcGFyYW1zOiBPYmplY3QpID0-IG51bWJlciB8IEFycmF5Ow\'" line-highlights="\'\'" />\n<p>第一个参数为数据值,第二个参数是数据项的其他参数。</p>\n<p>在下面的例子中,我们将散点图点的大小设置为与其数据值成正比。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IGZ1bmN0aW9uKHZhbHVlKSB7CiAgICAgICAgcmV0dXJuIHZhbHVlIC8gMTA7CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/how-to/chart-types/scatter/basic-scatter"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:c},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:M},{title:"配置项",dir:p,draft:i},{title:"系列",dir:E,draft:i},{title:"样式",dir:w},{title:"数据集",dir:L},{title:"数据转换",dir:N},{title:"坐标系",dir:B,draft:i},{title:"坐标轴",dir:b},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:T}]},{title:"应用篇",dir:j,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:u},{title:"堆叠柱状图",dir:z},{title:"动态排序柱状图",dir:m},{title:"极坐标系柱状图",dir:D,draft:i},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:f},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:G},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:Y}]}]},{title:F,dir:t,draft:i},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:R},{title:"数据下钻",dir:K,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:X}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:c},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:M},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:E,draft:i},{title:"Style",dir:w},{title:"Dataset",dir:L},{title:"Data Transform",dir:N},{title:"Coordinate",dir:B,draft:i},{title:"Axis",dir:b},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:T}]},{title:"How To Guides",dir:j,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:u},{title:"Stacked Bar",dir:z},{title:"Bar Racing",dir:m},{title:"Bar Polar",dir:D,draft:i},{title:"Waterfall",dir:S}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:f},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:G},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:v},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:R},{title:"Drilldown",dir:K,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:X}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/chart-types/scatter/basic-scatter",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/cross-platform/baidu-app/index.html b/handbook/zh/how-to/cross-platform/baidu-app/index.html
index ab97d6d..9ccd786 100644
--- a/handbook/zh/how-to/cross-platform/baidu-app/index.html
+++ b/handbook/zh/how-to/cross-platform/baidu-app/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-app" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%A8%E7%99%BE%E5%BA%A6%E6%99%BA%E8%83%BD%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在百度智能小程序中使用 ECharts</h1> <p><a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表-beta</a> 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。</p> <p><a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo">aidu-smart-app-echarts-demo</a> 项目是使用该动态库的一个示例工程,可以作为参考,一般情况下不需要引入自己的项目。</p> <p>如有使用上的问题,可以在 <a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues">baidu-smart-app-echarts-demo/issues</a> 中咨询。</p> <h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2> <p>参见百度智能小程序文档 <a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表-beta</a>。</p> <h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2> <p>百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与<a href="./zh/application/cross-platform/wechat-app">在微信小程序中使用 ECharts</a> 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 <code>provider</code> 指定动态库名称,具体参见<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</a>的「在项目中引用动态库」章节。</p> <p>请务必查看<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</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/how-to/cross-platform/baidu-app.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,s,o,h,n,c,p,m,f,b,u,E,g,B,C,v,w,A,k,P,S,x,D,R,y,L,F,z,G,_,V,M,T,H,I,U,N,O,W,$,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%A8%E7%99%BE%E5%BA%A6%E6%99%BA%E8%83%BD%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在百度智能小程序中使用 ECharts</h1>\n<p><a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表-beta</a> 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。</p>\n<p><a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo">aidu-smart-app-echarts-demo</a> 项目是使用该动态库的一个示例工程,可以作为参考,一般情况下不需要引入自己的项目。</p>\n<p>如有使用上的问题,可以在 <a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues">baidu-smart-app-echarts-demo/issues</a> 中咨询。</p>\n<h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2>\n<p>参见百度智能小程序文档 <a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表-beta</a>。</p>\n<h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2>\n<p>百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与<a href="./zh/application/cross-platform/wechat-app">在微信小程序中使用 ECharts</a> 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 <code>provider</code> 指定动态库名称,具体参见<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</a>的「在项目中引用动态库」章节。</p>\n<p>请务必查看<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</a>的「兼容性说明」以了解各功能的实现方式。</p>\n',postPath:"zh/how-to/cross-platform/baidu-app"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:n},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:f}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:E,draft:t},{title:"系列",dir:g,draft:t},{title:"样式",dir:B},{title:"数据集",dir:C},{title:"数据转换",dir:v},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:P}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:F},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:_},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:I},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:O}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:$,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:s},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:n},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:f}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:E,draft:t},{title:"Series",dir:g,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:C},{title:"Data Transform",dir:v},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:P}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:F}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:_},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:I},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:$,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/cross-platform/baidu-app",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-app" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><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/server" 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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%A8%E7%99%BE%E5%BA%A6%E6%99%BA%E8%83%BD%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在百度智能小程序中使用 ECharts</h1> <p><a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表</a> 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。</p> <p><a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo">baidu-smart-app-echarts-demo</a> 项目是使用该动态库的一个示例工程,可以作为参考,一般情况下不需要引入自己的项目。</p> <p>如有使用上的问题,可以在 <a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues">baidu-smart-app-echarts-demo/issues</a> 中咨询。</p> <h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2> <p>参见百度智能小程序文档 <a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表</a>。</p> <h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2> <p>百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与<a href="./zh/application/cross-platform/wechat-app">在微信小程序中使用 ECharts</a> 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 <code>provider</code> 指定动态库名称,具体参见<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</a>的「在项目中引用动态库」章节。</p> <p>请务必查看<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</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/how-to/cross-platform/baidu-app.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,s,o,h,n,c,p,m,f,b,u,E,g,B,C,v,w,A,k,P,S,x,D,R,y,L,F,z,G,_,V,M,T,H,I,U,N,O,W,$,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%A8%E7%99%BE%E5%BA%A6%E6%99%BA%E8%83%BD%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在百度智能小程序中使用 ECharts</h1>\n<p><a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表</a> 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。</p>\n<p><a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo">baidu-smart-app-echarts-demo</a> 项目是使用该动态库的一个示例工程,可以作为参考,一般情况下不需要引入自己的项目。</p>\n<p>如有使用上的问题,可以在 <a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues">baidu-smart-app-echarts-demo/issues</a> 中咨询。</p>\n<h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2>\n<p>参见百度智能小程序文档 <a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表</a>。</p>\n<h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2>\n<p>百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与<a href="./zh/application/cross-platform/wechat-app">在微信小程序中使用 ECharts</a> 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 <code>provider</code> 指定动态库名称,具体参见<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</a>的「在项目中引用动态库」章节。</p>\n<p>请务必查看<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</a>的「兼容性说明」以了解各功能的实现方式。</p>\n',postPath:"zh/how-to/cross-platform/baidu-app"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:n},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:f}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:E,draft:t},{title:"系列",dir:g,draft:t},{title:"样式",dir:B},{title:"数据集",dir:C},{title:"数据转换",dir:v},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:P}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:F},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:_},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:I},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:O}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:$,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:s},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:n},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:f}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:E,draft:t},{title:"Series",dir:g,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:C},{title:"Data Transform",dir:v},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:P}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:F}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:_},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:I},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:$,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/cross-platform/baidu-app",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/cross-platform/server/index.html b/handbook/zh/how-to/cross-platform/server/index.html
index b412201..9912a22 100644
--- a/handbook/zh/how-to/cross-platform/server/index.html
+++ b/handbook/zh/how-to/cross-platform/server/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/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/interaction/drag" 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="echarts-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93" tabindex="-1">ECharts 服务端渲染</h1> <p>ECharts 可以在服务端进行渲染。例如<a href="https://echarts.apache.org//examples">官方示例</a>里的一个个小截图,就是在服务端预生成出来的。</p> <p>服务端渲染可以使用流行的 headless 环境,例如 <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>、<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>、<a href="https://github.com/Automattic/node-canvas">node-canvas</a>、<a href="https://github.com/jsdom/jsdom">jsdom</a>、<a href="http://phantomjs.org/">PhantomJS</a> 等。</p> <p>这是一些社区贡献的 ECharts 服务端渲染方案:</p> <ul><li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li> <li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li> <li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li> <li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li></ul></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/cross-platform/server.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,s,h,o,n,c,p,m,f,g,b,u,C,E,v,w,B,P,S,k,x,y,A,D,R,j,L,_,G,z,M,V,T,F,H,I,U,N,O,W,$,J,X,q,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="echarts-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93" tabindex="-1">ECharts 服务端渲染</h1>\n<p>ECharts 可以在服务端进行渲染。例如<a href="https://echarts.apache.org//examples">官方示例</a>里的一个个小截图,就是在服务端预生成出来的。</p>\n<p>服务端渲染可以使用流行的 headless 环境,例如 <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>、<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>、<a href="https://github.com/Automattic/node-canvas">node-canvas</a>、<a href="https://github.com/jsdom/jsdom">jsdom</a>、<a href="http://phantomjs.org/">PhantomJS</a> 等。</p>\n<p>这是一些社区贡献的 ECharts 服务端渲染方案:</p>\n<ul>\n<li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n<li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li>\n</ul>\n',postPath:"zh/how-to/cross-platform/server"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:n},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:f}]}]},{title:"概念篇",dir:g,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:E},{title:"数据集",dir:v},{title:"数据转换",dir:w},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:P},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:A},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:j,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:_,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:I}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:N}]}]},{title:O,dir:i,draft:t},{title:"跨平台方案",dir:W,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:$}]},{title:"数据处理",dir:J,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:O,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:s},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:n},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:f}]}]},{title:"Concepts",dir:g,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:E},{title:"Dataset",dir:v},{title:"Data Transform",dir:w},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:P},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:A},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:j,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:_,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:H},{title:"Rose Style",dir:I}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:W,children:[{title:"Server Side Rendering",dir:$}]},{title:"Data",dir:J,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/cross-platform/server",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/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/interaction/drag" 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="echarts-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93" tabindex="-1">ECharts 服务端渲染</h1> <p>ECharts 可以在服务端进行渲染。例如<a href="https://echarts.apache.org//examples">官方示例</a>里的一个个小截图,就是在服务端预生成出来的。</p> <p>服务端渲染可以使用流行的 headless 环境,例如 <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>、<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>、<a href="https://github.com/Automattic/node-canvas">node-canvas</a>、<a href="https://github.com/jsdom/jsdom">jsdom</a>、<a href="http://phantomjs.org/">PhantomJS</a> 等。</p> <p>这是一些社区贡献的 ECharts 服务端渲染方案:</p> <ul><li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li> <li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li> <li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li> <li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li></ul></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/how-to/cross-platform/server.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,s,h,o,n,c,p,m,f,g,b,u,C,E,v,w,B,P,S,k,x,y,A,D,R,j,L,_,G,z,M,V,T,F,H,I,U,N,O,W,$,J,X,q,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="echarts-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93" tabindex="-1">ECharts 服务端渲染</h1>\n<p>ECharts 可以在服务端进行渲染。例如<a href="https://echarts.apache.org//examples">官方示例</a>里的一个个小截图,就是在服务端预生成出来的。</p>\n<p>服务端渲染可以使用流行的 headless 环境,例如 <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>、<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>、<a href="https://github.com/Automattic/node-canvas">node-canvas</a>、<a href="https://github.com/jsdom/jsdom">jsdom</a>、<a href="http://phantomjs.org/">PhantomJS</a> 等。</p>\n<p>这是一些社区贡献的 ECharts 服务端渲染方案:</p>\n<ul>\n<li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n<li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li>\n</ul>\n',postPath:"zh/how-to/cross-platform/server"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:n},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:f}]}]},{title:"概念篇",dir:g,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:E},{title:"数据集",dir:v},{title:"数据转换",dir:w},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:P},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:A},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:j,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:_,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:I}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:N}]}]},{title:O,dir:i,draft:t},{title:"跨平台方案",dir:W,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:$}]},{title:"数据处理",dir:J,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:O,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:s},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:n},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:f}]}]},{title:"Concepts",dir:g,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:E},{title:"Dataset",dir:v},{title:"Data Transform",dir:w},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:P},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:A},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:j,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:_,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:H},{title:"Rose Style",dir:I}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:W,children:[{title:"Server Side Rendering",dir:$}]},{title:"Data",dir:J,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/cross-platform/server",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/cross-platform/wechat-app/index.html b/handbook/zh/how-to/cross-platform/wechat-app/index.html
index 7d45acc..7450485 100644
--- a/handbook/zh/how-to/cross-platform/wechat-app/index.html
+++ b/handbook/zh/how-to/cross-platform/wechat-app/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/wechat-app" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><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></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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在微信小程序中使用 ECharts</h1> <p><a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。</p> <h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2> <ol><li>下载该项目</li> <li>如有必要,将 <code>ec-canvas</code> 目录下的 <code>echarts.js</code> 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用<a href="https://echarts.apache.org//build.html">自定义构建</a>生成并替换 <code>echarts.js</code></li> <li><code>pages</code> 目录下是使用的示例文件,可以作为参考,或者删除不需要的页面。</li></ol> <p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目。</p> <h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2> <p>最新版的 ECharts 微信小程序支持微信 Canvas 2d,当用户的基础库版本 >= 2.9.0 且没有设置 <code>force-use-old-canvas="true"</code> 的情况下,使用新的 Canvas 2d(默认)。</p> <p>使用新的 Canvas 2d 可以提升渲染性能,解决非同层渲染问题,强烈建议开启。</p> <p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82">Canvas 2d 版本要求</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/how-to/cross-platform/wechat-app.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,o,c,h,s,p,f,E,m,b,g,u,C,B,v,w,x,A,P,S,k,D,R,y,F,L,G,_,z,V,M,T,H,I,U,j,q,N,O,W,$,X,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在微信小程序中使用 ECharts</h1>\n<p><a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。</p>\n<h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2>\n<ol>\n<li>下载该项目</li>\n<li>如有必要,将 <code>ec-canvas</code> 目录下的 <code>echarts.js</code> 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用<a href="https://echarts.apache.org//build.html">自定义构建</a>生成并替换 <code>echarts.js</code></li>\n<li><code>pages</code> 目录下是使用的示例文件,可以作为参考,或者删除不需要的页面。</li>\n</ol>\n<p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目。</p>\n<h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2>\n<p>最新版的 ECharts 微信小程序支持微信 Canvas 2d,当用户的基础库版本 >= 2.9.0 且没有设置 <code>force-use-old-canvas="true"</code> 的情况下,使用新的 Canvas 2d(默认)。</p>\n<p>使用新的 Canvas 2d 可以提升渲染性能,解决非同层渲染问题,强烈建议开启。</p>\n<p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82">Canvas 2d 版本要求</a>。</p>\n',postPath:"zh/how-to/cross-platform/wechat-app"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:E}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:g,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:C},{title:"数据集",dir:B},{title:"数据转换",dir:v},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:x},{title:"视觉映射",dir:e},{title:"图例",dir:A},{title:"事件与行为",dir:P}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:F,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:_},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:I},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:q}]}]},{title:N,dir:i,draft:t},{title:"跨平台方案",dir:O,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:W}]},{title:"数据处理",dir:$,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:N,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:E}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:B},{title:"Data Transform",dir:v},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:x},{title:"Visual Mapping",dir:e},{title:"Legend",dir:A},{title:"Event and Action",dir:P}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:F,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:_},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:I},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:q}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:O,children:[{title:"Server Side Rendering",dir:W}]},{title:"Data",dir:$,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/cross-platform/wechat-app",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/wechat-app" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><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></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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在微信小程序中使用 ECharts</h1> <p><a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。</p> <h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2> <ol><li>下载该项目</li> <li>如有必要,将 <code>ec-canvas</code> 目录下的 <code>echarts.js</code> 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用<a href="https://echarts.apache.org//build.html">自定义构建</a>生成并替换 <code>echarts.js</code></li> <li><code>pages</code> 目录下是使用的示例文件,可以作为参考,或者删除不需要的页面。</li></ol> <p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目。</p> <h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2> <p>最新版的 ECharts 微信小程序支持微信 Canvas 2d,当用户的基础库版本 >= 2.9.0 且没有设置 <code>force-use-old-canvas="true"</code> 的情况下,使用新的 Canvas 2d(默认)。</p> <p>使用新的 Canvas 2d 可以提升渲染性能,解决非同层渲染问题,强烈建议开启。</p> <p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82">Canvas 2d 版本要求</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/how-to/cross-platform/wechat-app.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,o,c,h,s,p,f,E,m,b,g,u,C,B,v,w,x,A,P,S,k,D,R,y,F,L,G,_,z,V,M,T,H,I,U,j,q,N,O,W,$,X,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在微信小程序中使用 ECharts</h1>\n<p><a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。</p>\n<h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2>\n<ol>\n<li>下载该项目</li>\n<li>如有必要,将 <code>ec-canvas</code> 目录下的 <code>echarts.js</code> 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用<a href="https://echarts.apache.org//build.html">自定义构建</a>生成并替换 <code>echarts.js</code></li>\n<li><code>pages</code> 目录下是使用的示例文件,可以作为参考,或者删除不需要的页面。</li>\n</ol>\n<p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目。</p>\n<h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2>\n<p>最新版的 ECharts 微信小程序支持微信 Canvas 2d,当用户的基础库版本 >= 2.9.0 且没有设置 <code>force-use-old-canvas="true"</code> 的情况下,使用新的 Canvas 2d(默认)。</p>\n<p>使用新的 Canvas 2d 可以提升渲染性能,解决非同层渲染问题,强烈建议开启。</p>\n<p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82">Canvas 2d 版本要求</a>。</p>\n',postPath:"zh/how-to/cross-platform/wechat-app"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:E}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:g,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:C},{title:"数据集",dir:B},{title:"数据转换",dir:v},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:x},{title:"视觉映射",dir:e},{title:"图例",dir:A},{title:"事件与行为",dir:P}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:F,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:_},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:I},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:q}]}]},{title:N,dir:i,draft:t},{title:"跨平台方案",dir:O,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:W}]},{title:"数据处理",dir:$,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:N,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:E}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:B},{title:"Data Transform",dir:v},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:x},{title:"Visual Mapping",dir:e},{title:"Legend",dir:A},{title:"Event and Action",dir:P}]},{title:"How To Guides",dir:S,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:F,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:_},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:I},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:q}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:O,children:[{title:"Server Side Rendering",dir:W}]},{title:"Data",dir:$,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/cross-platform/wechat-app",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/data/dynamic-data/index.html b/handbook/zh/how-to/data/dynamic-data/index.html
index 52e0019..5aebf98 100644
--- a/handbook/zh/how-to/data/dynamic-data/index.html
+++ b/handbook/zh/how-to/data/dynamic-data/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">异步数据的加载与动态更新</h1> <h2 id="%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD" tabindex="-1">异步加载</h2> <p><a href="zh/get-started">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的,但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/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/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">异步数据的加载与动态更新</h1> <h2 id="%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD" tabindex="-1">异步加载</h2> <p><a href="zh/get-started">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的,但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'data.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// data 的结构:</span>
@@ -75,7 +75,8 @@
$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'data.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
myChart<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>效果如下:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">数据的动态更新</h2> <p>ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。</p> <p>所有数据的更新都通过 <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a>实现,你只需要定时获取数据,<a href="~api.html#echartsInstance.setOption">setOption</a> 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p> <p>具体可以看下面示例:</p> <p><iframe width="100%" height="350" src=""></iframe></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/how-to/data/dynamic-data.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,d,r,a,l,n,o,h,s,c,g,C,p,I,A,m,u,B,b,E,f,G,y,S,L,w,k,O,W,Z,v,R,Y,X,D,x,H,K,F,P,Q,j,z,V,J,T,M,q,U,N,_,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">异步数据的加载与动态更新</h1>\n<h2 id="%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD" tabindex="-1">异步加载</h2>\n<p><a href="zh/get-started">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的,但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CgokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbihkYXRhKSB7CiAgLy8gZGF0YSDnmoTnu5PmnoQ6CiAgLy8gewogIC8vICAgICBjYXRlZ29yaWVzOiBbIuihrOihqyIsIue-iuavm-ihqyIsIumbque6uuihqyIsIuijpOWtkCIsIumrmOi3n-meiyIsIuiinOWtkCJdLAogIC8vICAgICB2YWx1ZXM6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgLy8gfQogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHRpdGxlOiB7CiAgICAgIHRleHQ6ICflvILmraXmlbDmja7liqDovb3npLrkvosnCiAgICB9LAogICAgdG9vbHRpcDoge30sCiAgICBsZWdlbmQ6IHt9LAogICAgeEF4aXM6IHsKICAgICAgZGF0YTogZGF0YS5jYXRlZ29yaWVzCiAgICB9LAogICAgeUF4aXM6IHt9LAogICAgc2VyaWVzOiBbCiAgICAgIHsKICAgICAgICBuYW1lOiAn6ZSA6YePJywKICAgICAgICB0eXBlOiAnYmFyJywKICAgICAgICBkYXRhOiBkYXRhLnZhbHVlcwogICAgICB9CiAgICBdCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>或者先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIOaYvuekuuagh-mimO-8jOWbvuS-i-WSjOepuueahOWdkOagh-i9tApteUNoYXJ0LnNldE9wdGlvbih7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICflvILmraXmlbDmja7liqDovb3npLrkvosnCiAgfSwKICB0b29sdGlwOiB7fSwKICBsZWdlbmQ6IHsKICAgIGRhdGE6IFsn6ZSA6YePJ10KICB9LAogIHhBeGlzOiB7CiAgICBkYXRhOiBbXQogIH0sCiAgeUF4aXM6IHt9LAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAn6ZSA6YePJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFtdCiAgICB9CiAgXQp9KTsKCi8vIOW8guatpeWKoOi9veaVsOaNrgokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbihkYXRhKSB7CiAgLy8g5aGr5YWl5pWw5o2uCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgeEF4aXM6IHsKICAgICAgZGF0YTogZGF0YS5jYXRlZ29yaWVzCiAgICB9LAogICAgc2VyaWVzOiBbCiAgICAgIHsKICAgICAgICAvLyDmoLnmja7lkI3lrZflr7nlupTliLDnm7jlupTnmoTns7vliJcKICAgICAgICBuYW1lOiAn6ZSA6YePJywKICAgICAgICBkYXRhOiBkYXRhLmRhdGEKICAgICAgfQogICAgXQogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<p>如下:</p>\n<p><md-example src="doc-example/tutorial-async"></md-example></p>\n<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列,上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新,但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p>\n<h2 id="loading-%E5%8A%A8%E7%94%BB" tabindex="-1">loading 动画</h2>\n<p>如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。</p>\n<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href="https://echarts.apache.org//api.html#echartsInstance.showLoading">showLoading</a> 方法显示。数据加载完成后再调用 <a href="https://echarts.apache.org//api.html#echartsInstance.hideLoading">hideLoading</a> 方法隐藏加载动画。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zaG93TG9hZGluZygpOwokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbiAoZGF0YSkgewogICAgbXlDaGFydC5oaWRlTG9hZGluZygpOwogICAgbXlDaGFydC5zZXRPcHRpb24oLi4uKTsKfSk7\'" line-highlights="\'\'" />\n<p>效果如下:</p>\n<p><md-example src="doc-example/tutorial-loading"></md-example></p>\n<h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">数据的动态更新</h2>\n<p>ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。</p>\n<p>所有数据的更新都通过 <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a>实现,你只需要定时获取数据,<a href="~api.html#echartsInstance.setOption">setOption</a> 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<p>具体可以看下面示例:</p>\n<p><md-example src="doc-example/tutorial-dynamic-data"></md-example></p>\n',postPath:"zh/how-to/data/dynamic-data"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:B},{title:"数据集",dir:b},{title:"数据转换",dir:E},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:G},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:w,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:k},{title:"堆叠柱状图",dir:O},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:Z,draft:t},{title:"阶梯瀑布图",dir:v},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:X},{title:"区域面积图",dir:D},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:F},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:Q,children:[{title:"基础散点图",dir:j}]}]},{title:z,dir:i,draft:t},{title:"跨平台方案",dir:V,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:N,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:z,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:b},{title:"Data Transform",dir:E},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:G},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:L,children:[{title:"Common Charts",dir:w,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:k},{title:"Stacked Bar",dir:O},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:Z,draft:t},{title:"Waterfall",dir:v}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:X},{title:"Area Chart",dir:D},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:F},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:Q,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:V,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:N,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/data/dynamic-data",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<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>效果如下:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">数据的动态更新</h2> <p>ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。</p> <p>所有数据的更新都通过 <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a>实现,你只需要定时获取数据,<a href="~api.html#echartsInstance.setOption">setOption</a> 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p> <p>具体可以看下面示例:</p> <p><iframe width="100%" height="350" src=""></iframe></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/how-to/data/dynamic-data.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,d,r,a,l,n,o,h,s,c,g,C,p,I,A,m,u,B,b,E,f,G,y,S,L,w,k,O,W,Z,v,R,Y,X,D,x,H,K,F,P,Q,j,z,V,J,T,M,q,U,N,_,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">异步数据的加载与动态更新</h1>\n<h2 id="%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD" tabindex="-1">异步加载</h2>\n<p><a href="zh/get-started">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的,但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CgokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbihkYXRhKSB7CiAgLy8gZGF0YSDnmoTnu5PmnoQ6CiAgLy8gewogIC8vICAgICBjYXRlZ29yaWVzOiBbIuihrOihqyIsIue-iuavm-ihqyIsIumbque6uuihqyIsIuijpOWtkCIsIumrmOi3n-meiyIsIuiinOWtkCJdLAogIC8vICAgICB2YWx1ZXM6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgLy8gfQogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHRpdGxlOiB7CiAgICAgIHRleHQ6ICflvILmraXmlbDmja7liqDovb3npLrkvosnCiAgICB9LAogICAgdG9vbHRpcDoge30sCiAgICBsZWdlbmQ6IHt9LAogICAgeEF4aXM6IHsKICAgICAgZGF0YTogZGF0YS5jYXRlZ29yaWVzCiAgICB9LAogICAgeUF4aXM6IHt9LAogICAgc2VyaWVzOiBbCiAgICAgIHsKICAgICAgICBuYW1lOiAn6ZSA6YePJywKICAgICAgICB0eXBlOiAnYmFyJywKICAgICAgICBkYXRhOiBkYXRhLnZhbHVlcwogICAgICB9CiAgICBdCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>或者先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIOaYvuekuuagh-mimO-8jOWbvuS-i-WSjOepuueahOWdkOagh-i9tApteUNoYXJ0LnNldE9wdGlvbih7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICflvILmraXmlbDmja7liqDovb3npLrkvosnCiAgfSwKICB0b29sdGlwOiB7fSwKICBsZWdlbmQ6IHsKICAgIGRhdGE6IFsn6ZSA6YePJ10KICB9LAogIHhBeGlzOiB7CiAgICBkYXRhOiBbXQogIH0sCiAgeUF4aXM6IHt9LAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAn6ZSA6YePJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFtdCiAgICB9CiAgXQp9KTsKCi8vIOW8guatpeWKoOi9veaVsOaNrgokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbihkYXRhKSB7CiAgLy8g5aGr5YWl5pWw5o2uCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgeEF4aXM6IHsKICAgICAgZGF0YTogZGF0YS5jYXRlZ29yaWVzCiAgICB9LAogICAgc2VyaWVzOiBbCiAgICAgIHsKICAgICAgICAvLyDmoLnmja7lkI3lrZflr7nlupTliLDnm7jlupTnmoTns7vliJcKICAgICAgICBuYW1lOiAn6ZSA6YePJywKICAgICAgICBkYXRhOiBkYXRhLmRhdGEKICAgICAgfQogICAgXQogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<p>如下:</p>\n<p><md-example src="doc-example/tutorial-async"></md-example></p>\n<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列,上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新,但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p>\n<h2 id="loading-%E5%8A%A8%E7%94%BB" tabindex="-1">loading 动画</h2>\n<p>如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。</p>\n<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href="https://echarts.apache.org//api.html#echartsInstance.showLoading">showLoading</a> 方法显示。数据加载完成后再调用 <a href="https://echarts.apache.org//api.html#echartsInstance.hideLoading">hideLoading</a> 方法隐藏加载动画。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zaG93TG9hZGluZygpOwokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbiAoZGF0YSkgewogICAgbXlDaGFydC5oaWRlTG9hZGluZygpOwogICAgbXlDaGFydC5zZXRPcHRpb24oLi4uKTsKfSk7\'" line-highlights="\'\'" />\n<p>效果如下:</p>\n<p><md-example src="doc-example/tutorial-loading"></md-example></p>\n<h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">数据的动态更新</h2>\n<p>ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。</p>\n<p>所有数据的更新都通过 <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a>实现,你只需要定时获取数据,<a href="~api.html#echartsInstance.setOption">setOption</a> 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<p>具体可以看下面示例:</p>\n<p><md-example src="doc-example/tutorial-dynamic-data"></md-example></p>\n',postPath:"zh/how-to/data/dynamic-data"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:B},{title:"数据集",dir:b},{title:"数据转换",dir:E},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:G},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:w,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:k},{title:"堆叠柱状图",dir:O},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:Z,draft:t},{title:"阶梯瀑布图",dir:v},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:X},{title:"区域面积图",dir:D},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:F},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:Q,children:[{title:"基础散点图",dir:j}]}]},{title:z,dir:i,draft:t},{title:"跨平台方案",dir:V,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:N,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:z,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:b},{title:"Data Transform",dir:E},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:G},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:L,children:[{title:"Common Charts",dir:w,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:k},{title:"Stacked Bar",dir:O},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:Z,draft:t},{title:"Waterfall",dir:v}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:X},{title:"Area Chart",dir:D},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:F},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:Q,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:V,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:N,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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/how-to/data/dynamic-data",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/interaction/drag/index.html b/handbook/zh/how-to/interaction/drag/index.html
index 223fd59..8e79098 100644
--- a/handbook/zh/how-to/interaction/drag/index.html
+++ b/handbook/zh/how-to/interaction/drag/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></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="%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0" tabindex="-1">拖拽的实现</h1> <p>本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts<sup>TM</sup> 中实现复杂的交互。</p> <p><iframe width="100%" height="400" src=""></iframe></p> <p>这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以做更多的事情,比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。</p> <p>echarts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。</p> <h2 id="%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD" tabindex="-1">实现基本的拖拽功能</h2> <p>在这个例子中,基础的图表是一个 <a href="https://echarts.apache.org/option.html#series-line">折线图 (series-line)</a>。参见如下配置:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> symbolSize <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></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="%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0" tabindex="-1">拖拽的实现</h1> <p>本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts<sup>TM</sup> 中实现复杂的交互。</p> <p><iframe width="100%" height="400" src=""></iframe></p> <p>这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以做更多的事情,比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。</p> <p>echarts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。</p> <h2 id="%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD" tabindex="-1">实现基本的拖拽功能</h2> <p>在这个例子中,基础的图表是一个 <a href="https://echarts.apache.org/option.html#series-line">折线图 (series-line)</a>。参见如下配置:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> symbolSize <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
<span class="token comment">// 这个 data 变量在这里单独声明,在后面也会用到。</span>
<span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
@@ -202,7 +202,8 @@
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>有了这些基础,就可以定制更多的功能了。可以加 <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom</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/how-to/interaction/drag.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,l,a,d,g,o,r,I,C,h,n,c,p,A,s,G,b,m,Z,u,L,B,W,K,X,v,w,y,R,O,Y,S,H,F,j,J,k,V,E,D,U,N,f,z,T,q,M,P,x,Q,_,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0" tabindex="-1">拖拽的实现</h1>\n<p>本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts<sup>TM</sup> 中实现复杂的交互。</p>\n<p><md-example src="line-draggable" height="400"></md-example></p>\n<p>这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以做更多的事情,比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。</p>\n<h2 id="%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD" tabindex="-1">实现基本的拖拽功能</h2>\n<p>在这个例子中,基础的图表是一个 <a href="https://echarts.apache.org/option.html#series-line">折线图 (series-line)</a>。参见如下配置:</p>\n<md-code-block lang="js" code="\'dmFyIHN5bWJvbFNpemUgPSAyMDsKCi8vIOi_meS4qiBkYXRhIOWPmOmHj-WcqOi_memHjOWNleeLrOWjsOaYju-8jOWcqOWQjumdouS5n-S8mueUqOWIsOOAggp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwoKbXlDaGFydC5zZXRPcHRpb24oewogIHhBeGlzOiB7CiAgICBtaW46IC0xMDAsCiAgICBtYXg6IDgwLAogICAgdHlwZTogJ3ZhbHVlJywKICAgIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfQogIH0sCiAgeUF4aXM6IHsKICAgIG1pbjogLTMwLAogICAgbWF4OiA2MCwKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBheGlzTGluZTogeyBvblplcm86IGZhbHNlIH0KICB9LAogIHNlcmllczogWwogICAgewogICAgICBpZDogJ2EnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZSwKICAgICAgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgLy8g5Li65LqG5pa55L6_5ouW5ou977yM5oqKIHN5bWJvbFNpemUg5bC65a-46K6-5aSn5LqG44CCCiAgICAgIGRhdGE6IGRhdGEKICAgIH0KICBdCn0pOw\'" line-highlights="\'\'" />\n<p>既然折线中原生的点没有拖拽功能,我们就为它加上拖拽功能:用 <a href="https://echarts.apache.org/option.html#graphic">graphic</a> 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIOWjsOaYjuS4gOS4qiBncmFwaGljIGNvbXBvbmVudO-8jOmHjOmdouacieiLpeW5suS4qiB0eXBlIOS4uiAnY2lyY2xlJyDnmoQgZ3JhcGhpYyBlbGVtZW50c-OAggogIC8vIOi_memHjOS9v-eUqOS6hiBlY2hhcnRzLnV0aWwubWFwIOi_meS4quW4ruWKqeaWueazle-8jOWFtuihjOS4uuWSjCBBcnJheS5wcm90b3R5cGUubWFwIOS4gOagt--8jOS9huaYr-WFvOWuuSBlczUg5Lul5LiL55qE546v5aKD44CCCiAgLy8g55SoIG1hcCDmlrnms5XpgY3ljoYgZGF0YSDnmoTmr4_pobnvvIzkuLrmr4_pobnnlJ_miJDkuIDkuKrlnIbngrnjgIIKICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGRhdGFJdGVtLCBkYXRhSW5kZXgpIHsKICAgIHJldHVybiB7CiAgICAgIC8vICdjaXJjbGUnIOihqOekuui_meS4qiBncmFwaGljIGVsZW1lbnQg55qE57G75Z6L5piv5ZyG54K544CCCiAgICAgIHR5cGU6ICdjaXJjbGUnLAoKICAgICAgc2hhcGU6IHsKICAgICAgICAvLyDlnIbngrnnmoTljYrlvoTjgIIKICAgICAgICByOiBzeW1ib2xTaXplIC8gMgogICAgICB9LAogICAgICAvLyDnlKggdHJhbnNmb3JtIOeahOaWueW8j-WvueWchueCuei_m-ihjOWumuS9jeOAgnBvc2l0aW9uOiBbeCwgeV0g6KGo56S65bCG5ZyG54K55bmz56e75YiwIFt4LCB5XSDkvY3nva7jgIIKICAgICAgLy8g6L-Z6YeM5L2_55So5LqGIGNvbnZlcnRUb1BpeGVsIOi_meS4qiBBUEkg5p2l5b6X5Yiw5q-P5Liq5ZyG54K555qE5L2N572u77yM5LiL6Z2i5LuL57uN44CCCiAgICAgIHBvc2l0aW9uOiBteUNoYXJ0LmNvbnZlcnRUb1BpeGVsKCdncmlkJywgZGF0YUl0ZW0pLAoKICAgICAgLy8g6L-Z5Liq5bGe5oCn6K6p5ZyG54K55LiN5Y-v6KeB77yI5L2G5piv5LiN5b2x5ZON5LuW5ZON5bqU6byg5qCH5LqL5Lu277yJ44CCCiAgICAgIGludmlzaWJsZTogdHJ1ZSwKICAgICAgLy8g6L-Z5Liq5bGe5oCn6K6p5ZyG54K55Y-v5Lul6KKr5ouW5ou944CCCiAgICAgIGRyYWdnYWJsZTogdHJ1ZSwKICAgICAgLy8g5oqKIHog5YC86K6-5b6X5q-U6L6D5aSn77yM6KGo56S66L-Z5Liq5ZyG54K55Zyo5pyA5LiK5pa577yM6IO96KaG55uW5L2P5bey5pyJ55qE5oqY57q_5Zu-55qE5ZyG54K544CCCiAgICAgIHo6IDEwMCwKICAgICAgLy8g5q2k5ZyG54K555qE5ouW5ou955qE5ZON5bqU5LqL5Lu277yM5Zyo5ouW5ou96L-H56iL5Lit5Lya5LiN5pat6KKr6Kem5Y-R44CC5LiL6Z2i5LuL57uN6K-m5oOF44CCCiAgICAgIC8vIOi_memHjOS9v-eUqOS6hiBlY2hhcnRzLnV0aWwuY3Vycnkg6L-Z5Liq5biu5Yqp5pa55rOV77yM5oSP5oCd5piv55Sf5oiQ5LiA5Liq5LiOIG9uUG9pbnREcmFnZ2luZwogICAgICAvLyDlip_og73kuIDmoLfnmoTmlrDnmoTlh73mlbDvvIzlj6rkuI3ov4fnrKzkuIDkuKrlj4LmlbDmsLjov5zkuLrmraTml7bkvKDlhaXnmoQgZGF0YUluZGV4IOeahOWAvOOAggogICAgICBvbmRyYWc6IGVjaGFydHMudXRpbC5jdXJyeShvblBvaW50RHJhZ2dpbmcsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7\'" line-highlights="\'\'" />\n<p>上面的代码中,使用 <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> 这个 API,进行了从 data 到“像素坐标”的转换,从而得到了每个圆点应该在的位置,从而能绘制这些圆点。<code>myChart.convertToPixel(\'grid\', dataItem)</code> 这句话中,第一个参数 <code>\'grid\'</code> 表示 <code>dataItem</code> 在 <a href="https://echarts.apache.org/option.html#grid">grid</a> 这个组件中(即直角坐标系)中进行转换。所谓“像素坐标”,就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行,也就是说,须在坐标系(<a href="https://echarts.apache.org/option.html#grid">grid</a>)初始化后才能调用 <code>myChart.convertToPixel(\'grid\', dataItem)</code>。</p>\n<p>有了这段代码后,就有了诸个能拖拽的点。接下来要为每个点,加上拖拽响应的事件:</p>\n<md-code-block lang="js" code="\'Ly8g5ouW5ou95p-Q5Liq5ZyG54K555qE6L-H56iL5Lit5Lya5LiN5pat6LCD55So5q2k5Ye95pWw44CCCi8vIOatpOWHveaVsOS4reS8muagueaNruaLluaLveWQjueahOaWsOS9jee9ru-8jOaUueWPmCBkYXRhIOS4reeahOWAvO-8jOW5tueUqOaWsOeahCBkYXRhIOWAvO-8jOmHjee7mOaKmOe6v-Wbvu-8jOS7juiAjOS9v-aKmOe6v-WbvuWQjOatpeS6juiiq-aLluaLveeahOmakOiXj-WchueCueOAggpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4KSB7CiAgLy8g6L-Z6YeM55qEIGRhdGEg5bCx5piv5pys5paH5pyA5Yid55qE5Luj56CB5Z2X5Lit5aOw5piO55qEIGRhdGHvvIzlnKjov5nph4zkvJrooqvmm7TmlrDjgIIKICAvLyDov5nph4znmoQgdGhpcyDlsLHmmK_ooqvmi5bmi73nmoTlnIbngrnjgIJ0aGlzLnBvc2l0aW9uIOWwseaYr-WchueCueW9k-WJjeeahOS9jee9ruOAggogIGRhdGFbZGF0YUluZGV4XSA9IG15Q2hhcnQuY29udmVydEZyb21QaXhlbCgnZ3JpZCcsIHRoaXMucG9zaXRpb24pOwogIC8vIOeUqOabtOaWsOWQjueahCBkYXRh77yM6YeN57uY5oqY57q_5Zu-44CCCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgc2VyaWVzOiBbCiAgICAgIHsKICAgICAgICBpZDogJ2EnLAogICAgICAgIGRhdGE6IGRhdGEKICAgICAgfQogICAgXQogIH0pOwp9\'" line-highlights="\'\'" />\n<p>上面的代码中,使用了 <a href="https://echarts.apache.org//api.html#echartsInstance.convertFromPixel">convertFromPixel</a> 这个 API。它是 <a href="https://echarts.apache.org//api.html#echartsInstance.convertToPixel">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel(\'grid\', this.position)</code> 表示把当前像素坐标转换成 <a href="https://echarts.apache.org/option.html#grid">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化,加上这些代码:</p>\n<md-code-block lang="js" code="\'d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIGZ1bmN0aW9uKCkgewogIC8vIOWvueavj-S4quaLluaLveWchueCuemHjeaWsOiuoeeul-S9jee9ru-8jOW5tueUqCBzZXRPcHRpb24g5pu05paw44CCCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgZ3JhcGhpYzogZWNoYXJ0cy51dGlsLm1hcChkYXRhLCBmdW5jdGlvbihpdGVtLCBkYXRhSW5kZXgpIHsKICAgICAgcmV0dXJuIHsKICAgICAgICBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pCiAgICAgIH07CiAgICB9KQogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="%E6%B7%BB%E5%8A%A0-tooltip-%E7%BB%84%E4%BB%B6" tabindex="-1">添加 tooltip 组件</h2>\n<p>到此,拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中,被拖拽的点的 data 值的变化状况,我们可以使用 <a href="https://echarts.apache.org/option.html#tooltip">tooltip</a> 组件来实时显示这个值。但是,tooltip 有其默认的“显示”“隐藏”触发规则,在我们拖拽的场景中并不适用,所以我们还要手动定制 tooltip 的“显示”“隐藏”行为。</p>\n<p>在上述代码中分别添加如下定义:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLiwKICB0b29sdGlwOiB7CiAgICAvLyDooajnpLrkuI3kvb_nlKjpu5jorqTnmoTigJzmmL7npLrigJ3igJzpmpDol4_igJ3op6blj5Hop4TliJnjgIIKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxicj5ZOiAnICsKICAgICAgICBwYXJhbXMuZGF0YVsxXS50b0ZpeGVkKDIpCiAgICAgICk7CiAgICB9CiAgfQp9KTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGRhdGEubWFwKGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgIC8vIC4uLiwKICAgICAgLy8g5ZyoIG1vdXNlb3ZlciDnmoTml7blgJnmmL7npLrvvIzlnKggbW91c2VvdXQg55qE5pe25YCZ6ZqQ6JeP44CCCiAgICAgIG9ubW91c2Vtb3ZlOiBlY2hhcnRzLnV0aWwuY3Vycnkoc2hvd1Rvb2x0aXAsIGRhdGFJbmRleCksCiAgICAgIG9ubW91c2VvdXQ6IGVjaGFydHMudXRpbC5jdXJyeShoaWRlVG9vbHRpcCwgZGF0YUluZGV4KQogICAgfTsKICB9KQp9KTsKCmZ1bmN0aW9uIHNob3dUb29sdGlwKGRhdGFJbmRleCkgewogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGRhdGFJbmRleAogIH0pOwp9CgpmdW5jdGlvbiBoaWRlVG9vbHRpcChkYXRhSW5kZXgpIHsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdoaWRlVGlwJwogIH0pOwp9\'" line-highlights="\'\'" />\n<p>这里使用了 <a href="api.html#echartsInstance.dispatchAction">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href="api.html#action.tooltip.showTip">showTip</a>、<a href="api.html#action.tooltip.hideTip">hideTip</a>。</p>\n<h2 id="%E5%85%A8%E9%83%A8%E4%BB%A3%E7%A0%81" tabindex="-1">全部代码</h2>\n<p>总结一下,全部的代码如下:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Cgp2YXIgc3ltYm9sU2l6ZSA9IDIwOwp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxiciAvPlk6ICcgKwogICAgICAgIHBhcmFtcy5kYXRhWzFdLnRvRml4ZWQoMikKICAgICAgKTsKICAgIH0KICB9LAogIHhBeGlzOiB7IG1pbjogLTEwMCwgbWF4OiA4MCwgdHlwZTogJ3ZhbHVlJywgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9IH0sCiAgeUF4aXM6IHsgbWluOiAtMzAsIG1heDogNjAsIHR5cGU6ICd2YWx1ZScsIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfSB9LAogIHNlcmllczogWwogICAgeyBpZDogJ2EnLCB0eXBlOiAnbGluZScsIHNtb290aDogdHJ1ZSwgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgZGF0YTogZGF0YSB9CiAgXQp9KTsKbXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oaXRlbSwgZGF0YUluZGV4KSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnY2lyY2xlJywKICAgICAgcG9zaXRpb246IG15Q2hhcnQuY29udmVydFRvUGl4ZWwoJ2dyaWQnLCBpdGVtKSwKICAgICAgc2hhcGU6IHsgcjogc3ltYm9sU2l6ZSAvIDIgfSwKICAgICAgaW52aXNpYmxlOiB0cnVlLAogICAgICBkcmFnZ2FibGU6IHRydWUsCiAgICAgIG9uZHJhZzogZWNoYXJ0cy51dGlsLmN1cnJ5KG9uUG9pbnREcmFnZ2luZywgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW1vdmU6IGVjaGFydHMudXRpbC5jdXJyeShzaG93VG9vbHRpcCwgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW91dDogZWNoYXJ0cy51dGlsLmN1cnJ5KGhpZGVUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICB6OiAxMDAKICAgIH07CiAgfSkKfSk7CndpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCBmdW5jdGlvbigpIHsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4geyBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pIH07CiAgICB9KQogIH0pOwp9KTsKZnVuY3Rpb24gc2hvd1Rvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnc2hvd1RpcCcsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogZGF0YUluZGV4CiAgfSk7Cn0KZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7IHR5cGU6ICdoaWRlVGlwJyB9KTsKfQpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4LCBkeCwgZHkpIHsKICBkYXRhW2RhdGFJbmRleF0gPSBteUNoYXJ0LmNvbnZlcnRGcm9tUGl4ZWwoJ2dyaWQnLCB0aGlzLnBvc2l0aW9uKTsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIGlkOiAnYScsCiAgICAgICAgZGF0YTogZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0\'" line-highlights="\'\'" />\n<p>有了这些基础,就可以定制更多的功能了。可以加 <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom</a> 组件,可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n',postPath:"zh/how-to/interaction/drag"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:r,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:C},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:p}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:s},{title:"配置项",dir:G,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:Z},{title:"数据转换",dir:u},{title:"坐标系",dir:L,draft:i},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:K}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:w},{title:"堆叠柱状图",dir:y},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:O,draft:i},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:S,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:j},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:N}]}]},{title:f,dir:t,draft:i},{title:"跨平台方案",dir:z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:T}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:P,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:x}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:f,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:o},{title:"Resources",dir:r,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:C},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:p}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:s},{title:"Chart Option",dir:G,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:Z},{title:"Data Transform",dir:u},{title:"Coordinate",dir:L,draft:i},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:K}]},{title:"How To Guides",dir:X,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:w},{title:"Stacked Bar",dir:y},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:O,draft:i},{title:"Waterfall",dir:Y}]},{title:"Line",dir:S,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:j},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:E},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:z,children:[{title:"Server Side Rendering",dir:T}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:P,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:x}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/interaction/drag",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>有了这些基础,就可以定制更多的功能了。可以加 <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom</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/how-to/interaction/drag.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,l,a,d,g,o,r,I,C,h,n,c,p,A,s,G,b,m,Z,u,L,B,W,K,X,v,w,y,R,O,Y,S,H,F,j,J,k,V,E,D,U,N,f,z,T,q,M,P,x,Q,_,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0" tabindex="-1">拖拽的实现</h1>\n<p>本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts<sup>TM</sup> 中实现复杂的交互。</p>\n<p><md-example src="line-draggable" height="400"></md-example></p>\n<p>这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以做更多的事情,比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。</p>\n<h2 id="%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD" tabindex="-1">实现基本的拖拽功能</h2>\n<p>在这个例子中,基础的图表是一个 <a href="https://echarts.apache.org/option.html#series-line">折线图 (series-line)</a>。参见如下配置:</p>\n<md-code-block lang="js" code="\'dmFyIHN5bWJvbFNpemUgPSAyMDsKCi8vIOi_meS4qiBkYXRhIOWPmOmHj-WcqOi_memHjOWNleeLrOWjsOaYju-8jOWcqOWQjumdouS5n-S8mueUqOWIsOOAggp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwoKbXlDaGFydC5zZXRPcHRpb24oewogIHhBeGlzOiB7CiAgICBtaW46IC0xMDAsCiAgICBtYXg6IDgwLAogICAgdHlwZTogJ3ZhbHVlJywKICAgIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfQogIH0sCiAgeUF4aXM6IHsKICAgIG1pbjogLTMwLAogICAgbWF4OiA2MCwKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBheGlzTGluZTogeyBvblplcm86IGZhbHNlIH0KICB9LAogIHNlcmllczogWwogICAgewogICAgICBpZDogJ2EnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZSwKICAgICAgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgLy8g5Li65LqG5pa55L6_5ouW5ou977yM5oqKIHN5bWJvbFNpemUg5bC65a-46K6-5aSn5LqG44CCCiAgICAgIGRhdGE6IGRhdGEKICAgIH0KICBdCn0pOw\'" line-highlights="\'\'" />\n<p>既然折线中原生的点没有拖拽功能,我们就为它加上拖拽功能:用 <a href="https://echarts.apache.org/option.html#graphic">graphic</a> 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIOWjsOaYjuS4gOS4qiBncmFwaGljIGNvbXBvbmVudO-8jOmHjOmdouacieiLpeW5suS4qiB0eXBlIOS4uiAnY2lyY2xlJyDnmoQgZ3JhcGhpYyBlbGVtZW50c-OAggogIC8vIOi_memHjOS9v-eUqOS6hiBlY2hhcnRzLnV0aWwubWFwIOi_meS4quW4ruWKqeaWueazle-8jOWFtuihjOS4uuWSjCBBcnJheS5wcm90b3R5cGUubWFwIOS4gOagt--8jOS9huaYr-WFvOWuuSBlczUg5Lul5LiL55qE546v5aKD44CCCiAgLy8g55SoIG1hcCDmlrnms5XpgY3ljoYgZGF0YSDnmoTmr4_pobnvvIzkuLrmr4_pobnnlJ_miJDkuIDkuKrlnIbngrnjgIIKICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGRhdGFJdGVtLCBkYXRhSW5kZXgpIHsKICAgIHJldHVybiB7CiAgICAgIC8vICdjaXJjbGUnIOihqOekuui_meS4qiBncmFwaGljIGVsZW1lbnQg55qE57G75Z6L5piv5ZyG54K544CCCiAgICAgIHR5cGU6ICdjaXJjbGUnLAoKICAgICAgc2hhcGU6IHsKICAgICAgICAvLyDlnIbngrnnmoTljYrlvoTjgIIKICAgICAgICByOiBzeW1ib2xTaXplIC8gMgogICAgICB9LAogICAgICAvLyDnlKggdHJhbnNmb3JtIOeahOaWueW8j-WvueWchueCuei_m-ihjOWumuS9jeOAgnBvc2l0aW9uOiBbeCwgeV0g6KGo56S65bCG5ZyG54K55bmz56e75YiwIFt4LCB5XSDkvY3nva7jgIIKICAgICAgLy8g6L-Z6YeM5L2_55So5LqGIGNvbnZlcnRUb1BpeGVsIOi_meS4qiBBUEkg5p2l5b6X5Yiw5q-P5Liq5ZyG54K555qE5L2N572u77yM5LiL6Z2i5LuL57uN44CCCiAgICAgIHBvc2l0aW9uOiBteUNoYXJ0LmNvbnZlcnRUb1BpeGVsKCdncmlkJywgZGF0YUl0ZW0pLAoKICAgICAgLy8g6L-Z5Liq5bGe5oCn6K6p5ZyG54K55LiN5Y-v6KeB77yI5L2G5piv5LiN5b2x5ZON5LuW5ZON5bqU6byg5qCH5LqL5Lu277yJ44CCCiAgICAgIGludmlzaWJsZTogdHJ1ZSwKICAgICAgLy8g6L-Z5Liq5bGe5oCn6K6p5ZyG54K55Y-v5Lul6KKr5ouW5ou944CCCiAgICAgIGRyYWdnYWJsZTogdHJ1ZSwKICAgICAgLy8g5oqKIHog5YC86K6-5b6X5q-U6L6D5aSn77yM6KGo56S66L-Z5Liq5ZyG54K55Zyo5pyA5LiK5pa577yM6IO96KaG55uW5L2P5bey5pyJ55qE5oqY57q_5Zu-55qE5ZyG54K544CCCiAgICAgIHo6IDEwMCwKICAgICAgLy8g5q2k5ZyG54K555qE5ouW5ou955qE5ZON5bqU5LqL5Lu277yM5Zyo5ouW5ou96L-H56iL5Lit5Lya5LiN5pat6KKr6Kem5Y-R44CC5LiL6Z2i5LuL57uN6K-m5oOF44CCCiAgICAgIC8vIOi_memHjOS9v-eUqOS6hiBlY2hhcnRzLnV0aWwuY3Vycnkg6L-Z5Liq5biu5Yqp5pa55rOV77yM5oSP5oCd5piv55Sf5oiQ5LiA5Liq5LiOIG9uUG9pbnREcmFnZ2luZwogICAgICAvLyDlip_og73kuIDmoLfnmoTmlrDnmoTlh73mlbDvvIzlj6rkuI3ov4fnrKzkuIDkuKrlj4LmlbDmsLjov5zkuLrmraTml7bkvKDlhaXnmoQgZGF0YUluZGV4IOeahOWAvOOAggogICAgICBvbmRyYWc6IGVjaGFydHMudXRpbC5jdXJyeShvblBvaW50RHJhZ2dpbmcsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7\'" line-highlights="\'\'" />\n<p>上面的代码中,使用 <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> 这个 API,进行了从 data 到“像素坐标”的转换,从而得到了每个圆点应该在的位置,从而能绘制这些圆点。<code>myChart.convertToPixel(\'grid\', dataItem)</code> 这句话中,第一个参数 <code>\'grid\'</code> 表示 <code>dataItem</code> 在 <a href="https://echarts.apache.org/option.html#grid">grid</a> 这个组件中(即直角坐标系)中进行转换。所谓“像素坐标”,就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行,也就是说,须在坐标系(<a href="https://echarts.apache.org/option.html#grid">grid</a>)初始化后才能调用 <code>myChart.convertToPixel(\'grid\', dataItem)</code>。</p>\n<p>有了这段代码后,就有了诸个能拖拽的点。接下来要为每个点,加上拖拽响应的事件:</p>\n<md-code-block lang="js" code="\'Ly8g5ouW5ou95p-Q5Liq5ZyG54K555qE6L-H56iL5Lit5Lya5LiN5pat6LCD55So5q2k5Ye95pWw44CCCi8vIOatpOWHveaVsOS4reS8muagueaNruaLluaLveWQjueahOaWsOS9jee9ru-8jOaUueWPmCBkYXRhIOS4reeahOWAvO-8jOW5tueUqOaWsOeahCBkYXRhIOWAvO-8jOmHjee7mOaKmOe6v-Wbvu-8jOS7juiAjOS9v-aKmOe6v-WbvuWQjOatpeS6juiiq-aLluaLveeahOmakOiXj-WchueCueOAggpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4KSB7CiAgLy8g6L-Z6YeM55qEIGRhdGEg5bCx5piv5pys5paH5pyA5Yid55qE5Luj56CB5Z2X5Lit5aOw5piO55qEIGRhdGHvvIzlnKjov5nph4zkvJrooqvmm7TmlrDjgIIKICAvLyDov5nph4znmoQgdGhpcyDlsLHmmK_ooqvmi5bmi73nmoTlnIbngrnjgIJ0aGlzLnBvc2l0aW9uIOWwseaYr-WchueCueW9k-WJjeeahOS9jee9ruOAggogIGRhdGFbZGF0YUluZGV4XSA9IG15Q2hhcnQuY29udmVydEZyb21QaXhlbCgnZ3JpZCcsIHRoaXMucG9zaXRpb24pOwogIC8vIOeUqOabtOaWsOWQjueahCBkYXRh77yM6YeN57uY5oqY57q_5Zu-44CCCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgc2VyaWVzOiBbCiAgICAgIHsKICAgICAgICBpZDogJ2EnLAogICAgICAgIGRhdGE6IGRhdGEKICAgICAgfQogICAgXQogIH0pOwp9\'" line-highlights="\'\'" />\n<p>上面的代码中,使用了 <a href="https://echarts.apache.org//api.html#echartsInstance.convertFromPixel">convertFromPixel</a> 这个 API。它是 <a href="https://echarts.apache.org//api.html#echartsInstance.convertToPixel">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel(\'grid\', this.position)</code> 表示把当前像素坐标转换成 <a href="https://echarts.apache.org/option.html#grid">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化,加上这些代码:</p>\n<md-code-block lang="js" code="\'d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIGZ1bmN0aW9uKCkgewogIC8vIOWvueavj-S4quaLluaLveWchueCuemHjeaWsOiuoeeul-S9jee9ru-8jOW5tueUqCBzZXRPcHRpb24g5pu05paw44CCCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgZ3JhcGhpYzogZWNoYXJ0cy51dGlsLm1hcChkYXRhLCBmdW5jdGlvbihpdGVtLCBkYXRhSW5kZXgpIHsKICAgICAgcmV0dXJuIHsKICAgICAgICBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pCiAgICAgIH07CiAgICB9KQogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="%E6%B7%BB%E5%8A%A0-tooltip-%E7%BB%84%E4%BB%B6" tabindex="-1">添加 tooltip 组件</h2>\n<p>到此,拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中,被拖拽的点的 data 值的变化状况,我们可以使用 <a href="https://echarts.apache.org/option.html#tooltip">tooltip</a> 组件来实时显示这个值。但是,tooltip 有其默认的“显示”“隐藏”触发规则,在我们拖拽的场景中并不适用,所以我们还要手动定制 tooltip 的“显示”“隐藏”行为。</p>\n<p>在上述代码中分别添加如下定义:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLiwKICB0b29sdGlwOiB7CiAgICAvLyDooajnpLrkuI3kvb_nlKjpu5jorqTnmoTigJzmmL7npLrigJ3igJzpmpDol4_igJ3op6blj5Hop4TliJnjgIIKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxicj5ZOiAnICsKICAgICAgICBwYXJhbXMuZGF0YVsxXS50b0ZpeGVkKDIpCiAgICAgICk7CiAgICB9CiAgfQp9KTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGRhdGEubWFwKGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgIC8vIC4uLiwKICAgICAgLy8g5ZyoIG1vdXNlb3ZlciDnmoTml7blgJnmmL7npLrvvIzlnKggbW91c2VvdXQg55qE5pe25YCZ6ZqQ6JeP44CCCiAgICAgIG9ubW91c2Vtb3ZlOiBlY2hhcnRzLnV0aWwuY3Vycnkoc2hvd1Rvb2x0aXAsIGRhdGFJbmRleCksCiAgICAgIG9ubW91c2VvdXQ6IGVjaGFydHMudXRpbC5jdXJyeShoaWRlVG9vbHRpcCwgZGF0YUluZGV4KQogICAgfTsKICB9KQp9KTsKCmZ1bmN0aW9uIHNob3dUb29sdGlwKGRhdGFJbmRleCkgewogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGRhdGFJbmRleAogIH0pOwp9CgpmdW5jdGlvbiBoaWRlVG9vbHRpcChkYXRhSW5kZXgpIHsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdoaWRlVGlwJwogIH0pOwp9\'" line-highlights="\'\'" />\n<p>这里使用了 <a href="api.html#echartsInstance.dispatchAction">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href="api.html#action.tooltip.showTip">showTip</a>、<a href="api.html#action.tooltip.hideTip">hideTip</a>。</p>\n<h2 id="%E5%85%A8%E9%83%A8%E4%BB%A3%E7%A0%81" tabindex="-1">全部代码</h2>\n<p>总结一下,全部的代码如下:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Cgp2YXIgc3ltYm9sU2l6ZSA9IDIwOwp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxiciAvPlk6ICcgKwogICAgICAgIHBhcmFtcy5kYXRhWzFdLnRvRml4ZWQoMikKICAgICAgKTsKICAgIH0KICB9LAogIHhBeGlzOiB7IG1pbjogLTEwMCwgbWF4OiA4MCwgdHlwZTogJ3ZhbHVlJywgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9IH0sCiAgeUF4aXM6IHsgbWluOiAtMzAsIG1heDogNjAsIHR5cGU6ICd2YWx1ZScsIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfSB9LAogIHNlcmllczogWwogICAgeyBpZDogJ2EnLCB0eXBlOiAnbGluZScsIHNtb290aDogdHJ1ZSwgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgZGF0YTogZGF0YSB9CiAgXQp9KTsKbXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oaXRlbSwgZGF0YUluZGV4KSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnY2lyY2xlJywKICAgICAgcG9zaXRpb246IG15Q2hhcnQuY29udmVydFRvUGl4ZWwoJ2dyaWQnLCBpdGVtKSwKICAgICAgc2hhcGU6IHsgcjogc3ltYm9sU2l6ZSAvIDIgfSwKICAgICAgaW52aXNpYmxlOiB0cnVlLAogICAgICBkcmFnZ2FibGU6IHRydWUsCiAgICAgIG9uZHJhZzogZWNoYXJ0cy51dGlsLmN1cnJ5KG9uUG9pbnREcmFnZ2luZywgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW1vdmU6IGVjaGFydHMudXRpbC5jdXJyeShzaG93VG9vbHRpcCwgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW91dDogZWNoYXJ0cy51dGlsLmN1cnJ5KGhpZGVUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICB6OiAxMDAKICAgIH07CiAgfSkKfSk7CndpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCBmdW5jdGlvbigpIHsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4geyBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pIH07CiAgICB9KQogIH0pOwp9KTsKZnVuY3Rpb24gc2hvd1Rvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnc2hvd1RpcCcsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogZGF0YUluZGV4CiAgfSk7Cn0KZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7IHR5cGU6ICdoaWRlVGlwJyB9KTsKfQpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4LCBkeCwgZHkpIHsKICBkYXRhW2RhdGFJbmRleF0gPSBteUNoYXJ0LmNvbnZlcnRGcm9tUGl4ZWwoJ2dyaWQnLCB0aGlzLnBvc2l0aW9uKTsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIGlkOiAnYScsCiAgICAgICAgZGF0YTogZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0\'" line-highlights="\'\'" />\n<p>有了这些基础,就可以定制更多的功能了。可以加 <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom</a> 组件,可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n',postPath:"zh/how-to/interaction/drag"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:r,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:C},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:p}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:s},{title:"配置项",dir:G,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:Z},{title:"数据转换",dir:u},{title:"坐标系",dir:L,draft:i},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:K}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:w},{title:"堆叠柱状图",dir:y},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:O,draft:i},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:S,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:j},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:N}]}]},{title:f,dir:t,draft:i},{title:"跨平台方案",dir:z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:T}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:P,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:x}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:f,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:o},{title:"Resources",dir:r,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:C},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:p}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:s},{title:"Chart Option",dir:G,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:Z},{title:"Data Transform",dir:u},{title:"Coordinate",dir:L,draft:i},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:K}]},{title:"How To Guides",dir:X,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:w},{title:"Stacked Bar",dir:y},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:O,draft:i},{title:"Waterfall",dir:Y}]},{title:"Line",dir:S,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:j},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:E},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:z,children:[{title:"Server Side Rendering",dir:T}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:P,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:x}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/how-to/interaction/drag",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/how-to/label/rich-text/index.html b/handbook/zh/how-to/label/rich-text/index.html
index 16726e0..aed5bbc 100644
--- a/handbook/zh/how-to/label/rich-text/index.html
+++ b/handbook/zh/how-to/label/rich-text/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE" tabindex="-1">富文本标签</h1> <p>Apache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式,能够:</p> <ul><li>定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。</li> <li>对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。</li> <li>在文本中使用图片做小图标或者背景。</li> <li>特定组合以上的规则,可以做出简单表格、分割线等效果。</li></ul> <p>开始下面的介绍之前,先说明一下下面会使用的两个名词的含义:</p> <ul><li>文本块(Text Block):文本标签块整体。</li> <li>文本片段(Text fragment):文本标签块中的部分文本。</li></ul> <p>如下图示例:</p> <p><iframe width="400" height="300" src=""></iframe></p> <h2 id="%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9" tabindex="-1">文本样式相关的配置项</h2> <p>echarts 提供了丰富的文本标签配置项,包括:</p> <ul><li>字体基本样式设置:<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li> <li>文字颜色:<code>color</code>。</li> <li>文字描边:<code>textBorderColor</code>、<code>textBorderWidth</code>。</li> <li>文字阴影:<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li> <li>文本块或文本片段大小:<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li> <li>文本块或文本片段的对齐:<code>align</code>、<code>verticalAlign</code>。</li> <li>文本块或文本片段的边框、背景(颜色或图片):<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li> <li>文本块或文本片段的阴影:<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li> <li>文本块的位置和旋转:<code>position</code>、<code>distance</code>、<code>rotate</code>。</li></ul> <p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p> <p>例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE" tabindex="-1">富文本标签</h1> <p>Apache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式,能够:</p> <ul><li>定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。</li> <li>对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。</li> <li>在文本中使用图片做小图标或者背景。</li> <li>特定组合以上的规则,可以做出简单表格、分割线等效果。</li></ul> <p>开始下面的介绍之前,先说明一下下面会使用的两个名词的含义:</p> <ul><li>文本块(Text Block):文本标签块整体。</li> <li>文本片段(Text fragment):文本标签块中的部分文本。</li></ul> <p>如下图示例:</p> <p><iframe width="400" height="300" src=""></iframe></p> <h2 id="%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9" tabindex="-1">文本样式相关的配置项</h2> <p>echarts 提供了丰富的文本标签配置项,包括:</p> <ul><li>字体基本样式设置:<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li> <li>文字颜色:<code>color</code>。</li> <li>文字描边:<code>textBorderColor</code>、<code>textBorderWidth</code>。</li> <li>文字阴影:<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li> <li>文本块或文本片段大小:<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li> <li>文本块或文本片段的对齐:<code>align</code>、<code>verticalAlign</code>。</li> <li>文本块或文本片段的边框、背景(颜色或图片):<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li> <li>文本块或文本片段的阴影:<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li> <li>文本块的位置和旋转:<code>position</code>、<code>distance</code>、<code>rotate</code>。</li></ul> <p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p> <p>例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token comment">// 在文本中,可以对部分文本采用 rich 中定义样式。</span>
<span class="token comment">// 这里需要在文本中使用标记符号:</span>
<span class="token comment">// `{styleName|text content text content}` 标记样式名。</span>
@@ -680,7 +680,8 @@
color<span class="token operator">:</span> <span class="token string">'#eee'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>简单表格的设定,其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 <a href="https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text">该例子</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/how-to/label/rich-text.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,C,I,A,i,e,d,o,l,t,c,a,n,r,h,s,b,B,p,Z,m,G,H,y,w,W,v,J,Y,E,K,R,L,u,M,D,z,x,O,X,f,S,N,V,k,F,j,Q,T,U,q,P,_,$,gg,Cg,Ig){return{layout:"default",data:[{html:'<h1 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE" tabindex="-1">富文本标签</h1>\n<p>Apache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式,能够:</p>\n<ul>\n<li>定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则,可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前,先说明一下下面会使用的两个名词的含义:</p>\n<ul>\n<li>文本块(Text Block):文本标签块整体。</li>\n<li>文本片段(Text fragment):文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例:</p>\n<p><md-example src="doc-example/text-block-fragment" width="400" height="300"></md-example></p>\n<h2 id="%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9" tabindex="-1">文本样式相关的配置项</h2>\n<p>echarts 提供了丰富的文本标签配置项,包括:</p>\n<ul>\n<li>字体基本样式设置:<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色:<code>color</code>。</li>\n<li>文字描边:<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影:<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小:<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐:<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景(颜色或图片):<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影:<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转:<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p>\n<p>例如:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8g5Zyo5paH5pys5Lit77yM5Y-v5Lul5a-56YOo5YiG5paH5pys6YeH55SoIHJpY2gg5Lit5a6a5LmJ5qC35byP44CCCiAgLy8g6L-Z6YeM6ZyA6KaB5Zyo5paH5pys5Lit5L2_55So5qCH6K6w56ym5Y-377yaCiAgLy8gYHtzdHlsZU5hbWV8dGV4dCBjb250ZW50IHRleHQgY29udGVudH1gIOagh-iusOagt-W8j-WQjeOAggogIC8vIOazqOaEj--8jOaNouihjOS7jeaYr-S9v-eUqCAnXG4n44CCCiAgZm9ybWF0dGVyOiBbCiAgICAne2F86L-Z5q615paH5pys6YeH55So5qC35byPYX0nLAogICAgJ3tifOi_meauteaWh-acrOmHh-eUqOagt-W8j2J96L-Z5q6155So6buY6K6k5qC35byPe3h86L-Z5q6155So5qC35byPeH0nCiAgXS5qb2luKCdcbicpLAoKICAvLyDov5nph4zmmK_mlofmnKzlnZfnmoTmoLflvI_orr7nva7vvJoKICBjb2xvcjogJyMzMzMnLAogIGZvbnRTaXplOiA1LAogIGZvbnRGYW1pbHk6ICdBcmlhbCcsCiAgYm9yZGVyV2lkdGg6IDMsCiAgYmFja2dyb3VuZENvbG9yOiAnIzk4NDQ1NScsCiAgcGFkZGluZzogWzMsIDEwLCAxMCwgNV0sCiAgbGluZUhlaWdodDogMjAsCgogIC8vIHJpY2gg6YeM5piv5paH5pys54mH5q6155qE5qC35byP6K6-572u77yaCiAgcmljaDogewogICAgYTogewogICAgICBjb2xvcjogJ3JlZCcsCiAgICAgIGxpbmVIZWlnaHQ6IDEwCiAgICB9LAogICAgYjogewogICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICBpbWFnZTogJ3h4eC94eHguanBnJwogICAgICB9LAogICAgICBoZWlnaHQ6IDQwCiAgICB9LAogICAgeDogewogICAgICBmb250U2l6ZTogMTgsCiAgICAgIGZvbnRGYW1pbHk6ICdNaWNyb3NvZnQgWWFIZWknLAogICAgICBib3JkZXJDb2xvcjogJyM0NDk5MzMnLAogICAgICBib3JkZXJSYWRpdXM6IDQKICAgIH0KICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>注意:如果不定义 <code>rich</code>,不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<h2 id="%E6%96%87%E6%9C%AC%E3%80%81%E6%96%87%E6%9C%AC%E6%A1%86%E3%80%81%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A0%B7%E5%BC%8F%E5%92%8C%E8%A3%85%E9%A5%B0" tabindex="-1">文本、文本框、文本片段的基本样式和装饰</h2>\n<p>每个文本可以设置基本的字体样式:<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式:<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式:<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICdQbGFpbiB0ZXh0JywKICAgICAgICAgICAgICAgICd7dGV4dEJvcmRlcnx0ZXh0Qm9yZGVyQ29sb3IgKyB0ZXh0Qm9yZGVyV2lkdGh9JywKICAgICAgICAgICAgICAgICd7dGV4dFNoYWRvd3x0ZXh0U2hhZG93Q29sb3IgKyB0ZXh0U2hhZG93Qmx1ciArIHRleHRTaGFkb3dPZmZzZXRYICsgdGV4dFNoYWRvd09mZnNldFl9JywKICAgICAgICAgICAgICAgICd7Ymd8YmFja2dyb3VuZENvbG9yICsgYm9yZGVyUmFkaXVzICsgcGFkZGluZ30nLAogICAgICAgICAgICAgICAgJ3tib3JkZXJ8Ym9yZGVyQ29sb3IgKyBib3JkZXJXaWR0aCArIGJvcmRlclJhZGl1cyArIHBhZGRpbmd9JywKICAgICAgICAgICAgICAgICd7c2hhZG93fHNoYWRvd0NvbG9yICsgc2hhZG93Qmx1ciArIHNoYWRvd09mZnNldFggKyBzaGFkb3dPZmZzZXRZfScKICAgICAgICAgICAgICBdLmpvaW4oJ1xuJyksCiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICcjMzMzJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICAgICAgcGFkZGluZzogMTAsCiAgICAgICAgICAgICAgY29sb3I6ICcjMDAwJywKICAgICAgICAgICAgICBmb250U2l6ZTogMTQsCiAgICAgICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgICAgICBzaGFkb3dDb2xvcjogJyM4ODgnLAogICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICBsaW5lSGVpZ2h0OiAzMCwKICAgICAgICAgICAgICByaWNoOiB7CiAgICAgICAgICAgICAgICB0ZXh0Qm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGZvbnRTaXplOiAyMCwKICAgICAgICAgICAgICAgICAgdGV4dEJvcmRlckNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIHRleHRTaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgZm9udFNpemU6IDE2LAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93Qmx1cjogNSwKICAgICAgICAgICAgICAgICAgdGV4dFNoYWRvd0NvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRTaGFkb3dPZmZzZXRYOiAzLAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIGJnOiB7CiAgICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMzMzk5MTEnLAogICAgICAgICAgICAgICAgICBjb2xvcjogJyNmZmYnLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDE1LAogICAgICAgICAgICAgICAgICBwYWRkaW5nOiA1CiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgYm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzQ0OTkxMScsCiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDMsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICBzaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzk5MjIzMycsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUsCiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnI2ZmZicsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0JsdXI6IDUsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzMzNjY5OScsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDYsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFk6IDYKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9LAogIHlBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9Cn07\'" v-bind="{}" />\n<h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BD%8D%E7%BD%AE" tabindex="-1">标签的位置</h2>\n<p>对于折线图、柱状图、散点图等,均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置,一般使用 <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a> 来配置。</p>\n<p>试试在下面例子中修改<code>position</code>和<code>distance</code> 属性:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDE2MCwKICAgICAgc3ltYm9sOiAncm91bmRSZWN0JywKICAgICAgZGF0YTogW1sxLCAxXV0sCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAvLyDkv67mlLkgcG9zaXRpb24g5ZKMIGRpc3RhbmNlIOeahOWAvOivleivlQogICAgICAgICAgLy8g5pSv5oyB77yaJ2xlZnQnLCAncmlnaHQnLCAndG9wJywgJ2JvdHRvbScsICdpbnNpZGUnLCAnaW5zaWRlVG9wJywgJ2luc2lkZUxlZnQnLCAnaW5zaWRlUmlnaHQnLCAnaW5zaWRlQm90dG9tJywgJ2luc2lkZVRvcExlZnQnLCAnaW5zaWRlVG9wUmlnaHQnLCAnaW5zaWRlQm90dG9tTGVmdCcsICdpbnNpZGVCb3R0b21SaWdodCcKICAgICAgICAgIHBvc2l0aW9uOiAndG9wJywKICAgICAgICAgIGRpc3RhbmNlOiAxMCwKCiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9ybWF0dGVyOiBbJ0xhYmVsIFRleHQnXS5qb2luKCdcbicpLAogICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICBib3JkZXJDb2xvcjogJyM1NTUnLAogICAgICAgICAgYm9yZGVyV2lkdGg6IDIsCiAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICBwYWRkaW5nOiAxMCwKICAgICAgICAgIGZvbnRTaXplOiAxOCwKICAgICAgICAgIHNoYWRvd0JsdXI6IDMsCiAgICAgICAgICBzaGFkb3dDb2xvcjogJyM4ODgnLAogICAgICAgICAgc2hhZG93T2Zmc2V0WDogMCwKICAgICAgICAgIHNoYWRvd09mZnNldFk6IDMsCiAgICAgICAgICB0ZXh0Qm9yZGVyQ29sb3I6ICcjMDAwJywKICAgICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICAgIGNvbG9yOiAnI2ZmZicKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBtYXg6IDIKICB9LAogIHlBeGlzOiB7CiAgICBtYXg6IDIKICB9Cn07\'" v-bind="{}" />\n<blockquote>\n<p>注意:<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href="https://echarts.apache.org/option.html">option 文档</a>。</p>\n</blockquote>\n<h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E6%97%8B%E8%BD%AC" tabindex="-1">标签的旋转</h2>\n<p>某些图中,为了能有足够长的空间来显示标签,需要对标签进行旋转。例如:</p>\n<md-live lang="js" code="\'Y29uc3QgbGFiZWxPcHRpb24gPSB7CiAgc2hvdzogdHJ1ZSwKICByb3RhdGU6IDkwLAogIGZvcm1hdHRlcjogJ3tjfSAge25hbWV8e2F9fScsCiAgZm9udFNpemU6IDE2LAogIHJpY2g6IHsKICAgIG5hbWU6IHt9CiAgfQp9OwoKb3B0aW9uID0gewogIHhBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICAgIGRhdGE6IFsnMjAxMicsICcyMDEzJywgJzIwMTQnLCAnMjAxNScsICcyMDE2J10KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScKICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRm9yZXN0JywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGJhckdhcDogMCwKICAgICAgbGFiZWw6IGxhYmVsT3B0aW9uLAogICAgICBlbXBoYXNpczogewogICAgICAgIGZvY3VzOiAnc2VyaWVzJwogICAgICB9LAogICAgICBkYXRhOiBbMzIwLCAzMzIsIDMwMSwgMzM0LCAzOTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcHBlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGxhYmVsOiBsYWJlbE9wdGlvbiwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycKICAgICAgfSwKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwXQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>这种场景下,可以结合 <a href="option.html#series-bar.label.align">align</a> 和 <a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> 来调整标签位置。</p>\n<p>注意,逻辑是,先使用 <code>align</code> 和 <code>verticalAlign</code> 定位,再旋转。</p>\n<h2 id="%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E6%8E%92%E7%89%88%E5%92%8C%E5%AF%B9%E9%BD%90" tabindex="-1">文本片段的排版和对齐</h2>\n<p>关于排版方式,每个文本片段,可以想象成 CSS 中的 <code>inline-block</code>,在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸(<code>content box size</code>),默认是根据文字大小决定的。但是,也可以设置 <code>width</code>、<code>height</code> 来强制指定,虽然一般不会这么做(参见下文)。文本片段的边框盒尺寸(<code>border box size</code>),由上述本身尺寸,加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>\'\\n\'</code> 是换行符,能导致换行。</p>\n<p>一行内,会有多个文本片段。每行的实际高度,由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定,也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中,如果都不指定,则取文本片段的边框盒尺寸(<code>border box size</code>)。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后,一行内,文本片段的竖直位置,由文本片段的 <code>verticalAlign</code> 来指定(这里和 CSS 中的规则稍有不同):</p>\n<ul>\n<li><code>\'bottom\'</code>:文本片段的盒的底边贴住行底。</li>\n<li><code>\'top\'</code>:文本片段的盒的顶边贴住行顶。</li>\n<li><code>\'middle\'</code>:居行中。</li>\n</ul>\n<p>文本块的宽度,可以直接由文本块的 <code>width</code> 指定,否则,由最长的行决定。宽度决定后,在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置:</p>\n<ul>\n<li>首先,从左向右连续紧靠放置 <code>align</code> 为 <code>\'left\'</code> 的文本片段盒。</li>\n<li>然后,从右向左连续紧靠放置 <code>align</code> 为 <code>\'right\'</code> 的文本片段盒。</li>\n<li>最后,剩余的没处理的文本片段盒,紧贴着,在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置:</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>\'center\'</code>,则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>\'left\'</code>,则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>\'right\'</code>,则文字在文本片段盒中是居右的。</li>\n</ul>\n<h2 id="%E7%89%B9%E6%AE%8A%E6%95%88%E6%9E%9C%EF%BC%9A%E5%9B%BE%E6%A0%87%E3%80%81%E5%88%86%E5%89%B2%E7%BA%BF%E3%80%81%E6%A0%87%E9%A2%98%E5%9D%97%E3%80%81%E7%AE%80%E5%8D%95%E8%A1%A8%E6%A0%BC" tabindex="-1">特殊效果:图标、分割线、标题块、简单表格</h2>\n<p>看下面的例子:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiBbMCwgMV0sCiAgICAgICAgICBsYWJlbDogewogICAgICAgICAgICBub3JtYWw6IHsKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICd7dGl0bGVCZ3xMZWZ0IFRpdGxlfScsCiAgICAgICAgICAgICAgICAnICBDb250ZW50IHRleHQgeHh4eHh4eHgge3N1bm55fH0geHh4eHh4eHgge2Nsb3VkeXx9ICAnLAogICAgICAgICAgICAgICAgJ3tocnx9JywKICAgICAgICAgICAgICAgICcgIHh4eHh4IHtzaG93ZXJzfH0geHh4eHh4eHggIHh4eHh4eHh4eCAgJwogICAgICAgICAgICAgIF0uam9pbignXG4nKQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDJdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RpdGxlQmd8UmlnaHQgVGl0bGV9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0sCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2RkZCcsCiAgICAgICAgICBib3JkZXJDb2xvcjogJyM1NTUnLAogICAgICAgICAgYm9yZGVyV2lkdGg6IDEsCiAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICBjb2xvcjogJyMwMDAnLAogICAgICAgICAgZm9udFNpemU6IDE0LAogICAgICAgICAgcmljaDogewogICAgICAgICAgICB0aXRsZUJnOiB7CiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgICAgICAgIGNvbG9yOiAnI2VlZScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgdGM6IHsKICAgICAgICAgICAgICBhbGlnbjogJ2NlbnRlcicsCiAgICAgICAgICAgICAgY29sb3I6ICcjZWVlJwogICAgICAgICAgICB9LAogICAgICAgICAgICBocjogewogICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzc3NycsCiAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMC41LAogICAgICAgICAgICAgIGhlaWdodDogMAogICAgICAgICAgICB9LAogICAgICAgICAgICBzdW5ueTogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zdW5ueV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgY2xvdWR5OiB7CiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBhbGlnbjogJ2xlZnQnLAogICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogewogICAgICAgICAgICAgICAgaW1hZ2U6CiAgICAgICAgICAgICAgICAgICdodHRwczovL2VjaGFydHMuYXBhY2hlLm9yZy9leGFtcGxlcy9kYXRhL2Fzc2V0L2ltZy93ZWF0aGVyL2Nsb3VkeV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgc2hvd2VyczogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zaG93ZXJzXzEyOC5wbmcnCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IC0xLAogICAgbWF4OiAxCiAgfSwKICB5QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IDAsCiAgICBtYXg6IDIsCiAgICBpbnZlcnNlOiB0cnVlCiAgfQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<p>文本片段的 <code>backgroundColor</code> 可以指定为图片后,就可以在文本中使用图标了:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgcmljaDogewogICAgU3Vubnk6IHsKICAgICAgLy8g6L-Z5qC36K6-5a6aIGJhY2tncm91bmRDb2xvciDlsLHlj6_ku6XmmK_lm77niYfkuobjgIIKICAgICAgYmFja2dyb3VuZENvbG9yOiB7CiAgICAgICAgaW1hZ2U6ICcuL2RhdGEvYXNzZXQvaW1nL3dlYXRoZXIvc3VubnlfMTI4LnBuZycKICAgICAgfSwKICAgICAgLy8g5Y-v5Lul5Y-q5oyH5a6a5Zu-54mH55qE6auY5bqm77yM5LuO6ICM5Zu-54mH55qE5a695bqm5qC55o2u5Zu-54mH55qE6ZW_5a695q-U6Ieq5Yqo5b6X5Yiw44CCCiAgICAgIGhlaWdodDogMzAKICAgIH0KICB9Cn07\'" line-highlights="\'\'" />\n<p>分割线实际是用 border 实现的:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgcmljaDogewogICAgaHI6IHsKICAgICAgYm9yZGVyQ29sb3I6ICcjNzc3JywKICAgICAgLy8g6L-Z6YeM5oqKIHdpZHRoIOiuvue9ruS4uiAnMTAwJSfvvIzooajnpLrliIblibLnur_nmoTplb_luqblhYXmu6HmlofmnKzlnZfjgIIKICAgICAgLy8g5rOo5oSP77yM6L-Z6YeM5piv5paH5pys5Z2X5YaF5a6555uS77yIY29udGVudCBib3jvvInnmoQgMTAwJe-8jOiAjOS4jeWMheWQqyBwYWRkaW5n44CCCiAgICAgIC8vIOiZveeEtui_meWSjCBDU1Mg55u45YWz55qE5a6a5LmJ5pyJ5omA5LiN5ZCM77yM5L2G5piv5Zyo6L-Z57G75Zy65pmv5Lit5pu05Yqg5pa55L6_44CCCiAgICAgIHdpZHRoOiAnMTAwJScsCiAgICAgIGJvcmRlcldpZHRoOiAwLjUsCiAgICAgIGhlaWdodDogMAogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>标题块是使用 <code>backgroundColor</code> 实现的:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8g5qCH6aKY5paH5a2X5bGF5bemCiAgZm9ybWF0dGVyOiAne3RpdGxlQmd8TGVmdCBUaXRsZX0nLAogIHJpY2g6IHsKICAgIHRpdGxlQmc6IHsKICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgIGhlaWdodDogMzAsCiAgICAgIGJvcmRlclJhZGl1czogWzUsIDUsIDAsIDBdLAogICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgY29sb3I6ICcjZWVlJwogICAgfQogIH0KfTsKCi8vIOagh-mimOaWh-Wtl-WxheS4reOAggovLyDov5nkuKrlrp7njrDmnInkupsgdHJpY2t577yM5L2G5piv77yM6IO95aSf5LiN5byV5YWl5pu05aSN5p2C55qE5o6S54mI6KeE5YiZ6ICM5a6e546w6L-Z5Liq5pWI5p6c44CCCmxhYmVsT3B0aW9uID0gewogIGZvcm1hdHRlcjogJ3t0Y3xDZW50ZXIgVGl0bGV9e3RpdGxlQmd8fScsCiAgcmljaDogewogICAgdGl0bGVCZzogewogICAgICBhbGlnbjogJ3JpZ2h0JywKICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgIGhlaWdodDogMzAsCiAgICAgIGJvcmRlclJhZGl1czogWzUsIDUsIDAsIDBdLAogICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgY29sb3I6ICcjZWVlJwogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>简单表格的设定,其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 <a href="https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text">该例子</a></p>\n',postPath:"zh/how-to/label/rich-text"}],fetch:{},error:A,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:e,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:l,draft:g},{title:"获取灵感",dir:t},{title:"寻求帮助",dir:c},{title:"版本特性",dir:a,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:h}]}]},{title:"概念篇",dir:s,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:B,draft:g},{title:"系列",dir:p,draft:g},{title:"样式",dir:Z},{title:"数据集",dir:m},{title:"数据转换",dir:G},{title:"坐标系",dir:H,draft:g},{title:"坐标轴",dir:y},{title:"视觉映射",dir:I},{title:"图例",dir:w},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Y},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:K},{title:"极坐标系柱状图",dir:R,draft:g},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:I,draft:g}]},{title:"折线图",dir:u,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:D},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:O}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:X},{title:"圆环图",dir:f},{title:"南丁格尔图(玫瑰图)",dir:S}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:V}]}]},{title:k,dir:C,draft:g},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:j}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:U,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:k,dir:C,draft:g},{title:gg,dir:Cg},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Ig}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:e,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:o},{title:"Resources",dir:l,draft:g},{title:"Inspiration",dir:t},{title:"Get Help",dir:c},{title:"What's New",dir:a,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:h}]}]},{title:"Concepts",dir:s,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:B,draft:g},{title:"Series",dir:p,draft:g},{title:"Style",dir:Z},{title:"Dataset",dir:m},{title:"Data Transform",dir:G},{title:"Coordinate",dir:H,draft:g},{title:"Axis",dir:y},{title:"Visual Mapping",dir:I},{title:"Legend",dir:w},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Y},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:K},{title:"Bar Polar",dir:R,draft:g},{title:"Waterfall",dir:L}]},{title:"Line",dir:u,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:D},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:O}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:X},{title:"Ring Style",dir:f},{title:"Rose Style",dir:S}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:V}]}]},{title:"Mobile",dir:C,draft:g},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:j}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:U,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:C,draft:g},{title:gg,dir:Cg},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Ig}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/how-to/label/rich-text",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:A}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>简单表格的设定,其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 <a href="https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text">该例子</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/how-to/label/rich-text.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,C,I,A,i,e,d,o,l,t,c,a,n,r,h,s,b,B,p,Z,m,G,H,y,w,W,v,J,Y,E,K,R,L,u,M,D,z,x,O,X,f,S,N,V,k,F,j,Q,T,U,q,P,_,$,gg,Cg,Ig){return{layout:"default",data:[{html:'<h1 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE" tabindex="-1">富文本标签</h1>\n<p>Apache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式,能够:</p>\n<ul>\n<li>定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则,可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前,先说明一下下面会使用的两个名词的含义:</p>\n<ul>\n<li>文本块(Text Block):文本标签块整体。</li>\n<li>文本片段(Text fragment):文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例:</p>\n<p><md-example src="doc-example/text-block-fragment" width="400" height="300"></md-example></p>\n<h2 id="%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9" tabindex="-1">文本样式相关的配置项</h2>\n<p>echarts 提供了丰富的文本标签配置项,包括:</p>\n<ul>\n<li>字体基本样式设置:<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色:<code>color</code>。</li>\n<li>文字描边:<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影:<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小:<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐:<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景(颜色或图片):<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影:<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转:<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p>\n<p>例如:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8g5Zyo5paH5pys5Lit77yM5Y-v5Lul5a-56YOo5YiG5paH5pys6YeH55SoIHJpY2gg5Lit5a6a5LmJ5qC35byP44CCCiAgLy8g6L-Z6YeM6ZyA6KaB5Zyo5paH5pys5Lit5L2_55So5qCH6K6w56ym5Y-377yaCiAgLy8gYHtzdHlsZU5hbWV8dGV4dCBjb250ZW50IHRleHQgY29udGVudH1gIOagh-iusOagt-W8j-WQjeOAggogIC8vIOazqOaEj--8jOaNouihjOS7jeaYr-S9v-eUqCAnXG4n44CCCiAgZm9ybWF0dGVyOiBbCiAgICAne2F86L-Z5q615paH5pys6YeH55So5qC35byPYX0nLAogICAgJ3tifOi_meauteaWh-acrOmHh-eUqOagt-W8j2J96L-Z5q6155So6buY6K6k5qC35byPe3h86L-Z5q6155So5qC35byPeH0nCiAgXS5qb2luKCdcbicpLAoKICAvLyDov5nph4zmmK_mlofmnKzlnZfnmoTmoLflvI_orr7nva7vvJoKICBjb2xvcjogJyMzMzMnLAogIGZvbnRTaXplOiA1LAogIGZvbnRGYW1pbHk6ICdBcmlhbCcsCiAgYm9yZGVyV2lkdGg6IDMsCiAgYmFja2dyb3VuZENvbG9yOiAnIzk4NDQ1NScsCiAgcGFkZGluZzogWzMsIDEwLCAxMCwgNV0sCiAgbGluZUhlaWdodDogMjAsCgogIC8vIHJpY2gg6YeM5piv5paH5pys54mH5q6155qE5qC35byP6K6-572u77yaCiAgcmljaDogewogICAgYTogewogICAgICBjb2xvcjogJ3JlZCcsCiAgICAgIGxpbmVIZWlnaHQ6IDEwCiAgICB9LAogICAgYjogewogICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICBpbWFnZTogJ3h4eC94eHguanBnJwogICAgICB9LAogICAgICBoZWlnaHQ6IDQwCiAgICB9LAogICAgeDogewogICAgICBmb250U2l6ZTogMTgsCiAgICAgIGZvbnRGYW1pbHk6ICdNaWNyb3NvZnQgWWFIZWknLAogICAgICBib3JkZXJDb2xvcjogJyM0NDk5MzMnLAogICAgICBib3JkZXJSYWRpdXM6IDQKICAgIH0KICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>注意:如果不定义 <code>rich</code>,不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<h2 id="%E6%96%87%E6%9C%AC%E3%80%81%E6%96%87%E6%9C%AC%E6%A1%86%E3%80%81%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A0%B7%E5%BC%8F%E5%92%8C%E8%A3%85%E9%A5%B0" tabindex="-1">文本、文本框、文本片段的基本样式和装饰</h2>\n<p>每个文本可以设置基本的字体样式:<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式:<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式:<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICdQbGFpbiB0ZXh0JywKICAgICAgICAgICAgICAgICd7dGV4dEJvcmRlcnx0ZXh0Qm9yZGVyQ29sb3IgKyB0ZXh0Qm9yZGVyV2lkdGh9JywKICAgICAgICAgICAgICAgICd7dGV4dFNoYWRvd3x0ZXh0U2hhZG93Q29sb3IgKyB0ZXh0U2hhZG93Qmx1ciArIHRleHRTaGFkb3dPZmZzZXRYICsgdGV4dFNoYWRvd09mZnNldFl9JywKICAgICAgICAgICAgICAgICd7Ymd8YmFja2dyb3VuZENvbG9yICsgYm9yZGVyUmFkaXVzICsgcGFkZGluZ30nLAogICAgICAgICAgICAgICAgJ3tib3JkZXJ8Ym9yZGVyQ29sb3IgKyBib3JkZXJXaWR0aCArIGJvcmRlclJhZGl1cyArIHBhZGRpbmd9JywKICAgICAgICAgICAgICAgICd7c2hhZG93fHNoYWRvd0NvbG9yICsgc2hhZG93Qmx1ciArIHNoYWRvd09mZnNldFggKyBzaGFkb3dPZmZzZXRZfScKICAgICAgICAgICAgICBdLmpvaW4oJ1xuJyksCiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICcjMzMzJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICAgICAgcGFkZGluZzogMTAsCiAgICAgICAgICAgICAgY29sb3I6ICcjMDAwJywKICAgICAgICAgICAgICBmb250U2l6ZTogMTQsCiAgICAgICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgICAgICBzaGFkb3dDb2xvcjogJyM4ODgnLAogICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICBsaW5lSGVpZ2h0OiAzMCwKICAgICAgICAgICAgICByaWNoOiB7CiAgICAgICAgICAgICAgICB0ZXh0Qm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGZvbnRTaXplOiAyMCwKICAgICAgICAgICAgICAgICAgdGV4dEJvcmRlckNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIHRleHRTaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgZm9udFNpemU6IDE2LAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93Qmx1cjogNSwKICAgICAgICAgICAgICAgICAgdGV4dFNoYWRvd0NvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRTaGFkb3dPZmZzZXRYOiAzLAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIGJnOiB7CiAgICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMzMzk5MTEnLAogICAgICAgICAgICAgICAgICBjb2xvcjogJyNmZmYnLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDE1LAogICAgICAgICAgICAgICAgICBwYWRkaW5nOiA1CiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgYm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzQ0OTkxMScsCiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDMsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICBzaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzk5MjIzMycsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUsCiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnI2ZmZicsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0JsdXI6IDUsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzMzNjY5OScsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDYsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFk6IDYKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9LAogIHlBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9Cn07\'" v-bind="{}" />\n<h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BD%8D%E7%BD%AE" tabindex="-1">标签的位置</h2>\n<p>对于折线图、柱状图、散点图等,均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置,一般使用 <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a> 来配置。</p>\n<p>试试在下面例子中修改<code>position</code>和<code>distance</code> 属性:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDE2MCwKICAgICAgc3ltYm9sOiAncm91bmRSZWN0JywKICAgICAgZGF0YTogW1sxLCAxXV0sCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAvLyDkv67mlLkgcG9zaXRpb24g5ZKMIGRpc3RhbmNlIOeahOWAvOivleivlQogICAgICAgICAgLy8g5pSv5oyB77yaJ2xlZnQnLCAncmlnaHQnLCAndG9wJywgJ2JvdHRvbScsICdpbnNpZGUnLCAnaW5zaWRlVG9wJywgJ2luc2lkZUxlZnQnLCAnaW5zaWRlUmlnaHQnLCAnaW5zaWRlQm90dG9tJywgJ2luc2lkZVRvcExlZnQnLCAnaW5zaWRlVG9wUmlnaHQnLCAnaW5zaWRlQm90dG9tTGVmdCcsICdpbnNpZGVCb3R0b21SaWdodCcKICAgICAgICAgIHBvc2l0aW9uOiAndG9wJywKICAgICAgICAgIGRpc3RhbmNlOiAxMCwKCiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9ybWF0dGVyOiBbJ0xhYmVsIFRleHQnXS5qb2luKCdcbicpLAogICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICBib3JkZXJDb2xvcjogJyM1NTUnLAogICAgICAgICAgYm9yZGVyV2lkdGg6IDIsCiAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICBwYWRkaW5nOiAxMCwKICAgICAgICAgIGZvbnRTaXplOiAxOCwKICAgICAgICAgIHNoYWRvd0JsdXI6IDMsCiAgICAgICAgICBzaGFkb3dDb2xvcjogJyM4ODgnLAogICAgICAgICAgc2hhZG93T2Zmc2V0WDogMCwKICAgICAgICAgIHNoYWRvd09mZnNldFk6IDMsCiAgICAgICAgICB0ZXh0Qm9yZGVyQ29sb3I6ICcjMDAwJywKICAgICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICAgIGNvbG9yOiAnI2ZmZicKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBtYXg6IDIKICB9LAogIHlBeGlzOiB7CiAgICBtYXg6IDIKICB9Cn07\'" v-bind="{}" />\n<blockquote>\n<p>注意:<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href="https://echarts.apache.org/option.html">option 文档</a>。</p>\n</blockquote>\n<h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E6%97%8B%E8%BD%AC" tabindex="-1">标签的旋转</h2>\n<p>某些图中,为了能有足够长的空间来显示标签,需要对标签进行旋转。例如:</p>\n<md-live lang="js" code="\'Y29uc3QgbGFiZWxPcHRpb24gPSB7CiAgc2hvdzogdHJ1ZSwKICByb3RhdGU6IDkwLAogIGZvcm1hdHRlcjogJ3tjfSAge25hbWV8e2F9fScsCiAgZm9udFNpemU6IDE2LAogIHJpY2g6IHsKICAgIG5hbWU6IHt9CiAgfQp9OwoKb3B0aW9uID0gewogIHhBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICAgIGRhdGE6IFsnMjAxMicsICcyMDEzJywgJzIwMTQnLCAnMjAxNScsICcyMDE2J10KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScKICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRm9yZXN0JywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGJhckdhcDogMCwKICAgICAgbGFiZWw6IGxhYmVsT3B0aW9uLAogICAgICBlbXBoYXNpczogewogICAgICAgIGZvY3VzOiAnc2VyaWVzJwogICAgICB9LAogICAgICBkYXRhOiBbMzIwLCAzMzIsIDMwMSwgMzM0LCAzOTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcHBlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGxhYmVsOiBsYWJlbE9wdGlvbiwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycKICAgICAgfSwKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwXQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>这种场景下,可以结合 <a href="option.html#series-bar.label.align">align</a> 和 <a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> 来调整标签位置。</p>\n<p>注意,逻辑是,先使用 <code>align</code> 和 <code>verticalAlign</code> 定位,再旋转。</p>\n<h2 id="%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E6%8E%92%E7%89%88%E5%92%8C%E5%AF%B9%E9%BD%90" tabindex="-1">文本片段的排版和对齐</h2>\n<p>关于排版方式,每个文本片段,可以想象成 CSS 中的 <code>inline-block</code>,在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸(<code>content box size</code>),默认是根据文字大小决定的。但是,也可以设置 <code>width</code>、<code>height</code> 来强制指定,虽然一般不会这么做(参见下文)。文本片段的边框盒尺寸(<code>border box size</code>),由上述本身尺寸,加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>\'\\n\'</code> 是换行符,能导致换行。</p>\n<p>一行内,会有多个文本片段。每行的实际高度,由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定,也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中,如果都不指定,则取文本片段的边框盒尺寸(<code>border box size</code>)。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后,一行内,文本片段的竖直位置,由文本片段的 <code>verticalAlign</code> 来指定(这里和 CSS 中的规则稍有不同):</p>\n<ul>\n<li><code>\'bottom\'</code>:文本片段的盒的底边贴住行底。</li>\n<li><code>\'top\'</code>:文本片段的盒的顶边贴住行顶。</li>\n<li><code>\'middle\'</code>:居行中。</li>\n</ul>\n<p>文本块的宽度,可以直接由文本块的 <code>width</code> 指定,否则,由最长的行决定。宽度决定后,在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置:</p>\n<ul>\n<li>首先,从左向右连续紧靠放置 <code>align</code> 为 <code>\'left\'</code> 的文本片段盒。</li>\n<li>然后,从右向左连续紧靠放置 <code>align</code> 为 <code>\'right\'</code> 的文本片段盒。</li>\n<li>最后,剩余的没处理的文本片段盒,紧贴着,在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置:</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>\'center\'</code>,则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>\'left\'</code>,则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>\'right\'</code>,则文字在文本片段盒中是居右的。</li>\n</ul>\n<h2 id="%E7%89%B9%E6%AE%8A%E6%95%88%E6%9E%9C%EF%BC%9A%E5%9B%BE%E6%A0%87%E3%80%81%E5%88%86%E5%89%B2%E7%BA%BF%E3%80%81%E6%A0%87%E9%A2%98%E5%9D%97%E3%80%81%E7%AE%80%E5%8D%95%E8%A1%A8%E6%A0%BC" tabindex="-1">特殊效果:图标、分割线、标题块、简单表格</h2>\n<p>看下面的例子:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiBbMCwgMV0sCiAgICAgICAgICBsYWJlbDogewogICAgICAgICAgICBub3JtYWw6IHsKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICd7dGl0bGVCZ3xMZWZ0IFRpdGxlfScsCiAgICAgICAgICAgICAgICAnICBDb250ZW50IHRleHQgeHh4eHh4eHgge3N1bm55fH0geHh4eHh4eHgge2Nsb3VkeXx9ICAnLAogICAgICAgICAgICAgICAgJ3tocnx9JywKICAgICAgICAgICAgICAgICcgIHh4eHh4IHtzaG93ZXJzfH0geHh4eHh4eHggIHh4eHh4eHh4eCAgJwogICAgICAgICAgICAgIF0uam9pbignXG4nKQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDJdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RpdGxlQmd8UmlnaHQgVGl0bGV9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0sCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2RkZCcsCiAgICAgICAgICBib3JkZXJDb2xvcjogJyM1NTUnLAogICAgICAgICAgYm9yZGVyV2lkdGg6IDEsCiAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICBjb2xvcjogJyMwMDAnLAogICAgICAgICAgZm9udFNpemU6IDE0LAogICAgICAgICAgcmljaDogewogICAgICAgICAgICB0aXRsZUJnOiB7CiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgICAgICAgIGNvbG9yOiAnI2VlZScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgdGM6IHsKICAgICAgICAgICAgICBhbGlnbjogJ2NlbnRlcicsCiAgICAgICAgICAgICAgY29sb3I6ICcjZWVlJwogICAgICAgICAgICB9LAogICAgICAgICAgICBocjogewogICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzc3NycsCiAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMC41LAogICAgICAgICAgICAgIGhlaWdodDogMAogICAgICAgICAgICB9LAogICAgICAgICAgICBzdW5ueTogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zdW5ueV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgY2xvdWR5OiB7CiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBhbGlnbjogJ2xlZnQnLAogICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogewogICAgICAgICAgICAgICAgaW1hZ2U6CiAgICAgICAgICAgICAgICAgICdodHRwczovL2VjaGFydHMuYXBhY2hlLm9yZy9leGFtcGxlcy9kYXRhL2Fzc2V0L2ltZy93ZWF0aGVyL2Nsb3VkeV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgc2hvd2VyczogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zaG93ZXJzXzEyOC5wbmcnCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IC0xLAogICAgbWF4OiAxCiAgfSwKICB5QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IDAsCiAgICBtYXg6IDIsCiAgICBpbnZlcnNlOiB0cnVlCiAgfQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<p>文本片段的 <code>backgroundColor</code> 可以指定为图片后,就可以在文本中使用图标了:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgcmljaDogewogICAgU3Vubnk6IHsKICAgICAgLy8g6L-Z5qC36K6-5a6aIGJhY2tncm91bmRDb2xvciDlsLHlj6_ku6XmmK_lm77niYfkuobjgIIKICAgICAgYmFja2dyb3VuZENvbG9yOiB7CiAgICAgICAgaW1hZ2U6ICcuL2RhdGEvYXNzZXQvaW1nL3dlYXRoZXIvc3VubnlfMTI4LnBuZycKICAgICAgfSwKICAgICAgLy8g5Y-v5Lul5Y-q5oyH5a6a5Zu-54mH55qE6auY5bqm77yM5LuO6ICM5Zu-54mH55qE5a695bqm5qC55o2u5Zu-54mH55qE6ZW_5a695q-U6Ieq5Yqo5b6X5Yiw44CCCiAgICAgIGhlaWdodDogMzAKICAgIH0KICB9Cn07\'" line-highlights="\'\'" />\n<p>分割线实际是用 border 实现的:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgcmljaDogewogICAgaHI6IHsKICAgICAgYm9yZGVyQ29sb3I6ICcjNzc3JywKICAgICAgLy8g6L-Z6YeM5oqKIHdpZHRoIOiuvue9ruS4uiAnMTAwJSfvvIzooajnpLrliIblibLnur_nmoTplb_luqblhYXmu6HmlofmnKzlnZfjgIIKICAgICAgLy8g5rOo5oSP77yM6L-Z6YeM5piv5paH5pys5Z2X5YaF5a6555uS77yIY29udGVudCBib3jvvInnmoQgMTAwJe-8jOiAjOS4jeWMheWQqyBwYWRkaW5n44CCCiAgICAgIC8vIOiZveeEtui_meWSjCBDU1Mg55u45YWz55qE5a6a5LmJ5pyJ5omA5LiN5ZCM77yM5L2G5piv5Zyo6L-Z57G75Zy65pmv5Lit5pu05Yqg5pa55L6_44CCCiAgICAgIHdpZHRoOiAnMTAwJScsCiAgICAgIGJvcmRlcldpZHRoOiAwLjUsCiAgICAgIGhlaWdodDogMAogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>标题块是使用 <code>backgroundColor</code> 实现的:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8g5qCH6aKY5paH5a2X5bGF5bemCiAgZm9ybWF0dGVyOiAne3RpdGxlQmd8TGVmdCBUaXRsZX0nLAogIHJpY2g6IHsKICAgIHRpdGxlQmc6IHsKICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgIGhlaWdodDogMzAsCiAgICAgIGJvcmRlclJhZGl1czogWzUsIDUsIDAsIDBdLAogICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgY29sb3I6ICcjZWVlJwogICAgfQogIH0KfTsKCi8vIOagh-mimOaWh-Wtl-WxheS4reOAggovLyDov5nkuKrlrp7njrDmnInkupsgdHJpY2t577yM5L2G5piv77yM6IO95aSf5LiN5byV5YWl5pu05aSN5p2C55qE5o6S54mI6KeE5YiZ6ICM5a6e546w6L-Z5Liq5pWI5p6c44CCCmxhYmVsT3B0aW9uID0gewogIGZvcm1hdHRlcjogJ3t0Y3xDZW50ZXIgVGl0bGV9e3RpdGxlQmd8fScsCiAgcmljaDogewogICAgdGl0bGVCZzogewogICAgICBhbGlnbjogJ3JpZ2h0JywKICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgIGhlaWdodDogMzAsCiAgICAgIGJvcmRlclJhZGl1czogWzUsIDUsIDAsIDBdLAogICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgY29sb3I6ICcjZWVlJwogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>简单表格的设定,其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 <a href="https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text">该例子</a></p>\n',postPath:"zh/how-to/label/rich-text"}],fetch:{},error:A,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:e,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:l,draft:g},{title:"获取灵感",dir:t},{title:"寻求帮助",dir:c},{title:"版本特性",dir:a,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:h}]}]},{title:"概念篇",dir:s,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:B,draft:g},{title:"系列",dir:p,draft:g},{title:"样式",dir:Z},{title:"数据集",dir:m},{title:"数据转换",dir:G},{title:"坐标系",dir:H,draft:g},{title:"坐标轴",dir:y},{title:"视觉映射",dir:I},{title:"图例",dir:w},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Y},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:K},{title:"极坐标系柱状图",dir:R,draft:g},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:I,draft:g}]},{title:"折线图",dir:u,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:D},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:O}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:X},{title:"圆环图",dir:f},{title:"南丁格尔图(玫瑰图)",dir:S}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:V}]}]},{title:k,dir:C,draft:g},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:j}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:U,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:k,dir:C,draft:g},{title:gg,dir:Cg},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Ig}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:e,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:o},{title:"Resources",dir:l,draft:g},{title:"Inspiration",dir:t},{title:"Get Help",dir:c},{title:"What's New",dir:a,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:h}]}]},{title:"Concepts",dir:s,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:B,draft:g},{title:"Series",dir:p,draft:g},{title:"Style",dir:Z},{title:"Dataset",dir:m},{title:"Data Transform",dir:G},{title:"Coordinate",dir:H,draft:g},{title:"Axis",dir:y},{title:"Visual Mapping",dir:I},{title:"Legend",dir:w},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:v,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Y},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:K},{title:"Bar Polar",dir:R,draft:g},{title:"Waterfall",dir:L}]},{title:"Line",dir:u,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:D},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:O}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:X},{title:"Ring Style",dir:f},{title:"Rose Style",dir:S}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:V}]}]},{title:"Mobile",dir:C,draft:g},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:j}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:U,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practices",dir:$,children:[{title:"Mobile Optimization",dir:C,draft:g},{title:gg,dir:Cg},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Ig}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/how-to/label/rich-text",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:A}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/index.html b/handbook/zh/index.html
index 0567057..d499d67 100644
--- a/handbook/zh/index.html
+++ b/handbook/zh/index.html
@@ -4,10 +4,11 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,s,o,h,p,f,g,b,m,u,C,v,S,P,w,B,E,k,x,R,y,D,L,G,_,A,V,z,M,T,H,I,U,N,O,W,$,F,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:v},{title:"数据集",dir:S},{title:"数据转换",dir:P},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:E},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:G,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:A,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:T},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:$,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:$,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:S},{title:"Data Transform",dir:P},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:E},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:G,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:A,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:T},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:U},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,s,o,h,p,f,g,b,m,u,C,v,S,P,w,B,E,k,x,R,y,D,L,G,_,A,V,z,M,T,H,I,U,N,O,W,$,F,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:v},{title:"数据集",dir:S},{title:"数据转换",dir:P},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:E},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:G,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:A,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:T},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:$,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:$,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:S},{title:"Data Transform",dir:P},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:E},{title:"Event and Action",dir:k}]},{title:"How To Guides",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:G,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:A,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:T},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:U},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practices",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},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",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/handbook/zh/meta/edit-guide/index.html b/handbook/zh/meta/edit-guide/index.html
index c9c4fb9..5068a4d 100644
--- a/handbook/zh/meta/edit-guide/index.html
+++ b/handbook/zh/meta/edit-guide/index.html
@@ -4,10 +4,10 @@
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/e7e8128.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/4989614.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/f96d2a2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1384b359981424ebc3f4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/4989614.css"><link rel="stylesheet" href="/handbook/_nuxt/css/f96d2a2.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/6146f21.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/6d160d4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8cca5bf.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/80f1253966298a392915.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/6d160d4.css"><link rel="stylesheet" href="/handbook/_nuxt/css/8cca5bf.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <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/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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="%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E6%8C%87%E5%8D%97" tabindex="-1">文档编辑指南</h1> <h2 id="%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6" tabindex="-1">新增一个 markdown 文件</h2> <p>在 <code>contents/zh/</code>(中文文章)或 <code>contents/en/</code>(英文文章)目录下新增一个 markdown 文件,最多支持三级目录。将路径及标题信息更新在 <code>contents/zh/posts.yml</code> 或 <code>contents/en/posts.yml</code>。</p> <p>markdown 文件名称小写。</p> <h2 id="%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81" tabindex="-1">使用 prettier 来自动格式化代码</h2> <p>在开始之前,我们推荐安装<code>prettier</code>的 <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VSCode 插件</a>,该插件可以在你保存的时候自动帮你格式化代码。</p> <p>如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止<code>prettier</code>格式化该部分代码</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token comment"><!-- prettier-ignore-start --></span>
+ <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" 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/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">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/5-2-0" class="nav-link"><span class="title">5.2</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/baidu-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/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/server" 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/interaction/drag" 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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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="%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E6%8C%87%E5%8D%97" tabindex="-1">文档编辑指南</h1> <h2 id="%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6" tabindex="-1">新增一个 markdown 文件</h2> <p>在 <code>contents/zh/</code>(中文文章)或 <code>contents/en/</code>(英文文章)目录下新增一个 markdown 文件,最多支持三级目录。将路径及标题信息更新在 <code>contents/zh/posts.yml</code> 或 <code>contents/en/posts.yml</code>。</p> <p>markdown 文件名称小写。</p> <h2 id="%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81" tabindex="-1">使用 prettier 来自动格式化代码</h2> <p>在开始之前,我们推荐安装<code>prettier</code>的 <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VSCode 插件</a>,该插件可以在你保存的时候自动帮你格式化代码。</p> <p>如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止<code>prettier</code>格式化该部分代码</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token comment"><!-- prettier-ignore-start --></span>
<span class="token comment"><!-- prettier-ignore-end --></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>如果你发现有的代码块并没有被格式化,请先检查该代码是否存在语法上的错误。</p> <h2 id="%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F" tabindex="-1">内置变量</h2> <ul><li><code>optionPath</code></li> <li><code>mainSitePath</code></li> <li><code>exampleViewPath</code></li> <li><code>exampleEditorPath</code></li> <li><code>lang</code></li></ul> <p>使用方式:</p> <pre><code>${xxxxx}
</code></pre> <h2 id="%E5%BC%95%E7%94%A8%E5%85%B6%E5%AE%83%E6%96%87%E7%AB%A0" tabindex="-1">引用其它文章</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token url">[<span class="token content">获取 Apache ECharts</span>](<span class="token url">${lang}/basics/download</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><a href="zh/basics/download">获取 Apache ECharts</a></p> <h2 id="%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81" tabindex="-1">引用代码</h2> <h3 id="%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">基础使用</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>```js
option = {
@@ -177,7 +177,8 @@
This is a danger alert.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-alert</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> <blockquote class="md-alert md-alert-danger" data-v-a47f983e><p data-v-a47f983e>
This is a danger alert.
-</p></blockquote></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/meta/edit-guide.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,d,l,r,n,a,o,g,c,h,s,C,I,B,A,p,m,E,b,w,k,G,y,L,u,x,W,X,D,z,f,J,Y,O,V,U,M,R,v,P,S,F,Z,j,H,N,K,Q,T,_,$,q,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E6%8C%87%E5%8D%97" tabindex="-1">文档编辑指南</h1>\n<h2 id="%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6" tabindex="-1">新增一个 markdown 文件</h2>\n<p>在 <code>contents/zh/</code>(中文文章)或 <code>contents/en/</code>(英文文章)目录下新增一个 markdown 文件,最多支持三级目录。将路径及标题信息更新在 <code>contents/zh/posts.yml</code> 或 <code>contents/en/posts.yml</code>。</p>\n<p>markdown 文件名称小写。</p>\n<h2 id="%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81" tabindex="-1">使用 prettier 来自动格式化代码</h2>\n<p>在开始之前,我们推荐安装<code>prettier</code>的 <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VSCode 插件</a>,该插件可以在你保存的时候自动帮你格式化代码。</p>\n<p>如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止<code>prettier</code>格式化该部分代码</p>\n<md-code-block lang="markdown" code="\'PCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-CjwhLS0gcHJldHRpZXItaWdub3JlLWVuZCAtLT4\'" line-highlights="\'\'" />\n<p>如果你发现有的代码块并没有被格式化,请先检查该代码是否存在语法上的错误。</p>\n<h2 id="%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F" tabindex="-1">内置变量</h2>\n<ul>\n<li><code>optionPath</code></li>\n<li><code>mainSitePath</code></li>\n<li><code>exampleViewPath</code></li>\n<li><code>exampleEditorPath</code></li>\n<li><code>lang</code></li>\n</ul>\n<p>使用方式:</p>\n<pre><code>${xxxxx}\n</code></pre>\n<h2 id="%E5%BC%95%E7%94%A8%E5%85%B6%E5%AE%83%E6%96%87%E7%AB%A0" tabindex="-1">引用其它文章</h2>\n<md-code-block lang="markdown" code="\'W-iOt-WPliBBcGFjaGUgRUNoYXJ0c10oJHtsYW5nfS9iYXNpY3MvZG93bmxvYWQp\'" line-highlights="\'\'" />\n<p><a href="zh/basics/download">获取 Apache ECharts</a></p>\n<h2 id="%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81" tabindex="-1">引用代码</h2>\n<h3 id="%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">基础使用</h3>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'YGBganMKb3B0aW9uID0gewogICAgc2VyaWVzOiBbewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGRhdGE6IFsyMywgMjQsIDE4LCAyNSwgMjcsIDI4LCAyNV0KICAgIH1dCn07ClxgYGA\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h3 id="%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95" tabindex="-1">代码推荐写法</h3>\n<p>为了可以让工具帮助我们对代码进行格式化,我们应该尽量避免有语法问题的写法。</p>\n<p>比如注释 <code>...</code></p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJwogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h3 id="%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91" tabindex="-1">实时预览和编辑</h3>\n<blockquote>\n<p>目前只支持对 Option 代码的预览</p>\n</blockquote>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUKb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h3 id="%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80" tabindex="-1">更多预览布局</h3>\n<h4 id="%E5%B7%A6%E5%8F%B3" tabindex="-1">左右</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUge2xheW91dDogJ2xyJ30Kb3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<h4 id="%E5%8F%B3%E5%B7%A6" tabindex="-1">右左</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUge2xheW91dDogJ3JsJ30Kb3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'rl\'}" />\n<h4 id="%E4%B8%8B%E4%B8%8A" tabindex="-1">下上</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUge2xheW91dDogJ2J0J30Kb3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'bt\'}" />\n<h3 id="%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C" tabindex="-1">高亮代码行</h3>\n<p>使用:</p>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIHsxLDMtNX0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTsKXGBgYA\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<p>效果:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTs\'" line-highlights="\'{1,3-5}\'" />\n<h2 id="%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87" tabindex="-1">引用图片</h2>\n<p>图片实际存放地址在 <code>static/images/</code> 下。</p>\n<md-code-block lang="markdown" code="\'IVvlm77niYfor7TmmI5dKGltYWdlcy9kZW1vLnBuZyk\'" line-highlights="\'\'" />\n<h3 id="%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD" tabindex="-1">设置图片高宽</h3>\n<p>对于当前页面的临时样式,可以直接写 html:</p>\n<md-code-block lang="markdown" code="\'PGltZyBkYXRhLXNyYz0iaW1hZ2VzL2RlbW8ucG5nIiBzdHlsZT0id2lkdGg6IDUwcHgiIC8-\'" line-highlights="\'\'" />\n<h2 id="%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe" tabindex="-1">添加示例 iframe</h2>\n<p><code>src</code>为 <a href="https://echarts.apache.org/examples/zh/editor.html?c=line-simple">https://echarts.apache.org/examples/zh/editor.html?c=line-simple</a> 地址中<code>?c=</code>后面这一串</p>\n<p>使用:</p>\n<md-code-block lang="markdown" code="\'PG1kLWV4YW1wbGUgc3JjPSJkb2MtZXhhbXBsZS9nZXR0aW5nLXN0YXJ0ZWQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjMwMCIgLz4\'" line-highlights="\'\'" />\n<p>效果:\n<md-example src="doc-example/getting-started" width="100%" height="300" /></p>\n<h2 id="%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5" tabindex="-1">添加配置项链接</h2>\n<p>使用:</p>\n<md-code-block lang="markdown" code="\'PG1kLW9wdGlvbiBsaW5rPSJzZXJpZXMtYmFyLml0ZW1TdHlsZS5jb2xvciIgLz4\'" line-highlights="\'\'" />\n<p>效果:\n<md-option link="series-bar.itemStyle.color" /></p>\n<h2 id="%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8" tabindex="-1">更多组件使用</h2>\n<p>文档支持使用全局注册的<code>markdown</code>组件,除了刚才介绍的<code>md-example</code>组件,还有下面几种组件</p>\n<h3 id="md-alert" tabindex="-1">md-alert</h3>\n<p>提示组件</p>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9ImluZm8iPgpUaGlzIGlzIGFuIGluZm8gYWxlcnQuCjwvbWQtYWxlcnQ-\'" line-highlights="\'\'" />\n<md-alert type="info">\nThis is an info alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9InN1Y2Nlc3MiPgpUaGlzIGlzIGEgc3VjY2VzcyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="success">\nThis is a success alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgd2FybmluZyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="warning">\nThis is a warning alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgZGFuZ2VyIGFsZXJ0Lgo8L21kLWFsZXJ0Pg\'" line-highlights="\'\'" />\n<md-alert type="danger">\nThis is a danger alert.\n</md-alert>\n',postPath:"zh/meta/edit-guide"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:o,draft:i},{title:"获取灵感",dir:g},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:B,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:p,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:E},{title:"数据集",dir:b},{title:"数据转换",dir:w},{title:"坐标系",dir:k,draft:i},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:y},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:u,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:X},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:z,draft:i},{title:"阶梯瀑布图",dir:f},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:O},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:U},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:R},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:S,children:[{title:"基础散点图",dir:F}]}]},{title:Z,dir:e,draft:i},{title:"跨平台方案",dir:j,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:H}]},{title:"数据处理",dir:N,children:[{title:"动态的异步数据",dir:K},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:T}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:i}]}]},{title:"最佳实践",dir:q,children:[{title:Z,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:a},{title:"Resources",dir:o,draft:i},{title:"Inspiration",dir:g},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:B,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:E},{title:"Dataset",dir:b},{title:"Data Transform",dir:w},{title:"Coordinate",dir:k,draft:i},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:y},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:u,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:X},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:z,draft:i},{title:"Waterfall",dir:f}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:O},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:U},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:R},{title:"Ring Style",dir:v},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:S,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:H}]},{title:"Data",dir:N,children:[{title:"Dynamic Data",dir:K},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:T}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:i}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/meta/edit-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/e7e8128.js" defer></script><script src="/handbook/_nuxt/js/8f32e7b5e9164fd7d9af.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/1384b359981424ebc3f4.js" defer></script>
+</p></blockquote></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/meta/edit-guide.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"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,d,l,r,n,a,o,g,c,h,s,C,I,B,A,p,m,E,b,w,k,G,y,L,u,x,W,X,D,z,f,J,Y,O,V,U,M,R,v,P,S,F,Z,j,H,N,K,Q,T,_,$,q,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E6%8C%87%E5%8D%97" tabindex="-1">文档编辑指南</h1>\n<h2 id="%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6" tabindex="-1">新增一个 markdown 文件</h2>\n<p>在 <code>contents/zh/</code>(中文文章)或 <code>contents/en/</code>(英文文章)目录下新增一个 markdown 文件,最多支持三级目录。将路径及标题信息更新在 <code>contents/zh/posts.yml</code> 或 <code>contents/en/posts.yml</code>。</p>\n<p>markdown 文件名称小写。</p>\n<h2 id="%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81" tabindex="-1">使用 prettier 来自动格式化代码</h2>\n<p>在开始之前,我们推荐安装<code>prettier</code>的 <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VSCode 插件</a>,该插件可以在你保存的时候自动帮你格式化代码。</p>\n<p>如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止<code>prettier</code>格式化该部分代码</p>\n<md-code-block lang="markdown" code="\'PCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-CjwhLS0gcHJldHRpZXItaWdub3JlLWVuZCAtLT4\'" line-highlights="\'\'" />\n<p>如果你发现有的代码块并没有被格式化,请先检查该代码是否存在语法上的错误。</p>\n<h2 id="%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F" tabindex="-1">内置变量</h2>\n<ul>\n<li><code>optionPath</code></li>\n<li><code>mainSitePath</code></li>\n<li><code>exampleViewPath</code></li>\n<li><code>exampleEditorPath</code></li>\n<li><code>lang</code></li>\n</ul>\n<p>使用方式:</p>\n<pre><code>${xxxxx}\n</code></pre>\n<h2 id="%E5%BC%95%E7%94%A8%E5%85%B6%E5%AE%83%E6%96%87%E7%AB%A0" tabindex="-1">引用其它文章</h2>\n<md-code-block lang="markdown" code="\'W-iOt-WPliBBcGFjaGUgRUNoYXJ0c10oJHtsYW5nfS9iYXNpY3MvZG93bmxvYWQp\'" line-highlights="\'\'" />\n<p><a href="zh/basics/download">获取 Apache ECharts</a></p>\n<h2 id="%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81" tabindex="-1">引用代码</h2>\n<h3 id="%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">基础使用</h3>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'YGBganMKb3B0aW9uID0gewogICAgc2VyaWVzOiBbewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGRhdGE6IFsyMywgMjQsIDE4LCAyNSwgMjcsIDI4LCAyNV0KICAgIH1dCn07ClxgYGA\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h3 id="%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95" tabindex="-1">代码推荐写法</h3>\n<p>为了可以让工具帮助我们对代码进行格式化,我们应该尽量避免有语法问题的写法。</p>\n<p>比如注释 <code>...</code></p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJwogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h3 id="%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91" tabindex="-1">实时预览和编辑</h3>\n<blockquote>\n<p>目前只支持对 Option 代码的预览</p>\n</blockquote>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUKb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h3 id="%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80" tabindex="-1">更多预览布局</h3>\n<h4 id="%E5%B7%A6%E5%8F%B3" tabindex="-1">左右</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUge2xheW91dDogJ2xyJ30Kb3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<h4 id="%E5%8F%B3%E5%B7%A6" tabindex="-1">右左</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUge2xheW91dDogJ3JsJ30Kb3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'rl\'}" />\n<h4 id="%E4%B8%8B%E4%B8%8A" tabindex="-1">下上</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUge2xheW91dDogJ2J0J30Kb3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'bt\'}" />\n<h3 id="%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C" tabindex="-1">高亮代码行</h3>\n<p>使用:</p>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIHsxLDMtNX0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTsKXGBgYA\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<p>效果:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTs\'" line-highlights="\'{1,3-5}\'" />\n<h2 id="%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87" tabindex="-1">引用图片</h2>\n<p>图片实际存放地址在 <code>static/images/</code> 下。</p>\n<md-code-block lang="markdown" code="\'IVvlm77niYfor7TmmI5dKGltYWdlcy9kZW1vLnBuZyk\'" line-highlights="\'\'" />\n<h3 id="%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD" tabindex="-1">设置图片高宽</h3>\n<p>对于当前页面的临时样式,可以直接写 html:</p>\n<md-code-block lang="markdown" code="\'PGltZyBkYXRhLXNyYz0iaW1hZ2VzL2RlbW8ucG5nIiBzdHlsZT0id2lkdGg6IDUwcHgiIC8-\'" line-highlights="\'\'" />\n<h2 id="%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe" tabindex="-1">添加示例 iframe</h2>\n<p><code>src</code>为 <a href="https://echarts.apache.org/examples/zh/editor.html?c=line-simple">https://echarts.apache.org/examples/zh/editor.html?c=line-simple</a> 地址中<code>?c=</code>后面这一串</p>\n<p>使用:</p>\n<md-code-block lang="markdown" code="\'PG1kLWV4YW1wbGUgc3JjPSJkb2MtZXhhbXBsZS9nZXR0aW5nLXN0YXJ0ZWQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjMwMCIgLz4\'" line-highlights="\'\'" />\n<p>效果:\n<md-example src="doc-example/getting-started" width="100%" height="300" /></p>\n<h2 id="%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5" tabindex="-1">添加配置项链接</h2>\n<p>使用:</p>\n<md-code-block lang="markdown" code="\'PG1kLW9wdGlvbiBsaW5rPSJzZXJpZXMtYmFyLml0ZW1TdHlsZS5jb2xvciIgLz4\'" line-highlights="\'\'" />\n<p>效果:\n<md-option link="series-bar.itemStyle.color" /></p>\n<h2 id="%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8" tabindex="-1">更多组件使用</h2>\n<p>文档支持使用全局注册的<code>markdown</code>组件,除了刚才介绍的<code>md-example</code>组件,还有下面几种组件</p>\n<h3 id="md-alert" tabindex="-1">md-alert</h3>\n<p>提示组件</p>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9ImluZm8iPgpUaGlzIGlzIGFuIGluZm8gYWxlcnQuCjwvbWQtYWxlcnQ-\'" line-highlights="\'\'" />\n<md-alert type="info">\nThis is an info alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9InN1Y2Nlc3MiPgpUaGlzIGlzIGEgc3VjY2VzcyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="success">\nThis is a success alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgd2FybmluZyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="warning">\nThis is a warning alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgZGFuZ2VyIGFsZXJ0Lgo8L21kLWFsZXJ0Pg\'" line-highlights="\'\'" />\n<md-alert type="danger">\nThis is a danger alert.\n</md-alert>\n',postPath:"zh/meta/edit-guide"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:o,draft:i},{title:"获取灵感",dir:g},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:B,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:p,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:E},{title:"数据集",dir:b},{title:"数据转换",dir:w},{title:"坐标系",dir:k,draft:i},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:y},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:u,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:X},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:z,draft:i},{title:"阶梯瀑布图",dir:f},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:O},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:U},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:R},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:S,children:[{title:"基础散点图",dir:F}]}]},{title:Z,dir:e,draft:i},{title:"跨平台方案",dir:j,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:H}]},{title:"数据处理",dir:N,children:[{title:"动态的异步数据",dir:K},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:T}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:i}]}]},{title:"最佳实践",dir:q,children:[{title:Z,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:a},{title:"Resources",dir:o,draft:i},{title:"Inspiration",dir:g},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:B,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:E},{title:"Dataset",dir:b},{title:"Data Transform",dir:w},{title:"Coordinate",dir:k,draft:i},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:y},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:u,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:X},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:z,draft:i},{title:"Waterfall",dir:f}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:O},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:U},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:R},{title:"Ring Style",dir:v},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:S,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:H}]},{title:"Data",dir:N,children:[{title:"Dynamic Data",dir:K},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:T}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:i}]}]},{title:"Best Practices",dir:q,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/meta/edit-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-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","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/6146f21.js" defer></script><script src="/handbook/_nuxt/js/1dee7a24a3cb648e6c4e.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/80f1253966298a392915.js" defer></script>
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
diff --git a/layouts/basic.html b/layouts/basic.html
index f895079..3f36435 100644
--- a/layouts/basic.html
+++ b/layouts/basic.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/layouts/doc-old.html b/layouts/doc-old.html
index 4c0103c..952fea9 100644
--- a/layouts/doc-old.html
+++ b/layouts/doc-old.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script src="vendors/jquery-autocomplete/jquery.auto-complete.min.js"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script src="vendors/jquery-autocomplete/jquery.auto-complete.min.js"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
var vendorPath = '../vendors';
diff --git a/layouts/doc.html b/layouts/doc.html
index 0eca7a4..959a7f6 100644
--- a/layouts/doc.html
+++ b/layouts/doc.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,9 +10,9 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/zh/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/zh/option.html">旧版本文档</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/zh/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/zh/option.html">旧版本文档</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://echarts.apache.org/zh/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
-</script><script type="text/javascript">window.globalArgsExtra.version = '55907f28e6';
+</script><script type="text/javascript">window.globalArgsExtra.version = 'dbf1fef9db';
echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/layouts/example-simple.html b/layouts/example-simple.html
index 430725b..6e58bab 100644
--- a/layouts/example-simple.html
+++ b/layouts/example-simple.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,8 +10,8 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
-</script><script type="text/javascript">window.globalArgsExtra.version = '1630485133448';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><div id="ec-example-main"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
+</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);
diff --git a/layouts/example.html b/layouts/example.html
index cb62e48..6125961 100644
--- a/layouts/example.html
+++ b/layouts/example.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,9 +10,9 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://echarts.apache.org/examples/css/example-bundle.css?_v_=4e03a5649f"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="ec-example-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/examples/">旧版本示例</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-example-nav" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="ec-example-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/examples/">旧版本示例</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://echarts.apache.org/examples/js/example-bundle.js?_v_=531736a39b"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://echarts.apache.org';
-</script><script type="text/javascript">window.globalArgsExtra.version = '1630485133448';
+</script><script type="text/javascript">window.globalArgsExtra.version = '1630499963508';
window.globalArgsExtra.cdnRoot = EC_WWW_CDN_PAY_ROOT + '/examples';
echartsExample.init('#ec-example-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/layouts/tool-spa.html b/layouts/tool-spa.html
index 1d4aeb9..32bc007 100644
--- a/layouts/tool-spa.html
+++ b/layouts/tool-spa.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://echarts.apache.org/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://echarts.apache.org/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="page-undefined" class="page-spa-container"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=b5b8944fb9"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="page-undefined" class="page-spa-container"></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://echarts.apache.org/zh/js/common.js?_v_=9c455b5db4"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/404.html b/zh/404.html
index fd6cc1b..a91effc 100644
--- a/zh/404.html
+++ b/zh/404.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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="not-found"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/404.png?_v_=20200710_1" alt="404"><div class="text">非常抱歉,您所访问的网页找不到了!您可以选择<a href="./index.html" class="link">返回首页</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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="not-found"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/404.png?_v_=20200710_1" alt="404"><div class="text">非常抱歉,您所访问的网页找不到了!您可以选择<a href="./index.html" class="link">返回首页</a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/api.html b/zh/api.html
index d35b4f9..6b24268 100644
--- a/zh/api.html
+++ b/zh/api.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/zh/option.html">旧版本文档</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/zh/option.html">旧版本文档</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/api-parts',
@@ -19,7 +19,7 @@
};
if (window.EC_WWW_CDN_PAY_ROOT) {
window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/zh/' + window.globalArgsExtra.baseUrl
-}</script><script type="text/javascript">window.globalArgsExtra.version = 'f905fb8a74';
+}</script><script type="text/javascript">window.globalArgsExtra.version = '98f3d6f3b5';
echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/builder.html b/zh/builder.html
index c83f7f0..ed67156 100644
--- a/zh/builder.html
+++ b/zh/builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>ECharts 在线构建</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载。</p><p>注意:打包的源文件来自 jsdelivr CDN,非 Apache 官方源代码和编译产物</p><div class="download-version"><span>选择版本</span><select id="versions"></select></div></div></div><div class="page-content"><div id="configuration" class="container"><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/compare-versions@3.6.0/index.min.js"></script><script>var $versionsDom = document.querySelector('#versions');
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载。</p><p>注意:打包的源文件来自 jsdelivr CDN,非 Apache 官方源代码和编译产物</p><div class="download-version"><span>选择版本</span><select id="versions"></select></div></div></div><div class="page-content"><div id="configuration" class="container"><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/compare-versions@3.6.0/index.min.js"></script><script>var $versionsDom = document.querySelector('#versions');
fetch('https://data.jsdelivr.com/v1/package/npm/echarts', {
mode: 'cors'
diff --git a/zh/builder/echarts.html b/zh/builder/echarts.html
index 5d8bff5..5587ab3 100644
--- a/zh/builder/echarts.html
+++ b/zh/builder/echarts.html
@@ -54,7 +54,7 @@
'rollup': 'lib/rollup.browser',
'transformDev': 'lib/transform-dev-bundle'
},
- urlArgs: 'v=1630485133448'
+ urlArgs: 'v=1630499963508'
});
require(['build']);
diff --git a/zh/builder3.html b/zh/builder3.html
index 16fc93f..581f008 100644
--- a/zh/builder3.html
+++ b/zh/builder3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>ECharts 在线构建</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载。</p><p>注意:打包的源文件来自 jsdelivr CDN,非 Apache 官方源代码和编译产物</p><div class="download-version"><span>选择版本</span><select id="versions"></select></div></div></div><div class="page-content"><div id="configuration" class="container"><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/compare-versions@3.6.0/index.min.js"></script><script>var $versionsDom = document.querySelector('#versions');
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="builder"><div class="page-info"><div id="title" class="container"><h1>在线定制</h1><p>可自由选择所需图表、坐标系、组件进行打包下载。</p><p>注意:打包的源文件来自 jsdelivr CDN,非 Apache 官方源代码和编译产物</p><div class="download-version"><span>选择版本</span><select id="versions"></select></div></div></div><div class="page-content"><div id="configuration" class="container"><section id="charts"><h3>图表<span>chart</span></h3><p class="desc">选择要打包的图表<span class="warn">(注:开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示)</span></p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="bar"><h5>柱状图 <div>Bar</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><input type="checkbox" name="line"><h5>折线图 <div>Line</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pie"><h5>饼图 <div>Pie</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="scatter"><h5>散点图 <div>Scatter</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><input type="checkbox" name="effectScatter"><h5>涟漪散点图 <div>EffectScatter</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><input type="checkbox" name="candlestick"><h5>K线图 <div>Candlestick</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="radar"><h5>雷达图 <div>Radar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="heatmap"><h5>热力图 <div>Heatmap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tree"><h5>树图 <div>Tree</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="treemap"><h5>矩形树图 <div>Treemap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sunburst"><h5>旭日图 <div>Sunburst</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><input type="checkbox" name="map"><h5>地图 <div>Map</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><input type="checkbox" name="lines"><h5>线图 <div>Lines</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graph"><h5>关系图 <div>Graph</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><input type="checkbox" name="boxplot"><h5>箱线图 <div>Boxplot</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="parallel"><h5>平行坐标 <div>Parallel</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gauge"><h5>仪表盘 <div>Gauge</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><input type="checkbox" name="funnel"><h5>漏斗图 <div>Funnel</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><input type="checkbox" name="sankey"><h5>桑基图 <div>Sankey</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><input type="checkbox" name="themeRiver"><h5>主题河流图 <div>ThemeRiver</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="pictorialBar"><h5>象形柱图 <div>PictorialBar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="custom"><h5>自定义系列 <div>Custom</div></h5></li></ul></section><section id="coords"><h3>坐标系<span>coordinate systems</span></h3><p class="desc">选择要打包的坐标系,有些图表像散点图,折线图可以被应用到多个坐标系上</p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><input type="checkbox" name="gridSimple"><h5>直角坐标系 <div>Grid</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="polar"><h5>极坐标系 <div>Polar</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><input type="checkbox" name="geo"><h5>地理坐标系 <div>Geo</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><input type="checkbox" name="singleAxis"><h5>单轴 <div>SingleAxis</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><input type="checkbox" name="calendar"><h5>日历 <div>Calendar</div></h5></li></ul></section><section id="components"><h3>组件<span>component</span></h3><p class="desc">选择要打包的组件</p><ul><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><input type="checkbox" name="title"><h5>标题 <div>Title</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><input type="checkbox" name="legendScroll"><h5>图例 <div>Legend</div></h5></li><li class="checked"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><input type="checkbox" name="tooltip"><h5>提示框 <div>Tooltip</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markPoint"><h5>标注 <div>MarkPoint</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markLine"><h5>标线 <div>MarkLine</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><input type="checkbox" name="markArea"><h5>标域 <div>MarkArea</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><input type="checkbox" name="timeline"><h5>时间轴 <div>Timeline</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><input type="checkbox" name="dataZoom"><h5>数据区域缩放 <div>DataZoom</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><input type="checkbox" name="brush"><h5>刷选 <div>Brush</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><input type="checkbox" name="visualMap"><h5>视觉映射 <div>VisualMap</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><input type="checkbox" name="toolbox"><h5>工具栏 <div>Toolbox</div></h5></li><li><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><input type="checkbox" name="graphic"><h5>自定义图形 <div>Graphic</div></h5></li></ul></section><section id="other"><h3>其它选项<span>others</span></h3><div class="other-option"><input type="checkbox" id="svg" name="svg"><label for="svg">SVG 渲染</label><p class="desc">是否包括 SVG 渲染器,从而能支持使用 SVG 来绘制图表</p></div><div class="other-option"><input type="checkbox" id="vml" name="vml"><label for="vml">兼容 IE8</label><p class="desc">是否包括对 IE8 的兼容代码</p></div><div class="other-option"><input type="checkbox" id="api" name="api" checked="checked"><label for="api">工具集</label><p class="desc">是否在 echarts 对象上挂载常用工具集。一般都会挂载,除非对生成的文件的体积有苛求,并且不需要用这些工具集。</p></div><div class="other-option"><input type="checkbox" id="compress" name="compress" checked="checked"><label for="compress">代码压缩</label><p class="desc">是否使用 UglifyJS 压缩后的代码,开发环境建议不压缩代码,代码压缩会去掉大部分常见的警告和错误提示。</p></div></section></div><div id="action"><a id="build" href="javascript:;" class="btn btn-main btn-thirdary">下载</a></div></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/compare-versions@3.6.0/index.min.js"></script><script>var $versionsDom = document.querySelector('#versions');
fetch('https://data.jsdelivr.com/v1/package/npm/echarts', {
mode: 'cors'
diff --git a/zh/changelog.html b/zh/changelog.html
index 6471bb0..945f9d2 100644
--- a/zh/changelog.html
+++ b/zh/changelog.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>版本记录 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><h1>版本记录</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content single-page"><div class="page-nav"><a class="slide-btn">收起目录</a><h4>版本记录</h4><ul></ul></div><div class="page-detail"><h2 id="v5-2-0">v5.2.0</h2>
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><h1>版本记录</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content single-page"><div class="page-nav"><a class="slide-btn">收起目录</a><h4>版本记录</h4><ul></ul></div><div class="page-detail"><h2 id="v5-2-0">v5.2.0</h2>
<div class="time">2021-09-01</div>
<h4 id="-">非兼容改动</h4>
@@ -2261,7 +2261,7 @@
<ul>
<li>The new echarts</li>
</ul>
-<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/cheat-sheet.html b/zh/cheat-sheet.html
index 306eefa..c04766d 100644
--- a/zh/cheat-sheet.html
+++ b/zh/cheat-sheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,8 +7,8 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>术语速查手册 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><h1>术语速查手册</h1><p>快速了解功能名称,帮助定位到配置项手册</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content container page-cheatsheet"><h2>常用组件说明</h2><div id="cheat-chart-container"><div class="row"><div class="col-lg-9"><div id="cheat-chart"></div></div><div class="col-lg-3"><div id="cheat-detail"></div></div></div></div><h2>系列类型文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#series-bar" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><h5>柱状图<div>Bar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><h5>折线图<div>Line</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pie" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><h5>饼图<div>Pie</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-scatter" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><h5>散点图<div>Scatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-effectScatter" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><h5>涟漪散点图<div>EffectScatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-candlestick" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><h5>K线图<div>Candlestick</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-radar" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><h5>雷达图<div>Radar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-heatmap" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><h5>热力图<div>Heatmap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-tree" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><h5>树图<div>Tree</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-treemap" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><h5>矩形树图<div>Treemap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sunburst" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><h5>旭日图<div>Sunburst</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-map" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><h5>地图<div>Map</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-lines" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><h5>线图<div>Lines</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-graph" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><h5>关系图<div>Graph</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-boxplot" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><h5>箱线图<div>Boxplot</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-parallel" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><h5>平行坐标<div>Parallel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-gauge" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><h5>仪表盘<div>Gauge</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-funnel" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><h5>漏斗图<div>Funnel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sankey" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><h5>桑基图<div>Sankey</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-themeRiver" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><h5>主题河流图<div>ThemeRiver</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pictorialBar" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><h5>象形柱图<div>PictorialBar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-custom" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><h5>自定义系列<div>Custom</div></h5></a></li></ul><h2>坐标系文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#grid" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><h5>直角坐标系<div>Grid</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#polar" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><h5>极坐标系<div>Polar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#geo" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><h5>地理坐标系<div>Geo</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#singleAxis" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><h5>单轴<div>SingleAxis</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#calendar" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><h5>日历<div>Calendar</div></h5></a></li></ul><h2>组件文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#title" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><h5>标题<div>Title</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#legend" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><h5>图例<div>Legend</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#tooltip" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><h5>提示框<div>Tooltip</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markPoint" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><h5>标注<div>MarkPoint</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markLine" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><h5>标线<div>MarkLine</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markArea" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><h5>标域<div>MarkArea</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#timeline" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><h5>时间轴<div>Timeline</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#dataZoom" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><h5>数据区域缩放<div>DataZoom</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#brush" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><h5>刷选<div>Brush</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#visualMap" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><h5>视觉映射<div>VisualMap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#toolbox" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><h5>工具栏<div>Toolbox</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#graphic" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><h5>自定义图形<div>Graphic</div></h5></a></li></ul></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
-</script><script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/cheat-sheet.js?_v_=c8e1104eb4"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><h1>术语速查手册</h1><p>快速了解功能名称,帮助定位到配置项手册</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content container page-cheatsheet"><h2>常用组件说明</h2><div id="cheat-chart-container"><div class="row"><div class="col-lg-9"><div id="cheat-chart"></div></div><div class="col-lg-3"><div id="cheat-detail"></div></div></div></div><h2>系列类型文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#series-bar" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/bar.svg?_v_=20200710_1" alt=""><h5>柱状图<div>Bar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/line.svg?_v_=20200710_1" alt=""><h5>折线图<div>Line</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pie" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pie.svg?_v_=20200710_1" alt=""><h5>饼图<div>Pie</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-scatter" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/scatter.svg?_v_=20200710_1" alt=""><h5>散点图<div>Scatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-effectScatter" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/effectScatter.svg?_v_=20200710_1" alt=""><h5>涟漪散点图<div>EffectScatter</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-candlestick" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/candlestick.svg?_v_=20200710_1" alt=""><h5>K线图<div>Candlestick</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-radar" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/radar.svg?_v_=20200710_1" alt=""><h5>雷达图<div>Radar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-heatmap" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/heatmap.svg?_v_=20200710_1" alt=""><h5>热力图<div>Heatmap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-tree" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/tree.svg?_v_=20200710_1" alt=""><h5>树图<div>Tree</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-treemap" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/treemap.svg?_v_=20200710_1" alt=""><h5>矩形树图<div>Treemap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sunburst" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sunburst.svg?_v_=20200710_1" alt=""><h5>旭日图<div>Sunburst</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-map" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/map.svg?_v_=20200710_1" alt=""><h5>地图<div>Map</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-lines" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/lines.svg?_v_=20200710_1" alt=""><h5>线图<div>Lines</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-graph" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/graph.svg?_v_=20200710_1" alt=""><h5>关系图<div>Graph</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-boxplot" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/boxplot.svg?_v_=20200710_1" alt=""><h5>箱线图<div>Boxplot</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-parallel" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/parallel.svg?_v_=20200710_1" alt=""><h5>平行坐标<div>Parallel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-gauge" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/gauge.svg?_v_=20200710_1" alt=""><h5>仪表盘<div>Gauge</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-funnel" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/funnel.svg?_v_=20200710_1" alt=""><h5>漏斗图<div>Funnel</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-sankey" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/sankey.svg?_v_=20200710_1" alt=""><h5>桑基图<div>Sankey</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-themeRiver" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/themeRiver.svg?_v_=20200710_1" alt=""><h5>主题河流图<div>ThemeRiver</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-pictorialBar" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/pictorialBar.svg?_v_=20200710_1" alt=""><h5>象形柱图<div>PictorialBar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-custom" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/chart/custom.svg?_v_=20200710_1" alt=""><h5>自定义系列<div>Custom</div></h5></a></li></ul><h2>坐标系文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#grid" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/gridSimple.svg?_v_=20200710_1" alt=""><h5>直角坐标系<div>Grid</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#polar" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/polar.svg?_v_=20200710_1" alt=""><h5>极坐标系<div>Polar</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#geo" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/geo.svg?_v_=20200710_1" alt=""><h5>地理坐标系<div>Geo</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#singleAxis" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/singleAxis.svg?_v_=20200710_1" alt=""><h5>单轴<div>SingleAxis</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#calendar" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/calendar.svg?_v_=20200710_1" alt=""><h5>日历<div>Calendar</div></h5></a></li></ul><h2>组件文档速查</h2><ul><li class="cheat-chart-item"><a href="option.html#title" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/title.svg?_v_=20200710_1" alt=""><h5>标题<div>Title</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#legend" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/legend.svg?_v_=20200710_1" alt=""><h5>图例<div>Legend</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#tooltip" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/tooltip.svg?_v_=20200710_1" alt=""><h5>提示框<div>Tooltip</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markPoint" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markPoint.svg?_v_=20200710_1" alt=""><h5>标注<div>MarkPoint</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markLine" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markLine.svg?_v_=20200710_1" alt=""><h5>标线<div>MarkLine</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#series-line.markArea" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/markArea.svg?_v_=20200710_1" alt=""><h5>标域<div>MarkArea</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#timeline" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/timeline.svg?_v_=20200710_1" alt=""><h5>时间轴<div>Timeline</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#dataZoom" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/dataZoom.svg?_v_=20200710_1" alt=""><h5>数据区域缩放<div>DataZoom</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#brush" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/brush.svg?_v_=20200710_1" alt=""><h5>刷选<div>Brush</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#visualMap" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/visualMap.svg?_v_=20200710_1" alt=""><h5>视觉映射<div>VisualMap</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#toolbox" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/toolbox.svg?_v_=20200710_1" alt=""><h5>工具栏<div>Toolbox</div></h5></a></li><li class="cheat-chart-item"><a href="option.html#graphic" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/builder/component/graphic.svg?_v_=20200710_1" alt=""><h5>自定义图形<div>Graphic</div></h5></a></li></ul></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
+</script><script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/cheat-sheet.js?_v_=503c5faafb"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/coding-standard.html b/zh/coding-standard.html
index 814d621..bd6d219 100644
--- a/zh/coding-standard.html
+++ b/zh/coding-standard.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>代码规范 - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/vendors/prettify/prettify.css?_v_=20200710_1"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><h1>代码规范</h1><p>如果你想要为 ECharts 贡献代码,请遵从以下代码规范。</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content single-page"><div class="page-nav"><ul id="standard-nav"></ul></div><div class="page-detail"><h2 id="代码规范">代码规范</h2>
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><h1>代码规范</h1><p>如果你想要为 ECharts 贡献代码,请遵从以下代码规范。</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content single-page"><div class="page-nav"><ul id="standard-nav"></ul></div><div class="page-detail"><h2 id="代码规范">代码规范</h2>
<h3 id="源文件">源文件</h3>
<p><strong>[强制]</strong> JavaScript源文件必须以无BOM的UTF-8编码。</p>
<h3 id="缩进">缩进</h3>
@@ -571,7 +571,7 @@
<p><strong>[强制]</strong> 不要使用 <code>for in</code> 语句对数组进行遍历。</p>
<h3 id="其他">其他</h3>
<p><strong>[强制]</strong> 不要使用 <code>eval</code> 和 <code>with</code>。允许使用<code>new Function</code>。</p>
-<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
+<footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
var $list = $('#standard-nav');
$('.page-detail h2, .page-detail h3, .page-detail h4')
diff --git a/zh/committers.html b/zh/committers.html
index 0fbfcf4..f143f12 100644
--- a/zh/committers.html
+++ b/zh/committers.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Committers - Apache ECharts</title></title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><h1>贡献者列表</h1><p>ECharts 的发展离不开其背后很多人的卓越贡献,他们有着不同的技能,甚至来自不同的岗位和公司</p><p>感谢每一个人的帮助与支持,更希望以后能有更多的人助力 ECharts 的成长</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="about-page"><section class="container contributor"><h4 class="group pmc">PMC</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/pissang" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/沈毅.jpg?_v_=20200710_1"></a><h5 class="about-name">沈毅</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/100pah" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/宿爽.jpg?_v_=20200710_1"></a><h5 class="about-name">宿爽</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/Ovilia" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/羡辙.jpg?_v_=20200710_1"></a><h5 class="about-name">羡辙</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://www.behance.net/wjtjiayouac8aa" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/王俊婷.jpg"></a><h5 class="about-name">王俊婷</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/plainheart" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/plainheart.jpg?_v_=20200710_1"></a><h5 class="about-name">王忠祥</h5><div class="about-desc">中国 · 河南</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/susiwen8" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/苏思文.jpg?_v_=20200710_1"></a><h5 class="about-name">苏思文</h5><div class="about-desc">蚂蚁集团</div><div class="about-desc">中国 · 杭州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/wf123537200" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/zakwu.jpg?_v_=20200710_1"></a><h5 class="about-name">巫枫</h5><div class="about-desc">腾讯</div><div class="about-desc">中国 · 深圳</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/kener" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/林峰.jpg?_v_=20200710_1"></a><h5 class="about-name">林峰</h5><div class="about-desc">阿里巴巴</div><div class="about-desc">中国 · 杭州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/deqingli" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/德清.jpg?_v_=20200710_1"></a><h5 class="about-name">德清</h5><div class="about-desc">阿里巴巴</div><div class="about-desc">中国 · 杭州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/dave.jpg?_v_=20200710_1"><h5 class="about-name">Dave Fisher</h5><div class="about-desc">美国 · 旧金山</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/kevin.jpg?_v_=20200710_1"><h5 class="about-name">Kevin A. McGrail</h5><div class="about-desc">美国 · 华盛顿</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/shengwu.jpg?_v_=20200710_1"><h5 class="about-name">吴晟</h5><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/erik168" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/erik.jpg?_v_=20200710_1"></a><h5 class="about-name">董睿</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chriswong" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/大佛.jpg?_v_=20200710_1"></a><h5 class="about-name">黄后锦</h5><div class="about-desc">跟谁学</div><div class="about-desc">中国 · 北京</div></div></div></div><h4 class="group committer">Committers</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/yufeng04" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/禹峰.jpg?_v_=20200710_1"></a><h5 class="about-name">禹峰</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/cuijian-dexter" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/崔健.jpg?_v_=20200710_1"></a><h5 class="about-name">崔健</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/quillblue" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/qiansheng.jpg?_v_=20200710_1"></a><h5 class="about-name">钱晟</h5><div class="about-desc">陶氏化学</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chfw" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/chfw.jpg?_v_=20200710_1"></a><h5 class="about-name">chfw</h5><div class="about-desc">英国</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/alex2wong" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/黄益修.jpg?_v_=20200710_1"></a><h5 class="about-name">黄益修</h5><div class="about-desc">字节跳动</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/SnailSword" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/韩天.jpg?_v_=20200710_1"></a><h5 class="about-name">韩天</h5><div class="about-desc">Merico</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/nick.jpg?_v_=20200710_1"><h5 class="about-name">何亚雄</h5><div class="about-desc">中国 · 深圳</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/ClemMakesApps" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/clement.jpg?_v_=20200710_1"></a><h5 class="about-name">Clement Ho</h5><div class="about-desc">MURAL</div><div class="about-desc">美国 · 得克萨斯州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/tedliu.jpg?_v_=20200710_1"><h5 class="about-name">Ted Liu</h5><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/shenshuntian.jpg?_v_=20200710_1"><h5 class="about-name">沈顺天</h5><div class="about-desc">腾讯</div><div class="about-desc">中国 · 深圳</div></div></div></div><h4 class="group contributor">Contributors</h4><div class="row"><p></p><p>在 <a href="https://github.com/apache/echarts/graphs/contributors">ECharts 贡献者列表</a>中,记录了更多为 ECharts 做出过贡献的人 。</p><p>感谢所有贡献者,一起助力 ECharts 更好地成长。</p></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><h1>贡献者列表</h1><p>ECharts 的发展离不开其背后很多人的卓越贡献,他们有着不同的技能,甚至来自不同的岗位和公司</p><p>感谢每一个人的帮助与支持,更希望以后能有更多的人助力 ECharts 的成长</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="about-page"><section class="container contributor"><h4 class="group pmc">PMC</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/pissang" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/沈毅.jpg?_v_=20200710_1"></a><h5 class="about-name">沈毅</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/100pah" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/宿爽.jpg?_v_=20200710_1"></a><h5 class="about-name">宿爽</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/Ovilia" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/羡辙.jpg?_v_=20200710_1"></a><h5 class="about-name">羡辙</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://www.behance.net/wjtjiayouac8aa" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/王俊婷.jpg"></a><h5 class="about-name">王俊婷</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/plainheart" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/plainheart.jpg?_v_=20200710_1"></a><h5 class="about-name">王忠祥</h5><div class="about-desc">中国 · 河南</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/susiwen8" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/苏思文.jpg?_v_=20200710_1"></a><h5 class="about-name">苏思文</h5><div class="about-desc">蚂蚁集团</div><div class="about-desc">中国 · 杭州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/wf123537200" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/zakwu.jpg?_v_=20200710_1"></a><h5 class="about-name">巫枫</h5><div class="about-desc">腾讯</div><div class="about-desc">中国 · 深圳</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/kener" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/林峰.jpg?_v_=20200710_1"></a><h5 class="about-name">林峰</h5><div class="about-desc">阿里巴巴</div><div class="about-desc">中国 · 杭州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/deqingli" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/德清.jpg?_v_=20200710_1"></a><h5 class="about-name">德清</h5><div class="about-desc">阿里巴巴</div><div class="about-desc">中国 · 杭州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/dave.jpg?_v_=20200710_1"><h5 class="about-name">Dave Fisher</h5><div class="about-desc">美国 · 旧金山</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/kevin.jpg?_v_=20200710_1"><h5 class="about-name">Kevin A. McGrail</h5><div class="about-desc">美国 · 华盛顿</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/shengwu.jpg?_v_=20200710_1"><h5 class="about-name">吴晟</h5><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/erik168" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/erik.jpg?_v_=20200710_1"></a><h5 class="about-name">董睿</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chriswong" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/大佛.jpg?_v_=20200710_1"></a><h5 class="about-name">黄后锦</h5><div class="about-desc">跟谁学</div><div class="about-desc">中国 · 北京</div></div></div></div><h4 class="group committer">Committers</h4><div class="row"><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/yufeng04" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/禹峰.jpg?_v_=20200710_1"></a><h5 class="about-name">禹峰</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/cuijian-dexter" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/崔健.jpg?_v_=20200710_1"></a><h5 class="about-name">崔健</h5><div class="about-desc">百度</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/quillblue" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/qiansheng.jpg?_v_=20200710_1"></a><h5 class="about-name">钱晟</h5><div class="about-desc">陶氏化学</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/chfw" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/chfw.jpg?_v_=20200710_1"></a><h5 class="about-name">chfw</h5><div class="about-desc">英国</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/alex2wong" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/黄益修.jpg?_v_=20200710_1"></a><h5 class="about-name">黄益修</h5><div class="about-desc">字节跳动</div><div class="about-desc">中国 · 上海</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/SnailSword" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/韩天.jpg?_v_=20200710_1"></a><h5 class="about-name">韩天</h5><div class="about-desc">Merico</div><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/nick.jpg?_v_=20200710_1"><h5 class="about-name">何亚雄</h5><div class="about-desc">中国 · 深圳</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><a href="https://github.com/ClemMakesApps" target="_blank"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/clement.jpg?_v_=20200710_1"></a><h5 class="about-name">Clement Ho</h5><div class="about-desc">MURAL</div><div class="about-desc">美国 · 得克萨斯州</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/tedliu.jpg?_v_=20200710_1"><h5 class="about-name">Ted Liu</h5><div class="about-desc">中国 · 北京</div></div></div><div class="col-md-3 col-sm-4 col-xs-6"><div class="about-person"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/people/shenshuntian.jpg?_v_=20200710_1"><h5 class="about-name">沈顺天</h5><div class="about-desc">腾讯</div><div class="about-desc">中国 · 深圳</div></div></div></div><h4 class="group contributor">Contributors</h4><div class="row"><p></p><p>在 <a href="https://github.com/apache/echarts/graphs/contributors">ECharts 贡献者列表</a>中,记录了更多为 ECharts 做出过贡献的人 。</p><p>感谢所有贡献者,一起助力 ECharts 更好地成长。</p></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';
var recommendId = 3;
setInterval(function () {
diff --git a/zh/contributing.html b/zh/contributing.html
index cbe7352..1907941 100644
--- a/zh/contributing.html
+++ b/zh/contributing.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>如何贡献 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><div class="container"><h1>如何贡献</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>如何为 Apache ECharts 项目贡献一份力量</h2><p>ECharts 欢迎各种形式的贡献!</p><h3>Issues</h3><p>查看 <a href="https://github.com/apache/echarts/issues" target="_blank">issue</a> 中是否有可以提供帮助的问题。</p><ul><li>如果是一个报 bug 或者提问如何使用 ECharts 的 issue,可以帮忙提醒创建者提供一个可复现的在线例子。例子可以通过 <a href="https://codepen.io/Ovilia/pen/dyYWXWM" target="_blank">Codepen</a> 或者 <a href="https://gallery.echartsjs.com/editor.html" target="_blank">ECharts Gallery</a> 创建。</li><li>如果是一个提新需求的 issue,可以帮忙确保创建者对预期的效果有清晰的表述。很多情况下,一个简单的设计图对清晰地表达需求是有必要的。</li><li>帮助复现问题,并根据<a href="https://echarts.apache.org/zh/option.html" target="_blank">文档</a>判断这是否是一个 bug。</li><li>没有标记 "pending" 标签的 issue,是我们明确是 bug 或新需求的 issue。欢迎提 pull request 帮忙修复这些问题。</li></ul><h3>Pull Requests</h3><p>我们非常欢迎社区贡献者以 PR 的形式作贡献!</p><p>在开始之前,请先阅读我们的<a href="./coding-standard.html">代码规范</a>以及<a href="https://www.apache.org/foundation/policies/conduct.html" target="_blank">Apache 行为规范</a>。</p><p>具体操作请参考 <a href="https://github.com/apache/echarts/wiki/How-to-setup-the-dev-environment" target="_blank">How to setup the dev environment</a> 以及 <a href="https://github.com/apache/echarts/wiki/How-to-make-a-pull-request" target="_blank">How to make a pull request</a>。</p><p>如果在提 PR 过程中碰到问题,欢迎在 issue 或 PR 中评论,或者给 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> 发邮件咨询。</p><h3>邮件组</h3><p>欢迎订阅<a href="./maillist.html">邮件组</a>参与我们的讨论。</p><h3>文档</h3><p>文档的修缮可能是 Apache ECharts 最需要帮助的地方。如果你对此感兴趣,无论是对某个页面文字的小修改,还是纠正一个链接或者其他的小改动,我们都非常欢迎!</p><p>文档的源代码可以在 <a href="https://github.com/apache/echarts-doc" target="_blank">GitHub</a> 找到。如果想要知道应该修改项目中的哪个文件,通常最简单的方式是在项目中搜索关键字。</p><p>在 issue 列表中,<a href="https://github.com/apache/echarts/labels/doc" target="_blank">"doc"</a> 标签表示相关文档需要修改。我们非常欢迎提 PR 修改这些问题!</p><h2>成为 Committer 或 PMC 成员!</h2><p>正如上面所说,我们非常欢迎社区以任何形式为 ECharts 项目作贡献。当我们发现社区中长期持续贡献的伙伴,会邀请他们成为 Committer 或者 PMC 成员。</p><p>成为 Committer 意味着你拥有对 ECharts 项目的“写”权限,可以更方便高效地为项目贡献。</p><p>PMC(Project Management Committee)是项目管理委员会的意思。PMC 成员负责帮助 ECharts 项目进行决策和管理以及促进社区的健康发展。更多详细信息请参考 <a href="https://www.apache.org/dev/pmc.html">Project Management Committee</a>。</p><p>成为 Committer 和 PMC 成员没有唯一固定的标准,因为我们鼓励不同形式的贡献。通常来说,现在的 PMC 成员会考察社区贡献者的表现,在发现有符合标准的人选后,会在内部发起讨论和投票,投票通过后将邀请其成为 Committer 或 PMC 成员。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><div class="container"><h1>如何贡献</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>如何为 Apache ECharts 项目贡献一份力量</h2><p>ECharts 欢迎各种形式的贡献!</p><h3>Issues</h3><p>查看 <a href="https://github.com/apache/echarts/issues" target="_blank">issue</a> 中是否有可以提供帮助的问题。</p><ul><li>如果是一个报 bug 或者提问如何使用 ECharts 的 issue,可以帮忙提醒创建者提供一个可复现的在线例子。例子可以通过 <a href="https://codepen.io/Ovilia/pen/dyYWXWM" target="_blank">Codepen</a> 或者 <a href="https://gallery.echartsjs.com/editor.html" target="_blank">ECharts Gallery</a> 创建。</li><li>如果是一个提新需求的 issue,可以帮忙确保创建者对预期的效果有清晰的表述。很多情况下,一个简单的设计图对清晰地表达需求是有必要的。</li><li>帮助复现问题,并根据<a href="https://echarts.apache.org/zh/option.html" target="_blank">文档</a>判断这是否是一个 bug。</li><li>没有标记 "pending" 标签的 issue,是我们明确是 bug 或新需求的 issue。欢迎提 pull request 帮忙修复这些问题。</li></ul><h3>Pull Requests</h3><p>我们非常欢迎社区贡献者以 PR 的形式作贡献!</p><p>在开始之前,请先阅读我们的<a href="./coding-standard.html">代码规范</a>以及<a href="https://www.apache.org/foundation/policies/conduct.html" target="_blank">Apache 行为规范</a>。</p><p>具体操作请参考 <a href="https://github.com/apache/echarts/wiki/How-to-setup-the-dev-environment" target="_blank">How to setup the dev environment</a> 以及 <a href="https://github.com/apache/echarts/wiki/How-to-make-a-pull-request" target="_blank">How to make a pull request</a>。</p><p>如果在提 PR 过程中碰到问题,欢迎在 issue 或 PR 中评论,或者给 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> 发邮件咨询。</p><h3>邮件组</h3><p>欢迎订阅<a href="./maillist.html">邮件组</a>参与我们的讨论。</p><h3>文档</h3><p>文档的修缮可能是 Apache ECharts 最需要帮助的地方。如果你对此感兴趣,无论是对某个页面文字的小修改,还是纠正一个链接或者其他的小改动,我们都非常欢迎!</p><p>文档的源代码可以在 <a href="https://github.com/apache/echarts-doc" target="_blank">GitHub</a> 找到。如果想要知道应该修改项目中的哪个文件,通常最简单的方式是在项目中搜索关键字。</p><p>在 issue 列表中,<a href="https://github.com/apache/echarts/labels/doc" target="_blank">"doc"</a> 标签表示相关文档需要修改。我们非常欢迎提 PR 修改这些问题!</p><h2>成为 Committer 或 PMC 成员!</h2><p>正如上面所说,我们非常欢迎社区以任何形式为 ECharts 项目作贡献。当我们发现社区中长期持续贡献的伙伴,会邀请他们成为 Committer 或者 PMC 成员。</p><p>成为 Committer 意味着你拥有对 ECharts 项目的“写”权限,可以更方便高效地为项目贡献。</p><p>PMC(Project Management Committee)是项目管理委员会的意思。PMC 成员负责帮助 ECharts 项目进行决策和管理以及促进社区的健康发展。更多详细信息请参考 <a href="https://www.apache.org/dev/pmc.html">Project Management Committee</a>。</p><p>成为 Committer 和 PMC 成员没有唯一固定的标准,因为我们鼓励不同形式的贡献。通常来说,现在的 PMC 成员会考察社区贡献者的表现,在发现有符合标准的人选后,会在内部发起讨论和投票,投票通过后将邀请其成为 Committer 或 PMC 成员。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/css/doc-bundle.css.map b/zh/css/doc-bundle.css.map
deleted file mode 100644
index 771212f..0000000
--- a/zh/css/doc-bundle.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["webpack://echartsDoc/./src/components/DocNav.vue?4e19","webpack://echartsDoc/./src/components/PropertiesList.vue?f705","webpack://echartsDoc/./src/controls/ControlColor.vue?00aa","webpack://echartsDoc/./src/controls/ControlNumber.vue?7d88","webpack://echartsDoc/./src/controls/ControlVector.vue?59cc","webpack://echartsDoc/./src/controls/ControlEnum.vue?c193","webpack://echartsDoc/./src/controls/ControlPercent.vue?4384","webpack://echartsDoc/./src/controls/ControlPercentVector.vue?813d","webpack://echartsDoc/./src/components/OptionControl.vue?926d","webpack://echartsDoc/./src/components/DocContentItemCard.vue?24fe","webpack://echartsDoc/./node_modules/codemirror/lib/codemirror.css","webpack://echartsDoc/./node_modules/codemirror/theme/dracula.css","webpack://echartsDoc/./src/components/LiveExample.vue?f86d","webpack://echartsDoc/./src/components/DocContent.vue?89df","webpack://echartsDoc/./src/components/Search.vue?779e","webpack://echartsDoc/./src/components/SearchResultItemCard.vue?9ebf","webpack://echartsDoc/./src/components/SearchResult.vue?2349","webpack://echartsDoc/./src/App.vue?e30c","webpack://echartsDoc/./src/AppMobile.vue?a842","webpack://echartsDoc/./node_modules/highlight.js/styles/github-gist.css"],"names":[],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACrDA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC7GA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACPA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AChBA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACnBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACdA;AACA;AACA;;ACFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC5SA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA,iBAAiB;AACjB;AACA;AACA;AACA,iBAAiB;AACjB;;AAEA;AACA,0BAA0B;AAC1B;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,0BAA0B,cAAc;AACxC,iCAAiC,aAAa;;AAE9C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,+BAA+B;AACtC;AACA;AACA;AACA;AACA,OAAO,+BAA+B;AACtC;AACA;AACA;AACA;AACA,OAAO,+BAA+B;AACtC;AACA;;AAEA;AACA;;AAEA,SAAS,uBAAuB,0BAA0B;;AAE1D;AACA;AACA,UAAU,UAAU,YAAY;AAChC;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;;AAEA;;AAEA,0BAA0B;AAC1B,yBAAyB;AACzB,cAAc;AACd,cAAc;AACd,wBAAwB;AACxB,QAAQ;AACR,UAAU;AACV,mBAAmB;;AAEnB,2BAA2B;AAC3B,wBAAwB;AACxB,0BAA0B;AAC1B,uBAAuB;AACvB;AACA;AACA;AACA;AACA,8BAA8B;AAC9B,sDAAsD;AACtD,2BAA2B;AAC3B,0BAA0B;AAC1B,4BAA4B;AAC5B,wBAAwB;AACxB,6BAA6B;AAC7B,2BAA2B;AAC3B,2BAA2B;AAC3B,uBAAuB;AACvB,6BAA6B;AAC7B,sBAAsB;AACtB,wBAAwB;;AAExB,yBAAyB;AACzB,iBAAiB;;AAEjB,uBAAuB,0BAA0B;;AAEjD;;AAEA,gDAAgD;AAChD,mDAAmD;AACnD,yBAAyB,mCAAmC;AAC5D,mCAAmC;;AAEnC;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,8BAA8B;AAC9B;AACA;AACA,uBAAuB;AACvB;AACA;AACA,gBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA;AACA;AACA,YAAY;AACZ;AACA;AACA;AACA;AACA,WAAW;AACX;AACA;AACA,UAAU;AACV;;AAEA;AACA,qBAAqB,SAAS;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwC;AACxC,6CAA6C;;AAE7C;AACA;AACA,kBAAkB;AAClB;AACA;AACA;AACA;AACA,wBAAwB,0BAA0B;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,UAAU,UAAU,QAAQ;AAC5B;AACA;;AAEA;AACA;AACA;AACA,iBAAiB;AACjB;;AAEA;;AAEA,qBAAqB,gBAAgB;;AAErC;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,yBAAyB,kBAAkB;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA,sBAAsB,qBAAqB;AAC3C,0CAA0C,qBAAqB;AAC/D,uBAAuB,mBAAmB;AAC1C,4GAA4G,qBAAqB;AACjI,2HAA2H,qBAAqB;;AAEhJ;AACA;AACA;AACA;;AAEA;AACA,kBAAkB,qBAAqB;;AAEvC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,yBAAyB,aAAa;;AAEtC;AACA,8BAA8B,kBAAkB;;AC5VhD;;AAEA;AACA;;AAEA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;AACA,mCAAmC,gBAAgB;AACnD,kCAAkC,iCAAiC;AACnE,sCAAsC,gBAAgB;AACtD,oCAAoC,uCAAuC;AAC3E,sJAAsJ,uCAAuC;AAC7L,qKAAqK,uCAAuC;AAC5M,+BAA+B,gBAAgB;AAC/C,8DAA8D,gBAAgB;AAC9E,8BAA8B,gBAAgB;AAC9C,gCAAgC,gBAAgB;AAChD,kCAAkC,cAAc;AAChD,2BAA2B,gBAAgB;AAC3C,gCAAgC,gBAAgB;AAChD,+BAA+B,gBAAgB;AAC/C,4BAA4B,gBAAgB;AAC5C,4BAA4B,gBAAgB;AAC5C,2BAA2B,gBAAgB;AAC3C,iCAAiC,gBAAgB;AACjD,iCAAiC,gBAAgB;AACjD,gCAAgC,gBAAgB;AAChD,+BAA+B,gBAAgB;AAC/C,8DAA8D,gBAAgB;;AAE9E,iDAAiD,mCAAmC;AACpF,2CAA2C,4BAA4B,yBAAyB;;ACvChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AClIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACrOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACjBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACvHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACdA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACjFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AC9EA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA","file":"../css/doc-bundle.css","sourcesContent":[".doc-nav h3 {\n margin: 0;\n padding: 5px;\n font-family: Monaco, 'Source Code Pro', monospace;\n font-size: 14px;\n}\n.doc-nav .toolbox {\n position: absolute;\n right: 10px;\n top: 5px;\n}\n.doc-nav .toolbox .item {\n font-size: 14px;\n cursor: pointer;\n color: #337ab7;\n}\n.doc-nav .toolbox .item:hover {\n text-decoration: underline;\n}\n.doc-nav .el-tree {\n padding-left: 6px;\n}\n.doc-nav .el-tree-node {\n color: #333;\n}\n.doc-nav .el-tree-node .el-tree-node__content {\n height: 24px;\n}\n.doc-nav .el-tree-node.is-current > .el-tree-node__content {\n background-color: #B03A5B;\n color: #fff;\n}\n.doc-nav .el-tree-node.is-current > .el-tree-node__content .default-value {\n color: #eee;\n}\n.doc-nav .doc-nav-item {\n font-family: 'Source Code Pro', monospace;\n font-size: 13px;\n white-space: nowrap;\n}\n.doc-nav .doc-nav-item .default-value {\n color: #999;\n}\n.ec-doc-tutorial .doc-nav .el-tree, .ec-doc-api .doc-nav .el-tree {\n padding-left: 0;\n margin-top: 10px;\n}\n.ec-doc-tutorial .doc-nav .el-tree-node .el-tree-node__content {\n height: 32px;\n}\n.ec-doc-tutorial .doc-nav .el-tree-node .doc-nav-item {\n margin-left: -10px;\n font-family: \"Source Sans Pro\", \"Helvetica Neue\", \"Segoe UI\", Arial, \"PingFang SC\", STHeiti, \"Microsoft Yahei\", sans-serif;\n}\n",".properties-list-panel h5 {\n font-weight: normal;\n color: #999;\n font-size: 30px;\n margin: 5px 0;\n font-size: 14px;\n}\n.properties-list-panel .properties-list a {\n font-family: Monaco,'Source Code Pro', STHeiti, \"Microsoft Yahei\", \"WenQuanYi Micro Hei\", sans-serif;\n font-size: 12px;\n margin-right: 2px;\n}\n.property-popup-desc {\n max-height: 300px;\n max-width: 500px;\n overflow-y: auto;\n overflow-x: auto;\n}\n.property-popup-desc .hljs {\n background: transparent;\n padding: 0;\n}\n.property-popup-desc hr {\n border: none;\n border-bottom: 1px solid #eee;\n width: 80%;\n}\n.property-popup-desc blockquote {\n font-size: 12px;\n color: #999;\n background-color: #fdfdfd;\n border-left: 2px solid #ddd;\n margin-left: 0px;\n padding: 5px 10px;\n}\n.property-popup-desc blockquote p {\n margin: 0;\n font-size: 12px;\n}\n.property-popup-desc blockquote pre {\n font-size: 12px;\n}\n.property-popup-desc iframe {\n border: none;\n display: block;\n margin-top: 5px;\n max-width: 100%;\n}\n.property-popup-desc img {\n max-width: 100%;\n}\n.property-popup-desc p {\n line-height: 1.7em;\n margin: 12px 0 12px 0;\n font-size: 14px;\n}\n.property-popup-desc pre {\n margin: 5px 0;\n border-radius: 5px;\n background-color: #f5f7fa;\n border: none;\n padding: 10px;\n font-size: 13px;\n}\n.property-popup-desc .codespan {\n padding: 1px 5px;\n font-size: 14px;\n background-color: #f4f4f4;\n border-radius: 4px;\n}\n.property-popup-desc code *, .property-popup-desc code {\n font-family: 'Source Code Pro', 'Courier New', monospace;\n}\n.property-popup-desc ol {\n margin-left: 20px;\n}\n.property-popup-desc ul li {\n list-style: disc;\n margin: 10px 20px;\n font-size: 14px;\n}\n.property-popup-desc ol li {\n margin: 1em 0;\n list-style: decimal;\n font-size: 14px;\n}\n.property-popup-desc a {\n font-family: 'Source Code Pro', STHeiti, \"Microsoft Yahei\", \"WenQuanYi Micro Hei\", sans-serif;\n}\n.property-popup-desc pre {\n font-size: 12px;\n}\n.property-popup-desc p {\n font-size: 12px;\n}\n.property-popup-desc ul {\n margin: 0;\n padding: 0;\n}\n.property-popup-desc ul li {\n font-size: 12px;\n margin: 5px 20px;\n list-style: disc;\n}\n.property-popup-desc pre {\n padding: 5px;\n}\n.property-popup-desc .codespan {\n font-size: 12px;\n}\n",".control-color > * {\n display: inline-block;\n vertical-align: middle;\n}\n.control-color span {\n font-size: 12px;\n font-weight: bold;\n}\n",".control-number .el-input-number {\n width: 120px;\n}\n",".control-vector > div {\n display: inline-block;\n margin-left: 8px;\n font-size: 12px;\n font-weight: bold;\n}\n.control-vector .control-vector-group > div {\n display: inline-block;\n margin-left: 5px;\n}\n.control-vector .el-input-number {\n width: 90px;\n}\n.control-vector label {\n text-transform: uppercase;\n margin-right: 5px;\n}\n",".control-enum-special {\n font-style: italic;\n}\n",".control-percent > div {\n display: inline-block;\n}\n.control-percent .el-slider {\n width: 200px;\n display: inline-block;\n vertical-align: middle;\n}\n.control-percent .el-input-number {\n display: inline-block;\n width: 90px;\n margin-left: 10px;\n}\n.control-percent .el-radio-group {\n margin-right: 10px;\n}\n.control-percent .el-radio-button--mini .el-radio-button__inner {\n padding: 5px 4px;\n font-size: 10px;\n}\n",".control-percent-vector > div {\n margin-top: 3px;\n font-size: 12px;\n font-weight: bold;\n}\n.control-percent-vector > div > label {\n text-transform: uppercase;\n margin-right: 5px;\n}\n.control-percent-vector .control-percent, .control-percent-vector label {\n display: inline-block;\n}\n.control-percent-vector .control-percent .el-slider {\n width: 100px;\n}\n",".option-control {\n margin-top: 10px;\n}\n",".doc-content-item-card {\n margin-top: 30px;\n margin-left: 15px;\n border-top: 1px solid #ccc;\n position: relative;\n padding: 15px 0;\n}\n.doc-content-item-card .hierarchy-line {\n position: absolute;\n top: 35px;\n bottom: 0px;\n left: -14px;\n width: 10px;\n border-left: 1px solid #E0E6F1;\n border-bottom: 1px solid #E0E6F1;\n}\n.doc-content-item-card h4 {\n margin: 0;\n padding: 0;\n font-family: 'Source Code Pro', monospace;\n}\n.doc-content-item-card h4 > * {\n vertical-align: bottom;\n display: inline-block;\n}\n.doc-content-item-card h4 .expand-toggle {\n font-size: 18px;\n margin-left: -23px;\n color: #9aadd1;\n cursor: pointer;\n position: relative;\n background-color: #fff;\n}\n.doc-content-item-card h4 .anchor {\n color: #C592A0;\n font-size: 16px;\n text-decoration: none;\n}\n.doc-content-item-card h4 .anchor:hover {\n text-decoration: underline;\n}\n.doc-content-item-card h4 .path-parent {\n font-size: 12px;\n padding: 0;\n font-weight: normal;\n}\n.doc-content-item-card h4 .path-parent .separator {\n margin: 0 3px;\n color: #B03A5B;\n}\n.doc-content-item-card h4 .path-parent a {\n color: #C592A0;\n margin: 0;\n}\n.doc-content-item-card h4 .path-base {\n font-size: 14px;\n padding: 0;\n margin-left: -4px;\n font-weight: normal;\n}\n.doc-content-item-card h4 .path-base a {\n color: #B03A5B;\n margin: 0;\n}\n.doc-content-item-card h4 .path-parent a, .doc-content-item-card h4 .path-base a {\n text-decoration: none;\n}\n.doc-content-item-card h4 .path-parent a:hover, .doc-content-item-card h4 .path-base a:hover {\n text-decoration: underline;\n}\n.doc-content-item-card h4 .current-flag {\n color: #434343;\n font-size: 20px;\n}\n.doc-content-item-card h4 .default-value {\n color: #434343;\n font-size: 16px;\n margin-left: 15px;\n vertical-align: bottom;\n font-weight: normal;\n}\n.doc-content-item-card h4 .control-toggle {\n float: right;\n font-size: 14px;\n cursor: pointer;\n color: #555;\n}\n.doc-content-item-card h4 .control-toggle i {\n font-family: iconfont;\n font-style: normal;\n vertical-align: middle;\n}\n.doc-content-item-card h4 .control-toggle:hover {\n color: #999;\n}\n.doc-content-item-card h4 .control-toggle.active {\n color: #409eff;\n}\n.doc-content-item-card.level-1 > h4 .anchor {\n font-size: 20px;\n}\n.doc-content-item-card.level-1 > h4 .path-parent {\n font-size: 16px;\n}\n.doc-content-item-card.level-1 > h4 .path-base {\n font-size: 20px;\n}\n.doc-content-item-card.level-2 > h4 .anchor {\n font-size: 16px;\n}\n.doc-content-item-card.level-2 > h4 .path-parent {\n font-size: 14px;\n}\n.doc-content-item-card.level-2 > h4 .path-base {\n font-size: 16px;\n}\n.doc-content-item-card.level-2 > h4 .current-flag {\n font-size: 16px;\n}\n.doc-content-item-card.level-3 > h4 .anchor {\n font-size: 16px;\n}\n.doc-content-item-card.level-3 > h4 .path-parent {\n font-size: 13px;\n}\n.doc-content-item-card.level-3 > h4 .path-base {\n font-size: 16px;\n}\n.doc-content-item-card.level-3 > h4 .current-flag {\n font-size: 16px;\n}\n.doc-content-item-card.level-2 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-2 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-3 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-3 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-4 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-4 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-5 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-5 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-6 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-6 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-7 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-7 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-8 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-8 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-9 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-9 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-10 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-10 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card.level-11 {\n border-top: 1px solid #eee;\n margin-top: 10px;\n}\n.doc-content-item-card.level-11 .guider {\n vertical-align: middle;\n width: 28px;\n margin-left: -39px;\n margin-right: 2px;\n border-top: 1px solid #E0E6F1;\n position: relative;\n}\n.doc-content-item-card .prop-types {\n margin-top: 5px;\n display: inline-block;\n}\n.doc-content-item-card .option-control {\n float: right;\n}\n.doc-content-item-card .prop-type {\n display: inline-block;\n margin-right: 4px;\n border-radius: 4px;\n padding: 3px 5px;\n color: #333;\n background-color: #f9f2f4;\n font-size: 12px;\n}\n.doc-content-item-card .prop-type-string {\n background-color: #f9f2f4;\n}\n.doc-content-item-card .prop-type-number {\n background-color: #f9f2f4;\n}\n.doc-content-item-card .prop-type-boolean {\n background-color: #f9f2f4;\n}\n.doc-content-item-card .properties-list-panel {\n max-width: 700px;\n}\n.doc-content-item-card .children {\n padding: 10px;\n}\n.ec-doc-mobile .doc-content-item-card {\n margin-left: 0;\n margin-top: 10px;\n padding: 10px 10px;\n background: #fff;\n border-top: none;\n}\n.ec-doc-mobile .doc-content-item-card.level-1 > h4 .anchor {\n font-size: 18px;\n}\n.ec-doc-mobile .doc-content-item-card.level-1 > h4 .path-parent {\n font-size: 13px;\n}\n.ec-doc-mobile .doc-content-item-card.level-1 > h4 .path-base {\n font-size: 18px;\n}\n.ec-doc-mobile .doc-content-item-card.level-1 > h4 .default-value {\n font-size: 14px;\n}\n","/* BASICS */\n\n.CodeMirror {\n /* Set height, width, borders, and global font properties here */\n font-family: monospace;\n height: 300px;\n color: black;\n direction: ltr;\n}\n\n/* PADDING */\n\n.CodeMirror-lines {\n padding: 4px 0; /* Vertical padding around content */\n}\n.CodeMirror pre.CodeMirror-line,\n.CodeMirror pre.CodeMirror-line-like {\n padding: 0 4px; /* Horizontal padding of content */\n}\n\n.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {\n background-color: white; /* The little square between H and V scrollbars */\n}\n\n/* GUTTER */\n\n.CodeMirror-gutters {\n border-right: 1px solid #ddd;\n background-color: #f7f7f7;\n white-space: nowrap;\n}\n.CodeMirror-linenumbers {}\n.CodeMirror-linenumber {\n padding: 0 3px 0 5px;\n min-width: 20px;\n text-align: right;\n color: #999;\n white-space: nowrap;\n}\n\n.CodeMirror-guttermarker { color: black; }\n.CodeMirror-guttermarker-subtle { color: #999; }\n\n/* CURSOR */\n\n.CodeMirror-cursor {\n border-left: 1px solid black;\n border-right: none;\n width: 0;\n}\n/* Shown when moving in bi-directional text */\n.CodeMirror div.CodeMirror-secondarycursor {\n border-left: 1px solid silver;\n}\n.cm-fat-cursor .CodeMirror-cursor {\n width: auto;\n border: 0 !important;\n background: #7e7;\n}\n.cm-fat-cursor div.CodeMirror-cursors {\n z-index: 1;\n}\n.cm-fat-cursor-mark {\n background-color: rgba(20, 255, 20, 0.5);\n -webkit-animation: blink 1.06s steps(1) infinite;\n -moz-animation: blink 1.06s steps(1) infinite;\n animation: blink 1.06s steps(1) infinite;\n}\n.cm-animate-fat-cursor {\n width: auto;\n border: 0;\n -webkit-animation: blink 1.06s steps(1) infinite;\n -moz-animation: blink 1.06s steps(1) infinite;\n animation: blink 1.06s steps(1) infinite;\n background-color: #7e7;\n}\n@-moz-keyframes blink {\n 0% {}\n 50% { background-color: transparent; }\n 100% {}\n}\n@-webkit-keyframes blink {\n 0% {}\n 50% { background-color: transparent; }\n 100% {}\n}\n@keyframes blink {\n 0% {}\n 50% { background-color: transparent; }\n 100% {}\n}\n\n/* Can style cursor different in overwrite (non-insert) mode */\n.CodeMirror-overwrite .CodeMirror-cursor {}\n\n.cm-tab { display: inline-block; text-decoration: inherit; }\n\n.CodeMirror-rulers {\n position: absolute;\n left: 0; right: 0; top: -50px; bottom: 0;\n overflow: hidden;\n}\n.CodeMirror-ruler {\n border-left: 1px solid #ccc;\n top: 0; bottom: 0;\n position: absolute;\n}\n\n/* DEFAULT THEME */\n\n.cm-s-default .cm-header {color: blue;}\n.cm-s-default .cm-quote {color: #090;}\n.cm-negative {color: #d44;}\n.cm-positive {color: #292;}\n.cm-header, .cm-strong {font-weight: bold;}\n.cm-em {font-style: italic;}\n.cm-link {text-decoration: underline;}\n.cm-strikethrough {text-decoration: line-through;}\n\n.cm-s-default .cm-keyword {color: #708;}\n.cm-s-default .cm-atom {color: #219;}\n.cm-s-default .cm-number {color: #164;}\n.cm-s-default .cm-def {color: #00f;}\n.cm-s-default .cm-variable,\n.cm-s-default .cm-punctuation,\n.cm-s-default .cm-property,\n.cm-s-default .cm-operator {}\n.cm-s-default .cm-variable-2 {color: #05a;}\n.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}\n.cm-s-default .cm-comment {color: #a50;}\n.cm-s-default .cm-string {color: #a11;}\n.cm-s-default .cm-string-2 {color: #f50;}\n.cm-s-default .cm-meta {color: #555;}\n.cm-s-default .cm-qualifier {color: #555;}\n.cm-s-default .cm-builtin {color: #30a;}\n.cm-s-default .cm-bracket {color: #997;}\n.cm-s-default .cm-tag {color: #170;}\n.cm-s-default .cm-attribute {color: #00c;}\n.cm-s-default .cm-hr {color: #999;}\n.cm-s-default .cm-link {color: #00c;}\n\n.cm-s-default .cm-error {color: #f00;}\n.cm-invalidchar {color: #f00;}\n\n.CodeMirror-composing { border-bottom: 2px solid; }\n\n/* Default styles for common addons */\n\ndiv.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}\ndiv.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}\n.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }\n.CodeMirror-activeline-background {background: #e8f2ff;}\n\n/* STOP */\n\n/* The rest of this file contains styles related to the mechanics of\n the editor. You probably shouldn't touch them. */\n\n.CodeMirror {\n position: relative;\n overflow: hidden;\n background: white;\n}\n\n.CodeMirror-scroll {\n overflow: scroll !important; /* Things will break if this is overridden */\n /* 50px is the magic margin used to hide the element's real scrollbars */\n /* See overflow: hidden in .CodeMirror */\n margin-bottom: -50px; margin-right: -50px;\n padding-bottom: 50px;\n height: 100%;\n outline: none; /* Prevent dragging from highlighting the element */\n position: relative;\n}\n.CodeMirror-sizer {\n position: relative;\n border-right: 50px solid transparent;\n}\n\n/* The fake, visible scrollbars. Used to force redraw during scrolling\n before actual scrolling happens, thus preventing shaking and\n flickering artifacts. */\n.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {\n position: absolute;\n z-index: 6;\n display: none;\n}\n.CodeMirror-vscrollbar {\n right: 0; top: 0;\n overflow-x: hidden;\n overflow-y: scroll;\n}\n.CodeMirror-hscrollbar {\n bottom: 0; left: 0;\n overflow-y: hidden;\n overflow-x: scroll;\n}\n.CodeMirror-scrollbar-filler {\n right: 0; bottom: 0;\n}\n.CodeMirror-gutter-filler {\n left: 0; bottom: 0;\n}\n\n.CodeMirror-gutters {\n position: absolute; left: 0; top: 0;\n min-height: 100%;\n z-index: 3;\n}\n.CodeMirror-gutter {\n white-space: normal;\n height: 100%;\n display: inline-block;\n vertical-align: top;\n margin-bottom: -50px;\n}\n.CodeMirror-gutter-wrapper {\n position: absolute;\n z-index: 4;\n background: none !important;\n border: none !important;\n}\n.CodeMirror-gutter-background {\n position: absolute;\n top: 0; bottom: 0;\n z-index: 4;\n}\n.CodeMirror-gutter-elt {\n position: absolute;\n cursor: default;\n z-index: 4;\n}\n.CodeMirror-gutter-wrapper ::selection { background-color: transparent }\n.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }\n\n.CodeMirror-lines {\n cursor: text;\n min-height: 1px; /* prevents collapsing before first draw */\n}\n.CodeMirror pre.CodeMirror-line,\n.CodeMirror pre.CodeMirror-line-like {\n /* Reset some styles that the rest of the page might have set */\n -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;\n border-width: 0;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n margin: 0;\n white-space: pre;\n word-wrap: normal;\n line-height: inherit;\n color: inherit;\n z-index: 2;\n position: relative;\n overflow: visible;\n -webkit-tap-highlight-color: transparent;\n -webkit-font-variant-ligatures: contextual;\n font-variant-ligatures: contextual;\n}\n.CodeMirror-wrap pre.CodeMirror-line,\n.CodeMirror-wrap pre.CodeMirror-line-like {\n word-wrap: break-word;\n white-space: pre-wrap;\n word-break: normal;\n}\n\n.CodeMirror-linebackground {\n position: absolute;\n left: 0; right: 0; top: 0; bottom: 0;\n z-index: 0;\n}\n\n.CodeMirror-linewidget {\n position: relative;\n z-index: 2;\n padding: 0.1px; /* Force widget margins to stay inside of the container */\n}\n\n.CodeMirror-widget {}\n\n.CodeMirror-rtl pre { direction: rtl; }\n\n.CodeMirror-code {\n outline: none;\n}\n\n/* Force content-box sizing for the elements where we expect it */\n.CodeMirror-scroll,\n.CodeMirror-sizer,\n.CodeMirror-gutter,\n.CodeMirror-gutters,\n.CodeMirror-linenumber {\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n}\n\n.CodeMirror-measure {\n position: absolute;\n width: 100%;\n height: 0;\n overflow: hidden;\n visibility: hidden;\n}\n\n.CodeMirror-cursor {\n position: absolute;\n pointer-events: none;\n}\n.CodeMirror-measure pre { position: static; }\n\ndiv.CodeMirror-cursors {\n visibility: hidden;\n position: relative;\n z-index: 3;\n}\ndiv.CodeMirror-dragcursors {\n visibility: visible;\n}\n\n.CodeMirror-focused div.CodeMirror-cursors {\n visibility: visible;\n}\n\n.CodeMirror-selected { background: #d9d9d9; }\n.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }\n.CodeMirror-crosshair { cursor: crosshair; }\n.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }\n.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }\n\n.cm-searching {\n background-color: #ffa;\n background-color: rgba(255, 255, 0, .4);\n}\n\n/* Used to force a border model for a node */\n.cm-force-border { padding-right: .1px; }\n\n@media print {\n /* Hide the cursor when printing */\n .CodeMirror div.CodeMirror-cursors {\n visibility: hidden;\n }\n}\n\n/* See issue #2901 */\n.cm-tab-wrap-hack:after { content: ''; }\n\n/* Help users use markselection to safely style text background */\nspan.CodeMirror-selectedtext { background: none; }\n","/*\n\n Name: dracula\n Author: Michael Kaminsky (http://github.com/mkaminsky11)\n\n Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)\n\n*/\n\n\n.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {\n background-color: #282a36 !important;\n color: #f8f8f2 !important;\n border: none;\n}\n.cm-s-dracula .CodeMirror-gutters { color: #282a36; }\n.cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; }\n.cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; }\n.cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }\n.cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }\n.cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }\n.cm-s-dracula span.cm-comment { color: #6272a4; }\n.cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 { color: #f1fa8c; }\n.cm-s-dracula span.cm-number { color: #bd93f9; }\n.cm-s-dracula span.cm-variable { color: #50fa7b; }\n.cm-s-dracula span.cm-variable-2 { color: white; }\n.cm-s-dracula span.cm-def { color: #50fa7b; }\n.cm-s-dracula span.cm-operator { color: #ff79c6; }\n.cm-s-dracula span.cm-keyword { color: #ff79c6; }\n.cm-s-dracula span.cm-atom { color: #bd93f9; }\n.cm-s-dracula span.cm-meta { color: #f8f8f2; }\n.cm-s-dracula span.cm-tag { color: #ff79c6; }\n.cm-s-dracula span.cm-attribute { color: #50fa7b; }\n.cm-s-dracula span.cm-qualifier { color: #50fa7b; }\n.cm-s-dracula span.cm-property { color: #66d9ef; }\n.cm-s-dracula span.cm-builtin { color: #50fa7b; }\n.cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type { color: #ffb86c; }\n\n.cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }\n.cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }\n","#example-panel {\n position: fixed;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n padding: 10px 0px;\n text-align: left;\n background: #fff;\n}\n#example-panel h2 {\n font-weight: normal;\n font-size: 20px;\n color: #333;\n padding-left: 20px;\n font-weight: bold;\n margin: 5px 0;\n}\n#example-panel p.intro {\n color: #aaa;\n padding-left: 20px;\n margin: 5px 0;\n font-size: 12px;\n}\n#example-panel .preview-and-code {\n position: absolute;\n top: 75px;\n bottom: 0;\n left: 0;\n right: 0;\n}\n#example-panel .el-alert {\n position: absolute;\n top: 0;\n}\n#example-panel .preview-main {\n position: relative;\n padding: 0 10px;\n background: #fefefe;\n box-sizing: border-box;\n}\n#example-panel .example-code {\n position: relative;\n}\n#example-panel .example-code .codemirror-main {\n position: absolute;\n left: 10px;\n top: 10px;\n right: 10px;\n bottom: 15px;\n box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.1);\n}\n#example-panel .example-code .codemirror-main .CodeMirror {\n height: 100%;\n overflow-y: scroll;\n border-radius: 6px;\n font-family: 'Source Code Pro', monospace;\n font-size: 13px;\n}\n#example-panel .example-code .codemirror-main .CodeMirror .CodeMirror-scroll {\n padding: 15px;\n}\n#example-panel .example-code .codemirror-main .CodeMirror ::-webkit-scrollbar-thumb {\n width: 8px;\n min-height: 15px;\n background: rgba(255, 255, 255, 0.3) !important;\n -webkit-transition: all 0.3s ease-in-out;\n transition: all 0.3s ease-in-out;\n border-radius: 2px;\n}\n#example-panel .example-code .codemirror-main .CodeMirror .option-changed {\n background: rgba(255, 255, 255, 0.1);\n}\n#example-panel .example-code .codemirror-main .CodeMirror .CodeMirror-cursor {\n display: none;\n}\n#example-panel .toolbar {\n position: absolute;\n top: 15px;\n right: 10px;\n}\n#example-panel .toolbar .example-list {\n width: 180px;\n}\n#example-panel.right-layout {\n bottom: 0;\n top: 40px;\n right: 10px;\n}\n#example-panel.right-layout .preview-main {\n width: 100%;\n height: 50%;\n}\n#example-panel.right-layout .example-code {\n width: 100%;\n height: 50%;\n}\n#example-panel.bottom-layout {\n left: 300px;\n bottom: 0;\n right: 10px;\n}\n#example-panel.bottom-layout .preview-main {\n width: 50%;\n height: 100%;\n float: left;\n}\n#example-panel.bottom-layout .example-code {\n width: 50%;\n height: 100%;\n float: left;\n}\n#example-panel.top-layout {\n left: 300px;\n top: 50px;\n right: 10px;\n}\n#example-panel.top-layout .preview-main {\n width: 50%;\n height: 100%;\n float: left;\n}\n#example-panel.top-layout .example-code {\n width: 50%;\n height: 100%;\n float: left;\n}\n.example-change-layout .layout-title > i {\n font-size: 14px;\n margin-right: 5px;\n}\n.example-change-layout .layout-mode {\n margin-top: 10px;\n}\n",".doc-main {\n margin-left: 10px;\n}\n.doc-main .open-option-example {\n position: fixed;\n right: 0;\n top: 50%;\n padding: 10px;\n border-radius: 20px 0 0 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n background: #fff;\n cursor: pointer;\n font-size: 12px;\n}\n.doc-main .open-option-example:hover {\n background: #eee;\n}\n.doc-main .open-option-example i {\n font-size: 16px;\n vertical-align: middle;\n}\n.doc-content {\n text-align: left;\n color: #4d555e;\n}\n.doc-content.option-example-actived.option-example-right-layout {\n margin-right: 45%;\n}\n.doc-content h2 {\n color: #B03A5B;\n font-size: 34px;\n border-bottom: 1px solid #ccc;\n height: 45px;\n line-height: 45px;\n margin: 0;\n margin-left: 15px;\n font-weight: normal;\n box-sizing: content-box;\n}\n.doc-content h3 {\n font-weight: normal;\n color: #969696;\n font-size: 28px;\n margin: 20px 0px 20px 15px;\n}\n.doc-content .page-description {\n padding: 5px 0;\n margin-left: 15px;\n}\n.doc-content .page-description .hljs {\n background: transparent;\n padding: 0;\n}\n.doc-content .page-description hr {\n border: none;\n border-bottom: 1px solid #eee;\n width: 80%;\n}\n.doc-content .page-description blockquote {\n font-size: 12px;\n color: #999;\n background-color: #fdfdfd;\n border-left: 2px solid #ddd;\n margin-left: 0px;\n padding: 5px 10px;\n}\n.doc-content .page-description blockquote p {\n margin: 0;\n font-size: 12px;\n}\n.doc-content .page-description blockquote pre {\n font-size: 12px;\n}\n.doc-content .page-description iframe {\n border: none;\n display: block;\n margin-top: 5px;\n max-width: 100%;\n}\n.doc-content .page-description img {\n max-width: 100%;\n}\n.doc-content .page-description p {\n line-height: 1.7em;\n margin: 12px 0 12px 0;\n font-size: 14px;\n}\n.doc-content .page-description pre {\n margin: 5px 0;\n border-radius: 5px;\n background-color: #f5f7fa;\n border: none;\n padding: 10px;\n font-size: 13px;\n}\n.doc-content .page-description .codespan {\n padding: 1px 5px;\n font-size: 14px;\n background-color: #f4f4f4;\n border-radius: 4px;\n}\n.doc-content .page-description code *, .doc-content .page-description code {\n font-family: 'Source Code Pro', 'Courier New', monospace;\n}\n.doc-content .page-description ol {\n margin-left: 20px;\n}\n.doc-content .page-description ul li {\n list-style: disc;\n margin: 10px 20px;\n font-size: 14px;\n}\n.doc-content .page-description ol li {\n margin: 1em 0;\n list-style: decimal;\n font-size: 14px;\n}\n.doc-content .page-description a {\n font-family: 'Source Code Pro', STHeiti, \"Microsoft Yahei\", \"WenQuanYi Micro Hei\", sans-serif;\n}\n.doc-content .item-description {\n margin: 0;\n padding: 5px 0;\n}\n.doc-content .item-description .hljs {\n background: transparent;\n padding: 0;\n}\n.doc-content .item-description hr {\n border: none;\n border-bottom: 1px solid #eee;\n width: 80%;\n}\n.doc-content .item-description blockquote {\n font-size: 12px;\n color: #999;\n background-color: #fdfdfd;\n border-left: 2px solid #ddd;\n margin-left: 0px;\n padding: 5px 10px;\n}\n.doc-content .item-description blockquote p {\n margin: 0;\n font-size: 12px;\n}\n.doc-content .item-description blockquote pre {\n font-size: 12px;\n}\n.doc-content .item-description iframe {\n border: none;\n display: block;\n margin-top: 5px;\n max-width: 100%;\n}\n.doc-content .item-description img {\n max-width: 100%;\n}\n.doc-content .item-description p {\n line-height: 1.7em;\n margin: 12px 0 12px 0;\n font-size: 14px;\n}\n.doc-content .item-description pre {\n margin: 5px 0;\n border-radius: 5px;\n background-color: #f5f7fa;\n border: none;\n padding: 10px;\n font-size: 13px;\n}\n.doc-content .item-description .codespan {\n padding: 1px 5px;\n font-size: 14px;\n background-color: #f4f4f4;\n border-radius: 4px;\n}\n.doc-content .item-description code *, .doc-content .item-description code {\n font-family: 'Source Code Pro', 'Courier New', monospace;\n}\n.doc-content .item-description ol {\n margin-left: 20px;\n}\n.doc-content .item-description ul li {\n list-style: disc;\n margin: 10px 20px;\n font-size: 14px;\n}\n.doc-content .item-description ol li {\n margin: 1em 0;\n list-style: decimal;\n font-size: 14px;\n}\n.doc-content .item-description a {\n font-family: 'Source Code Pro', STHeiti, \"Microsoft Yahei\", \"WenQuanYi Micro Hei\", sans-serif;\n}\n.doc-content table {\n border: 1px solid #ddd;\n border-collapse: collapse;\n}\n.doc-content th, .doc-content td {\n padding: 10px;\n border: 1px solid #eee;\n}\n.ec-doc-tutorial .page-description h2 {\n font-weight: normal;\n font-size: 22px;\n margin-left: 0;\n margin-top: 40px;\n}\n.ec-doc-mobile .doc-main {\n margin-left: 0;\n}\n.ec-doc-mobile .doc-content {\n background: #f2f2f2;\n margin-bottom: 100px;\n}\n.ec-doc-mobile .page-description {\n padding: 5px 10px;\n background: #fff;\n}\n.ec-doc-mobile h2 {\n font-size: 22px;\n font-weight: normal;\n padding: 20px 10px;\n border-bottom: none;\n}\n.ec-doc-mobile h3 {\n font-size: 20px;\n padding-left: 10px;\n}\n",".doc-search {\n padding: 5px;\n}\n.doc-search .search-input {\n width: 100%;\n}\n.el-autocomplete-suggestion.search-input-popper {\n width: auto !important;\n min-width: 300px;\n}\n.el-autocomplete-suggestion.search-input-popper li {\n line-height: 28px;\n padding: 0 10px;\n}\n.doc-path-suggestion-item {\n font-family: Monaco,Consolas,Courier new,monospace;\n font-size: 12px;\n}\n",".doc-search-result-item-card {\n margin: 30px 10px;\n border-top: 1px solid #ccc;\n}\n.doc-search-result-item-card h4 {\n margin: 10px 0;\n}\n.doc-search-result-item-card h4 > * {\n vertical-align: middle;\n display: inline-block;\n}\n.doc-search-result-item-card h4 a.path {\n font-family: Montserrat, sans-serif;\n font-size: 18px;\n padding-left: 5px;\n padding: 0;\n font-weight: normal;\n color: #B03A5B;\n}\n.doc-search-result-item-card .item-description mark, .doc-search-result-item-card h4 mark {\n background-color: #fc0;\n border-radius: 3px;\n padding: 2px;\n}\n.doc-search-result-item-card .other-result {\n font-size: 12px;\n padding: 0 0 10px 0;\n}\n.doc-search-result-item-card .other-result > div {\n font-family: Montserrat, sans-serif;\n}\n.doc-search-result-item-card.needs-show-more .item-description {\n max-height: 200px;\n overflow-y: hidden;\n}\n.doc-search-result-item-card.needs-show-more .show-more-button {\n display: block;\n}\n.doc-search-result-item-card .show-more-button {\n display: none;\n text-align: center;\n cursor: pointer;\n}\n.doc-search-result-item-card .hljs {\n background: transparent;\n padding: 0;\n}\n.doc-search-result-item-card hr {\n border: none;\n border-bottom: 1px solid #eee;\n width: 80%;\n}\n.doc-search-result-item-card blockquote {\n font-size: 12px;\n color: #999;\n background-color: #fdfdfd;\n border-left: 2px solid #ddd;\n margin-left: 0px;\n padding: 5px 10px;\n}\n.doc-search-result-item-card blockquote p {\n margin: 0;\n font-size: 12px;\n}\n.doc-search-result-item-card blockquote pre {\n font-size: 12px;\n}\n.doc-search-result-item-card iframe {\n border: none;\n display: block;\n margin-top: 5px;\n max-width: 100%;\n}\n.doc-search-result-item-card img {\n max-width: 100%;\n}\n.doc-search-result-item-card p {\n line-height: 1.7em;\n margin: 12px 0 12px 0;\n font-size: 14px;\n}\n.doc-search-result-item-card pre {\n margin: 5px 0;\n border-radius: 5px;\n background-color: #f5f7fa;\n border: none;\n padding: 10px;\n font-size: 13px;\n}\n.doc-search-result-item-card .codespan {\n padding: 1px 5px;\n font-size: 14px;\n background-color: #f4f4f4;\n border-radius: 4px;\n}\n.doc-search-result-item-card code *, .doc-search-result-item-card code {\n font-family: 'Source Code Pro', 'Courier New', monospace;\n}\n.doc-search-result-item-card ol {\n margin-left: 20px;\n}\n.doc-search-result-item-card ul li {\n list-style: disc;\n margin: 10px 20px;\n font-size: 14px;\n}\n.doc-search-result-item-card ol li {\n margin: 1em 0;\n list-style: decimal;\n font-size: 14px;\n}\n.doc-search-result-item-card a {\n font-family: 'Source Code Pro', STHeiti, \"Microsoft Yahei\", \"WenQuanYi Micro Hei\", sans-serif;\n}\n.doc-search-result-item-card iframe, .doc-search-result-item-card pre, .doc-search-result-item-card image {\n display: none;\n}\n.ec-doc-mobile .doc-search-result-item-card {\n margin: 30px 0;\n}\n",".doc-search-result h3 {\n font-weight: normal;\n font-size: 24px;\n margin: 20px 20px 20px 0;\n}\n.doc-search-result .result-summary {\n padding: 10px 0;\n color: #999;\n}\n.doc-search-result .result-summary .searching {\n color: #B03A5B;\n}\n.ec-doc-mobile .doc-search-result {\n padding: 0 10px;\n}\n","@font-face {\n font-family: 'iconfont';\n src: url(../css/icon.eot);\n src: url(../css/icon.eot#iefix) format(\"embedded-opentype\"), url(../css/icon.ttf) format(\"truetype\"), url(../css/icon.woff) format(\"woff\"), url(../css/icon.svg) format(\"svg\");\n font-weight: normal;\n font-style: normal;\n font-display: block;\n}\n@font-face {\n font-family: 'Source Code Pro';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(../css/SourceCodePro-Regular.woff) format(\"woff\");\n}\n.ec-doc {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans GB\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n height: 100%;\n}\n.ec-doc ul, .ec-doc ol {\n margin: 0;\n padding: 0;\n}\n.ec-doc a {\n color: #337ab7;\n text-decoration: none;\n margin: 0 3px;\n}\n.ec-doc a:hover {\n text-decoration: underline;\n}\n.ec-doc > .el-aside {\n border-right: 1px solid #ddd;\n position: relative;\n}\n.ec-doc > .el-aside .doc-type-nav {\n border-bottom: 1px solid #eee;\n margin-bottom: 10px;\n margin-left: 5px;\n}\n.ec-doc > .el-aside .doc-type-nav a {\n display: inline-block;\n line-height: 35px;\n width: 20%;\n text-align: center;\n box-sizing: border-box;\n text-decoration: none;\n color: #000;\n cursor: pointer;\n font-size: 14px;\n}\n.ec-doc > .el-aside .doc-type-nav a.selected {\n border-top: 3px solid #B03A5B;\n}\n.ec-doc > .el-aside .doc-type-nav a.handbook-link {\n color: #337ab7;\n}\n.ec-doc > .el-aside .doc-type-nav a.handbook-link:hover {\n text-decoration: underline;\n}\n.ec-doc > .el-aside .doc-nav {\n position: absolute;\n top: 90px;\n bottom: 0;\n left: 0;\n right: 0;\n overflow-y: scroll;\n}\n.ec-doc > .el-main {\n text-align: center;\n}\n.ec-doc > .el-main > div {\n margin: 0 auto;\n text-align: left;\n min-width: 100%;\n}\n.ec-doc.ec-doc-locale-zh .doc-type-nav a {\n width: 20%;\n}\n.el-select-dropdown.el-popper {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans GB\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}\n",".ec-doc-mobile {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"PingFang SC\", \"Microsoft YaHei\", \"Hiragino Sans GB\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n position: relative;\n}\n.ec-doc-mobile ul, .ec-doc-mobile ol {\n margin: 0;\n padding: 0;\n}\n.ec-doc-mobile a {\n color: #337ab7;\n text-decoration: none;\n margin: 0 3px;\n}\n.ec-doc-mobile a:hover {\n text-decoration: underline;\n}\n.ec-doc-mobile .top-bar {\n position: sticky;\n top: 0;\n height: 90px;\n left: 0;\n right: 0;\n background: #fff;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n border-bottom: 1px solid #ddd;\n z-index: 10;\n}\n.ec-doc-mobile .doc-type-nav {\n border-bottom: 1px solid #eee;\n margin-bottom: 10px;\n margin-left: 5px;\n}\n.ec-doc-mobile .doc-type-nav a {\n display: inline-block;\n line-height: 30px;\n width: 22%;\n text-align: center;\n box-sizing: border-box;\n text-decoration: none;\n color: #000;\n cursor: pointer;\n font-size: 14px;\n}\n.ec-doc-mobile .doc-type-nav a.selected {\n border-top: 3px solid #B03A5B;\n}\n.ec-doc-mobile .doc-mobile-toolbar {\n display: flex;\n flex-direction: row;\n}\n.ec-doc-mobile .doc-mobile-toolbar .open-nav {\n margin: 6px 5px;\n}\n.ec-doc-mobile .doc-mobile-toolbar .doc-search {\n flex: 1;\n}\n.ec-doc-mobile .doc-breadcrumb {\n position: fixed;\n text-align: center;\n left: 50%;\n transform: translate(-50%, 0);\n bottom: 20px;\n border-radius: 4px;\n padding: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n background: #337ab7;\n}\n.ec-doc-mobile .doc-breadcrumb a {\n display: inline-block;\n color: #fff;\n}\n.el-drawer .doc-nav {\n position: absolute;\n top: 10px;\n bottom: 0;\n left: 0;\n right: 0;\n overflow-y: scroll;\n}\n","/**\n * GitHub Gist Theme\n * Author : Anthony Attard - https://github.com/AnthonyAttard\n * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro\n */\n\n.hljs {\n display: block;\n background: white;\n padding: 0.5em;\n color: #333333;\n overflow-x: auto;\n}\n\n.hljs-comment,\n.hljs-meta {\n color: #969896;\n}\n\n.hljs-variable,\n.hljs-template-variable,\n.hljs-strong,\n.hljs-emphasis,\n.hljs-quote {\n color: #df5000;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-type {\n color: #d73a49;\n}\n\n.hljs-literal,\n.hljs-symbol,\n.hljs-bullet,\n.hljs-attribute {\n color: #0086b3;\n}\n\n.hljs-section,\n.hljs-name {\n color: #63a35c;\n}\n\n.hljs-tag {\n color: #333333;\n}\n\n.hljs-title,\n.hljs-attr,\n.hljs-selector-id,\n.hljs-selector-class,\n.hljs-selector-attr,\n.hljs-selector-pseudo {\n color: #6f42c1;\n}\n\n.hljs-addition {\n color: #55a532;\n background-color: #eaffea;\n}\n\n.hljs-deletion {\n color: #bd2c00;\n background-color: #ffecec;\n}\n\n.hljs-link {\n text-decoration: underline;\n}\n\n.hljs-number {\n color: #005cc5;\n}\n\n.hljs-string {\n color: #032f62;\n}\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/zh/css/element-icons.ttf b/zh/css/element-icons.ttf
deleted file mode 100644
index 91b74de..0000000
--- a/zh/css/element-icons.ttf
+++ /dev/null
Binary files differ
diff --git a/zh/css/element-icons.woff b/zh/css/element-icons.woff
deleted file mode 100644
index 02b9a25..0000000
--- a/zh/css/element-icons.woff
+++ /dev/null
Binary files differ
diff --git a/zh/css/main.css b/zh/css/main.css
index a2f8b56..ca718d9 100644
--- a/zh/css/main.css
+++ b/zh/css/main.css
@@ -1 +1 @@
-@font-face{font-family:'iconfont';src:url("font/iconfont.eot");src:url("font/iconfont.eot?#iefix") format("embedded-opentype"),url("font/iconfont.woff") format("woff"),url("font/iconfont.ttf") format("truetype"),url("font/iconfont.svg#iconfont") format("svg")}.iconfont{font-family:"iconfont" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:url(font/OpenSans-Regular.ttf) format("truetype")}@font-face{font-family:'Open Sans';font-style:bold;font-weight:800;src:url(font/OpenSans-Bold.ttf) format("truetype")}html{height:100%}body{font-family:'Open Sans', "PingFang SC", Helvetica, Arial, sans-serif}#lowie-main{display:none}.lower-ie #main{display:none}.lower-ie #lowie-main{display:block;height:100%;width:100%;padding:200px 0 100px;background-color:#2a3c54}.lower-ie #lowie-main img{display:block;width:60%;margin:0 auto}#v4-link{position:fixed;bottom:0;left:50%;width:200px;margin-left:-100px;text-align:center;z-index:1000;padding:5px 30px}.navbar-default{border:none;background-color:#fff;z-index:10000;-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;height:50px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2)}.navbar-default .navbar-nav{-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear}.navbar-default .navbar-nav li{position:relative}.navbar-default .navbar-nav li a{color:#081642;background-color:none !important;padding:15px 20px;-webkit-transition:0.5s background-color;-o-transition:0.5s background-color;transition:0.5s background-color;font-size:14px}.navbar-default .navbar-nav li a:before{content:'';position:absolute;left:50%;right:50%;top:0;background:#081642;height:3px;-webkit-transition-property:'left, right';-o-transition-property:'left, right';transition-property:'left, right';-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-nav li a:focus{color:#081642;background-color:#f9f9f9}.navbar-default .navbar-nav li a:hover:before,.navbar-default .navbar-nav li a:focus:before{left:0;right:0}.navbar-default .navbar-nav li a .iconfont{font-size:12px}.navbar-default .navbar-nav li a .new{display:inline-block;padding:0 5px;background-color:#F72C5B;color:#fff;font-size:12px;border-radius:3px;vertical-align:middle;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.navbar-default .navbar-nav li.open{background-color:#f9f9f9;color:#fff}.navbar-default .navbar-nav li.open>a:focus,.navbar-default .navbar-nav li.open>a:hover{color:#081642;background-color:#f9f9f9}.navbar-default .navbar-nav li.active>a{padding-top:11px;border-top:3px solid #F72C5B;color:#F72C5B;background-color:#fff;-webkit-transition:0.5s background-color;-o-transition:0.5s background-color;transition:0.5s background-color}.navbar-default .navbar-nav li.active>a:before{display:none}.navbar-default .navbar-nav li.active>a:hover,.navbar-default .navbar-nav li.active>a:focus{color:#FF6D8F;background-color:#f9f9f9}.navbar-default .navbar-nav li .dropdown-menu{width:250px;padding:0;border:none}.navbar-default .navbar-nav li .dropdown-menu li{background-color:#fff;border-top:none}.navbar-default .navbar-nav li .dropdown-menu li a{padding:13px 20px}.navbar-default .navbar-nav li .dropdown-menu li:hover,.navbar-default .navbar-nav li .dropdown-menu li:focus{background-color:#f9f9f9}.navbar-default .navbar-nav li .dropdown-menu li:hover a,.navbar-default .navbar-nav li .dropdown-menu li:focus a{color:#344C9B;background-color:#f9f9f9}.navbar-default .navbar-nav li ul{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1);border-radius:0 0 10px 10px;overflow:hidden}.navbar-default .navbar-nav li ul a:before{display:none}.navbar-default .navbar-logo{height:32px;margin-top:-6px;margin-left:-2px}.navbar-default #navbar-collapse{border-top:none;background:#fff;margin-left:-25px;margin-right:-15px}.navbar-default .navbar-toggle{padding:1px 5px;margin:7px 16px 0 0;border-color:#ddd;background-color:#fff}.navbar-default .navbar-toggle .icon-bar{margin:7px 0 !important;height:1px;background-color:#ddd}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{border-color:#ddd;background-color:#f9f9f9}.container-fluid{padding:0 25px}#menu-btn{display:none;float:right;height:45px;line-height:45px;margin:5px 20px 0 0;font-size:30px;color:#fff;cursor:pointer}.navbar-bg{background-color:#fff;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:background-color, opacity;-o-transition-property:background-color, opacity;transition-property:background-color, opacity}.navbar-bg .navbar-nav li a{color:#081642}.navbar-bg .navbar-nav li.active a{color:#F72C5B;background-color:transparent}#nav-apache{margin-left:10px;margin-right:10px;position:relative;top:1px}#nav-apache a{padding:10px 15px}#nav-apache a img{height:30px}#nav-github{height:50px;overflow:hidden}#nav-github a{padding-top:13px}.nav-circle{height:50px}.nav-circle-inner{width:22px;height:22px;margin:14px 20px;text-align:center;overflow:hidden;border:1px solid;border-radius:50%}.navbar-default .navbar-nav li .nav-circle-inner a{height:100%;padding:0;font-size:12px}.navbar-default .navbar-nav li .nav-circle-inner a:hover{text-decoration:none}.icon-external-link{position:relative;top:2px;left:5px;opacity:0.5}@media (max-width: 768px){.navbar-default .navbar-nav{-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;margin-top:0;margin-bottom:0}.navbar-default .navbar-nav li.active>a{border-left:3px solid #081642;border-top:none;padding:10px 15px 10px 11px}#menu-btn{display:block}#nav-download{display:none}.dropdown-menu{width:100% !important}}@media (max-width: 1280px) and (min-width: 1192px){.navbar-default .navbar-nav li a{padding:15px 15px}}@media (max-width: 1192px) and (min-width: 900px){.navbar-default .navbar-nav li a{padding:15px 8px}}@media (max-width: 900px) and (min-width: 768px){.navbar-default .navbar-nav li a{padding:15px 3px;font-size:12px}}@media (max-width: 1065px){#nav-apache{display:none}}.page-main{position:absolute;left:0;right:0;top:50px;bottom:0;overflow-y:auto}.doc-version-change{position:absolute;top:70px;right:50px;z-index:100}.doc-version-change a{display:inline-block;margin-left:20px}.section-bg{background:#F4F7FC;padding:10px 0}.d-section.last-section{margin-bottom:30px;border-bottom:0}.page-info{margin-bottom:30px;text-align:center;padding:40px;color:#4e6167;background:#F4F7FC}.page-info h1{margin-bottom:5px;font-size:40px;font-weight:bold;color:#333}.page-info p{font-size:16px}.page-info-echarts{font-size:12px;margin-top:15px;color:#8E99AB}.page-content{min-height:300px;padding-bottom:40px;font-size:16px;line-height:22px}.page-content h2{color:#C42E51;padding-bottom:15px;border-bottom:1px solid #ddd;margin-top:40px;margin-bottom:20px}.page-content h2:first-child{margin-top:0}.page-content h3{margin:30px 0 10px 0}.page-content p{margin:10px 0}.page-content section{padding:40px 0;text-align:center}.page-content td,.page-content th{padding:5px 10px;border:1px solid #ddd}.page-content td ol,.page-content th ol{padding-left:1em}.page-content ul{padding-left:30px}.page-content ul li{list-style:disc}.page-content ol li{list-style:decimal}.page-content li{margin:5px 0}.page-nav{position:-webkit-sticky;position:sticky;overflow:auto;float:left;width:200px;top:20px;height:-webkit-calc(100vh - 100px);height:calc(100vh - 100px);margin:0 0 0 30px;padding:0 0 20px 0}.page-nav h4{margin:10px 0;color:#666;font-size:14px;padding-left:10px}.page-nav h4:first-child{margin-top:0}.page-nav h4.inner{margin:0;padding-left:0;font-size:18px}.page-nav a{border-left:1px solid rgba(78,97,103,0.25);color:#999;padding:7px 10px;display:block;position:relative}.page-nav a:before{content:'';position:absolute;top:50%;bottom:50%;background:#F72C5B;width:3px;left:-1px;-webkit-transition-property:'top, bottom';-o-transition-property:'top, bottom';transition-property:'top, bottom';-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.page-nav a:hover{text-decoration:none;color:#333}.page-nav a:hover:before{top:0;bottom:0}.page-nav a.active{color:#F72C5B}.page-nav .slide-btn{display:none}.page-detail{margin-left:220px;margin-bottom:20px;padding:0 40px 0 40px;overflow-x:hidden}.page-detail h2{margin:10px 0;padding-top:20px;font-size:22px}.page-detail h2:first-child{margin-top:0;padding-top:0}.page-detail h2+h3{margin-top:20px}.page-detail h3{margin:40px 0 15px 0;font-size:18px}.page-detail p{margin:15px 0}.page-detail li{padding-left:0}.page-detail li li{margin:5px 0}.page-detail .time{float:right;position:relative;top:-35px}@media screen and (max-device-width: 600px){.page-content.single-page{position:static}.page-content.slide-up .page-nav ul{display:none}.page-info{text-align:left;padding:15px;margin-bottom:10px}.page-info h1{margin-bottom:10px}.page-nav{position:static}.page-nav .slide-btn{display:block;color:#F72C5B;position:absolute;right:20px;margin-top:10px}.page-detail{position:static;margin-left:0;padding:0 15px}.page-detail h2{padding-top:20px}.page-detail h2:first-child{padding-top:0}}#download-extension-container{max-width:800px}#download-extension-container .row{margin-top:40px;margin-bottom:40px}#reference{padding:90px 0 140px 0;text-align:center}footer{min-height:190px;background-color:#202D42;color:#808795;font-size:14px}footer.inner-footer{background-color:transparent;border-top:1px solid #eee;margin-top:40px;color:#aaa;font-size:12px}footer.inner-footer .container{padding:0}footer.inner-footer p{line-height:20px}footer.inner-footer .row{margin-top:20px !important}footer.inner-footer #footer-icon-panel{text-align:right}footer.inner-footer #footer-icon-panel img{margin-top:20px;width:250px}footer .row{margin-top:50px !important;margin-bottom:0 !important}footer .logo img{display:block;margin-bottom:20px;width:109px}footer .footer-apache-logo{width:300px;max-width:80%;margin:0 0 10px 0}footer #echarts-copyright{color:rgba(255,255,255,0.4);margin:65px 0 20px 0;font-size:1.2rem}footer h3{color:#fff;font-size:1.5rem;margin:10px 0}footer ul{height:150px}footer ul dt{width:50%;float:left;font-weight:300}footer ul li{font-weight:300}footer ul a{color:rgba(255,255,255,0.4);font-size:1.2rem;margin:5px 0}footer ul a:hover{color:rgba(255,255,255,0.8)}footer .icon-panel{margin-top:20px}footer .footer-icon{display:inline-block;width:40px;height:40px;border-radius:50px;margin-right:10px;padding:8px 10px;border:1px solid white;opacity:0.5;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}footer .footer-icon:hover{opacity:1}@media (max-width: 992px){footer .footer-apache-logo{-webkit-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7)}footer .icon-panel{margin:20px 0}footer #echarts-copyright{margin:20px 0;text-align:center}}@media (max-width: 768px){footer .logo img{margin:0 auto}footer #footer-icon-panel{text-align:center}footer #echarts-copyright{text-align:center}}html{overflow-x:hidden}body{width:100%;background-color:#fff}#main-content{overflow:hidden;color:#949CB1}#main-content a{color:#5E7AD9}#main-content .more{text-align:center;display:block}#main-content footer{font-weight:400 !important}#main-content footer h3{color:white}#main-content #home-section{width:100%;height:100vh;overflow:hidden}#main-content .home-brand-panel{margin:0 auto;height:100%;padding:0 30px;position:relative}#main-content .home-info{margin-top:20vh}#main-content .home-brand{font-size:75px;font-weight:800;color:#081642;line-height:1.2em}#main-content .home-subtitle{font-size:21px;color:#1d2b5a;margin-top:15px}#main-content .home-btn-panel{margin-top:40px}#main-content .btn-index-home{min-width:150px;padding:15px 10px;border-radius:30px;background-color:#fff;border:1px solid #F72C5B;color:#F72C5B;opacity:0.8;font-size:16px}#main-content .btn-index-home:first-child{background-color:#F72C5B;color:#fff;opacity:1}#main-content .btn-index-home:first-child .index-home-svg{left:-3px;top:3px}#main-content .btn-index-home:hover,#main-content .btn-index-home:focus{-webkit-box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2);box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2)}#main-content .btn-index-github{min-width:56px;height:56px;background:transparent;border:none;opacity:0.5}#main-content .btn-index-github:hover{opacity:1}#main-content .index-home-svg{position:relative;top:4px;left:-6px}#main-content .home-chart{height:60%;top:16%;position:absolute;right:50px;z-index:-100}#main-content .home-chart img{max-height:100%}#main-content #events-section{margin:20px 0 60px 0}#main-content .banner-section{position:relative;margin-top:-5px}#main-content .banner-section a{display:block;text-align:center}#main-content .banner-img{width:100%}#main-content h2{margin:35px 0 5px 0}#main-content .row{margin-top:20px;margin-bottom:20px}#main-content section.normal{padding-top:50px;padding-bottom:165px;text-align:center}#reference{font-size:1.6rem;font-weight:400;line-height:2.4rem;text-align:center;background-image:url("../images/map.png");background-repeat:no-repeat;background-position:center center;background-size:contain;color:#333}#reference #recommends{height:160px;position:relative;max-width:90%;width:600px;margin:0 auto;text-align:center}#reference .recommend{display:none;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;position:absolute;bottom:0;width:100%}#reference .recommend.active{display:block}#reference .recommend p{margin:10px auto;font-size:20px;font-weight:400;color:#333}#reference .recommend p:before{display:inline-block;content:'';width:41px;height:37px;background-image:url("../images/yinhao.png");background-size:100%;margin-right:20px}#reference .person{margin:10px 0 20px 0;color:#949CB1}#reference .person .name{margin-top:-5px}#reference .people{height:100px}#reference .people img{width:70px;border-radius:50%;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;border-color:white;opacity:0.5;display:inline-block;margin:15px 10px}#reference .people img.active{width:100px;margin:0;-webkit-box-shadow:1px 4px 8px 0 rgba(46,37,37,0.3);box-shadow:1px 4px 8px 0 rgba(46,37,37,0.3);border:4px solid white;opacity:1}#main-content #reference{margin-top:100px}#feature-section hr{display:inline-block;text-align:center;width:36px;margin:15px 0;height:2px;border:0;background-color:#5E7AD9}.index-features{margin-top:20px;text-align:center;color:#949CB1}.index-features h2{font-size:35px;font-weight:800;color:#090909}.index-feature{margin:30px 0}.index-feature-left{display:inline-block;position:absolute;width:107px;height:99px}.index-feature-icon{position:absolute;width:50%;left:28%;top:22.5%}.index-feature-right{display:inline-block;margin-left:127px}.index-feature-right h3{margin-top:10px;font-size:16px;font-weight:bold;color:#06133B}.index-feature-right p{margin-top:14px;line-height:1.75em}#publication{overflow:hidden;height:720px;opacity:0;-webkit-transition:1s;-o-transition:1s;transition:1s}#publication #start-line{position:relative;left:500px;top:95px;width:200px;z-index:-10}#publication #end-line{position:relative;left:1015px;top:-84px;width:257px;z-index:-10}#publication .container .paper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}#publication .container .paper .content{width:528px}#publication .container .paper .content h2{line-height:36px;font-weight:600;font-size:25px;color:#090909}#publication .container .paper .icon #paper-icon{width:530px}#publication p.note{margin-top:10px}#publication .pdf{display:inline-block;margin-top:20px;height:45px;width:237px;text-align:center;background:#5E7AD9;border-radius:22.5px;padding:13px 0;color:#fff;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}#publication .pdf:hover,#publication .pdf:focus{text-decoration:none;-webkit-box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2);box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2)}#gongzhonghao{margin:40px 0}#gongzhonghao img{width:150px;-webkit-box-shadow:0px 6px 12px 0 #eee;box-shadow:0px 6px 12px 0 #eee}#about-section{padding-top:40px;padding-bottom:90px;background-color:#fff}#about-section h3{font-weight:600;font-size:35px;color:#06133B}#about-section hr{display:inline-block;text-align:center;width:36px;height:2px;background-color:#8EE3A9;color:#8EE3A9;margin-top:24px;border:0px}#about-section p{font-size:12px;color:#949CB1;letter-spacing:0}#about-section .btn-panel{text-align:center;margin-top:30px}#about-section .btn-panel a{height:78px}#about-section .btn-panel a:hover{text-decoration:none}#about-section .btn-content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;margin:20px 0;padding:9px 22px 9px 24px;text-indent:10px;position:relative;z-index:100;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;line-height:60px;-webkit-box-shadow:2px 4px 14px 4px rgba(112,114,124,0.2);box-shadow:2px 4px 14px 4px rgba(112,114,124,0.2);border-radius:8px}#about-section .btn-content .btn-logo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}#about-section .btn-content .btn-logo span{margin-left:14px;font-size:20px;color:#06133B}#about-section .btn-content .btn-logo svg{height:41px;width:41px}#about-section .btn-content .icon-v-right{width:12px;height:12px;border:2px solid rgba(148,156,177,0.4);border-width:2px 2px 0 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);margin:0;line-height:60px}#about-section .btn-content .weixin-code{width:60px}#about-section .btn-content img{margin-right:10px;position:relative;top:-2px}@media (max-width: 992px){#main-content .home-info{width:100%;left:0;margin-left:0;text-align:center}#main-content .home-brand{font-size:55px}#main-content .home-chart{margin:0 auto;width:100%;left:0;text-align:center;top:15vh;opacity:0.3;right:auto}.single-btn-panel{text-align:center}#start-line,#paper-icon,#end-line{display:none}#publication{height:auto;margin:80px 10px}#publication .container .paper .content{width:100%}#publication .home-chart{top:140px}}@media (max-width: 768px){#main-content .home-brand{font-size:48px}#main-content .home-btn-panel{margin:40px auto}#main-content .home-subtitle{font-size:14px;margin-top:10px}#main-content .btn-index-home{display:block;margin:15px auto;width:220px}#main-content .feature-btn{margin:0 auto;margin-top:50px;text-align:center}#main-content .container .paper .content h2{font-size:20px;line-height:25px}#main-content .index-feature{margin:50px 0}#reference{background-size:cover}#reference .people{height:180px}}@media (max-width: 480px){#home-section .home-brand-panel{text-align:center}#home-section .home-brand-panel .btn{display:block;margin:10px auto}}.ch-main{position:relative;margin-top:100px;margin-left:100px}.ch-pc-chart{width:90%;height:280px;border-radius:12px;-webkit-box-shadow:6px 6px 22px #ccc;box-shadow:6px 6px 22px #ccc}.ch-pc-chart div{z-index:50 !important}.ch-mobile{position:absolute;right:0;width:180px;top:-30px;z-index:300}.ch-mobile-box{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ch-mobile-content{position:absolute;overflow:hidden;border-bottom-left-radius:5px;border-bottom-right-radius:5px;left:12%;right:12%;top:16%;bottom:15.5%;background:#333;z-index:300;padding:0;margin:0}.ch-mobile-chart{width:200%;height:200%;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);padding:0;margin:0}.ch-mobile-chart div div{z-index:50 !important}.ch-on-touch .ch-pc-chart{width:auto}.ch-on-touch .ch-mobile{display:none}@media (max-width: 768px){.ch-main{margin-left:0}}@media (max-width: 480px){.ch-main{margin-top:0}}#ec-example-main #toolbar{top:81px}#ec-doc-main .ec-doc-tutorial .page-description h4{margin:1.33em 0;padding:0;font-weight:bold}#ec-doc-main .ec-doc-tutorial .page-description h5{margin:1.67em 0;padding:0;font-weight:bold}h1,h2,h3,h4,h5,h6,h7,p{font-weight:400;margin:0;padding:0}ul{list-style:none;padding:0;margin:0}img{max-width:100%}.clear :after{display:block;content:'';clear:both}iframe{border:1px solid #ccc}#download-table{margin:20px 0}#download-table td{padding:8px;text-align:left}#download-main{max-width:800px}#download-main .d-section{margin-top:20px;padding-top:20px}#download-main h2{font-size:25px;border-bottom:0;text-align:center;color:#5E7AD9;text-align:left}#download-main h3{margin-top:40px;font-size:18px;font-weight:bold;text-align:left}#download-main h3.first{margin-top:-20px}#download-main p{text-align:left}#download-main .center{text-align:center}#download-main h4{margin:10px auto;margin-top:20px;font-size:16px;font-weight:bold;text-align:left}#download-main h4 .warn{color:#A9334C}#download-main .list-wrap{margin:20px 0 0 0}#download-main .d-section-version h2{margin-top:-30px}#download-main .checksum{text-align:left;margin:20px 0;border-left:0;padding:0}#download-main .checksum p,#download-main .checksum li{font-size:14px}#download-main li{list-style:inherit;margin:5px 0}.download-note{margin-top:12px;line-height:20px;font-size:14px;color:#999;text-align:left}.paper-desc{text-align:left;margin:20px -20px;padding:20px;background-color:#f5f7fd}.paper-desc .paper-title{font-size:16px;margin-top:5px;font-weight:bold}.paper-desc .paper-author{font-size:12px;margin:10px 0px;color:#999}.paper-desc .paper-journal{font-size:14px}#download-row{text-align:center}.d-section{padding-top:50px;padding-bottom:25px;text-align:center;border-bottom:1px solid rgba(78,97,118,0.25);color:#6b7a89}.d-section{*zoom:1}.d-section:before,.d-section:after{display:table;line-height:0;content:""}.d-section:after{clear:both}.download-theme img{-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.download-theme img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#download-main .d-section-version a,#download-main .d-section-gl a{text-decoration:none}#download-main .d-section-version a:hover .circle-wrap,#download-main .d-section-gl a:hover .circle-wrap{color:#fff;background-color:#45B4E8;-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);border-color:transparent}#download-main .d-section-version a:active .circle-wrap,#download-main .d-section-version a:focus .circle-wrap,#download-main .d-section-gl a:active .circle-wrap,#download-main .d-section-gl a:focus .circle-wrap{color:#fff;background-color:#2997D6;-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);border-color:transparent}#download-main .d-section-version .mode,#download-main .d-section-gl .mode{display:block;margin:38px 0 2px;font-size:17px}#download-main .d-section-version .text,#download-main .d-section-gl .text{margin-left:-10px;text-align:center;color:#333}#download-main .d-section-version .text span,#download-main .d-section-gl .text span{color:#333;opacity:0.7}.d-section-version{padding-bottom:50px}.d-section-version .row>div{height:220px}#download-main .circle-wrap{width:120px;height:120px;border-radius:50%;background-color:white;border:1px solid rgba(78,97,118,0.2);margin:0 auto;margin-bottom:15px;color:#5E7AD9;-webkit-transition:0.2s;-o-transition:0.2s;transition:0.2s}.more-btn{position:relative;display:block;margin:20px auto;margin-bottom:10px}.more-btn:after{display:block;content:'';width:19px;height:18px;background-image:url("../images/btn-arrow.png");background-size:80% 80%;position:absolute;background-repeat:no-repeat;right:20px;top:13px}.more-btn+p{color:#6b7a89}.btn-two{margin-left:15px;margin-right:15px;margin-bottom:10px;position:relative;text-align:left;padding-left:45px !important}.d-section-map ul,.d-section-theme ul{*zoom:1}.d-section-map ul:before,.d-section-map ul:after,.d-section-theme ul:before,.d-section-theme ul:after{display:table;line-height:0;content:""}.d-section-map ul:after,.d-section-theme ul:after{clear:both}.d-section-map li,.d-section-theme li{float:left;width:260px}.d-section-map .first-item,.d-section-theme .first-item{margin-right:160px}.hover-shadow{-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s ease-out;-o-transition:0.5s ease-out;transition:0.5s ease-out}.hover-shadow:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#download-extension-container h2{color:#5E7AD9;margin-bottom:5px}#download-extension-container p{margin:5px 0}#builder .warn{color:#F72C5B;margin-top:10px;font-size:16px;line-height:25px}#builder ul{margin:0px;padding:0px}#builder li{list-style:none}#title h1 span{margin-left:20px;font-size:34px;color:#888;font-weight:100}#title .download-version{margin:15px;font-size:18px;font-weight:bold}#title .download-version select{margin-left:10px}#configuration{width:1000px;margin:0 auto}#configuration p.desc{color:#6b7a89;font-size:16px}#configuration h3{font-family:noto-thin;margin:26px 0}#configuration>section{border-bottom:1px solid #e5e5e5;text-align:left}#configuration>section p{margin:20px 0}#configuration h3{margin:10px 0;color:#3c485c;font-size:26px;font-weight:normal}#configuration h3 span{font-size:16px;margin-left:5px}#configuration ul{margin:10px}#configuration li{display:inline-block;vertical-align:top;margin:20px 18px;text-align:center;width:120px;border:2px solid rgba(0,0,0,0);cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}#configuration li input{display:none}#configuration li img{margin-top:5px;width:90px;height:90px;padding:5px 10px}#configuration li h5{color:#000;font-weight:normal;margin:10px 0;padding:0;line-height:18px;position:relative}#configuration li h5 span{font-size:12px;margin-left:3px}#configuration li:hover{-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.1);box-shadow:0px 0px 10px rgba(0,0,0,0.1)}#configuration li.checked{-webkit-box-shadow:0px 0px 15px rgba(41,60,85,0.2);box-shadow:0px 0px 15px rgba(41,60,85,0.2);border-radius:5px}#configuration li.checked h5::before{content:'';width:15px;height:15px;background-size:15px 15px;background-image:url(../images/builder/checked.png);display:inline-block;position:absolute;right:-2px;top:-107px;border-radius:0 3px 0 0}#other input{margin:0 10px 0 0;vertical-align:middle}#other label{font-size:16px}#other p.desc{font-size:14px;padding-left:10px}#other a{color:black}#other .other-option{margin-left:15px}#action{margin-top:50px;margin-bottom:100px;text-align:center}#email{border:1px solid #ccc;border-radius:20px;line-height:2em;width:250px;padding:5px 20px;outline:none;margin-top:20px}#build{margin-top:20px}.clear{clear:both}#about-page{margin-bottom:20px;text-align:center}#about-page section{padding:40px 15px}#about-page .contributor{max-width:800px}#about-page h3{margin-bottom:20px}#about-page p{color:#888;margin:5px 0}#about-page h4.group{text-align:left;border-left:4px solid;padding-left:15px}#about-page h4.group.pmc{margin:0px 0 10px 0;border-color:#E86C4B}#about-page h4.group.committer{margin:40px 0 40px 0;border-color:#40A7DC}#about-page h4.group.contributor{margin:40px 0 40px 0;border-color:#58A77C}#about-page h5{margin:5px 0;font-weight:bold}#about-page .about-person{margin:20px 0;height:150px}#about-page .about-person>a{display:inline-block;height:90px}#about-page .about-person>a img{height:88px}#about-page .about-person>a:hover img{-webkit-box-shadow:0 4px 9px 0 rgba(46,37,37,0.3);box-shadow:0 4px 9px 0 rgba(46,37,37,0.3);border-color:white}#about-page .about-person img{display:block;margin:0 auto;margin-bottom:10px;width:90px;border-radius:50%;border:4px solid white;border-color:transparent;-webkit-box-shadow:0 4px 9px 0 rgba(46,37,37,0);box-shadow:0 4px 9px 0 rgba(46,37,37,0);-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}#about-page .about-person .about-desc{color:#888}#about-page .about-person.wait-for-you img{border:1px solid #ececec;padding:10px;margin-bottom:20px}#about-page .company{border-top:1px solid rgba(78,97,118,0.25);max-width:800px}#about-page .company h3{margin-bottom:40px}#about-page .company .col-md-3{height:80px}#about-send-logo{margin:20px 0 50px 0}#about-send-logo p{margin-top:10px}.not-found{padding:150px 0 160px;height:100%;background-color:#2a3c54;overflow:hidden}.not-found img{display:block;width:60%;margin:0 auto}.not-found .text{margin-top:50px;text-align:center;font-size:20px;color:#fff}.not-found .link{margin-left:10px;color:#3183c6}@media (max-width: 768px){.not-found .text{padding:0 15px;font-size:14px}}#maps .links{text-align:center}#maps .links a{display:inline-block;margin:0 5px}#maps h3{margin-top:20px}#maps h3 span{font-size:0.7em;display:inline-block;margin:0 4px}#maps h5{text-align:center}#maps .province{margin-top:10px;margin-bottom:10px}#maps #map-list{padding-bottom:40px}#maps section p{margin-bottom:0;color:#6b7a89}#map-example{margin-top:30px;margin-bottom:100px;line-height:2em;font-size:14px}#map-example h4{margin:20px 0 10px 0}#map-example .prettyprint{padding:10px;border:#ccc 1px solid}#themes{max-width:800px}#themes p.desc{color:#888}#themes h1{text-align:center}#themes h3 span{font-size:16px;margin-left:5px}#themes .theme{text-align:center}#themes .theme img{margin-top:20px;width:285px;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s ease-out;-o-transition:0.5s ease-out;transition:0.5s ease-out;cursor:pointer}#themes .theme img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#theme-configure-section{margin-top:40px}#theme-example{margin:50px 0 80px 0;line-height:2em;font-size:14px}#theme-example h4{margin:20px 0 10px 0}#theme-example .prettyprint{padding:10px;border:#ccc 1px solid}#theme-builder{margin:30px 0;text-align:center}#changelog{width:700px;margin:0 auto;margin-top:100px;margin-bottom:100px;font-family:'Microsoft Yahei'}#changelog p.desc{margin:10px 0}#changelog p{font-weight:normal}#changelog .time{color:#888;float:right;margin-top:-35px;margin-right:10px}#changelog h2{margin-top:50px;border-bottom:1px solid #ccc;padding-bottom:5px;margin-bottom:10px}#changelog strong{color:#c12c2c}#changelog strong a{color:#3cafa4}#changelog>ul{margin-left:-10px}#changelog li{margin:10px 0;padding:0 20px}#changelog pre{margin:10px 20px;border:none}#ec-doc-main{position:absolute;left:0;right:0;top:0;bottom:0}@media (max-width: 600px){#ec-doc-main{-webkit-overflow-scrolling:touch;position:static}#ec-doc-nav{position:static;margin-bottom:0}}#extension{margin-bottom:-40px}#extension .nav-container{text-align:center;border-bottom:1px solid rgba(78,97,118,0.25);height:52px}#extension .nav-tabs{display:inline-block;border-bottom:none}#extension .nav-tabs li>a{border:none;color:#5E7AD9}#extension .nav-tabs li>a:hover{background:transparent}#extension .nav-tabs li.active>a{color:#F72C5B;border-bottom:4px solid #F72C5B}#extension .tab-content{margin:40px 0}.extension{margin:10px 0 40px 0}.extension-content{-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,0.05);box-shadow:0 1px 4px 0 rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);border-radius:4px}.extension-head{display:block}.extension-img{width:100%}.extension-info{padding:10px 15px;height:132px;overflow:hidden}@media (min-width: 992px){.extension-info:lang(en){height:195px}.extension-info:lang(zh){height:155px}}@media (min-width: 768px){.extension-info:lang(en){height:215px}}.extension-name{font-size:18px}.extension-author{margin-bottom:5px}.extension-author-name{display:inline-block;margin-right:5px}.extension-author-name+.extension-author-name{opacity:0.5}#submit-extension{text-align:center;padding-top:60px;padding-bottom:40px;background:#F4F7FC}#submit-extension h3{margin-bottom:10px}#submit-extension p{margin:2px 0;color:#6b7a89}#submit-extension a.btn{margin:20px 0 5px 0}#faq-page .page-detail li{margin:10px 0;list-style:circle}#maillist ul{list-style:circle;font-size:16px;padding-left:40px}#maillist li{margin:10px 0}#cheat-selector{margin-bottom:20px}#cheat-selector .selected .btn{background-color:#5E7AD9;border-color:#4B65BD;color:white}#cheat-chart{width:100%;height:400px}#cheat-detail{min-height:100px}#cheat-detail .desc{margin:10px 0 20px 0;font-size:14px;color:#555}.page-cheatsheet h2{font-size:22px;margin-top:30px;margin-bottom:10px}.page-cheatsheet h2:first-child{margin-top:0}.cheat-chart-item{display:inline-block;vertical-align:top;margin:20px 11px;text-align:center;width:120.5px;border:2px solid rgba(0,0,0,0);cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}.cheat-chart-item:hover{-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.2);box-shadow:0px 0px 10px rgba(0,0,0,0.2)}.cheat-chart-item a{text-decoration:none}.cheat-chart-item img{margin-top:5px;width:90px;height:90px;padding:5px 10px}.cheat-chart-item h5{color:#000;font-weight:normal;margin:10px 0;padding:0;line-height:18px;position:relative}#page-events .page-content h2{border-bottom:none;margin-bottom:0;margin-top:80px}#page-events .page-content h2:first-child{margin-top:20px}.event{display:block;margin:15px 0;width:100%;border-radius:10px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1);-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;overflow:hidden}.event:hover{-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.2);box-shadow:0 10px 20px rgba(0,0,0,0.2)}.event.event-detail-img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1)}.page-spa-container{position:absolute;top:51px;bottom:0;left:0;right:0}.no-script{position:fixed;left:0;right:0;bottom:0;padding:30px 40px;z-index:10001;background-color:rgba(0,0,0,0.6);color:#fff;text-align:center}#apache-banner{position:fixed;left:0;right:0;bottom:0;padding:20px 40px 0;z-index:10000;background-color:rgba(0,0,0,0.6);color:#fff;display:none}#apache-banner .txt{width:80%;height:100%;display:inline-block}#apache-banner p{margin:5px 0}#apache-banner p a{color:#fff;text-decoration:underline}#apache-banner .btn{position:relative;bottom:20px;width:20%;height:100%;display:inline-block;background-color:#F72C5B;border-radius:6px;color:#fff;padding:10px}#apache-banner .btn:hover{-webkit-box-shadow:none;box-shadow:none}#apache-banner .close-btn{position:absolute;padding:5px;right:15px;top:15px;color:#fff}#apache-banner .close-btn:hover{text-decoration:none}@media (max-width: 768px){.no-script{text-align:left;padding:20px}#apache-banner{padding:15px}#apache-banner .txt{width:100%;height:auto;display:block;margin-top:20px}#apache-banner .btn{width:100%;height:auto;display:block;top:0}#apache-banner .close-btn{top:10px}}.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:#F72C5B;position:fixed;z-index:100000;top:0;right:100%;width:100%;height:2px}.pace .pace-progress-inner{display:block;position:absolute;right:0px;width:100px;height:100%;-webkit-box-shadow:0 0 10px #F72C5B,0 0 5px #F72C5B;box-shadow:0 0 10px #F72C5B,0 0 5px #F72C5B;opacity:1.0;-webkit-transform:rotate(3deg) translate(0px, -4px);-ms-transform:rotate(3deg) translate(0px, -4px);transform:rotate(3deg) translate(0px, -4px)}.btn-main{border-radius:20px;padding:8px 50px;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s}.btn-main+.btn{margin-left:15px}.btn-main img{width:20px;margin-right:10px;margin-top:-2px;margin-left:-5px}.btn-main:hover{-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5)}.btn-main:focus,.btn-main:active{-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5)}.btn-thirdary{width:180px;-webkit-box-shadow:1px 3px 8px 0 rgba(25,119,173,0.4);box-shadow:1px 3px 8px 0 rgba(25,119,173,0.4);background-color:#3FA5DC;padding:9px 10px;color:white;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.btn-thirdary:hover{color:white;background-color:#45B4E8}.btn-thirdary:focus,.btn-thirdary:active{color:white;background-color:#2997D6}.btn-blue{background-color:#47ACE3;color:white;-webkit-box-shadow:1px 4px 8px 0 rgba(25,119,173,0.4);box-shadow:1px 4px 8px 0 rgba(25,119,173,0.4)}.btn-blue:hover{background-color:#46B5F1;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5)}.btn-blue:focus{background-color:#2E9FDC;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5)}.btn-red{background-color:#FF424F;color:white;-webkit-box-shadow:1px 4px 8px 0 rgba(174,44,53,0.4);box-shadow:1px 4px 8px 0 rgba(174,44,53,0.4)}.btn-red:hover{background-color:#FF4F4B;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5);box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5)}.btn-red:focus{background-color:#EE2A38;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5);box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5)}.btn-green{background-color:#80BB6A;color:white}.btn-green:hover,.btn-green:focus{background-color:#95CC81;color:white;-webkit-box-shadow:1px 3px 8px 0 rgba(76,151,47,0.4);box-shadow:1px 3px 8px 0 rgba(76,151,47,0.4)}.btn-default{background-color:white;color:#40A7DC;border:1px solid #40A7DC}.btn-default:hover,.btn-default:focus{background-color:#40A7DC;color:white;border:1px solid #40A7DC}.btn-group{margin:0 5px}.btn-group .caret{margin-left:5px}::-webkit-scrollbar{height:8px;width:8px;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border-radius:2px}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{width:8px;min-height:15px;background:rgba(50,50,50,0.3) !important;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.5) !important}
+@font-face{font-family:'iconfont';src:url("font/iconfont.eot");src:url("font/iconfont.eot?#iefix") format("embedded-opentype"),url("font/iconfont.woff") format("woff"),url("font/iconfont.ttf") format("truetype"),url("font/iconfont.svg#iconfont") format("svg")}.iconfont{font-family:"iconfont" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:url(font/OpenSans-Regular.ttf) format("truetype")}@font-face{font-family:'Open Sans';font-style:bold;font-weight:800;src:url(font/OpenSans-Bold.ttf) format("truetype")}html{height:100%}body{font-family:'Open Sans', "PingFang SC", Helvetica, Arial, sans-serif}#lowie-main{display:none}.lower-ie #main{display:none}.lower-ie #lowie-main{display:block;height:100%;width:100%;padding:200px 0 100px;background-color:#2a3c54}.lower-ie #lowie-main img{display:block;width:60%;margin:0 auto}#v4-link{position:fixed;bottom:0;left:50%;width:200px;margin-left:-100px;text-align:center;z-index:1000;padding:5px 30px}.navbar-default{border:none;background-color:#fff;z-index:10000;-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;height:50px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);box-shadow:0 0 20px rgba(0,0,0,0.2)}.navbar-default .navbar-nav{-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear}.navbar-default .navbar-nav li{position:relative}.navbar-default .navbar-nav li a{color:#081642;background-color:none !important;padding:15px 20px;-webkit-transition:0.5s background-color;-o-transition:0.5s background-color;transition:0.5s background-color;font-size:14px}.navbar-default .navbar-nav li a:before{content:'';position:absolute;left:50%;right:50%;top:0;background:#081642;height:3px;-webkit-transition-property:'left, right';-o-transition-property:'left, right';transition-property:'left, right';-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-nav li a:focus{color:#081642;background-color:#f9f9f9}.navbar-default .navbar-nav li a:hover:before,.navbar-default .navbar-nav li a:focus:before{left:0;right:0}.navbar-default .navbar-nav li a .iconfont{font-size:12px}.navbar-default .navbar-nav li a .new{display:inline-block;padding:0 5px;background-color:#F72C5B;color:#fff;font-size:12px;border-radius:3px;vertical-align:middle;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.navbar-default .navbar-nav li.open{background-color:#f9f9f9;color:#fff}.navbar-default .navbar-nav li.open>a:focus,.navbar-default .navbar-nav li.open>a:hover{color:#081642;background-color:#f9f9f9}.navbar-default .navbar-nav li.active>a{padding-top:11px;border-top:3px solid #F72C5B;color:#F72C5B;background-color:#fff;-webkit-transition:0.5s background-color;-o-transition:0.5s background-color;transition:0.5s background-color}.navbar-default .navbar-nav li.active>a:before{display:none}.navbar-default .navbar-nav li.active>a:hover,.navbar-default .navbar-nav li.active>a:focus{color:#FF6D8F;background-color:#f9f9f9}.navbar-default .navbar-nav li .dropdown-menu{width:250px;padding:0;border:none}.navbar-default .navbar-nav li .dropdown-menu li{background-color:#fff;border-top:none}.navbar-default .navbar-nav li .dropdown-menu li a{padding:13px 20px}.navbar-default .navbar-nav li .dropdown-menu li:hover,.navbar-default .navbar-nav li .dropdown-menu li:focus{background-color:#f9f9f9}.navbar-default .navbar-nav li .dropdown-menu li:hover a,.navbar-default .navbar-nav li .dropdown-menu li:focus a{color:#344C9B;background-color:#f9f9f9}.navbar-default .navbar-nav li ul{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1);border-radius:0 0 10px 10px;overflow:hidden}.navbar-default .navbar-nav li ul a:before{display:none}.navbar-default .navbar-logo{height:32px;margin-top:-6px;margin-left:-2px}.navbar-default #navbar-collapse{border-top:none;background:#fff;margin-left:-25px;margin-right:-15px}.navbar-default .navbar-toggle{padding:1px 5px;margin:7px 16px 0 0;border-color:#ddd;background-color:#fff}.navbar-default .navbar-toggle .icon-bar{margin:7px 0 !important;height:1px;background-color:#ddd}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{border-color:#ddd;background-color:#f9f9f9}.container-fluid{padding:0 25px}#menu-btn{display:none;float:right;height:45px;line-height:45px;margin:5px 20px 0 0;font-size:30px;color:#fff;cursor:pointer}.navbar-bg{background-color:#fff;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-property:background-color, opacity;-o-transition-property:background-color, opacity;transition-property:background-color, opacity}.navbar-bg .navbar-nav li a{color:#081642}.navbar-bg .navbar-nav li.active a{color:#F72C5B;background-color:transparent}#nav-apache{margin-left:10px;margin-right:10px;position:relative;top:1px}#nav-apache a{padding:10px 15px}#nav-apache a img{height:30px}#nav-github{height:50px;overflow:hidden}#nav-github a{padding-top:13px}.nav-circle{height:50px}.nav-circle-inner{width:22px;height:22px;margin:14px 20px;text-align:center;overflow:hidden;border:1px solid;border-radius:50%}.navbar-default .navbar-nav li .nav-circle-inner a{height:100%;padding:0;font-size:12px}.navbar-default .navbar-nav li .nav-circle-inner a:hover{text-decoration:none}.icon-external-link{position:relative;top:2px;left:5px;opacity:0.5}@media (max-width: 768px){.navbar-default .navbar-nav{-webkit-transition:background-color 0.5s linear;-o-transition:background-color 0.5s linear;transition:background-color 0.5s linear;margin-top:0;margin-bottom:0}.navbar-default .navbar-nav li.active>a{border-left:3px solid #081642;border-top:none;padding:10px 15px 10px 11px}#menu-btn{display:block}#nav-download{display:none}.dropdown-menu{width:100% !important}}@media (max-width: 1280px) and (min-width: 1192px){.navbar-default .navbar-nav li a{padding:15px 15px}}@media (max-width: 1192px) and (min-width: 900px){.navbar-default .navbar-nav li a{padding:15px 8px}}@media (max-width: 900px) and (min-width: 768px){.navbar-default .navbar-nav li a{padding:15px 3px;font-size:12px}}@media (max-width: 1065px){#nav-apache{display:none}}.page-main{position:absolute;left:0;right:0;top:50px;bottom:0;overflow-y:auto}.doc-version-change{position:absolute;top:70px;right:50px;z-index:100}.doc-version-change a{display:inline-block;margin-left:20px}.section-bg{background:#F4F7FC;padding:10px 0}.d-section.last-section{margin-bottom:30px;border-bottom:0}.page-info{margin-bottom:30px;text-align:center;padding:40px;color:#4e6167;background:#F4F7FC}.page-info h1{margin-bottom:5px;font-size:40px;font-weight:bold;color:#333}.page-info p{font-size:16px}.page-info-echarts{font-size:12px;margin-top:15px;color:#8E99AB}.page-content{min-height:300px;padding-bottom:40px;font-size:16px;line-height:22px}.page-content h2{color:#C42E51;padding-bottom:15px;border-bottom:1px solid #ddd;margin-top:40px;margin-bottom:20px}.page-content h2:first-child{margin-top:0}.page-content h3{margin:30px 0 10px 0}.page-content p{margin:10px 0}.page-content section{padding:40px 0;text-align:center}.page-content td,.page-content th{padding:5px 10px;border:1px solid #ddd}.page-content td ol,.page-content th ol{padding-left:1em}.page-content ul{padding-left:30px}.page-content ul li{list-style:disc}.page-content ol li{list-style:decimal}.page-content li{margin:5px 0}.page-nav{position:-webkit-sticky;position:sticky;overflow:auto;float:left;width:200px;top:20px;height:calc(100vh - 100px);margin:0 0 0 30px;padding:0 0 20px 0}.page-nav h4{margin:10px 0;color:#666;font-size:14px;padding-left:10px}.page-nav h4:first-child{margin-top:0}.page-nav h4.inner{margin:0;padding-left:0;font-size:18px}.page-nav a{border-left:1px solid rgba(78,97,103,0.25);color:#999;padding:7px 10px;display:block;position:relative}.page-nav a:before{content:'';position:absolute;top:50%;bottom:50%;background:#F72C5B;width:3px;left:-1px;-webkit-transition-property:'top, bottom';-o-transition-property:'top, bottom';transition-property:'top, bottom';-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.page-nav a:hover{text-decoration:none;color:#333}.page-nav a:hover:before{top:0;bottom:0}.page-nav a.active{color:#F72C5B}.page-nav .slide-btn{display:none}.page-detail{margin-left:220px;margin-bottom:20px;padding:0 40px 0 40px;overflow-x:hidden}.page-detail h2{margin:10px 0;padding-top:20px;font-size:22px}.page-detail h2:first-child{margin-top:0;padding-top:0}.page-detail h2+h3{margin-top:20px}.page-detail h3{margin:40px 0 15px 0;font-size:18px}.page-detail p{margin:15px 0}.page-detail li{padding-left:0}.page-detail li li{margin:5px 0}.page-detail .time{float:right;position:relative;top:-35px}@media screen and (max-device-width: 600px){.page-content.single-page{position:static}.page-content.slide-up .page-nav ul{display:none}.page-info{text-align:left;padding:15px;margin-bottom:10px}.page-info h1{margin-bottom:10px}.page-nav{position:static}.page-nav .slide-btn{display:block;color:#F72C5B;position:absolute;right:20px;margin-top:10px}.page-detail{position:static;margin-left:0;padding:0 15px}.page-detail h2{padding-top:20px}.page-detail h2:first-child{padding-top:0}}#download-extension-container{max-width:800px}#download-extension-container .row{margin-top:40px;margin-bottom:40px}#reference{padding:90px 0 140px 0;text-align:center}footer{min-height:190px;background-color:#202D42;color:#808795;font-size:14px}footer.inner-footer{background-color:transparent;border-top:1px solid #eee;margin-top:40px;color:#aaa;font-size:12px}footer.inner-footer .container{padding:0}footer.inner-footer p{line-height:20px}footer.inner-footer .row{margin-top:20px !important}footer.inner-footer #footer-icon-panel{text-align:right}footer.inner-footer #footer-icon-panel img{margin-top:20px;width:250px}footer .row{margin-top:50px !important;margin-bottom:0 !important}footer .logo img{display:block;margin-bottom:20px;width:109px}footer .footer-apache-logo{width:300px;max-width:80%;margin:0 0 10px 0}footer #echarts-copyright{color:rgba(255,255,255,0.4);margin:65px 0 20px 0;font-size:1.2rem}footer h3{color:#fff;font-size:1.5rem;margin:10px 0}footer ul{height:150px}footer ul dt{width:50%;float:left;font-weight:300}footer ul li{font-weight:300}footer ul a{color:rgba(255,255,255,0.4);font-size:1.2rem;margin:5px 0}footer ul a:hover{color:rgba(255,255,255,0.8)}footer .icon-panel{margin-top:20px}footer .footer-icon{display:inline-block;width:40px;height:40px;border-radius:50px;margin-right:10px;padding:8px 10px;border:1px solid white;opacity:0.5;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}footer .footer-icon:hover{opacity:1}@media (max-width: 992px){footer .footer-apache-logo{-webkit-transform:scale(0.7);-ms-transform:scale(0.7);transform:scale(0.7)}footer .icon-panel{margin:20px 0}footer #echarts-copyright{margin:20px 0;text-align:center}}@media (max-width: 768px){footer .logo img{margin:0 auto}footer #footer-icon-panel{text-align:center}footer #echarts-copyright{text-align:center}}html{overflow-x:hidden}body{width:100%;background-color:#fff}#main-content{overflow:hidden;color:#949CB1}#main-content a{color:#5E7AD9}#main-content .more{text-align:center;display:block}#main-content footer{font-weight:400 !important}#main-content footer h3{color:white}#main-content #home-section{width:100%;height:100vh;overflow:hidden}#main-content .home-brand-panel{margin:0 auto;height:100%;padding:0 30px;position:relative}#main-content .home-info{margin-top:20vh}#main-content .home-brand{font-size:75px;font-weight:800;color:#081642;line-height:1.2em}#main-content .home-subtitle{font-size:21px;color:#1d2b5a;margin-top:15px}#main-content .home-btn-panel{margin-top:40px}#main-content .btn-index-home{min-width:150px;padding:15px 10px;border-radius:30px;background-color:#fff;border:1px solid #F72C5B;color:#F72C5B;opacity:0.8;font-size:16px}#main-content .btn-index-home:first-child{background-color:#F72C5B;color:#fff;opacity:1}#main-content .btn-index-home:first-child .index-home-svg{left:-3px;top:3px}#main-content .btn-index-home:hover,#main-content .btn-index-home:focus{-webkit-box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2);box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2)}#main-content .btn-index-github{min-width:56px;height:56px;background:transparent;border:none;opacity:0.5}#main-content .btn-index-github:hover{opacity:1}#main-content .index-home-svg{position:relative;top:4px;left:-6px}#main-content .home-chart{height:60%;top:16%;position:absolute;right:50px;z-index:-100}#main-content .home-chart img{max-height:100%}#main-content #events-section{margin:20px 0 60px 0}#main-content .banner-section{position:relative;margin-top:-5px}#main-content .banner-section a{display:block;text-align:center}#main-content .banner-img{width:100%}#main-content h2{margin:35px 0 5px 0}#main-content .row{margin-top:20px;margin-bottom:20px}#main-content section.normal{padding-top:50px;padding-bottom:165px;text-align:center}#reference{font-size:1.6rem;font-weight:400;line-height:2.4rem;text-align:center;background-image:url("../images/map.png");background-repeat:no-repeat;background-position:center center;background-size:contain;color:#333}#reference #recommends{height:160px;position:relative;max-width:90%;width:600px;margin:0 auto;text-align:center}#reference .recommend{display:none;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;position:absolute;bottom:0;width:100%}#reference .recommend.active{display:block}#reference .recommend p{margin:10px auto;font-size:20px;font-weight:400;color:#333}#reference .recommend p:before{display:inline-block;content:'';width:41px;height:37px;background-image:url("../images/yinhao.png");background-size:100%;margin-right:20px}#reference .person{margin:10px 0 20px 0;color:#949CB1}#reference .person .name{margin-top:-5px}#reference .people{height:100px}#reference .people img{width:70px;border-radius:50%;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s;border-color:white;opacity:0.5;display:inline-block;margin:15px 10px}#reference .people img.active{width:100px;margin:0;-webkit-box-shadow:1px 4px 8px 0 rgba(46,37,37,0.3);box-shadow:1px 4px 8px 0 rgba(46,37,37,0.3);border:4px solid white;opacity:1}#main-content #reference{margin-top:100px}#feature-section hr{display:inline-block;text-align:center;width:36px;margin:15px 0;height:2px;border:0;background-color:#5E7AD9}.index-features{margin-top:20px;text-align:center;color:#949CB1}.index-features h2{font-size:35px;font-weight:800;color:#090909}.index-feature{margin:30px 0}.index-feature-left{display:inline-block;position:absolute;width:107px;height:99px}.index-feature-icon{position:absolute;width:50%;left:28%;top:22.5%}.index-feature-right{display:inline-block;margin-left:127px}.index-feature-right h3{margin-top:10px;font-size:16px;font-weight:bold;color:#06133B}.index-feature-right p{margin-top:14px;line-height:1.75em}#publication{overflow:hidden;height:720px;opacity:0;-webkit-transition:1s;-o-transition:1s;transition:1s}#publication #start-line{position:relative;left:500px;top:95px;width:200px;z-index:-10}#publication #end-line{position:relative;left:1015px;top:-84px;width:257px;z-index:-10}#publication .container .paper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}#publication .container .paper .content{width:528px}#publication .container .paper .content h2{line-height:36px;font-weight:600;font-size:25px;color:#090909}#publication .container .paper .icon #paper-icon{width:530px}#publication p.note{margin-top:10px}#publication .pdf{display:inline-block;margin-top:20px;height:45px;width:237px;text-align:center;background:#5E7AD9;border-radius:22.5px;padding:13px 0;color:#fff;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}#publication .pdf:hover,#publication .pdf:focus{text-decoration:none;-webkit-box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2);box-shadow:0px 5px 10px 0 rgba(0,0,0,0.2)}#gongzhonghao{margin:40px 0}#gongzhonghao img{width:150px;-webkit-box-shadow:0px 6px 12px 0 #eee;box-shadow:0px 6px 12px 0 #eee}#about-section{padding-top:40px;padding-bottom:90px;background-color:#fff}#about-section h3{font-weight:600;font-size:35px;color:#06133B}#about-section hr{display:inline-block;text-align:center;width:36px;height:2px;background-color:#8EE3A9;color:#8EE3A9;margin-top:24px;border:0px}#about-section p{font-size:12px;color:#949CB1;letter-spacing:0}#about-section .btn-panel{text-align:center;margin-top:30px}#about-section .btn-panel a{height:78px}#about-section .btn-panel a:hover{text-decoration:none}#about-section .btn-content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;margin:20px 0;padding:9px 22px 9px 24px;text-indent:10px;position:relative;z-index:100;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;line-height:60px;-webkit-box-shadow:2px 4px 14px 4px rgba(112,114,124,0.2);box-shadow:2px 4px 14px 4px rgba(112,114,124,0.2);border-radius:8px}#about-section .btn-content .btn-logo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}#about-section .btn-content .btn-logo span{margin-left:14px;font-size:20px;color:#06133B}#about-section .btn-content .btn-logo svg{height:41px;width:41px}#about-section .btn-content .icon-v-right{width:12px;height:12px;border:2px solid rgba(148,156,177,0.4);border-width:2px 2px 0 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);margin:0;line-height:60px}#about-section .btn-content .weixin-code{width:60px}#about-section .btn-content img{margin-right:10px;position:relative;top:-2px}@media (max-width: 992px){#main-content .home-info{width:100%;left:0;margin-left:0;text-align:center}#main-content .home-brand{font-size:55px}#main-content .home-chart{margin:0 auto;width:100%;left:0;text-align:center;top:15vh;opacity:0.3;right:auto}.single-btn-panel{text-align:center}#start-line,#paper-icon,#end-line{display:none}#publication{height:auto;margin:80px 10px}#publication .container .paper .content{width:100%}#publication .home-chart{top:140px}}@media (max-width: 768px){#main-content .home-brand{font-size:48px}#main-content .home-btn-panel{margin:40px auto}#main-content .home-subtitle{font-size:14px;margin-top:10px}#main-content .btn-index-home{display:block;margin:15px auto;width:220px}#main-content .feature-btn{margin:0 auto;margin-top:50px;text-align:center}#main-content .container .paper .content h2{font-size:20px;line-height:25px}#main-content .index-feature{margin:50px 0}#reference{background-size:cover}#reference .people{height:180px}}@media (max-width: 480px){#home-section .home-brand-panel{text-align:center}#home-section .home-brand-panel .btn{display:block;margin:10px auto}}.ch-main{position:relative;margin-top:100px;margin-left:100px}.ch-pc-chart{width:90%;height:280px;border-radius:12px;-webkit-box-shadow:6px 6px 22px #ccc;box-shadow:6px 6px 22px #ccc}.ch-pc-chart div{z-index:50 !important}.ch-mobile{position:absolute;right:0;width:180px;top:-30px;z-index:300}.ch-mobile-box{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ch-mobile-content{position:absolute;overflow:hidden;border-bottom-left-radius:5px;border-bottom-right-radius:5px;left:12%;right:12%;top:16%;bottom:15.5%;background:#333;z-index:300;padding:0;margin:0}.ch-mobile-chart{width:200%;height:200%;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);padding:0;margin:0}.ch-mobile-chart div div{z-index:50 !important}.ch-on-touch .ch-pc-chart{width:auto}.ch-on-touch .ch-mobile{display:none}@media (max-width: 768px){.ch-main{margin-left:0}}@media (max-width: 480px){.ch-main{margin-top:0}}#ec-example-main #toolbar{top:81px}#ec-doc-main .ec-doc-tutorial .page-description h4{margin:1.33em 0;padding:0;font-weight:bold}#ec-doc-main .ec-doc-tutorial .page-description h5{margin:1.67em 0;padding:0;font-weight:bold}h1,h2,h3,h4,h5,h6,h7,p{font-weight:400;margin:0;padding:0}ul{list-style:none;padding:0;margin:0}img{max-width:100%}.clear :after{display:block;content:'';clear:both}iframe{border:1px solid #ccc}#download-table{margin:20px 0}#download-table td{padding:8px;text-align:left}#download-main{max-width:800px}#download-main .d-section{margin-top:20px;padding-top:20px}#download-main h2{font-size:25px;border-bottom:0;text-align:center;color:#5E7AD9;text-align:left}#download-main h3{margin-top:40px;font-size:18px;font-weight:bold;text-align:left}#download-main h3.first{margin-top:-20px}#download-main p{text-align:left}#download-main .center{text-align:center}#download-main h4{margin:10px auto;margin-top:20px;font-size:16px;font-weight:bold;text-align:left}#download-main h4 .warn{color:#A9334C}#download-main .list-wrap{margin:20px 0 0 0}#download-main .d-section-version h2{margin-top:-30px}#download-main .checksum{text-align:left;margin:20px 0;border-left:0;padding:0}#download-main .checksum p,#download-main .checksum li{font-size:14px}#download-main li{list-style:inherit;margin:5px 0}.download-note{margin-top:12px;line-height:20px;font-size:14px;color:#999;text-align:left}.paper-desc{text-align:left;margin:20px -20px;padding:20px;background-color:#f5f7fd}.paper-desc .paper-title{font-size:16px;margin-top:5px;font-weight:bold}.paper-desc .paper-author{font-size:12px;margin:10px 0px;color:#999}.paper-desc .paper-journal{font-size:14px}#download-row{text-align:center}.d-section{padding-top:50px;padding-bottom:25px;text-align:center;border-bottom:1px solid rgba(78,97,118,0.25);color:#6b7a89}.d-section{*zoom:1}.d-section:before,.d-section:after{display:table;line-height:0;content:""}.d-section:after{clear:both}.download-theme img{-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.download-theme img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#download-main .d-section-version a,#download-main .d-section-gl a{text-decoration:none}#download-main .d-section-version a:hover .circle-wrap,#download-main .d-section-gl a:hover .circle-wrap{color:#fff;background-color:#45B4E8;-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);border-color:transparent}#download-main .d-section-version a:active .circle-wrap,#download-main .d-section-version a:focus .circle-wrap,#download-main .d-section-gl a:active .circle-wrap,#download-main .d-section-gl a:focus .circle-wrap{color:#fff;background-color:#2997D6;-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);border-color:transparent}#download-main .d-section-version .mode,#download-main .d-section-gl .mode{display:block;margin:38px 0 2px;font-size:17px}#download-main .d-section-version .text,#download-main .d-section-gl .text{margin-left:-10px;text-align:center;color:#333}#download-main .d-section-version .text span,#download-main .d-section-gl .text span{color:#333;opacity:0.7}.d-section-version{padding-bottom:50px}.d-section-version .row>div{height:220px}#download-main .circle-wrap{width:120px;height:120px;border-radius:50%;background-color:white;border:1px solid rgba(78,97,118,0.2);margin:0 auto;margin-bottom:15px;color:#5E7AD9;-webkit-transition:0.2s;-o-transition:0.2s;transition:0.2s}.more-btn{position:relative;display:block;margin:20px auto;margin-bottom:10px}.more-btn:after{display:block;content:'';width:19px;height:18px;background-image:url("../images/btn-arrow.png");background-size:80% 80%;position:absolute;background-repeat:no-repeat;right:20px;top:13px}.more-btn+p{color:#6b7a89}.btn-two{margin-left:15px;margin-right:15px;margin-bottom:10px;position:relative;text-align:left;padding-left:45px !important}.d-section-map ul,.d-section-theme ul{*zoom:1}.d-section-map ul:before,.d-section-map ul:after,.d-section-theme ul:before,.d-section-theme ul:after{display:table;line-height:0;content:""}.d-section-map ul:after,.d-section-theme ul:after{clear:both}.d-section-map li,.d-section-theme li{float:left;width:260px}.d-section-map .first-item,.d-section-theme .first-item{margin-right:160px}.hover-shadow{-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s ease-out;-o-transition:0.5s ease-out;transition:0.5s ease-out}.hover-shadow:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#download-extension-container h2{color:#5E7AD9;margin-bottom:5px}#download-extension-container p{margin:5px 0}#builder .warn{color:#F72C5B;margin-top:10px;font-size:16px;line-height:25px}#builder ul{margin:0px;padding:0px}#builder li{list-style:none}#title h1 span{margin-left:20px;font-size:34px;color:#888;font-weight:100}#title .download-version{margin:15px;font-size:18px;font-weight:bold}#title .download-version select{margin-left:10px}#configuration{width:1000px;margin:0 auto}#configuration p.desc{color:#6b7a89;font-size:16px}#configuration h3{font-family:noto-thin;margin:26px 0}#configuration>section{border-bottom:1px solid #e5e5e5;text-align:left}#configuration>section p{margin:20px 0}#configuration h3{margin:10px 0;color:#3c485c;font-size:26px;font-weight:normal}#configuration h3 span{font-size:16px;margin-left:5px}#configuration ul{margin:10px}#configuration li{display:inline-block;vertical-align:top;margin:20px 18px;text-align:center;width:120px;border:2px solid rgba(0,0,0,0);cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}#configuration li input{display:none}#configuration li img{margin-top:5px;width:90px;height:90px;padding:5px 10px}#configuration li h5{color:#000;font-weight:normal;margin:10px 0;padding:0;line-height:18px;position:relative}#configuration li h5 span{font-size:12px;margin-left:3px}#configuration li:hover{-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.1);box-shadow:0px 0px 10px rgba(0,0,0,0.1)}#configuration li.checked{-webkit-box-shadow:0px 0px 15px rgba(41,60,85,0.2);box-shadow:0px 0px 15px rgba(41,60,85,0.2);border-radius:5px}#configuration li.checked h5::before{content:'';width:15px;height:15px;background-size:15px 15px;background-image:url(../images/builder/checked.png);display:inline-block;position:absolute;right:-2px;top:-107px;border-radius:0 3px 0 0}#other input{margin:0 10px 0 0;vertical-align:middle}#other label{font-size:16px}#other p.desc{font-size:14px;padding-left:10px}#other a{color:black}#other .other-option{margin-left:15px}#action{margin-top:50px;margin-bottom:100px;text-align:center}#email{border:1px solid #ccc;border-radius:20px;line-height:2em;width:250px;padding:5px 20px;outline:none;margin-top:20px}#build{margin-top:20px}.clear{clear:both}#about-page{margin-bottom:20px;text-align:center}#about-page section{padding:40px 15px}#about-page .contributor{max-width:800px}#about-page h3{margin-bottom:20px}#about-page p{color:#888;margin:5px 0}#about-page h4.group{text-align:left;border-left:4px solid;padding-left:15px}#about-page h4.group.pmc{margin:0px 0 10px 0;border-color:#E86C4B}#about-page h4.group.committer{margin:40px 0 40px 0;border-color:#40A7DC}#about-page h4.group.contributor{margin:40px 0 40px 0;border-color:#58A77C}#about-page h5{margin:5px 0;font-weight:bold}#about-page .about-person{margin:20px 0;height:150px}#about-page .about-person>a{display:inline-block;height:90px}#about-page .about-person>a img{height:88px}#about-page .about-person>a:hover img{-webkit-box-shadow:0 4px 9px 0 rgba(46,37,37,0.3);box-shadow:0 4px 9px 0 rgba(46,37,37,0.3);border-color:white}#about-page .about-person img{display:block;margin:0 auto;margin-bottom:10px;width:90px;border-radius:50%;border:4px solid white;border-color:transparent;-webkit-box-shadow:0 4px 9px 0 rgba(46,37,37,0);box-shadow:0 4px 9px 0 rgba(46,37,37,0);-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}#about-page .about-person .about-desc{color:#888}#about-page .about-person.wait-for-you img{border:1px solid #ececec;padding:10px;margin-bottom:20px}#about-page .company{border-top:1px solid rgba(78,97,118,0.25);max-width:800px}#about-page .company h3{margin-bottom:40px}#about-page .company .col-md-3{height:80px}#about-send-logo{margin:20px 0 50px 0}#about-send-logo p{margin-top:10px}.not-found{padding:150px 0 160px;height:100%;background-color:#2a3c54;overflow:hidden}.not-found img{display:block;width:60%;margin:0 auto}.not-found .text{margin-top:50px;text-align:center;font-size:20px;color:#fff}.not-found .link{margin-left:10px;color:#3183c6}@media (max-width: 768px){.not-found .text{padding:0 15px;font-size:14px}}#maps .links{text-align:center}#maps .links a{display:inline-block;margin:0 5px}#maps h3{margin-top:20px}#maps h3 span{font-size:0.7em;display:inline-block;margin:0 4px}#maps h5{text-align:center}#maps .province{margin-top:10px;margin-bottom:10px}#maps #map-list{padding-bottom:40px}#maps section p{margin-bottom:0;color:#6b7a89}#map-example{margin-top:30px;margin-bottom:100px;line-height:2em;font-size:14px}#map-example h4{margin:20px 0 10px 0}#map-example .prettyprint{padding:10px;border:#ccc 1px solid}#themes{max-width:800px}#themes p.desc{color:#888}#themes h1{text-align:center}#themes h3 span{font-size:16px;margin-left:5px}#themes .theme{text-align:center}#themes .theme img{margin-top:20px;width:285px;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3);box-shadow:0 0 1px rgba(0,0,0,0.3);-webkit-transition:0.5s ease-out;-o-transition:0.5s ease-out;transition:0.5s ease-out;cursor:pointer}#themes .theme img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3);box-shadow:0 0 20px rgba(0,0,0,0.3)}#theme-configure-section{margin-top:40px}#theme-example{margin:50px 0 80px 0;line-height:2em;font-size:14px}#theme-example h4{margin:20px 0 10px 0}#theme-example .prettyprint{padding:10px;border:#ccc 1px solid}#theme-builder{margin:30px 0;text-align:center}#changelog{width:700px;margin:0 auto;margin-top:100px;margin-bottom:100px;font-family:'Microsoft Yahei'}#changelog p.desc{margin:10px 0}#changelog p{font-weight:normal}#changelog .time{color:#888;float:right;margin-top:-35px;margin-right:10px}#changelog h2{margin-top:50px;border-bottom:1px solid #ccc;padding-bottom:5px;margin-bottom:10px}#changelog strong{color:#c12c2c}#changelog strong a{color:#3cafa4}#changelog>ul{margin-left:-10px}#changelog li{margin:10px 0;padding:0 20px}#changelog pre{margin:10px 20px;border:none}#ec-doc-main{position:absolute;left:0;right:0;top:0;bottom:0}@media (max-width: 600px){#ec-doc-main{-webkit-overflow-scrolling:touch;position:static}#ec-doc-nav{position:static;margin-bottom:0}}#extension{margin-bottom:-40px}#extension .nav-container{text-align:center;border-bottom:1px solid rgba(78,97,118,0.25);height:52px}#extension .nav-tabs{display:inline-block;border-bottom:none}#extension .nav-tabs li>a{border:none;color:#5E7AD9}#extension .nav-tabs li>a:hover{background:transparent}#extension .nav-tabs li.active>a{color:#F72C5B;border-bottom:4px solid #F72C5B}#extension .tab-content{margin:40px 0}.extension{margin:10px 0 40px 0}.extension-content{-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,0.05);box-shadow:0 1px 4px 0 rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.1);border-radius:4px}.extension-head{display:block}.extension-img{width:100%}.extension-info{padding:10px 15px;height:132px;overflow:hidden}@media (min-width: 992px){.extension-info:lang(en){height:195px}.extension-info:lang(zh){height:155px}}@media (min-width: 768px){.extension-info:lang(en){height:215px}}.extension-name{font-size:18px}.extension-author{margin-bottom:5px}.extension-author-name{display:inline-block;margin-right:5px}.extension-author-name+.extension-author-name{opacity:0.5}#submit-extension{text-align:center;padding-top:60px;padding-bottom:40px;background:#F4F7FC}#submit-extension h3{margin-bottom:10px}#submit-extension p{margin:2px 0;color:#6b7a89}#submit-extension a.btn{margin:20px 0 5px 0}#faq-page .page-detail li{margin:10px 0;list-style:circle}#maillist ul{list-style:circle;font-size:16px;padding-left:40px}#maillist li{margin:10px 0}#cheat-selector{margin-bottom:20px}#cheat-selector .selected .btn{background-color:#5E7AD9;border-color:#4B65BD;color:white}#cheat-chart{width:100%;height:400px}#cheat-detail{min-height:100px}#cheat-detail .desc{margin:10px 0 20px 0;font-size:14px;color:#555}.page-cheatsheet h2{font-size:22px;margin-top:30px;margin-bottom:10px}.page-cheatsheet h2:first-child{margin-top:0}.cheat-chart-item{display:inline-block;vertical-align:top;margin:20px 11px;text-align:center;width:120.5px;border:2px solid rgba(0,0,0,0);cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}.cheat-chart-item:hover{-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.2);box-shadow:0px 0px 10px rgba(0,0,0,0.2)}.cheat-chart-item a{text-decoration:none}.cheat-chart-item img{margin-top:5px;width:90px;height:90px;padding:5px 10px}.cheat-chart-item h5{color:#000;font-weight:normal;margin:10px 0;padding:0;line-height:18px;position:relative}#page-events .page-content h2{border-bottom:none;margin-bottom:0;margin-top:80px}#page-events .page-content h2:first-child{margin-top:20px}.event{display:block;margin:15px 0;width:100%;border-radius:10px;-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1);-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;overflow:hidden}.event:hover{-webkit-box-shadow:0 10px 20px rgba(0,0,0,0.2);box-shadow:0 10px 20px rgba(0,0,0,0.2)}.event.event-detail-img:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.1)}.page-spa-container{position:absolute;top:51px;bottom:0;left:0;right:0}.no-script{position:fixed;left:0;right:0;bottom:0;padding:30px 40px;z-index:10001;background-color:rgba(0,0,0,0.6);color:#fff;text-align:center}#apache-banner{position:fixed;left:0;right:0;bottom:0;padding:20px 40px 0;z-index:10000;background-color:rgba(0,0,0,0.6);color:#fff;display:none}#apache-banner .txt{width:80%;height:100%;display:inline-block}#apache-banner p{margin:5px 0}#apache-banner p a{color:#fff;text-decoration:underline}#apache-banner .btn{position:relative;bottom:20px;width:20%;height:100%;display:inline-block;background-color:#F72C5B;border-radius:6px;color:#fff;padding:10px}#apache-banner .btn:hover{-webkit-box-shadow:none;box-shadow:none}#apache-banner .close-btn{position:absolute;padding:5px;right:15px;top:15px;color:#fff}#apache-banner .close-btn:hover{text-decoration:none}@media (max-width: 768px){.no-script{text-align:left;padding:20px}#apache-banner{padding:15px}#apache-banner .txt{width:100%;height:auto;display:block;margin-top:20px}#apache-banner .btn{width:100%;height:auto;display:block;top:0}#apache-banner .close-btn{top:10px}}.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:#F72C5B;position:fixed;z-index:100000;top:0;right:100%;width:100%;height:2px}.pace .pace-progress-inner{display:block;position:absolute;right:0px;width:100px;height:100%;-webkit-box-shadow:0 0 10px #F72C5B,0 0 5px #F72C5B;box-shadow:0 0 10px #F72C5B,0 0 5px #F72C5B;opacity:1.0;-webkit-transform:rotate(3deg) translate(0px, -4px);-ms-transform:rotate(3deg) translate(0px, -4px);transform:rotate(3deg) translate(0px, -4px)}.btn-main{border-radius:20px;padding:8px 50px;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;transition-duration:0.5s}.btn-main+.btn{margin-left:15px}.btn-main img{width:20px;margin-right:10px;margin-top:-2px;margin-left:-5px}.btn-main:hover{-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5)}.btn-main:focus,.btn-main:active{-webkit-box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 12px 0 rgba(25,119,173,0.5)}.btn-thirdary{width:180px;-webkit-box-shadow:1px 3px 8px 0 rgba(25,119,173,0.4);box-shadow:1px 3px 8px 0 rgba(25,119,173,0.4);background-color:#3FA5DC;padding:9px 10px;color:white;-webkit-transition:0.5s;-o-transition:0.5s;transition:0.5s}.btn-thirdary:hover{color:white;background-color:#45B4E8}.btn-thirdary:focus,.btn-thirdary:active{color:white;background-color:#2997D6}.btn-blue{background-color:#47ACE3;color:white;-webkit-box-shadow:1px 4px 8px 0 rgba(25,119,173,0.4);box-shadow:1px 4px 8px 0 rgba(25,119,173,0.4)}.btn-blue:hover{background-color:#46B5F1;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5)}.btn-blue:focus{background-color:#2E9FDC;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5);box-shadow:1px 4px 11px 0 rgba(25,119,173,0.5)}.btn-red{background-color:#FF424F;color:white;-webkit-box-shadow:1px 4px 8px 0 rgba(174,44,53,0.4);box-shadow:1px 4px 8px 0 rgba(174,44,53,0.4)}.btn-red:hover{background-color:#FF4F4B;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5);box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5)}.btn-red:focus{background-color:#EE2A38;color:white;-webkit-box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5);box-shadow:1px 4px 11px 0 rgba(174,44,53,0.5)}.btn-green{background-color:#80BB6A;color:white}.btn-green:hover,.btn-green:focus{background-color:#95CC81;color:white;-webkit-box-shadow:1px 3px 8px 0 rgba(76,151,47,0.4);box-shadow:1px 3px 8px 0 rgba(76,151,47,0.4)}.btn-default{background-color:white;color:#40A7DC;border:1px solid #40A7DC}.btn-default:hover,.btn-default:focus{background-color:#40A7DC;color:white;border:1px solid #40A7DC}.btn-group{margin:0 5px}.btn-group .caret{margin-left:5px}::-webkit-scrollbar{height:8px;width:8px;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border-radius:2px}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{width:8px;min-height:15px;background:rgba(50,50,50,0.3) !important;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.5) !important}
diff --git a/zh/css/only_for_cdn_ready_check.css b/zh/css/only_for_cdn_ready_check.css
index b57c484..483ef93 100644
--- a/zh/css/only_for_cdn_ready_check.css
+++ b/zh/css/only_for_cdn_ready_check.css
@@ -1 +1 @@
-/* 1630485133448 OK */
\ No newline at end of file
+/* 1630499963508 OK */
\ No newline at end of file
diff --git a/zh/demo.html b/zh/demo.html
index c0ad465..8621949 100644
--- a/zh/demo.html
+++ b/zh/demo.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -8,11 +8,11 @@
}
</script><title>Examples - Apache ECharts</title><script>var chartId = location.hash.slice(1);
window.location ='./examples/editor.html?c=' + chartId;</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/perfect-scrollbar@0.6.8/dist/css/perfect-scrollbar.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="left-chart-nav"><ul></ul></div><div id="nav-mask"></div><div id="nav-layer"><ul class="chart-list"></ul></div><div id="chart-demo"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/perfect-scrollbar@0.6.8/dist/js/min/perfect-scrollbar.min.js"></script><script type="text/javascript">var GALLERY_PATH = 'https://echarts.apache.org/examples/';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="left-chart-nav"><ul></ul></div><div id="nav-mask"></div><div id="nav-layer"><ul class="chart-list"></ul></div><div id="chart-demo"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/perfect-scrollbar@0.6.8/dist/js/min/perfect-scrollbar.min.js"></script><script type="text/javascript">var GALLERY_PATH = 'https://echarts.apache.org/examples/';
var GALLERY_EDITOR_PATH = GALLERY_PATH + 'editor.html?c=';
var GALLERY_VIEW_PATH = GALLERY_PATH + 'view.html?c=';
var GALLERY_THUMB_PATH = GALLERY_PATH + 'data/thumb/';
-</script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/config.js?_v_=f28d92fe4e"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/examples-nav.js?_v_=03b7e4aaf4"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
+</script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/config.js?_v_=f28d92fe4e"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/examples-nav.js?_v_=79bedbd49f"></script><script type="text/javascript">document.getElementById('nav-examples').className = 'active';
function encodeHTML(source) {
return String(source)
.replace(/&/g, '&')
diff --git a/zh/dependencies.html b/zh/dependencies.html
index ac42dc7..7dd89e4 100644
--- a/zh/dependencies.html
+++ b/zh/dependencies.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>依赖项 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><h1>依赖项</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content"><div class="container"><h2>ZRender</h2><p>Apache ECharts<sup>TM</sup> 底层依赖 <a href="https://github.com/ecomfe/zrender">ZRender</a>,一个轻量级的二维绘制库。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><h1>依赖项</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div class="page-content"><div class="container"><h2>ZRender</h2><p>Apache ECharts<sup>TM</sup> 底层依赖 <a href="https://github.com/ecomfe/zrender">ZRender</a>,一个轻量级的二维绘制库。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/download-extension.html b/zh/download-extension.html
index c3d9bb7..ea6b232 100644
--- a/zh/download-extension.html
+++ b/zh/download-extension.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>扩展下载 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><h1>扩展下载</h1><p>可在此免费下载各类 ECharts 扩展插件,获取更丰富的图表类型和增强功能</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="extension" class="page-content container"><div class="nav-container"><ul class="nav nav-tabs"><li class="active"><a href="#chart-type" data-toggle="tab">图表及组件</a></li><li><a href="#functional" data-toggle="tab">功能增强</a></li><li><a href="#framework" data-toggle="tab">框架协作</a></li><li><a href="#language" data-toggle="tab">其他语言</a></li></ul></div><div class="tab-content"><div id="chart-type" class="tab-pane active"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-gl" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/gl.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-gl" class="extension-name">ECharts GL</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">3D 图表、地理可视化、WebGL 加速渲染</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/word-cloud.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-name">字符云</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">字符云可以将文字根据不同的权重布局为大小、颜色各异的图,支持使用图片作为遮罩。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/liquidfill.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-name">水球图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Ovilia" class="extension-author-name">羡辙</a></div><div class="extension-desc">水球图是一种适合于展现单个百分比数据的图表,支持多条水波和动画。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/apache/echarts/tree/master/extension-src/bmap" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/bmap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/apache/echarts/tree/master/extension-src/bmap" class="extension-name">百度地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">百度地图扩展,可以在百度地图上展现点图,线图,热力图等。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/arcgis.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-name">ArcGIS 地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">ArcGIS 地图和 ECharts 的结合。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/leaflet-2.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-name">echarts-leaflet</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/gnijuohz" class="extension-author-name">gnijuohz</a></div><div class="extension-desc">ECharts extension for visualizing data on leaftlet.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/lzxue/echartsLayer" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/mapbox.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/lzxue/echartsLayer" class="extension-name">Mapbox 地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/lzxue" class="extension-author-name">lzxue</a></div><div class="extension-desc">Mapbox 地图和 ECharts 的结合。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/plainheart/echarts-extension-amap" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/amap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/plainheart/echarts-extension-amap" class="extension-name">高德地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/plainheart" class="extension-author-name">plainheart</a></div><div class="extension-desc">高德地图扩展,可以在高德地图上展现点图,线图,热力图等。</div></div></div></div></div></div><div id="functional" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/modularity.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-name">图的模块化</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">该插件可以对 ECharts Graph 图作社群检测,并将图中的顶点分成若干子集。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-stat" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/stat.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-stat" class="extension-name">统计工具</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/deqingli" class="extension-author-name">李德清</a></div><div class="extension-desc">统计扩展是一个专门用来进行数据分析的工具。</div></div></div></div></div></div><div id="framework" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wangshijun/angular-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wangshijun/angular-echarts" class="extension-name">angular-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/wangshijun" class="extension-author-name">wangshijun</a></div><div class="extension-desc">AngularJs bindings for Baidu ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/bornkiller/echarts-ng" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/bornkiller/echarts-ng" class="extension-name">echarts-ng</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/bornkiller" class="extension-author-name">bornkiller</a></div><div class="extension-desc">使用 Angular 封装 ECharts 为指令。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/ng-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/ng-echarts" class="extension-name">ng-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">AngularJs 版 ECharts,支持最新 ECharts3.x。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Justineo/vue-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Justineo/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Justineo" class="extension-author-name">Justineo</a></div><div class="extension-desc">ECharts component for Vue.js.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/panteng/vue-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/panteng/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/panteng" class="extension-author-name">panteng</a></div><div class="extension-desc">A custom directive for using Echarts in Vue.js apps.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/PUGE/echarts-middleware" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/PUGE/echarts-middleware" class="extension-name">echarts-middleware</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/PUGE" class="extension-author-name">PUGE</a></div><div class="extension-desc">在 Vue 中优雅高效地使用 ECharts。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hustcc/echarts-for-react" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hustcc/echarts-for-react" class="extension-name">echarts-for-react</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/hustcc" class="extension-author-name">hustcc</a></div><div class="extension-desc">一个简单的 ECharts 的 react 封装。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/somonus/react-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/somonus/react-echarts" class="extension-name">react-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/somonus" class="extension-author-name">somonus</a></div><div class="extension-desc">ECharts + react.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/re-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/re-echarts" class="extension-name">re-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">ECharts + react.</div></div></div></div></div></div><div id="language" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/pyecharts/pyecharts/" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/pyecharts/pyecharts/" class="extension-name">pyecharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/chenjiandongx" class="extension-author-name">chenjiandongx</a><a href="https://github.com/chfw" class="extension-author-name">chfw</a><a href="https://github.com/kinegratii" class="extension-author-name">kinegratii</a></div><div class="extension-desc">Python Echarts Plotting Library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yufeiminds/echarts-python" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yufeiminds/echarts-python" class="extension-name">echarts-python</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/yufeiminds" class="extension-author-name">yufeiminds</a></div><div class="extension-desc">Generate Echarts options with Python.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/napjon/krisk" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/napjon/krisk" class="extension-name">krisk</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/napjon" class="extension-author-name">napjon</a></div><div class="extension-desc">Krisk bring Echarts to Python, and helpful tools for statistical interactive visualization.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/taiyun/recharts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/taiyun/recharts" class="extension-name">recharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/taiyun" class="extension-author-name">taiyun</a></div><div class="extension-desc">recharts 提供了 ECharts 的 R 语言接口。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yihui/recharts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yihui/recharts" class="extension-name">recharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/yihui" class="extension-author-name">yihui</a></div><div class="extension-desc">An R Interface to ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-name">ECharts2Shiny</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/XD-DENG" class="extension-author-name">XD-DENG</a></div><div class="extension-desc">To insert interactive charts from ECharts into R Shiny applications.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-name">ECharts.jl</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/randyzwitch" class="extension-author-name">randyzwitch</a></div><div class="extension-desc">Julia package for the ECharts 3 visualization library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-name">purescript-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/slamdata" class="extension-author-name">slamdata</a></div><div class="extension-desc">Purescript bindings for Echarts library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-name">iOS-Echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Pluto-Y/" class="extension-author-name">Pluto-Y</a></div><div class="extension-desc">This is a highly custom chart control for iOS and Mac apps, which build with ECharts 2.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/abel533/ECharts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/abel533/ECharts" class="extension-name">ECharts-Java</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/abel533" class="extension-author-name">abel533</a></div><div class="extension-desc">这是一个针对 ECharts2.x 版本的 Java 类库,实现了所有 ECharts 中的 JSON 结构对应的 Java 对象。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/idoku/EChartsSDK" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/idoku/EChartsSDK" class="extension-name">EChartsSDK</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/idoku" class="extension-author-name">idoku</a></div><div class="extension-desc">ECharts 的 .NET 类库,从 ECharts 的 Java 类库移植。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hisune/Echarts-PHP" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hisune/Echarts-PHP" class="extension-name">Echarts-PHP</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/hisune" class="extension-author-name">hisune</a></div><div class="extension-desc">A PHP library that works as a wrapper for Echarts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/entronad/flutter_echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/entronad/flutter_echarts" class="extension-name">flutter_echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/entronad" class="extension-author-name">entronad</a></div><div class="extension-desc">A Flutter widget to use Echarts in a reactive way.</div></div></div></div></div></div></div></div><div id="submit-extension"><div class="container"><h3>提交您的 ECharts 插件</h3><p>我们会尽快与您取得联系,之后您制作的插件将会在此页面提供给广大 ECharts 用户使用。</p><p>再次感谢您对 ECharts 的支持与贡献!</p><a href="mailto:dev@echarts.apache.org" class="btn btn-main btn-thirdary"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/btn-email.png?_v_=20200710_1"><span>发邮件提交</span></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><h1>扩展下载</h1><p>可在此免费下载各类 ECharts 扩展插件,获取更丰富的图表类型和增强功能</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div id="extension" class="page-content container"><div class="nav-container"><ul class="nav nav-tabs"><li class="active"><a href="#chart-type" data-toggle="tab">图表及组件</a></li><li><a href="#functional" data-toggle="tab">功能增强</a></li><li><a href="#framework" data-toggle="tab">框架协作</a></li><li><a href="#language" data-toggle="tab">其他语言</a></li></ul></div><div class="tab-content"><div id="chart-type" class="tab-pane active"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-gl" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/gl.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-gl" class="extension-name">ECharts GL</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">3D 图表、地理可视化、WebGL 加速渲染</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/word-cloud.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-wordcloud" class="extension-name">字符云</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">字符云可以将文字根据不同的权重布局为大小、颜色各异的图,支持使用图片作为遮罩。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/liquidfill.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-liquidfill" class="extension-name">水球图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Ovilia" class="extension-author-name">羡辙</a></div><div class="extension-desc">水球图是一种适合于展现单个百分比数据的图表,支持多条水波和动画。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/apache/echarts/tree/master/extension-src/bmap" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/bmap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/apache/echarts/tree/master/extension-src/bmap" class="extension-name">百度地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">百度地图扩展,可以在百度地图上展现点图,线图,热力图等。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/arcgis.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wandergis/arcgis-echarts3" class="extension-name">ArcGIS 地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/wandergis" class="extension-author-name">wandergis</a></div><div class="extension-desc">ArcGIS 地图和 ECharts 的结合。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/leaflet-2.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/gnijuohz/echarts-leaflet" class="extension-name">echarts-leaflet</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/gnijuohz" class="extension-author-name">gnijuohz</a></div><div class="extension-desc">ECharts extension for visualizing data on leaftlet.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/lzxue/echartsLayer" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/mapbox.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/lzxue/echartsLayer" class="extension-name">Mapbox 地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/lzxue" class="extension-author-name">lzxue</a></div><div class="extension-desc">Mapbox 地图和 ECharts 的结合。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/plainheart/echarts-extension-amap" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/amap.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/plainheart/echarts-extension-amap" class="extension-name">高德地图</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/plainheart" class="extension-author-name">plainheart</a></div><div class="extension-desc">高德地图扩展,可以在高德地图上展现点图,线图,热力图等。</div></div></div></div></div></div><div id="functional" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/modularity.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-graph-modularity" class="extension-name">图的模块化</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/pissang" class="extension-author-name">沈毅</a></div><div class="extension-desc">该插件可以对 ECharts Graph 图作社群检测,并将图中的顶点分成若干子集。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/ecomfe/echarts-stat" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/stat.jpg?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/ecomfe/echarts-stat" class="extension-name">统计工具</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/deqingli" class="extension-author-name">李德清</a></div><div class="extension-desc">统计扩展是一个专门用来进行数据分析的工具。</div></div></div></div></div></div><div id="framework" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/wangshijun/angular-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/wangshijun/angular-echarts" class="extension-name">angular-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/wangshijun" class="extension-author-name">wangshijun</a></div><div class="extension-desc">AngularJs bindings for Baidu ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/bornkiller/echarts-ng" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/bornkiller/echarts-ng" class="extension-name">echarts-ng</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/bornkiller" class="extension-author-name">bornkiller</a></div><div class="extension-desc">使用 Angular 封装 ECharts 为指令。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/ng-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/ng-echarts" class="extension-name">ng-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">AngularJs 版 ECharts,支持最新 ECharts3.x。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Justineo/vue-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Justineo/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Justineo" class="extension-author-name">Justineo</a></div><div class="extension-desc">ECharts component for Vue.js.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/panteng/vue-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/panteng/vue-echarts" class="extension-name">vue-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/panteng" class="extension-author-name">panteng</a></div><div class="extension-desc">A custom directive for using Echarts in Vue.js apps.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/PUGE/echarts-middleware" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/PUGE/echarts-middleware" class="extension-name">echarts-middleware</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/PUGE" class="extension-author-name">PUGE</a></div><div class="extension-desc">在 Vue 中优雅高效地使用 ECharts。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hustcc/echarts-for-react" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hustcc/echarts-for-react" class="extension-name">echarts-for-react</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/hustcc" class="extension-author-name">hustcc</a></div><div class="extension-desc">一个简单的 ECharts 的 react 封装。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/somonus/react-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/somonus/react-echarts" class="extension-name">react-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/somonus" class="extension-author-name">somonus</a></div><div class="extension-desc">ECharts + react.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/liekkas/re-echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/liekkas/re-echarts" class="extension-name">re-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/liekkas" class="extension-author-name">liekkas</a></div><div class="extension-desc">ECharts + react.</div></div></div></div></div></div><div id="language" class="tab-pane"><div class="row"><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/pyecharts/pyecharts/" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/pyecharts/pyecharts/" class="extension-name">pyecharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/chenjiandongx" class="extension-author-name">chenjiandongx</a><a href="https://github.com/chfw" class="extension-author-name">chfw</a><a href="https://github.com/kinegratii" class="extension-author-name">kinegratii</a></div><div class="extension-desc">Python Echarts Plotting Library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yufeiminds/echarts-python" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yufeiminds/echarts-python" class="extension-name">echarts-python</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/yufeiminds" class="extension-author-name">yufeiminds</a></div><div class="extension-desc">Generate Echarts options with Python.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/napjon/krisk" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/napjon/krisk" class="extension-name">krisk</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/napjon" class="extension-author-name">napjon</a></div><div class="extension-desc">Krisk bring Echarts to Python, and helpful tools for statistical interactive visualization.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/taiyun/recharts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/taiyun/recharts" class="extension-name">recharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/taiyun" class="extension-author-name">taiyun</a></div><div class="extension-desc">recharts 提供了 ECharts 的 R 语言接口。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/yihui/recharts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/yihui/recharts" class="extension-name">recharts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/yihui" class="extension-author-name">yihui</a></div><div class="extension-desc">An R Interface to ECharts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/XD-DENG/ECharts2Shiny" class="extension-name">ECharts2Shiny</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/XD-DENG" class="extension-author-name">XD-DENG</a></div><div class="extension-desc">To insert interactive charts from ECharts into R Shiny applications.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/randyzwitch/ECharts.jl" class="extension-name">ECharts.jl</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/randyzwitch" class="extension-author-name">randyzwitch</a></div><div class="extension-desc">Julia package for the ECharts 3 visualization library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/slamdata/purescript-echarts/" class="extension-name">purescript-echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/slamdata" class="extension-author-name">slamdata</a></div><div class="extension-desc">Purescript bindings for Echarts library.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/Pluto-Y/iOS-Echarts" class="extension-name">iOS-Echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/Pluto-Y/" class="extension-author-name">Pluto-Y</a></div><div class="extension-desc">This is a highly custom chart control for iOS and Mac apps, which build with ECharts 2.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/abel533/ECharts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/abel533/ECharts" class="extension-name">ECharts-Java</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/abel533" class="extension-author-name">abel533</a></div><div class="extension-desc">这是一个针对 ECharts2.x 版本的 Java 类库,实现了所有 ECharts 中的 JSON 结构对应的 Java 对象。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/idoku/EChartsSDK" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/idoku/EChartsSDK" class="extension-name">EChartsSDK</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/idoku" class="extension-author-name">idoku</a></div><div class="extension-desc">ECharts 的 .NET 类库,从 ECharts 的 Java 类库移植。</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/hisune/Echarts-PHP" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/hisune/Echarts-PHP" class="extension-name">Echarts-PHP</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/hisune" class="extension-author-name">hisune</a></div><div class="extension-desc">A PHP library that works as a wrapper for Echarts.</div></div></div></div><div class="col-md-3 col-sm-6 extension"><div class="extension-content"><a href="https://github.com/entronad/flutter_echarts" class="extension-head"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/extensions/default-extension.png?_v_=20200710_1" class="extension-img"/></a><div class="extension-info"><a href="https://github.com/entronad/flutter_echarts" class="extension-name">flutter_echarts</a><div class="extension-author"><span>贡献者:</span><a href="https://github.com/entronad" class="extension-author-name">entronad</a></div><div class="extension-desc">A Flutter widget to use Echarts in a reactive way.</div></div></div></div></div></div></div></div><div id="submit-extension"><div class="container"><h3>提交您的 ECharts 插件</h3><p>我们会尽快与您取得联系,之后您制作的插件将会在此页面提供给广大 ECharts 用户使用。</p><p>再次感谢您对 ECharts 的支持与贡献!</p><a href="mailto:dev@echarts.apache.org" class="btn btn-main btn-thirdary"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/btn-email.png?_v_=20200710_1"><span>发邮件提交</span></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/download-map.html b/zh/download-map.html
index f1c3f52..340e224 100644
--- a/zh/download-map.html
+++ b/zh/download-map.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>地图下载 - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/vendors/prettify/prettify.css?_v_=20200710_1"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><h1>地图下载</h1><p>(暂不提供地图下载)</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div style="text-align: left; min-height: 300px; margin-top: 30px;" class="page-content container"><p>ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目前暂时停止下载服务。</p><p>建议大家使用以百度地图为底图的形式,参考<a href="https://echarts.apache.org/examples/zh/editor.html?c=map-polygon">例子</a>。</p></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><h1>地图下载</h1><p>(暂不提供地图下载)</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div><div style="text-align: left; min-height: 300px; margin-top: 30px;" class="page-content container"><p>ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家《测绘法》规定,目前暂时停止下载服务。</p><p>建议大家使用以百度地图为底图的形式,参考<a href="https://echarts.apache.org/examples/zh/editor.html?c=map-polygon">例子</a>。</p></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
$('pre').addClass('prettyprint');
prettyPrint();</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/zh/download-theme.html b/zh/download-theme.html
index deb32ec..8796927 100644
--- a/zh/download-theme.html
+++ b/zh/download-theme.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>主题下载 - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/vendors/prettify/prettify.css?_v_=20200710_1"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><div id="themes" class="container"><h1>主题下载</h1><p>让你的图表整体换个装,除了官方提供的主题之外,还可以定制你自己的主题</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="themes" class="page-content container"><div class="row"><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/vintage.js?_v_=20200710_1" download="vintage.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/vintage.png?_v_=20200710_1" alt=""></a><p>vintage</p></div><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/dark.js?_v_=20200710_1" download="dark.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/dark.png?_v_=20200710_1" alt=""></a><p>dark</p></div><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/macarons.js?_v_=20200710_1" download="macarons.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/macarons.png?_v_=20200710_1" alt=""></a><p>macarons</p></div><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/infographic.js?_v_=20200710_1" download="infographic.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/infographic.png?_v_=20200710_1" alt=""></a><p>infographic</p></div><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/shine.js?_v_=20200710_1" download="shine.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/shine.png?_v_=20200710_1" alt=""></a><p>shine</p></div><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/roma.js?_v_=20200710_1" download="roma.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/roma.png?_v_=20200710_1" alt=""></a><p>roma</p></div></div></div><section id="theme-configure-section" class="section-bg"><div class="container"><div id="theme-builder"><a href="https://echarts.apache.org/zh/theme-builder.html" class="btn btn-main btn-thirdary more-btn">定制主题</a><p>可在线编辑定义主题并进行下载</p></div></div></section><section><div class="container"><div id="theme-example"><h4>主题使用示例</h4><pre class="html"><script src="echarts.js"></script>
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><div id="themes" class="container"><h1>主题下载</h1><p>让你的图表整体换个装,除了官方提供的主题之外,还可以定制你自己的主题</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="themes" class="page-content container"><div class="row"><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/vintage.js?_v_=20200710_1" download="vintage.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/vintage.png?_v_=20200710_1" alt=""></a><p>vintage</p></div><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/dark.js?_v_=20200710_1" download="dark.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/dark.png?_v_=20200710_1" alt=""></a><p>dark</p></div><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/macarons.js?_v_=20200710_1" download="macarons.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/macarons.png?_v_=20200710_1" alt=""></a><p>macarons</p></div><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/infographic.js?_v_=20200710_1" download="infographic.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/infographic.png?_v_=20200710_1" alt=""></a><p>infographic</p></div><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/shine.js?_v_=20200710_1" download="shine.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/shine.png?_v_=20200710_1" alt=""></a><p>shine</p></div><div class="col-sm-4 theme"><a href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/roma.js?_v_=20200710_1" download="roma.js" target="_blank" class="download-theme"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/thumb/roma.png?_v_=20200710_1" alt=""></a><p>roma</p></div></div></div><section id="theme-configure-section" class="section-bg"><div class="container"><div id="theme-builder"><a href="https://echarts.apache.org/zh/theme-builder.html" class="btn btn-main btn-thirdary more-btn">定制主题</a><p>可在线编辑定义主题并进行下载</p></div></div></section><section><div class="container"><div id="theme-example"><h4>主题使用示例</h4><pre class="html"><script src="echarts.js"></script>
<!-- 引入 vintage 主题 -->
<script src="theme/vintage.js"></script>
<script>
@@ -17,7 +17,7 @@
...
});
</script>
-</pre></div></div></section><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
+</pre></div></div></section><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/prettify.min.js"></script><script src="https://cdn.jsdelivr.net/npm/code-prettify@0.1.0/src/lang-css.js"></script><script>document.getElementById('nav-download').className = 'active';
$('pre').addClass('prettyprint');
prettyPrint();
diff --git a/zh/download.html b/zh/download.html
index b1660a8..a77f5e8 100644
--- a/zh/download.html
+++ b/zh/download.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>下载 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-src.zip</li></ol><h4>License</h4><p>Apache ECharts 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下一步</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/download.js?_v_=a291df3a02"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-src.zip</li></ol><h4>License</h4><p>Apache ECharts 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下一步</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/download.js?_v_=13b5fd7540"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
//- $('.download-echarts').click(function (e) {
//- var el = document.createElement('div');
diff --git a/zh/download3.html b/zh/download3.html
index 63bad0e..cfdefd7 100644
--- a/zh/download3.html
+++ b/zh/download3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>下载 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-src.zip</li></ol><h4>License</h4><p>Apache ECharts 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder3.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下一步</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/download.js?_v_=a291df3a02"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><h1>下载</h1></div><div id="download-main" class="page-content container"><div class="d-section-version d-section"><h3 class="first">方法一:从下载的源代码或编译产物安装</h3><table id="download-table" class="table"><tr><th>版本</th><th>发布日期</th><th>从镜像网站下载源码</th><th>从 GitHub 下载编译产物</th></tr></table><div class="checksum"><p><strong>注意:</strong>如果从镜像网站下载,请检查 <a href="https://www.apache.org/dev/release-signing#sha-checksum">SHA-512</a> 并且检验确认 <a href="https://www.apache.org/dev/release-signing#openpgp">OpenPGP</a> 与 <a href="https://www.apache.org">Apache 主站</a>的签名一致。链接在上面的 Source 旁。这个 <a href="https://www.apache.org/dist/echarts/KEYS">KEYS</a> 文件包含了用于签名发布版的公钥。如果可能的话,建议使用<a href="https://www.apache.org/dev/release-signing#web-of-trust">可信任的网络(web of trust)</a>确认 KEYS 的同一性。</p><h4>使用 GPG 验证 ECharts 发布版本</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.asc</li><li>下载 <a href="https://www.apache.org/dist/echarts/KEYS">ECharts KEYS</a></li><li>gpg –import KEYS</li><li>gpg –verify apache-echarts-X.Y.Z-src.zip.asc</li></ol><h4>使用 SHA-512 验证</h4><ol><li>从镜像网站下载 apache-echarts-X.Y.Z-src.zip</li><li>从 <a href="https://www.apache.org/dist/echarts/">Apache</a> 下载 checksum apache-echarts-X.Y.Z-src.zip.sha512</li><li>shasum -a 512 apache-echarts-X.Y.Z-src.zip</li></ol><h4>License</h4><p>Apache ECharts 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 发布</p></div><h3>方法二:从 npm 安装</h3><p><code>npm install echarts</code></p><h3>方法三:选择需要的模块,在线定制下载</h3><a href="builder3.html" class="btn btn-main btn-thirdary more-btn">在线定制</a><p class="center">可自由选择所需图表和组件进行打包下载</p><h3>下一步</h3><p><a href="./tutorial.html">5 分钟上手 ECharts</a></p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/download.js?_v_=13b5fd7540"></script><script type="text/javascript">document.getElementById('nav-download').className = 'active';
//- $('.download-echarts').click(function (e) {
//- var el = document.createElement('div');
diff --git a/zh/events.html b/zh/events.html
index 014c4c4..ba9f254 100644
--- a/zh/events.html
+++ b/zh/events.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>活动 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Apache ECharts - 活动"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="page-events" class="page-main"><div class="page-info"><div class="container"><h1>活动</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>进行中的活动</h2><a href="./events/2021-07-05-apachecon.html" class="event"><picture><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.jpeg?_v_=20200710_1" alt="ApacheCon Asia 2021" class="lazy"></picture></a><h2>过期的活动</h2><a href="./events/2021-05-13-iscas.html" class="event"><picture><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.jpeg?_v_=20200710_1" alt="开源软件供应链点亮计划 - 暑期 2021" class="lazy"></picture></a><a href="https://echarts-5-live.bj.bcebos.com/echarts-5-event.html?ref=ec-event" class="event"><picture><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20200128-apache-echarts-5.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20200128-apache-echarts-5.png?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20200128-apache-echarts-5.png?_v_=20200710_1" alt="Apache ECharts 5 Official Release" class="lazy"></picture></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script>window.lazyLoadOptions = {
+<!--[if (gt IE 8)|!(IE)]><body class="Apache ECharts - 活动"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="page-events" class="page-main"><div class="page-info"><div class="container"><h1>活动</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><h2>进行中的活动</h2><a href="./events/2021-07-05-apachecon.html" class="event"><picture><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.jpeg?_v_=20200710_1" alt="ApacheCon Asia 2021" class="lazy"></picture></a><h2>过期的活动</h2><a href="./events/2021-05-13-iscas.html" class="event"><picture><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.jpeg?_v_=20200710_1" alt="开源软件供应链点亮计划 - 暑期 2021" class="lazy"></picture></a><a href="https://echarts-5-live.bj.bcebos.com/echarts-5-event.html?ref=ec-event" class="event"><picture><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20200128-apache-echarts-5.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20200128-apache-echarts-5.png?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20200128-apache-echarts-5.png?_v_=20200710_1" alt="Apache ECharts 5 Official Release" class="lazy"></picture></a></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script>window.lazyLoadOptions = {
elements_selector: ".lazy"
};
document.getElementById('nav-contribute').className = 'active';</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
diff --git a/zh/events/2021-05-13-iscas.html b/zh/events/2021-05-13-iscas.html
index b37d251..82abf23 100644
--- a/zh/events/2021-05-13-iscas.html
+++ b/zh/events/2021-05-13-iscas.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>活动 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Apache ECharts - 活动"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><div class="container"><h1>开源软件供应链点亮计划 - 暑期 2021</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><div><a href="../events.html">返回活动列表</a></div><div class="event event-detail-img"><picture><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.jpeg?_v_=20200710_1" alt="开源软件供应链点亮计划 - 暑期 2021" class="lazy"></picture></div><h3>活动说明</h3><p><a href="https://summer.iscas.ac.cn/#/homepage" target="_blank">开源软件供应链点亮计划</a>鼓励大家关注开源软件和开源社区,致力于培养和发掘更多优秀的开发者。我们鼓励研究人员、开源爱好者、在校师生参与开源软件的开发与维护,促进开源软件的发展和优秀开源软件社区建设,增加开源项目的活跃度,推进开源生态的发展。</p><p>主办方会资助最终有学生申请的项目,根据难度不同,对应税前奖金分别为高(12000 元)、中(9000 元)、低(6000 元)(注:奖金数额为税前人民币金额),具体请参考开源软件供应链点亮计划官方说明。</p><p>社区针对每个项目需要指定一名社区导师,在这一过程中,可以在导师的帮助下对 Apache ECharts 项目开发有更好的了解。</p><h3>活动报名</h3><p>请前往<a href="https://summer.iscas.ac.cn/help/student/" target="_blank">活动官网</a>报名或了解更多信息。</p><h3>项目列表</h3><p>申请者可以在以下列表中选一个项目完成:</p><table><tr><th>序号</th><th>名称</th><th>难度</th><th style="width: 40%">描述</th><th>产出</th><th>要求</th></tr><tr><td>#1</td><td>关系图支持拖动数据点</td><td>低</td><td>支持关系图 layout: none 情况下的数据点拖动功能。相关 issue:<a href="https://github.com/apache/echarts/issues/14510" target="_blank">#14510</a></td><td>实现关系图 layout: none 情况下的数据点拖动功能</td><td>TypeScript</td></tr><tr><td>#2</td><td>关系图可配置是否自动缩放成视图大小</td><td>低</td><td>在 layout: none 布局下,允许开发者通过配置项关闭节点位置的调整,保证开发者给定的位置即为最终渲染的坐标。相关 issue:<a href="https://github.com/apache/echarts/issues/13516" target="_blank">#13516</a></td><td>添加一个配置项,开启后可以实现坐标轴标签的交替显示</td><td>TypeScript</td></tr><tr><td>#3</td><td>Apache ECharts Issue Helper</td><td>中</td><td><a href="https://github.com/ecomfe/echarts-issue-helper" target="_blank">Apache ECharts Issue Helper</a> 是用来生成 GitHub Issue 的表单工具,通过表单而非 Markdown 的形式能更好地确保提问者给出必要的信息。但是目前功能比较有限,希望增强 Markdown 相关功能</td><td><ol><li>支持 Markdown 格式(含代码)高亮</li><li>支持上传图片</li><li>支持 Markdown 结果预览</li></ol></td><td>TypeScript;Vue.js(可以现学)</td></tr><tr><td>#4</td><td>官网示例支持第三方编辑器</td><td>中</td><td>Apache ECharts 官方网站示例部分目前使用自有的代码编辑器,社区希望同样提供在主要第三方在线编辑器(StackBiz、 JSFiddle、 CodePen、 CodeSandbox)中编辑示例的功能</td><td><ol><li>在Apache ECharts 官网示例组件中添加 ”前往 CodeSandbox / StackBlitz / jsfiddle / CodePen 编辑“的按钮</li><li>调用第三方在线编辑器的 API,在跳转时将该示例所使用的代码传入</li></ol></td><td>JavaScript</td></tr><tr><td>#5</td><td>河流图的非对称绘制</td><td>中</td><td>Apache ECharts 的河流图目前使用对称绘制的方法进行绘制(整体图案沿 x 轴对称),希望通过 wiggle 算法实现非对称的绘制以增加河流图的可观性。相关 issue:<a href="https://github.com/apache/echarts/issues/14643" target="_blank">#14643</a></td><td>添加一个配置项,开启后可以实现坐标轴标签的交替显示</td><td>TypeScript;对图形学有简单了解(需要阅读算法论文并实现)</td></tr><tr><td>#6</td><td>扩展标签的防重叠</td><td>高</td><td>Apache ECharts 现在在饼图等某些特定的图上提供了标签的防重叠布局算法。现在希望能够增加一个更加通用的布局算法,通过迭代搜寻标签可以放置的位置,寻找一个较优的位置,解决散点图等图中数据量比较多的时候的标签重叠问题。可以参考已有的论文和实现:1. An Empirical Study of Algorithms for Point-Feature Label Placement 2. <a href="https://github.com/tinker10/D3-Labeler" target="_blank">https://github.com/tinker10/D3-Labeler</a> 3. <a href="https://cran.r-project.org/web/packages/ggrepel/vignettes/ggrepel.html" target="_blank">https://cran.r-project.org/web/packages/ggrepel/vignettes/ggrepel.html</a></td><td><ol><li>添加一个配置项,开启后可以实现标签的只能防重叠</li><li>防重叠的算法能够做到性能,实现复杂度(代码量)和最终效果之间的平衡</li></ol></td><td>TypeScript</td></tr><tr><td>#7</td><td>坐标轴标签实现交错显示从而优化标签的重叠问题</td><td>高</td><td>现在 Apache ECharts 的坐标轴在标签过多的时候只能做到隐藏部分会重叠的标签,但是某些场景下可以做到标签的上下交错显示而不用隐藏,现在希望能够添加一个配置,用户开启后可以智能得把重叠的标签往上/下移(如果是 Y 轴则是左/右)</td><td>加一个配置项,开启后可以实现坐标轴标签的交替显示</td><td>TypeScript;需要阅读算法论文并实现</td></tr><tr><td>#8</td><td>关系图节点自身的循环引用</td><td>高</td><td>关系图节点可以指向自己,目前尚未支持这一功能。相关 issue:<a href="https://github.com/apache/echarts/issues/12951" target="_blank">#12951</a></td><td><ol><li>关系图节点可以指向自己</li><li>可以配置参数控制连线位置</li><li>支持多条指向自己的连线</li></ol></td><td>TypeScript</td></tr></table><h3>寻求帮助</h3><p>如果有活动形式相关的问题,请咨询<a href="https://summer.iscas.ac.cn/help/contactus/">活动主办方</a>。如有和项目相关的问题,可以在 Apache ECharts <a href="mailto:dev@echarts.apache.org">邮件列表</a>中和我们交流。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script>window.lazyLoadOptions = {
+<!--[if (gt IE 8)|!(IE)]><body class="Apache ECharts - 活动"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><div class="container"><h1>开源软件供应链点亮计划 - 暑期 2021</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><div><a href="../events.html">返回活动列表</a></div><div class="event event-detail-img"><picture><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210513-iscas.jpeg?_v_=20200710_1" alt="开源软件供应链点亮计划 - 暑期 2021" class="lazy"></picture></div><h3>活动说明</h3><p><a href="https://summer.iscas.ac.cn/#/homepage" target="_blank">开源软件供应链点亮计划</a>鼓励大家关注开源软件和开源社区,致力于培养和发掘更多优秀的开发者。我们鼓励研究人员、开源爱好者、在校师生参与开源软件的开发与维护,促进开源软件的发展和优秀开源软件社区建设,增加开源项目的活跃度,推进开源生态的发展。</p><p>主办方会资助最终有学生申请的项目,根据难度不同,对应税前奖金分别为高(12000 元)、中(9000 元)、低(6000 元)(注:奖金数额为税前人民币金额),具体请参考开源软件供应链点亮计划官方说明。</p><p>社区针对每个项目需要指定一名社区导师,在这一过程中,可以在导师的帮助下对 Apache ECharts 项目开发有更好的了解。</p><h3>活动报名</h3><p>请前往<a href="https://summer.iscas.ac.cn/help/student/" target="_blank">活动官网</a>报名或了解更多信息。</p><h3>项目列表</h3><p>申请者可以在以下列表中选一个项目完成:</p><table><tr><th>序号</th><th>名称</th><th>难度</th><th style="width: 40%">描述</th><th>产出</th><th>要求</th></tr><tr><td>#1</td><td>关系图支持拖动数据点</td><td>低</td><td>支持关系图 layout: none 情况下的数据点拖动功能。相关 issue:<a href="https://github.com/apache/echarts/issues/14510" target="_blank">#14510</a></td><td>实现关系图 layout: none 情况下的数据点拖动功能</td><td>TypeScript</td></tr><tr><td>#2</td><td>关系图可配置是否自动缩放成视图大小</td><td>低</td><td>在 layout: none 布局下,允许开发者通过配置项关闭节点位置的调整,保证开发者给定的位置即为最终渲染的坐标。相关 issue:<a href="https://github.com/apache/echarts/issues/13516" target="_blank">#13516</a></td><td>添加一个配置项,开启后可以实现坐标轴标签的交替显示</td><td>TypeScript</td></tr><tr><td>#3</td><td>Apache ECharts Issue Helper</td><td>中</td><td><a href="https://github.com/ecomfe/echarts-issue-helper" target="_blank">Apache ECharts Issue Helper</a> 是用来生成 GitHub Issue 的表单工具,通过表单而非 Markdown 的形式能更好地确保提问者给出必要的信息。但是目前功能比较有限,希望增强 Markdown 相关功能</td><td><ol><li>支持 Markdown 格式(含代码)高亮</li><li>支持上传图片</li><li>支持 Markdown 结果预览</li></ol></td><td>TypeScript;Vue.js(可以现学)</td></tr><tr><td>#4</td><td>官网示例支持第三方编辑器</td><td>中</td><td>Apache ECharts 官方网站示例部分目前使用自有的代码编辑器,社区希望同样提供在主要第三方在线编辑器(StackBiz、 JSFiddle、 CodePen、 CodeSandbox)中编辑示例的功能</td><td><ol><li>在Apache ECharts 官网示例组件中添加 ”前往 CodeSandbox / StackBlitz / jsfiddle / CodePen 编辑“的按钮</li><li>调用第三方在线编辑器的 API,在跳转时将该示例所使用的代码传入</li></ol></td><td>JavaScript</td></tr><tr><td>#5</td><td>河流图的非对称绘制</td><td>中</td><td>Apache ECharts 的河流图目前使用对称绘制的方法进行绘制(整体图案沿 x 轴对称),希望通过 wiggle 算法实现非对称的绘制以增加河流图的可观性。相关 issue:<a href="https://github.com/apache/echarts/issues/14643" target="_blank">#14643</a></td><td>添加一个配置项,开启后可以实现坐标轴标签的交替显示</td><td>TypeScript;对图形学有简单了解(需要阅读算法论文并实现)</td></tr><tr><td>#6</td><td>扩展标签的防重叠</td><td>高</td><td>Apache ECharts 现在在饼图等某些特定的图上提供了标签的防重叠布局算法。现在希望能够增加一个更加通用的布局算法,通过迭代搜寻标签可以放置的位置,寻找一个较优的位置,解决散点图等图中数据量比较多的时候的标签重叠问题。可以参考已有的论文和实现:1. An Empirical Study of Algorithms for Point-Feature Label Placement 2. <a href="https://github.com/tinker10/D3-Labeler" target="_blank">https://github.com/tinker10/D3-Labeler</a> 3. <a href="https://cran.r-project.org/web/packages/ggrepel/vignettes/ggrepel.html" target="_blank">https://cran.r-project.org/web/packages/ggrepel/vignettes/ggrepel.html</a></td><td><ol><li>添加一个配置项,开启后可以实现标签的只能防重叠</li><li>防重叠的算法能够做到性能,实现复杂度(代码量)和最终效果之间的平衡</li></ol></td><td>TypeScript</td></tr><tr><td>#7</td><td>坐标轴标签实现交错显示从而优化标签的重叠问题</td><td>高</td><td>现在 Apache ECharts 的坐标轴在标签过多的时候只能做到隐藏部分会重叠的标签,但是某些场景下可以做到标签的上下交错显示而不用隐藏,现在希望能够添加一个配置,用户开启后可以智能得把重叠的标签往上/下移(如果是 Y 轴则是左/右)</td><td>加一个配置项,开启后可以实现坐标轴标签的交替显示</td><td>TypeScript;需要阅读算法论文并实现</td></tr><tr><td>#8</td><td>关系图节点自身的循环引用</td><td>高</td><td>关系图节点可以指向自己,目前尚未支持这一功能。相关 issue:<a href="https://github.com/apache/echarts/issues/12951" target="_blank">#12951</a></td><td><ol><li>关系图节点可以指向自己</li><li>可以配置参数控制连线位置</li><li>支持多条指向自己的连线</li></ol></td><td>TypeScript</td></tr></table><h3>寻求帮助</h3><p>如果有活动形式相关的问题,请咨询<a href="https://summer.iscas.ac.cn/help/contactus/">活动主办方</a>。如有和项目相关的问题,可以在 Apache ECharts <a href="mailto:dev@echarts.apache.org">邮件列表</a>中和我们交流。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script>window.lazyLoadOptions = {
elements_selector: ".lazy"
};
document.getElementById('nav-contribute').className = 'active';</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
diff --git a/zh/events/2021-07-05-apachecon.html b/zh/events/2021-07-05-apachecon.html
index d41c89a..6b803d5 100644
--- a/zh/events/2021-07-05-apachecon.html
+++ b/zh/events/2021-07-05-apachecon.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>活动 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="Apache ECharts - 活动"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><div class="container"><h1>ApacheCon Asia 2021</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><div><a href="../events.html">返回活动列表</a></div><div class="event event-detail-img"><picture><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.jpeg?_v_=20200710_1" alt="ApacheCon Asia 2021" class="lazy"></picture></div><h3>今年八月 Apache 亚洲峰会来到您的客厅!</h3><p>足不出户,就可以参加 Apache 技术盛宴,持续三天的 Apache 项目内容涵盖数十个类别,从大数据到金融科技再到搜索再到大家熟悉的 Tomcat 等。</p><p>其中,<a href="https://apachecon.com/acasia2021/zh/tracks/datavisualization.html">数据可视化论坛</a>在 2021.08.06,演讲主题包括:</p><table><tr><td>13:30 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1090.html">为什么 Apache Superset 选择使用 Apache ECharts?</a></td><td>英文演讲</td><td>Ville Brofeldt</td></tr><tr><td>14:10 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1087.html">Apache ECharts 的脏矩形渲染实践</a></td><td>英文演讲</td><td>Wenli Zhang</td></tr><tr><td>14:50 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1093.html">16 毫秒的挑战:图表库渲染优化</a></td><td>中文演讲</td><td>Shuang Su</td></tr><tr><td>15:30 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1094.html">ECharts 的乐趣:我们如何在特斯拉使用它!</a></td><td>中文演讲</td><td>Fanchao Meng</td></tr><tr><td>16:10 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1092.html">使用 ECharts 呈现社区活动的渲染图</a></td><td>中文演讲</td><td>Sun Yi</td></tr><tr><td>16:50 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1091.html">echarts4r:ECharts 与 R 编程语言的整合</a></td><td>英文演讲</td><td>John Coene</td></tr></table><h3>免费注册</h3><p>请前往<a href="https://hopin.com/events/apachecon-asia-2021">Hopin 平台</a>注册,或在<a href="https://apachecon.com/acasia2021/index.html">官网</a>了解更多关于本次会议的介绍。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script>window.lazyLoadOptions = {
+<!--[if (gt IE 8)|!(IE)]><body class="Apache ECharts - 活动"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><div class="container"><h1>ApacheCon Asia 2021</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="container"><div><a href="../events.html">返回活动列表</a></div><div class="event event-detail-img"><picture><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.webp?_v_=20200710_1" type="image/webp" class="lazy"><source data-srcset="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.jpeg?_v_=20200710_1" type="image/jpeg" class="lazy"><img data-src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/event/20210705-apachecon.jpeg?_v_=20200710_1" alt="ApacheCon Asia 2021" class="lazy"></picture></div><h3>今年八月 Apache 亚洲峰会来到您的客厅!</h3><p>足不出户,就可以参加 Apache 技术盛宴,持续三天的 Apache 项目内容涵盖数十个类别,从大数据到金融科技再到搜索再到大家熟悉的 Tomcat 等。</p><p>其中,<a href="https://apachecon.com/acasia2021/zh/tracks/datavisualization.html">数据可视化论坛</a>在 2021.08.06,演讲主题包括:</p><table><tr><td>13:30 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1090.html">为什么 Apache Superset 选择使用 Apache ECharts?</a></td><td>英文演讲</td><td>Ville Brofeldt</td></tr><tr><td>14:10 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1087.html">Apache ECharts 的脏矩形渲染实践</a></td><td>英文演讲</td><td>Wenli Zhang</td></tr><tr><td>14:50 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1093.html">16 毫秒的挑战:图表库渲染优化</a></td><td>中文演讲</td><td>Shuang Su</td></tr><tr><td>15:30 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1094.html">ECharts 的乐趣:我们如何在特斯拉使用它!</a></td><td>中文演讲</td><td>Fanchao Meng</td></tr><tr><td>16:10 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1092.html">使用 ECharts 呈现社区活动的渲染图</a></td><td>中文演讲</td><td>Sun Yi</td></tr><tr><td>16:50 GMT+8</td><td><a href="https://apachecon.com/acasia2021/zh/sessions/1091.html">echarts4r:ECharts 与 R 编程语言的整合</a></td><td>英文演讲</td><td>John Coene</td></tr></table><h3>免费注册</h3><p>请前往<a href="https://hopin.com/events/apachecon-asia-2021">Hopin 平台</a>注册,或在<a href="https://apachecon.com/acasia2021/index.html">官网</a>了解更多关于本次会议的介绍。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script>window.lazyLoadOptions = {
elements_selector: ".lazy"
};
document.getElementById('nav-contribute').className = 'active';</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
diff --git a/zh/faq.html b/zh/faq.html
index 76878a4..bbc4813 100644
--- a/zh/faq.html
+++ b/zh/faq.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,9 +7,9 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>FAQ - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><div class="container"><h1>FAQ</h1><p>常见问题的解答</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="faq-page" class="page-content single-page"><div class="page-nav"><h4>常见问题</h4><ul></ul></div><div class="page-detail"><h2 id="ask-questions">通用问题</h2><h3>有技术问题怎么办?</h3><p>1)建议您在提问前,大致阅读一下<a href="https://echarts.apache.org/zh/option.html">配置项手册</a>左侧导航,了解 ECharts 有哪些配置项,并且在相关的组件下查找是否有实现您需要功能的配置项;</p><p>2)查看本页常见问题的解答;</p><p>3)建议在 <a href="https://www.makeapie.com/editor.html">ECharts Gallery</a> 上添加图表,复现你的问题,如果无法使用代码描述需求,可以尝试提供设计稿或画个草图;</p><p>4)推荐在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问,附上图表链接。</p><h3>ECharts 可以免费商用吗?</h3><p>可以,ECharts 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 开源。</p><h2 id="axis">坐标轴</h2><h3>坐标轴标签显示空间不够怎么办?</h3><p>可以用 <a href="https://echarts.apache.org/zh/option.html#xAxis.interval">interval</a> 控制每隔多少显示标签,设为 <code>0</code> 则显示所有标签。</p><p>或者,可以设置 <a href="https://echarts.apache.org/zh/option.html#yAxis.axisLabel.rotate">axisLabel.rotate</a>,将标签旋转一定角度。</p><h3>把坐标轴设置在右侧好像没有效果?</h3><p>需要将 <a href="https://echarts.apache.org/zh/option.html#yAxis.axisLine.onZero">onZero</a> 设为 <code>false</code> 才行。</p><h3>如何强制显示坐标轴第一个/最后一个标签?</h3><p>ECharts 3.5.2 版本起,支持 <a href="https://echarts.apache.org/zh/option.html#xAxis.axisLabel.showMinLabel">axisLabel.showMinLabel</a> 以及 <a href="https://echarts.apache.org/zh/option.html#xAxis.axisLabel.showMaxLabel">axisLabel.showMaxLabel</a>,分别用来控制第一个/最后一个标签是否强制显示,设为 <code>true</code> 则强制显示。</p><p>如果不方便更新版本,可以参考<a href="https://www.makeapie.com/editor.html?c=xry06afSje">这个例子</a>实现同样的效果。</p><h2 id="legend">图例 legend</h2><h3>图例区域太大导致遮挡住图表怎么办?</h3><p>可以设置 <a href="https://echarts.apache.org/zh/option.html#grid">grid</a> 控制图表区域位置。例如将 <code>grid.top</code> 设置得大一些,可以将绘图区域下移。</p><p>在未来的版本中,我们计划会将布局做得更智能,自动处理这些遮挡问题。</p><h2 id="line-chart">折线图</h2><h3>坐标轴刻度好像和数据不匹配?</h3><p>请检查一下是否设置了 <code>stack</code>,如果不是想做堆积折线图的话,应该将其去掉。</p><h2 id="bar-chart">柱状图</h2><h3>为什么数据值很小的时候,y 轴的刻度会消失?</h3><p>ECharts 3.5.2 版本修复了该问题。</p><h2 id="map-chart">地图</h2><h3>图表上的省份名称重叠,如何修改名称的位置?</h3><p>可以修改地图文件(JS 或 JSON)中对应省份的 <code>cp</code> 坐标,或者通过 <code>echarts.getMap('china')</code> 修改已加载的地图数据。</p><p>更详细的做法请参考:<a href="https://github.com/apache/echarts/issues/4379#issuecomment-257765948">GitHub</a></p><h3>其他国家的地图在哪里下载?</h3><p>可以在<a href="https://github.com/echarts-maps/echarts-countries-js">这里</a>下载到其他国家的地图信息。</p><h3>如何获取地图的缩放事件?</h3><p>首先,需要将系列的 <a href="https://echarts.apache.org/zh/option.html#series-map.roam">roam</a> 设置为 <code>true</code>,然后可以监听 <code>'georoam'</code> 事件。例:</p><pre><code>myChart.on('georoam', function (params) {
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><div class="container"><h1>FAQ</h1><p>常见问题的解答</p><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="faq-page" class="page-content single-page"><div class="page-nav"><h4>常见问题</h4><ul></ul></div><div class="page-detail"><h2 id="ask-questions">通用问题</h2><h3>有技术问题怎么办?</h3><p>1)建议您在提问前,大致阅读一下<a href="https://echarts.apache.org/zh/option.html">配置项手册</a>左侧导航,了解 ECharts 有哪些配置项,并且在相关的组件下查找是否有实现您需要功能的配置项;</p><p>2)查看本页常见问题的解答;</p><p>3)建议在 <a href="https://www.makeapie.com/editor.html">ECharts Gallery</a> 上添加图表,复现你的问题,如果无法使用代码描述需求,可以尝试提供设计稿或画个草图;</p><p>4)推荐在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问,附上图表链接。</p><h3>ECharts 可以免费商用吗?</h3><p>可以,ECharts 基于 <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License 2.0</a> 开源。</p><h2 id="axis">坐标轴</h2><h3>坐标轴标签显示空间不够怎么办?</h3><p>可以用 <a href="https://echarts.apache.org/zh/option.html#xAxis.interval">interval</a> 控制每隔多少显示标签,设为 <code>0</code> 则显示所有标签。</p><p>或者,可以设置 <a href="https://echarts.apache.org/zh/option.html#yAxis.axisLabel.rotate">axisLabel.rotate</a>,将标签旋转一定角度。</p><h3>把坐标轴设置在右侧好像没有效果?</h3><p>需要将 <a href="https://echarts.apache.org/zh/option.html#yAxis.axisLine.onZero">onZero</a> 设为 <code>false</code> 才行。</p><h3>如何强制显示坐标轴第一个/最后一个标签?</h3><p>ECharts 3.5.2 版本起,支持 <a href="https://echarts.apache.org/zh/option.html#xAxis.axisLabel.showMinLabel">axisLabel.showMinLabel</a> 以及 <a href="https://echarts.apache.org/zh/option.html#xAxis.axisLabel.showMaxLabel">axisLabel.showMaxLabel</a>,分别用来控制第一个/最后一个标签是否强制显示,设为 <code>true</code> 则强制显示。</p><p>如果不方便更新版本,可以参考<a href="https://www.makeapie.com/editor.html?c=xry06afSje">这个例子</a>实现同样的效果。</p><h2 id="legend">图例 legend</h2><h3>图例区域太大导致遮挡住图表怎么办?</h3><p>可以设置 <a href="https://echarts.apache.org/zh/option.html#grid">grid</a> 控制图表区域位置。例如将 <code>grid.top</code> 设置得大一些,可以将绘图区域下移。</p><p>在未来的版本中,我们计划会将布局做得更智能,自动处理这些遮挡问题。</p><h2 id="line-chart">折线图</h2><h3>坐标轴刻度好像和数据不匹配?</h3><p>请检查一下是否设置了 <code>stack</code>,如果不是想做堆积折线图的话,应该将其去掉。</p><h2 id="bar-chart">柱状图</h2><h3>为什么数据值很小的时候,y 轴的刻度会消失?</h3><p>ECharts 3.5.2 版本修复了该问题。</p><h2 id="map-chart">地图</h2><h3>图表上的省份名称重叠,如何修改名称的位置?</h3><p>可以修改地图文件(JS 或 JSON)中对应省份的 <code>cp</code> 坐标,或者通过 <code>echarts.getMap('china')</code> 修改已加载的地图数据。</p><p>更详细的做法请参考:<a href="https://github.com/apache/echarts/issues/4379#issuecomment-257765948">GitHub</a></p><h3>其他国家的地图在哪里下载?</h3><p>可以在<a href="https://github.com/echarts-maps/echarts-countries-js">这里</a>下载到其他国家的地图信息。</p><h3>如何获取地图的缩放事件?</h3><p>首先,需要将系列的 <a href="https://echarts.apache.org/zh/option.html#series-map.roam">roam</a> 设置为 <code>true</code>,然后可以监听 <code>'georoam'</code> 事件。例:</p><pre><code>myChart.on('georoam', function (params) {
console.log(params);
-});</code></pre><p>参见这个<a href="https://www.makeapie.com/editor.html?c=xHyqn_rQ6g">完整的例子</a>。</p><h3>如何制作自定义地图?</h3><p>ECharts 地图在地图坐标的基础上进行过<a href="https://github.com/apache/echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">额外的编码</a>。可以使用 <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus</a> 工具,上传自定义的 geojson 文件,生成 ECharts 可以使用的地图文件。</p><h2 id="baidu-map">百度地图</h2><h3>如何结合百度地图使用 ECharts?</h3><ol><li>引入 <code>echarts.js</code>、<code>bmap.js</code> 以及 <code>https://api.map.baidu.com/api?v=2.0&ak=这里填在百度开发平台注册得到的 access key</code>;</li><li>在 <code>option</code> 中设置 <code>bmap</code>,参考<a href="https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-bmap">这个例子</a>;</li><li>如需获得百度地图实例,可以通过 <code>chart.getModel().getComponent('bmap').getBMap()</code>,然后根据<a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">百度地图 API</a>做进一步设置。</li></ol><p><a href="https://www.makeapie.com/explore.html">Gallery</a> 上有更多百度地图的例子,可作为参考。</p><h2 id="gauge-chart">仪表盘</h2><h3>怎么设置仪表盘颜色?</h3><p>可以使用 <a href="https://echarts.apache.org/zh/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a> 设置。</p><h2 id="event">事件处理</h2><h3>如何获取图表点击等事件?</h3><p>参考<a href="https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA">官网教程</a>。ECharts 支持的事件类型请参考<a href="https://echarts.apache.org/zh/api.html#events">相关 API</a>。</p><h2 id="others">其他</h2><h3>图表为什么不显示?</h3><p>你可以检查以下情况:</p><ul><li><code>echarts.js</code> 是否正常被加载;</li><li><code>echarts</code> 变量是否存在;</li><li>调用 <code>echarts.init</code> 的时候,DOM 容器是否有宽高。</li></ul><h3>ECharts 有哪些学习资料?</h3><p>官网是最好的学习平台。此外,在 <a href="https://www.makeapie.com">ECharts Gallery</a> 上学习别人的作品也是一个不错的选择。</p><p>ECharts 相关项目及资源请参见 <a href="https://github.com/ecomfe/awesome-echarts">awesome-echarts</a>。</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+});</code></pre><p>参见这个<a href="https://www.makeapie.com/editor.html?c=xHyqn_rQ6g">完整的例子</a>。</p><h3>如何制作自定义地图?</h3><p>ECharts 地图在地图坐标的基础上进行过<a href="https://github.com/apache/echarts/blob/8eeb7e5abe207d0536c62ce1f4ddecc6adfdf85e/src/util/mapData/rawData/encode.js">额外的编码</a>。可以使用 <a href="https://github.com/giscafer/mapshaper-plus">mapshaper-plus</a> 工具,上传自定义的 geojson 文件,生成 ECharts 可以使用的地图文件。</p><h2 id="baidu-map">百度地图</h2><h3>如何结合百度地图使用 ECharts?</h3><ol><li>引入 <code>echarts.js</code>、<code>bmap.js</code> 以及 <code>https://api.map.baidu.com/api?v=2.0&ak=这里填在百度开发平台注册得到的 access key</code>;</li><li>在 <code>option</code> 中设置 <code>bmap</code>,参考<a href="https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-bmap">这个例子</a>;</li><li>如需获得百度地图实例,可以通过 <code>chart.getModel().getComponent('bmap').getBMap()</code>,然后根据<a href="https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html">百度地图 API</a>做进一步设置。</li></ol><p><a href="https://www.makeapie.com/explore.html">Gallery</a> 上有更多百度地图的例子,可作为参考。</p><h2 id="gauge-chart">仪表盘</h2><h3>怎么设置仪表盘颜色?</h3><p>可以使用 <a href="https://echarts.apache.org/zh/option.html#series-gauge.axisLine.lineStyle.color">axisLine.lineStyle.color</a> 设置。</p><h2 id="event">事件处理</h2><h3>如何获取图表点击等事件?</h3><p>参考<a href="https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA">官网教程</a>。ECharts 支持的事件类型请参考<a href="https://echarts.apache.org/zh/api.html#events">相关 API</a>。</p><h2 id="others">其他</h2><h3>图表为什么不显示?</h3><p>你可以检查以下情况:</p><ul><li><code>echarts.js</code> 是否正常被加载;</li><li><code>echarts</code> 变量是否存在;</li><li>调用 <code>echarts.init</code> 的时候,DOM 容器是否有宽高。</li></ul><h3>ECharts 有哪些学习资料?</h3><p>官网是最好的学习平台。此外,在 <a href="https://www.makeapie.com">ECharts Gallery</a> 上学习别人的作品也是一个不错的选择。</p><p>ECharts 相关项目及资源请参见 <a href="https://github.com/ecomfe/awesome-echarts">awesome-echarts</a>。</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/feature.html b/zh/feature.html
index 670f209..1c3fdf8 100644
--- a/zh/feature.html
+++ b/zh/feature.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>特性 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><div class="container"><h1>特性</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content single-page"><div class="page-nav"><h4>特性</h4><ul></ul></div><div class="page-detail"><p class="page-detail-desc">ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a>,提供直观,交互丰富,可高度个性化定制的数据可视化图表。</p><h2 id="chart-types">丰富的可视化类型</h2><p>ECharts 提供了常规的<a href="option.html#series-line" target="_blank">折线图</a>、<a href="option.html#series-bar" target="_blank">柱状图</a>、<a href="option.html#series-scatter" target="_blank">散点图</a>、<a href="option.html#series-pie" target="_blank">饼图</a>、<a href="option.html#series-candlestick" target="_blank">K线图</a>,用于统计的<a href="option.html#series-boxplot" target="_blank">盒形图</a>,用于地理数据可视化的<a href="option.html#series-map" target="_blank">地图</a>、<a href="option.html#series-heatmap" target="_blank">热力图</a>、<a href="option.html#series-lines" target="_blank">线图</a>,用于关系数据可视化的<a href="option.html#series-graph" target="_blank">关系图</a>、<a href="option.html#series-treemap" target="_blank">treemap</a>、<a href="option.html#series-sunburst">旭日图</a>,多维数据可视化的<a href="option.html#series-parallel" target="_blank">平行坐标</a>,还有用于 BI 的<a href="option.html#series-funnel" target="_blank">漏斗图</a>,<a href="option.html#series-gauge" target="_blank">仪表盘</a>,并且支持图与图之间的混搭。</p><p>除了已经内置的包含了丰富功能的图表,ECharts 还提供了<a href="option.html#series-custom">自定义系列</a>,只需要传入一个<em>renderItem</em>函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。</p><p>你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。</p><h2 id="dataset">多种数据格式无需转换直接使用</h2><p>ECharts 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,通过简单的设置 encode 属性就可以完成从数据到图形的映射,这种方式更符合可视化的直觉,省去了大部分场景下数据转换的步骤,而且多个组件能够共享一份数据而不用克隆。</p><p>为了配合大数据量的展现,ECharts 还支持输入 TypedArray 格式的数据,TypedArray 在大数据量的存储中可以占用更少的内存,对 GC 友好等特性也可以大幅度提升可视化应用的性能。</p><h2 id="big-data">千万数据的前端展现</h2><p>通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量,并且在这个数据量级依然能够进行流畅的缩放平移等交互。</p><p>几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。因此 ECharts 同时提供了对流加载(4.0+)的支持,你可以使用 WebSocket 或者对数据分块后加载,加载多少渲染多少!不需要漫长地等待所有数据加载完再进行绘制。</p><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/scatterGL.jpg?_v_=20200710_1" width="60%"><br /><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/scatterGL2.jpg?_v_=20200710_1" width="30%"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/scatterGL3.jpg?_v_=20200710_1" width="30%"><h2 id="mobile">移动端优化</h2><p>ECharts 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。</p><p>细粒度的模块化和打包机制可以让 ECharts 在移动端也拥有很小的体积,可选的 SVG 渲染模块让移动端的内存占用不再捉襟见肘。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=area-simple&reset=1&edit=1&renderer=svg" width="60%" height="400"></iframe><h2 id="mult-platform">多渲染方案,跨平台使用!</h2><p>ECharts 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。VML 可以兼容低版本 IE,SVG 使得移动端不再为内存担忧,Canvas 可以轻松应对大数据量和特效的展现。不同的渲染方式提供了更多选择,使得 ECharts 在各种场景下都有更好的表现。</p><p>除了 PC 和移动端的浏览器,ECharts 还能在 node 上配合 node-canvas 进行高效的服务端渲染(SSR)。从 4.0 开始我们还和微信小程序的团队合作,提供了 ECharts 对小程序的适配!</p><p>社区热心的贡献者也为我们提供了丰富的其它语言扩展,比如 Python 的<a href="https://github.com/pyecharts/pyecharts" target="_blank">pyecharts</a>,R 语言的 <a href="https://github.com/cosname/recharts" target="_blank">recharts</a>, Julia 的 <a href="https://github.com/randyzwitch/ECharts.jl">ECharts.jl</a> 等等。</p><p>我们希望平台和语言都不会成为大家使用 ECharts 实现可视化的限制!</p><h2 id="interaction">深度的交互式数据探索</h2><p>交互是从数据中发掘信息的重要手段。“总览为先,缩放过滤按需查看细节”是数据可视化交互的基本需求。</p><p>ECharts 一直在<em>交互</em>的路上前进,我们提供了 <a href="option.html#legend" target="_blank">图例</a>、<a href="option.html#visualMap" target="_blank">视觉映射</a>、<a href="option.html#dataZoom" target="_blank">数据区域缩放</a>、<a href="option.html#tooltip" target="_blank">tooltip</a>、<a href="option.html#brush">数据刷选</a>等开箱即用的交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-matrix&reset=1&edit=1" width="60%" height="540"></iframe><h2 id="visual-mapping">多维数据的支持以及丰富的视觉编码手段</h2><p>ECharts 3 开始加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外,对于传统的散点图等,传入的数据也可以是多个维度的。配合视觉映射组件 <a href="option.html#visualMap" target="_blank">visualMap</a> 提供的丰富的视觉编码,能够将不同维度的数据映射到颜色、大小、透明度、明暗度等不同的视觉通道。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-nutrients-matrix&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="dynamic-data">动态数据</h2><p>ECharts 由数据驱动,数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单,只需要获取数据,填入数据,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 <a href="option.html#timeline" target="_blank">timeline</a> 组件能够在更高的时间维度上去表现数据的信息。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-life-expectancy-timeline&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="fancy-effects">绚丽的特效</h2><p>ECharts 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=lines-bmap-effect&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="gl">通过 GL 实现更多更强大绚丽的三维可视化</h2><p>想要在 VR,大屏场景里实现三维的可视化效果?我们提供了基于 WebGL 的 ECharts GL,你可以跟使用 ECharts 普通组件一样轻松的使用 ECharts GL 绘制出三维的地球,建筑群,人口分布的柱状图,在这基础之上我们还提供了不同层级的画面配置项,几行配置就能得到艺术化的画面!</p><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/flowGL-line.jpg?_v_=20200710_1" width="40%"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/buildings-ny.jpg?_v_=20200710_1" width="40%"><br /><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/capetown-taxi.jpg?_v_=20200710_1" width="40%"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/population.jpg?_v_=20200710_1" width="40%"><h2 id="aria">无障碍访问(4.0+)</h2><p>当我们说到“可视化”的时候,我们往往很自然地将它与“看得⻅”联系在一起,但其 实这是片面的。W3C制定了无障碍富互联网应用规范集(WAI-ARIA,the Accessible Rich Internet Applications Suite),致力于使得网⻚内容和网⻚应 用能够被更多残障人士访问。</p><p>ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可 以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问!</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script>window.lazyLoadOptions = {
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><div class="container"><h1>特性</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content single-page"><div class="page-nav"><h4>特性</h4><ul></ul></div><div class="page-detail"><p class="page-detail-desc">ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 <a href="https://github.com/ecomfe/zrender" target="_blank">ZRender</a>,提供直观,交互丰富,可高度个性化定制的数据可视化图表。</p><h2 id="chart-types">丰富的可视化类型</h2><p>ECharts 提供了常规的<a href="option.html#series-line" target="_blank">折线图</a>、<a href="option.html#series-bar" target="_blank">柱状图</a>、<a href="option.html#series-scatter" target="_blank">散点图</a>、<a href="option.html#series-pie" target="_blank">饼图</a>、<a href="option.html#series-candlestick" target="_blank">K线图</a>,用于统计的<a href="option.html#series-boxplot" target="_blank">盒形图</a>,用于地理数据可视化的<a href="option.html#series-map" target="_blank">地图</a>、<a href="option.html#series-heatmap" target="_blank">热力图</a>、<a href="option.html#series-lines" target="_blank">线图</a>,用于关系数据可视化的<a href="option.html#series-graph" target="_blank">关系图</a>、<a href="option.html#series-treemap" target="_blank">treemap</a>、<a href="option.html#series-sunburst">旭日图</a>,多维数据可视化的<a href="option.html#series-parallel" target="_blank">平行坐标</a>,还有用于 BI 的<a href="option.html#series-funnel" target="_blank">漏斗图</a>,<a href="option.html#series-gauge" target="_blank">仪表盘</a>,并且支持图与图之间的混搭。</p><p>除了已经内置的包含了丰富功能的图表,ECharts 还提供了<a href="option.html#series-custom">自定义系列</a>,只需要传入一个<em>renderItem</em>函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。</p><p>你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。</p><h2 id="dataset">多种数据格式无需转换直接使用</h2><p>ECharts 内置的 dataset 属性(4.0+)支持直接传入包括二维表,key-value 等多种格式的数据源,通过简单的设置 encode 属性就可以完成从数据到图形的映射,这种方式更符合可视化的直觉,省去了大部分场景下数据转换的步骤,而且多个组件能够共享一份数据而不用克隆。</p><p>为了配合大数据量的展现,ECharts 还支持输入 TypedArray 格式的数据,TypedArray 在大数据量的存储中可以占用更少的内存,对 GC 友好等特性也可以大幅度提升可视化应用的性能。</p><h2 id="big-data">千万数据的前端展现</h2><p>通过增量渲染技术(4.0+),配合各种细致的优化,ECharts 能够展现千万级的数据量,并且在这个数据量级依然能够进行流畅的缩放平移等交互。</p><p>几千万的地理坐标数据就算使用二进制存储也要占上百 MB 的空间。因此 ECharts 同时提供了对流加载(4.0+)的支持,你可以使用 WebSocket 或者对数据分块后加载,加载多少渲染多少!不需要漫长地等待所有数据加载完再进行绘制。</p><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/scatterGL.jpg?_v_=20200710_1" width="60%"><br /><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/scatterGL2.jpg?_v_=20200710_1" width="30%"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/scatterGL3.jpg?_v_=20200710_1" width="30%"><h2 id="mobile">移动端优化</h2><p>ECharts 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。</p><p>细粒度的模块化和打包机制可以让 ECharts 在移动端也拥有很小的体积,可选的 SVG 渲染模块让移动端的内存占用不再捉襟见肘。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=area-simple&reset=1&edit=1&renderer=svg" width="60%" height="400"></iframe><h2 id="mult-platform">多渲染方案,跨平台使用!</h2><p>ECharts 支持以 Canvas、SVG(4.0+)、VML 的形式渲染图表。VML 可以兼容低版本 IE,SVG 使得移动端不再为内存担忧,Canvas 可以轻松应对大数据量和特效的展现。不同的渲染方式提供了更多选择,使得 ECharts 在各种场景下都有更好的表现。</p><p>除了 PC 和移动端的浏览器,ECharts 还能在 node 上配合 node-canvas 进行高效的服务端渲染(SSR)。从 4.0 开始我们还和微信小程序的团队合作,提供了 ECharts 对小程序的适配!</p><p>社区热心的贡献者也为我们提供了丰富的其它语言扩展,比如 Python 的<a href="https://github.com/pyecharts/pyecharts" target="_blank">pyecharts</a>,R 语言的 <a href="https://github.com/cosname/recharts" target="_blank">recharts</a>, Julia 的 <a href="https://github.com/randyzwitch/ECharts.jl">ECharts.jl</a> 等等。</p><p>我们希望平台和语言都不会成为大家使用 ECharts 实现可视化的限制!</p><h2 id="interaction">深度的交互式数据探索</h2><p>交互是从数据中发掘信息的重要手段。“总览为先,缩放过滤按需查看细节”是数据可视化交互的基本需求。</p><p>ECharts 一直在<em>交互</em>的路上前进,我们提供了 <a href="option.html#legend" target="_blank">图例</a>、<a href="option.html#visualMap" target="_blank">视觉映射</a>、<a href="option.html#dataZoom" target="_blank">数据区域缩放</a>、<a href="option.html#tooltip" target="_blank">tooltip</a>、<a href="option.html#brush">数据刷选</a>等开箱即用的交互组件,可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-matrix&reset=1&edit=1" width="60%" height="540"></iframe><h2 id="visual-mapping">多维数据的支持以及丰富的视觉编码手段</h2><p>ECharts 3 开始加强了对多维数据的支持。除了加入了平行坐标等常见的多维数据可视化工具外,对于传统的散点图等,传入的数据也可以是多个维度的。配合视觉映射组件 <a href="option.html#visualMap" target="_blank">visualMap</a> 提供的丰富的视觉编码,能够将不同维度的数据映射到颜色、大小、透明度、明暗度等不同的视觉通道。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-nutrients-matrix&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="dynamic-data">动态数据</h2><p>ECharts 由数据驱动,数据的改变驱动图表展现的改变。因此动态数据的实现也变得异常简单,只需要获取数据,填入数据,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。配合 <a href="option.html#timeline" target="_blank">timeline</a> 组件能够在更高的时间维度上去表现数据的信息。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=scatter-life-expectancy-timeline&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="fancy-effects">绚丽的特效</h2><p>ECharts 针对线数据,点数据等地理数据的可视化提供了吸引眼球的特效。</p><iframe data-src="https://echarts.apache.org/examples/zh/view.html?c=lines-bmap-effect&reset=1&edit=1" width="60%" height="400"></iframe><h2 id="gl">通过 GL 实现更多更强大绚丽的三维可视化</h2><p>想要在 VR,大屏场景里实现三维的可视化效果?我们提供了基于 WebGL 的 ECharts GL,你可以跟使用 ECharts 普通组件一样轻松的使用 ECharts GL 绘制出三维的地球,建筑群,人口分布的柱状图,在这基础之上我们还提供了不同层级的画面配置项,几行配置就能得到艺术化的画面!</p><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/flowGL-line.jpg?_v_=20200710_1" width="40%"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/buildings-ny.jpg?_v_=20200710_1" width="40%"><br /><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/capetown-taxi.jpg?_v_=20200710_1" width="40%"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/features/population.jpg?_v_=20200710_1" width="40%"><h2 id="aria">无障碍访问(4.0+)</h2><p>当我们说到“可视化”的时候,我们往往很自然地将它与“看得⻅”联系在一起,但其 实这是片面的。W3C制定了无障碍富互联网应用规范集(WAI-ARIA,the Accessible Rich Internet Applications Suite),致力于使得网⻚内容和网⻚应 用能够被更多残障人士访问。</p><p>ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可 以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问!</p><footer class="inner-footer"><div class="container"><div class="row"><div class="col-md-8"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p></div><div id="footer-icon-panel" class="col-md-4"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script>window.lazyLoadOptions = {
elements_selector: 'iframe'
};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/zh/index.html b/zh/index.html
index 47c6cba..5fa94f2 100644
--- a/zh/index.html
+++ b/zh/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>Apache ECharts</title><script src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js"></script><script src="https://cdn.jsdelivr.net/npm/lottie-web@5.7.6/build/player/lottie.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="page-index" class="page-main"><div id="main-content"><section id="home-section"><div class="home-brand-panel description container"><div class="home-info"><div class="home-brand">Apache ECharts</div><div class="home-subtitle">一个基于 JavaScript 的开源可视化图表库</div><div class="home-btn-panel"><a href="https://echarts.apache.org/tutorial.html#5%20分钟上手%20ECharts" class="btn btn-main btn-index-home"><svg width="22px" height="19px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="index-home-svg"><path fill="#fff" d="M10.9,16.2 C10.9,16.8 10.5,17.2 9.9,17.2 L5.3,17.2 C4.7,17.2 4.3,16.8 4.3,16.2 C4.3,15.6 4.7,15.2 5.3,15.2 L9.9,15.2 C10.5,15.2 10.9,15.7 10.9,16.2 Z M13.6,7.5 L5.3,7.5 C4.7,7.5 4.3,7.9 4.3,8.5 C4.3,9.1 4.7,9.5 5.3,9.5 L13.6,9.5 C14.2,9.5 14.6,9.1 14.6,8.5 C14.6,7.9 14.2,7.5 13.6,7.5 Z M17.9,6 L17.9,19 C17.9,20.7 16.6,22 14.9,22 L3.9,22 C2.2,22 0.9,20.7 0.9,19 L0.9,7.5 L0.9,6 L0.9,5 L0.9,4 L0.9,2 C0.9,0.9 1.8,0 2.9,0 L12.9,0 C14,0 14.9,0.9 14.9,2 L14.9,3 C16.6,3 17.9,4.3 17.9,6 Z M2.9,3 L3.9,3 L12.9,3 L12.9,2 L2.9,2 L2.9,3 Z M15.9,6 C15.9,5.4 15.5,5 14.9,5 L3.9,5 C3.3,5 2.9,5.4 2.9,6 L2.9,19 C2.9,19.6 3.3,20 3.9,20 L14.9,20 C15.5,20 15.9,19.6 15.9,19 L15.9,6 Z M13.6,11.5 L5.3,11.5 C4.7,11.5 4.3,11.9 4.3,12.5 C4.3,13.1 4.7,13.5 5.3,13.5 L13.6,13.5 C14.2,13.5 14.6,13.1 14.6,12.5 C14.6,11.9 14.2,11.5 13.6,11.5 Z"></path></svg><span>快速入门</span></a><a href="https://echarts.apache.org/examples/zh/index.html" class="btn btn-main btn-index-home"><svg width="25px" height="19px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="index-home-svg"><path fill="#F72C5B" d="M21,0 L6,0 C4.9,0 4,0.9 4,2 L4,4 L2,4 C0.9,4 0,4.9 0,6 L0,18 C0,19.1 0.9,20 2,20 L17,20 C18.1,20 19,19.1 19,18 L19,16 L21,16 C22.1,16 23,15.1 23,14 L23,2 C23,0.9 22.1,0 21,0 Z M17,18 L2,18 L2,6 L17,6 L17,18 Z M21,14 L19,14 L19,6 C19,4.9 18.1,4 17,4 L6,4 L6,2 L21,2 L21,14 Z M4,15 L4,12 C4,11.4 4.4,11 5,11 C5.6,11 6,11.4 6,12 L6,15 C6,15.6 5.6,16 5,16 C4.4,16 4,15.6 4,15 Z M13,15 L13,12 C13,11.4 13.4,11 14,11 C14.6,11 15,11.4 15,12 L15,15 C15,15.6 14.6,16 14,16 C13.4,16 13,15.6 13,15 Z M7,15 L7,9 C7,8.4 7.4,8 8,8 C8.6,8 9,8.4 9,9 L9,15 C9,15.6 8.6,16 8,16 C7.4,16 7,15.6 7,15 Z M10,15 L10,11 C10,10.4 10.4,10 11,10 C11.6,10 12,10.4 12,11 L12,15 C12,15.6 11.6,16 11,16 C10.4,16 10,15.6 10,15 Z"></path></svg><span>所有示例</span></a><a href="https://github.com/apache/echarts" target="_blank" class="btn btn-main btn-index-home btn-index-github"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#081642"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg></a></div></div><div class="home-chart"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/index-home-pie.png?_v_=20200710_1"></div></div></section><section id="feature-section"><div class="container"><div class="index-features"><h2 class="reveal">特性</h2><hr class="reveal"><a href="https://echarts.apache.org/feature.html" class="more reveal">查看完整特性</a></div><div class="row"><div class="col-md-6"><div id="index-feature-1" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-1" class="index-feature-icon-bg"></div><div id="icon-1" class="index-feature-icon"></div></div><div class="index-feature-right reveal"><h3 class="reveal">丰富的图表类型</h3><p class="reveal-later">提供开箱即用的 20 多种图表和十几种组件,并且支持各种图表以及组件的任意组合。</p></div></div></div><div class="col-md-6"><div id="index-feature-2" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-2" class="index-feature-icon-bg"></div><div id="icon-2" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">强劲的渲染引擎</h3><p class="reveal-later">Canvas、SVG 双引擎一键切换,增量渲染、流加载等技术实现千万级数据的流畅交互。</p></div></div></div><div class="col-md-6"><div id="index-feature-3" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-3" class="index-feature-icon-bg"></div><div id="icon-3" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">专业的数据分析</h3><p class="reveal-later">通过数据集管理数据,支持数据过滤、聚类、回归,帮助实现同一份数据的多维度分析。</p></div></div></div><div class="col-md-6"><div id="index-feature-4" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-4" class="index-feature-icon-bg"></div><div id="icon-4" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">优雅的可视化设计</h3><p class="reveal-later">默认设计遵从可视化原则,支持响应式设计,并且提供了灵活的配置项方便开发者定制。</p></div></div></div><div class="col-md-6"><div id="index-feature-5" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-5" class="index-feature-icon-bg"></div><div id="icon-5" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">健康的开源社区</h3><p class="reveal-later">活跃的社区用户保证了项目的健康发展,也贡献了丰富的第三方插件满足不同场景的需求。</p></div></div></div><div class="col-md-6"><div id="index-feature-6" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-6" class="index-feature-icon-bg"></div><div id="icon-6" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">友好的无障碍访问</h3><p class="reveal-later">智能生成的图表描述和贴花图案,帮助视力障碍人士了解图表内容,读懂图表背后的故事。</p></div></div></div></div></div></section><section id="publication"><div class="container"><div id="start-line"></div><div class="paper"><div class="content"><h2 class="reveal-latest">ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization</h2><p class="note reveal-latest">如果您在科研项目、产品、学术论文、技术报告、新闻报告、教育、专利以及其他相关活动中使用了 Apache ECharts,欢迎引用本论文。</p><div class="single-btn-panel reveal-latest"><a href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf" class="pdf reveal-later">Visual Informatics, 2018 [PDF]</a></div></div><div class="icon"><div id="paper-icon"></div></div></div><div id="end-line"></div></div></section><section id="about-section" class="normal reveal-about"><div class="container"><h3>关注我们</h3><hr><p>关注我们以及时获得更多最新动态</p><div class="btn-panel row"><div class="col-lg-3 col-sm-6"><a id="btn-github" href="https://github.com/apache/echarts"><div class="btn-content"><div class="btn-logo"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#081642"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg><span>GitHub</span></div><div class="icon-v-right"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-weixin"><div class="btn-content zh"><div class="btn-logo"><svg width="25px" height="21px" viewBox="0 0 25 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-512.000000, -2480.000000)" fill="rgba(93, 201, 116)"><g transform="translate(512.000000, 2480.000000)"><path d="M17.6290595,6.47976119 C17.7534123,6.47976119 17.8770026,6.48260946 18,6.4873469 C17.2166965,2.79549199 13.5198007,0 9.07678865,0 C4.06379837,0 0,3.55853831 0,7.94816178 C0,10.5128275 1.38756065,12.7933344 3.54074891,14.2466508 L2.63388325,17 L5.63681512,15.3050455 C6.69779456,15.6858421 7.85912588,15.8963236 9.07676039,15.8963236 C9.31148885,15.8963236 9.54412784,15.8885344 9.77433851,15.8731886 C9.52032463,15.1807388 9.38270085,14.4428328 9.38270085,13.676822 C9.38275733,9.70202902 13.0747399,6.47976119 17.6290595,6.47976119 Z M12.5,4 C13.328411,4 14,4.67155738 14,5.5 C14,6.32841103 13.3284426,7 12.5,7 C11.6715574,7 11,6.32844262 11,5.5 C11.0000316,4.67155738 11.671589,4 12.5,4 Z M5.5,7 C4.67158897,7 4,6.32844262 4,5.5 C4,4.67158897 4.67155738,4 5.5,4 C6.32844262,4 7,4.67155738 7,5.5 C7,6.32841103 6.32844262,7 5.5,7 Z"></path><path d="M25,13.4664775 C25,9.89513318 21.6421433,7 17.4999862,7 C13.3578291,7 10,9.89513318 10,13.4664775 C10,17.0378217 13.3578567,19.9329549 17.5000138,19.9329549 C18.36973,19.9329549 19.2046277,19.804878 19.9813841,19.5701641 L22.5457108,21 L21.8004292,18.7646117 C23.7349834,17.5951163 25,15.6582837 25,13.4664775 Z M15,12 C14.447707,12 14,11.552293 14,11 C14,10.447707 14.447707,10 15,10 C15.552293,10 16,10.447707 16,11 C16,11.552293 15.552293,12 15,12 Z M20,12 C19.447707,12 19,11.552293 19,11 C19,10.447707 19.447707,10 20,10 C20.552293,10 21,10.447707 21,11 C21,11.552293 20.5522667,12 20,12 Z"></path></g></g></g></svg><span>公众号</span></div><div class="weixin-code"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/ercode.jpg?_v_=20200710_1"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-weibo" href="https://weibo.com/echarts"><div class="btn-content"><div class="btn-logo"><svg width="25px" height="20px" viewBox="0 0 25 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-774.000000, -2480.000000)" fill="rgba(174, 44, 53)"><g transform="translate(767.000000, 2470.000000)"><g transform="translate(7.000000, 10.000000)"><path d="M9.56107255,18.530208 C5.55942203,18.7083394 2.28534432,16.6598289 2.28534432,13.9878588 C2.28534432,11.3158886 5.55942203,9.08924686 9.56107255,8.91111551 C13.5627231,8.73298415 16.8368008,10.4252319 16.8368008,13.0972021 C16.8368008,15.7691722 13.5627231,18.3520767 9.56107255,18.530208 Z M18.1100532,9.71270657 C17.1096406,9.53457522 17.6553202,9.0001812 17.6553202,9.0001812 C17.6553202,9.0001812 18.5647862,7.48606478 17.473427,6.32821106 C16.1092279,4.90316031 12.7442036,6.50634241 12.7442036,6.50634241 C11.4709512,6.95167077 11.8347376,6.32821106 12.0166308,5.34848869 C12.0166308,4.19063497 11.6528444,2.14212451 8.19687348,3.3890439 C4.74090259,4.54689763 1.83061129,8.7329842 1.83061129,8.7329842 C-0.26116057,11.49402 0.0116792299,13.6315961 0.0116792299,13.6315961 C0.557358851,18.3520767 5.4684754,19.5989961 9.37917931,19.9552588 C13.4717764,20.3115215 18.9285726,18.5302081 20.5656115,14.9675812 C22.1117037,11.3158886 19.1104658,9.89083792 18.1100532,9.71270657 Z"></path><path d="M12.8641827,12.2517204 C12.2123929,10.4024172 10.0707976,9.57023078 7.92920237,10.2174869 C5.78760713,10.9572081 4.57714023,12.9914416 5.13581726,14.7482796 C5.78760713,16.5975828 7.92920237,17.4297692 10.0707976,16.7825131 C12.2123929,16.135257 13.4228598,14.1010235 12.8641827,12.2517204 Z M8.11542806,15.4880009 C7.37052537,15.6729312 6.53250982,15.3955358 6.34628415,14.7482797 C6.16005847,14.1010235 6.62562266,13.4537674 7.46363821,13.176372 C8.2085409,12.9914416 9.04655645,13.2688371 9.23278212,13.9160932 C9.32589493,14.5633493 8.86033075,15.3030706 8.11542806,15.4880009 Z M10.3501361,13.176372 C10.2570233,13.4537674 9.88457196,13.6386977 9.60523346,13.5462326 C9.32589496,13.4537674 9.23278212,13.0839068 9.32589496,12.8065113 C9.4190078,12.5291159 9.79145914,12.3441855 10.0707976,12.4366507 C10.3501361,12.621581 10.5363618,12.8989765 10.3501361,13.176372 Z"></path><path d="M24.5953609,9.4285714 C24.5953609,9.3333333 24.6913146,9.2380952 24.6913146,9.14285713 C25.2670362,7.5238095 24.9791754,5.9047619 24.3075001,4.38095238 C23.0601032,1.7142857 20.3734021,0 17.4947939,0 C16.9190722,0 16.3433505,0.0952380996 15.8635825,0.190476199 L15.8635825,0.190476199 L15.8635825,0.190476199 C15.8635825,0.190476199 15.7676289,0.190476199 15.6716753,0.285714299 L15.6716753,0.285714299 C15.2878608,0.476190498 15,0.857142874 15,1.33333335 C15,2.00000002 15.479768,2.4761905 16.1514433,2.4761905 C16.2473969,2.4761905 16.3433505,2.4761905 16.5352577,2.3809524 L16.5352577,2.3809524 C16.8231186,2.1904762 17.3988402,2.09523812 17.4947938,2.09523812 L17.5907475,2.09523812 C19.6057732,2.09523812 21.5248454,3.23809527 22.3884279,5.23809525 C22.8681959,6.2857143 22.9641496,7.42857143 22.6762887,8.57142857 C22.6762887,8.66666667 22.5803351,8.85714285 22.5803351,8.95238095 C22.5803351,9.52380952 23.0601031,10 23.6358248,10 L23.827732,10 L23.827732,10 L23.9236856,10 C24.2115465,9.9047619 24.4034537,9.8095238 24.5953609,9.61904762 C24.4994073,9.5238095 24.4994073,9.5238095 24.5953609,9.4285714 C24.5953609,9.5238095 24.5953609,9.4285714 24.5953609,9.4285714 Z"></path><path d="M17.6310803,4 C17.3252528,4 16.9174827,4.08510639 16.6116551,4.08510639 C16.3058276,4.17021275 16,4.42553192 16,4.76595745 C16,5.10638297 16.3058275,5.36170214 16.7135976,5.36170214 C16.8155402,5.36170214 16.9174827,5.36170214 17.0194252,5.27659575 C17.2233102,5.27659575 17.3252527,5.19148936 17.5291378,5.19148936 C18.548563,5.19148936 19.4660456,5.87234042 19.4660456,6.72340425 C19.4660456,6.89361703 19.4660456,6.97872339 19.3641031,7.14893617 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.4893617 L19.3641031,7.4893617 C19.4660456,7.82978723 19.7718732,8 20.0777008,8 C20.3835283,8 20.5874133,7.82978723 20.7912984,7.65957447 L20.7912984,7.65957447 C20.8932409,7.40425533 20.9951834,7.06382978 20.9951834,6.72340425 C21.0971259,5.27659575 19.5679882,4 17.6310803,4 Z"></path></g></g></g></g></svg><span>微博</span></div><div class="icon-v-right"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-twitter" href="https://twitter.com/ApacheECharts"><div class="btn-content"><div class="btn-logo"><svg width="22px" height="19px" viewBox="0 0 22 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-1029.000000, -2481.000000)" fill="rgba(0, 172, 237)" fill-rule="nonzero"><g transform="translate(1019.000000, 2470.000000)"><path d="M31.9965682,13.2536272 C31.3736136,14.2239084 30.6196136,15.0506018 29.7346591,15.7332964 C29.7441818,15.8714453 29.7489318,16.0792366 29.7489318,16.3566705 C29.7489318,17.6436908 29.5720682,18.9275445 29.2183409,20.2082316 C28.8645909,21.4890636 28.3274091,22.7184796 27.6069091,23.8965522 C26.8862955,25.0746247 26.0280455,26.1166031 25.0323864,27.0222697 C24.0366364,27.9281298 22.8360682,28.6508066 21.4306364,29.1904211 C20.0251818,29.7300356 18.5226591,30 16.9230227,30 C14.4015909,30 12.0938636,29.2822545 10,27.8470776 C10.3251136,27.8862863 10.6878182,27.9059148 11.0880909,27.9059148 C13.1819545,27.9059148 15.0477727,27.2230992 16.6854545,25.8575407 C15.7087727,25.8372354 14.8339318,25.5180789 14.0609545,24.8998053 C13.288,24.281701 12.7573636,23.4924033 12.4690909,22.532299 C12.7763409,22.581612 13.0604091,22.606341 13.32125,22.606341 C13.7215227,22.606341 14.1168864,22.5518066 14.5076136,22.4428346 C13.4654545,22.214883 12.6024318,21.6632061 11.9187955,20.7878041 C11.2351591,19.9125471 10.8933409,18.8958295 10.8933409,17.7380623 L10.8933409,17.6790802 C11.5258182,18.0553092 12.2052955,18.2580242 12.9318409,18.287201 C12.3172955,17.851458 11.8288409,17.2826425 11.4667727,16.5808028 C11.1046818,15.8790598 10.923,15.1170776 10.9219318,14.2949288 C10.9219318,13.4233702 11.1267045,12.6170789 11.5365227,11.8760064 C12.6620909,13.3505127 14.0323182,14.5304949 15.6474545,15.4160496 C17.2624545,16.3015076 18.9907727,16.7936705 20.8321364,16.8924898 C20.7582955,16.5162366 20.7213636,16.1501361 20.7213636,15.7941883 C20.7213636,14.4678626 21.1608409,13.3372176 22.0398409,12.4023257 C22.9188409,11.4674338 23.9818864,11 25.2289318,11 C26.5319318,11 27.6300455,11.5048779 28.5233636,12.5144402 C29.5382045,12.306673 30.4922273,11.9209198 31.3854091,11.3572048 C31.0412273,12.4947875 30.3808409,13.3759186 29.4041364,14.0003804 C30.2700455,13.9015611 31.1353409,13.6539809 32,13.2574224 L31.9965682,13.2536272 Z"></path></g></g></g></svg><span>Twitter</span></div><div class="icon-v-right"></div></div></a></div></div></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/index.js?_v_=1630485133448"></script><script>window.lazyLoadOptions = {
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="page-index" class="page-main"><div id="main-content"><section id="home-section"><div class="home-brand-panel description container"><div class="home-info"><div class="home-brand">Apache ECharts</div><div class="home-subtitle">一个基于 JavaScript 的开源可视化图表库</div><div class="home-btn-panel"><a href="https://echarts.apache.org/tutorial.html#5%20分钟上手%20ECharts" class="btn btn-main btn-index-home"><svg width="22px" height="19px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="index-home-svg"><path fill="#fff" d="M10.9,16.2 C10.9,16.8 10.5,17.2 9.9,17.2 L5.3,17.2 C4.7,17.2 4.3,16.8 4.3,16.2 C4.3,15.6 4.7,15.2 5.3,15.2 L9.9,15.2 C10.5,15.2 10.9,15.7 10.9,16.2 Z M13.6,7.5 L5.3,7.5 C4.7,7.5 4.3,7.9 4.3,8.5 C4.3,9.1 4.7,9.5 5.3,9.5 L13.6,9.5 C14.2,9.5 14.6,9.1 14.6,8.5 C14.6,7.9 14.2,7.5 13.6,7.5 Z M17.9,6 L17.9,19 C17.9,20.7 16.6,22 14.9,22 L3.9,22 C2.2,22 0.9,20.7 0.9,19 L0.9,7.5 L0.9,6 L0.9,5 L0.9,4 L0.9,2 C0.9,0.9 1.8,0 2.9,0 L12.9,0 C14,0 14.9,0.9 14.9,2 L14.9,3 C16.6,3 17.9,4.3 17.9,6 Z M2.9,3 L3.9,3 L12.9,3 L12.9,2 L2.9,2 L2.9,3 Z M15.9,6 C15.9,5.4 15.5,5 14.9,5 L3.9,5 C3.3,5 2.9,5.4 2.9,6 L2.9,19 C2.9,19.6 3.3,20 3.9,20 L14.9,20 C15.5,20 15.9,19.6 15.9,19 L15.9,6 Z M13.6,11.5 L5.3,11.5 C4.7,11.5 4.3,11.9 4.3,12.5 C4.3,13.1 4.7,13.5 5.3,13.5 L13.6,13.5 C14.2,13.5 14.6,13.1 14.6,12.5 C14.6,11.9 14.2,11.5 13.6,11.5 Z"></path></svg><span>快速入门</span></a><a href="https://echarts.apache.org/examples/zh/index.html" class="btn btn-main btn-index-home"><svg width="25px" height="19px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="index-home-svg"><path fill="#F72C5B" d="M21,0 L6,0 C4.9,0 4,0.9 4,2 L4,4 L2,4 C0.9,4 0,4.9 0,6 L0,18 C0,19.1 0.9,20 2,20 L17,20 C18.1,20 19,19.1 19,18 L19,16 L21,16 C22.1,16 23,15.1 23,14 L23,2 C23,0.9 22.1,0 21,0 Z M17,18 L2,18 L2,6 L17,6 L17,18 Z M21,14 L19,14 L19,6 C19,4.9 18.1,4 17,4 L6,4 L6,2 L21,2 L21,14 Z M4,15 L4,12 C4,11.4 4.4,11 5,11 C5.6,11 6,11.4 6,12 L6,15 C6,15.6 5.6,16 5,16 C4.4,16 4,15.6 4,15 Z M13,15 L13,12 C13,11.4 13.4,11 14,11 C14.6,11 15,11.4 15,12 L15,15 C15,15.6 14.6,16 14,16 C13.4,16 13,15.6 13,15 Z M7,15 L7,9 C7,8.4 7.4,8 8,8 C8.6,8 9,8.4 9,9 L9,15 C9,15.6 8.6,16 8,16 C7.4,16 7,15.6 7,15 Z M10,15 L10,11 C10,10.4 10.4,10 11,10 C11.6,10 12,10.4 12,11 L12,15 C12,15.6 11.6,16 11,16 C10.4,16 10,15.6 10,15 Z"></path></svg><span>所有示例</span></a><a href="https://github.com/apache/echarts" target="_blank" class="btn btn-main btn-index-home btn-index-github"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#081642"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg></a></div></div><div class="home-chart"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/index-home-pie.png?_v_=20200710_1"></div></div></section><section id="feature-section"><div class="container"><div class="index-features"><h2 class="reveal">特性</h2><hr class="reveal"><a href="https://echarts.apache.org/feature.html" class="more reveal">查看完整特性</a></div><div class="row"><div class="col-md-6"><div id="index-feature-1" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-1" class="index-feature-icon-bg"></div><div id="icon-1" class="index-feature-icon"></div></div><div class="index-feature-right reveal"><h3 class="reveal">丰富的图表类型</h3><p class="reveal-later">提供开箱即用的 20 多种图表和十几种组件,并且支持各种图表以及组件的任意组合。</p></div></div></div><div class="col-md-6"><div id="index-feature-2" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-2" class="index-feature-icon-bg"></div><div id="icon-2" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">强劲的渲染引擎</h3><p class="reveal-later">Canvas、SVG 双引擎一键切换,增量渲染、流加载等技术实现千万级数据的流畅交互。</p></div></div></div><div class="col-md-6"><div id="index-feature-3" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-3" class="index-feature-icon-bg"></div><div id="icon-3" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">专业的数据分析</h3><p class="reveal-later">通过数据集管理数据,支持数据过滤、聚类、回归,帮助实现同一份数据的多维度分析。</p></div></div></div><div class="col-md-6"><div id="index-feature-4" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-4" class="index-feature-icon-bg"></div><div id="icon-4" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">优雅的可视化设计</h3><p class="reveal-later">默认设计遵从可视化原则,支持响应式设计,并且提供了灵活的配置项方便开发者定制。</p></div></div></div><div class="col-md-6"><div id="index-feature-5" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-5" class="index-feature-icon-bg"></div><div id="icon-5" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">健康的开源社区</h3><p class="reveal-later">活跃的社区用户保证了项目的健康发展,也贡献了丰富的第三方插件满足不同场景的需求。</p></div></div></div><div class="col-md-6"><div id="index-feature-6" class="index-feature"><div class="index-feature-left reveal"><div id="bg-icon-6" class="index-feature-icon-bg"></div><div id="icon-6" class="index-feature-icon"></div></div><div class="index-feature-right"><h3 class="reveal">友好的无障碍访问</h3><p class="reveal-later">智能生成的图表描述和贴花图案,帮助视力障碍人士了解图表内容,读懂图表背后的故事。</p></div></div></div></div></div></section><section id="publication"><div class="container"><div id="start-line"></div><div class="paper"><div class="content"><h2 class="reveal-latest">ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization</h2><p class="note reveal-latest">如果您在科研项目、产品、学术论文、技术报告、新闻报告、教育、专利以及其他相关活动中使用了 Apache ECharts,欢迎引用本论文。</p><div class="single-btn-panel reveal-latest"><a href="http://www.cad.zju.edu.cn/home/vagblog/VAG_Work/echarts.pdf" class="pdf reveal-later">Visual Informatics, 2018 [PDF]</a></div></div><div class="icon"><div id="paper-icon"></div></div></div><div id="end-line"></div></div></section><section id="about-section" class="normal reveal-about"><div class="container"><h3>关注我们</h3><hr><p>关注我们以及时获得更多最新动态</p><div class="btn-panel row"><div class="col-lg-3 col-sm-6"><a id="btn-github" href="https://github.com/apache/echarts"><div class="btn-content"><div class="btn-logo"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#081642"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg><span>GitHub</span></div><div class="icon-v-right"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-weixin"><div class="btn-content zh"><div class="btn-logo"><svg width="25px" height="21px" viewBox="0 0 25 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-512.000000, -2480.000000)" fill="rgba(93, 201, 116)"><g transform="translate(512.000000, 2480.000000)"><path d="M17.6290595,6.47976119 C17.7534123,6.47976119 17.8770026,6.48260946 18,6.4873469 C17.2166965,2.79549199 13.5198007,0 9.07678865,0 C4.06379837,0 0,3.55853831 0,7.94816178 C0,10.5128275 1.38756065,12.7933344 3.54074891,14.2466508 L2.63388325,17 L5.63681512,15.3050455 C6.69779456,15.6858421 7.85912588,15.8963236 9.07676039,15.8963236 C9.31148885,15.8963236 9.54412784,15.8885344 9.77433851,15.8731886 C9.52032463,15.1807388 9.38270085,14.4428328 9.38270085,13.676822 C9.38275733,9.70202902 13.0747399,6.47976119 17.6290595,6.47976119 Z M12.5,4 C13.328411,4 14,4.67155738 14,5.5 C14,6.32841103 13.3284426,7 12.5,7 C11.6715574,7 11,6.32844262 11,5.5 C11.0000316,4.67155738 11.671589,4 12.5,4 Z M5.5,7 C4.67158897,7 4,6.32844262 4,5.5 C4,4.67158897 4.67155738,4 5.5,4 C6.32844262,4 7,4.67155738 7,5.5 C7,6.32841103 6.32844262,7 5.5,7 Z"></path><path d="M25,13.4664775 C25,9.89513318 21.6421433,7 17.4999862,7 C13.3578291,7 10,9.89513318 10,13.4664775 C10,17.0378217 13.3578567,19.9329549 17.5000138,19.9329549 C18.36973,19.9329549 19.2046277,19.804878 19.9813841,19.5701641 L22.5457108,21 L21.8004292,18.7646117 C23.7349834,17.5951163 25,15.6582837 25,13.4664775 Z M15,12 C14.447707,12 14,11.552293 14,11 C14,10.447707 14.447707,10 15,10 C15.552293,10 16,10.447707 16,11 C16,11.552293 15.552293,12 15,12 Z M20,12 C19.447707,12 19,11.552293 19,11 C19,10.447707 19.447707,10 20,10 C20.552293,10 21,10.447707 21,11 C21,11.552293 20.5522667,12 20,12 Z"></path></g></g></g></svg><span>公众号</span></div><div class="weixin-code"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/ercode.jpg?_v_=20200710_1"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-weibo" href="https://weibo.com/echarts"><div class="btn-content"><div class="btn-logo"><svg width="25px" height="20px" viewBox="0 0 25 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-774.000000, -2480.000000)" fill="rgba(174, 44, 53)"><g transform="translate(767.000000, 2470.000000)"><g transform="translate(7.000000, 10.000000)"><path d="M9.56107255,18.530208 C5.55942203,18.7083394 2.28534432,16.6598289 2.28534432,13.9878588 C2.28534432,11.3158886 5.55942203,9.08924686 9.56107255,8.91111551 C13.5627231,8.73298415 16.8368008,10.4252319 16.8368008,13.0972021 C16.8368008,15.7691722 13.5627231,18.3520767 9.56107255,18.530208 Z M18.1100532,9.71270657 C17.1096406,9.53457522 17.6553202,9.0001812 17.6553202,9.0001812 C17.6553202,9.0001812 18.5647862,7.48606478 17.473427,6.32821106 C16.1092279,4.90316031 12.7442036,6.50634241 12.7442036,6.50634241 C11.4709512,6.95167077 11.8347376,6.32821106 12.0166308,5.34848869 C12.0166308,4.19063497 11.6528444,2.14212451 8.19687348,3.3890439 C4.74090259,4.54689763 1.83061129,8.7329842 1.83061129,8.7329842 C-0.26116057,11.49402 0.0116792299,13.6315961 0.0116792299,13.6315961 C0.557358851,18.3520767 5.4684754,19.5989961 9.37917931,19.9552588 C13.4717764,20.3115215 18.9285726,18.5302081 20.5656115,14.9675812 C22.1117037,11.3158886 19.1104658,9.89083792 18.1100532,9.71270657 Z"></path><path d="M12.8641827,12.2517204 C12.2123929,10.4024172 10.0707976,9.57023078 7.92920237,10.2174869 C5.78760713,10.9572081 4.57714023,12.9914416 5.13581726,14.7482796 C5.78760713,16.5975828 7.92920237,17.4297692 10.0707976,16.7825131 C12.2123929,16.135257 13.4228598,14.1010235 12.8641827,12.2517204 Z M8.11542806,15.4880009 C7.37052537,15.6729312 6.53250982,15.3955358 6.34628415,14.7482797 C6.16005847,14.1010235 6.62562266,13.4537674 7.46363821,13.176372 C8.2085409,12.9914416 9.04655645,13.2688371 9.23278212,13.9160932 C9.32589493,14.5633493 8.86033075,15.3030706 8.11542806,15.4880009 Z M10.3501361,13.176372 C10.2570233,13.4537674 9.88457196,13.6386977 9.60523346,13.5462326 C9.32589496,13.4537674 9.23278212,13.0839068 9.32589496,12.8065113 C9.4190078,12.5291159 9.79145914,12.3441855 10.0707976,12.4366507 C10.3501361,12.621581 10.5363618,12.8989765 10.3501361,13.176372 Z"></path><path d="M24.5953609,9.4285714 C24.5953609,9.3333333 24.6913146,9.2380952 24.6913146,9.14285713 C25.2670362,7.5238095 24.9791754,5.9047619 24.3075001,4.38095238 C23.0601032,1.7142857 20.3734021,0 17.4947939,0 C16.9190722,0 16.3433505,0.0952380996 15.8635825,0.190476199 L15.8635825,0.190476199 L15.8635825,0.190476199 C15.8635825,0.190476199 15.7676289,0.190476199 15.6716753,0.285714299 L15.6716753,0.285714299 C15.2878608,0.476190498 15,0.857142874 15,1.33333335 C15,2.00000002 15.479768,2.4761905 16.1514433,2.4761905 C16.2473969,2.4761905 16.3433505,2.4761905 16.5352577,2.3809524 L16.5352577,2.3809524 C16.8231186,2.1904762 17.3988402,2.09523812 17.4947938,2.09523812 L17.5907475,2.09523812 C19.6057732,2.09523812 21.5248454,3.23809527 22.3884279,5.23809525 C22.8681959,6.2857143 22.9641496,7.42857143 22.6762887,8.57142857 C22.6762887,8.66666667 22.5803351,8.85714285 22.5803351,8.95238095 C22.5803351,9.52380952 23.0601031,10 23.6358248,10 L23.827732,10 L23.827732,10 L23.9236856,10 C24.2115465,9.9047619 24.4034537,9.8095238 24.5953609,9.61904762 C24.4994073,9.5238095 24.4994073,9.5238095 24.5953609,9.4285714 C24.5953609,9.5238095 24.5953609,9.4285714 24.5953609,9.4285714 Z"></path><path d="M17.6310803,4 C17.3252528,4 16.9174827,4.08510639 16.6116551,4.08510639 C16.3058276,4.17021275 16,4.42553192 16,4.76595745 C16,5.10638297 16.3058275,5.36170214 16.7135976,5.36170214 C16.8155402,5.36170214 16.9174827,5.36170214 17.0194252,5.27659575 C17.2233102,5.27659575 17.3252527,5.19148936 17.5291378,5.19148936 C18.548563,5.19148936 19.4660456,5.87234042 19.4660456,6.72340425 C19.4660456,6.89361703 19.4660456,6.97872339 19.3641031,7.14893617 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.40425531 L19.3641031,7.4893617 L19.3641031,7.4893617 C19.4660456,7.82978723 19.7718732,8 20.0777008,8 C20.3835283,8 20.5874133,7.82978723 20.7912984,7.65957447 L20.7912984,7.65957447 C20.8932409,7.40425533 20.9951834,7.06382978 20.9951834,6.72340425 C21.0971259,5.27659575 19.5679882,4 17.6310803,4 Z"></path></g></g></g></g></svg><span>微博</span></div><div class="icon-v-right"></div></div></a></div><div class="col-lg-3 col-sm-6"><a id="btn-twitter" href="https://twitter.com/ApacheECharts"><div class="btn-content"><div class="btn-logo"><svg width="22px" height="19px" viewBox="0 0 22 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-1029.000000, -2481.000000)" fill="rgba(0, 172, 237)" fill-rule="nonzero"><g transform="translate(1019.000000, 2470.000000)"><path d="M31.9965682,13.2536272 C31.3736136,14.2239084 30.6196136,15.0506018 29.7346591,15.7332964 C29.7441818,15.8714453 29.7489318,16.0792366 29.7489318,16.3566705 C29.7489318,17.6436908 29.5720682,18.9275445 29.2183409,20.2082316 C28.8645909,21.4890636 28.3274091,22.7184796 27.6069091,23.8965522 C26.8862955,25.0746247 26.0280455,26.1166031 25.0323864,27.0222697 C24.0366364,27.9281298 22.8360682,28.6508066 21.4306364,29.1904211 C20.0251818,29.7300356 18.5226591,30 16.9230227,30 C14.4015909,30 12.0938636,29.2822545 10,27.8470776 C10.3251136,27.8862863 10.6878182,27.9059148 11.0880909,27.9059148 C13.1819545,27.9059148 15.0477727,27.2230992 16.6854545,25.8575407 C15.7087727,25.8372354 14.8339318,25.5180789 14.0609545,24.8998053 C13.288,24.281701 12.7573636,23.4924033 12.4690909,22.532299 C12.7763409,22.581612 13.0604091,22.606341 13.32125,22.606341 C13.7215227,22.606341 14.1168864,22.5518066 14.5076136,22.4428346 C13.4654545,22.214883 12.6024318,21.6632061 11.9187955,20.7878041 C11.2351591,19.9125471 10.8933409,18.8958295 10.8933409,17.7380623 L10.8933409,17.6790802 C11.5258182,18.0553092 12.2052955,18.2580242 12.9318409,18.287201 C12.3172955,17.851458 11.8288409,17.2826425 11.4667727,16.5808028 C11.1046818,15.8790598 10.923,15.1170776 10.9219318,14.2949288 C10.9219318,13.4233702 11.1267045,12.6170789 11.5365227,11.8760064 C12.6620909,13.3505127 14.0323182,14.5304949 15.6474545,15.4160496 C17.2624545,16.3015076 18.9907727,16.7936705 20.8321364,16.8924898 C20.7582955,16.5162366 20.7213636,16.1501361 20.7213636,15.7941883 C20.7213636,14.4678626 21.1608409,13.3372176 22.0398409,12.4023257 C22.9188409,11.4674338 23.9818864,11 25.2289318,11 C26.5319318,11 27.6300455,11.5048779 28.5233636,12.5144402 C29.5382045,12.306673 30.4922273,11.9209198 31.3854091,11.3572048 C31.0412273,12.4947875 30.3808409,13.3759186 29.4041364,14.0003804 C30.2700455,13.9015611 31.1353409,13.6539809 32,13.2574224 L31.9965682,13.2536272 Z"></path></g></g></g></svg><span>Twitter</span></div><div class="icon-v-right"></div></div></a></div></div></div></section></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/index.js?_v_=1630499963508"></script><script>window.lazyLoadOptions = {
elements_selector: ".lazy"
};</script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
diff --git a/zh/js/chart-list.js b/zh/js/chart-list.js
index fdbee7a..f4797c8 100644
--- a/zh/js/chart-list.js
+++ b/zh/js/chart-list.js
@@ -1 +1 @@
-var charts=[];$(document).ready(function(){var a=$("#explore-container .chart-list-panel");for(var t in CHART_TYPES)a.append('<div id="chart-type-'+t+'"><h3 class="chart-type-head">'+CHART_TYPES[t]+'</h3><div class="row" id="chart-row-'+t+'"></div></div>');for(var l=0,r=EXAMPLES.length;l<r;++l){var e=EXAMPLES[l].title||"未命名图表",i=(EXAMPLES[l].subtitle,$('<div class="col-lg-3 col-md-4 col-sm-6"></div>')),c=$('<div class="chart"></div>');$("#chart-row-"+EXAMPLES[l].type).append(i.append(c)),$link=$('<a class="chart-link" href="demo.html#'+EXAMPLES[l].id+'"></a>'),c.append($link),$link.append('<h4 class="chart-title">'+e+"</h4>"),$chartArea=$('<img class="chart-area" data-original="'+GALLERY_THUMB_PATH+EXAMPLES[l].id+'.png" />'),$link.append($chartArea)}window.addEventListener("hashchange",function(){scrollBy(0,-80);var a=location.hash.split("-");3===a.length&&($("#left-chart-nav li").removeClass("active"),$("#left-chart-nav-"+a[2]).parent("li").addClass("active"))}),$("#left-chart-nav li").first().addClass("active"),$(".chart-area").lazyload()});
\ No newline at end of file
+var charts=[];$(document).ready(function(){var a,t=$("#explore-container .chart-list-panel");for(a in CHART_TYPES)t.append('<div id="chart-type-'+a+'"><h3 class="chart-type-head">'+CHART_TYPES[a]+'</h3><div class="row" id="chart-row-'+a+'"></div></div>');for(var l=0,e=EXAMPLES.length;l<e;++l){var r=EXAMPLES[l].title||"未命名图表",i=(EXAMPLES[l].subtitle,$('<div class="col-lg-3 col-md-4 col-sm-6"></div>')),c=$('<div class="chart"></div>');$("#chart-row-"+EXAMPLES[l].type).append(i.append(c)),$link=$('<a class="chart-link" href="demo.html#'+EXAMPLES[l].id+'"></a>'),c.append($link),$link.append('<h4 class="chart-title">'+r+"</h4>"),$chartArea=$('<img class="chart-area" data-original="'+GALLERY_THUMB_PATH+EXAMPLES[l].id+'.png" />'),$link.append($chartArea)}window.addEventListener("hashchange",function(){scrollBy(0,-80);var a=location.hash.split("-");3===a.length&&($("#left-chart-nav li").removeClass("active"),$("#left-chart-nav-"+a[2]).parent("li").addClass("active"))}),$("#left-chart-nav li").first().addClass("active"),$(".chart-area").lazyload()});
\ No newline at end of file
diff --git a/zh/js/cheat-sheet-en.js b/zh/js/cheat-sheet-en.js
index 89306f0..2e61548 100644
--- a/zh/js/cheat-sheet-en.js
+++ b/zh/js/cheat-sheet-en.js
@@ -1 +1 @@
-var $chart=$("#cheat-chart"),width=$chart.width(),heightRatio=400<width?.5:1.5,height=width*heightRatio,maxWidth=848;$chart.height(height);var highlightFill="rgba(132, 181, 228, 0.5)",grid={left:60,top:100,bottom:70,right:100};grid.width=width-grid.left-grid.right,grid.height=height-grid.top-grid.bottom;var chart,option,xScale=grid.width/(maxWidth-grid.left-grid.right),yScale=grid.height/(maxWidth*heightRatio-grid.top-grid.bottom),$detail=$("#cheat-detail"),selectedRegion=null;$(window).click(function(t){t.target!==$("#cheat-chart canvas")[0]&&$(t.target).closest($("#cheat-detail")).length<1&&(selectedRegion=null,_doUnhighlight(option.graphic.elements,!0),chart.setOption(option))});var baseOption={title:{text:"Chart Title",left:5,top:5},tooltip:{trigger:"axis",axisPointer:{type:"cross"},silent:!0,renderMode:"richText"},toolbox:{right:15,top:5,feature:{dataView:{show:!0,readOnly:!1},magicType:{show:!0,type:["line","bar"]},restore:{show:!0},saveAsImage:{show:!0}}},visualMap:{inRange:{symbolSize:[5,20],color:["#2F4554","#C23431"]},min:0,max:25,seriesIndex:2,left:80,top:80,itemWidth:20,itemHeight:80,calculable:!0},dataZoom:{type:"slider",show:!0,yAxisIndex:1},legend:{data:["Evaporation","Precipitation","Temperature"],top:35,left:5},grid:grid,xAxis:[{type:"category",data:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}],yAxis:[{type:"value",name:"Water",min:0,max:250,interval:50,axisLabel:{formatter:"{value} ml"}},{type:"value",name:"Temperature",min:0,max:25,interval:5,axisLabel:{formatter:"{value} °C"}}],series:[{name:"Evaporation",type:"bar",data:[2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3],silent:!0},{name:"Precipitation",type:"bar",data:[2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3],silent:!0},{name:"Temperature",type:"line",yAxisIndex:1,data:[2,2.2,3.3,5,6.3,10.2,20.3,23.4,23,16.5,12,6.2],silent:!0,symbol:"circle",markPoint:{data:[{coord:["Apr",5],value:"5℃"}]}}],graphic:{elements:[{type:"sector",position:[220,140],shape:{r:50,r0:20,cx:0,cy:0,startAngle:0,endAngle:1.2*Math.PI},style:{fill:"#C23431"}},{type:"text",position:[210,120],style:{text:"Draw Shapes and Text",fill:"#2F4554",font:"14px Arial"}}]},timeline:{data:["2010","2011","2012","2013","2014","2015","2016"],axisType:"category",show:!0,autoPlay:!1}},baseActions=[{type:"showTip",seriesIndex:0,dataIndex:7,position:[.65*width,.45*height]}],regions=[{left:grid.left,top:grid.top,width:grid.width,height:grid.height,option:{id:"grid",desc:"Drawing grid in rectangular coordinate."}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width/12*(i+.05),bottom:grid.bottom,width:grid.width/12*.9,height:grid.height/25*baseOption.series[2].data[i]+10});return t}(),option:{id:"series.itemStyle",desc:'Series data item style. For different series type, this has different meanings.\n For example, for line series, this is the style of data points. As for bar series, this is the style of bars. It works for the whole series. To give a specific data point a different style, it should be set in <a href="option.html#series-line.data.itemStyle" target="_blank"><code>series.data.itemStyle</code></a>.'}},{left:10,top:5,width:100,height:24,option:{id:"title",desc:"Chart title."}},{left:10,top:35,width:350,height:24,option:{id:"legend",desc:"Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart."}},{right:15,top:5,width:133,height:29,option:{id:"toolbox",desc:"A group of utility tools, which includes export, data view, dynamic type switching, data area zooming, and reset."}},{left:5,top:grid.top-35,width:70,height:grid.height+40,option:{id:"yAxis",desc:"The y axis in cartesian (rectangular) coordinate."}},{left:grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"Settings related to axis line."}},{left:grid.left+grid.width-15,top:grid.top-35,width:60,height:grid.height+40,option:{id:"yAxis",desc:"The y axis in cartesian (rectangular) coordinate. The second axis lies on the right side of the grid."}},{left:grid.width+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"Settings related to axis line."}},{group:[{left:grid.left+grid.width-40,top:grid.top-30,width:80,height:20},{left:38,top:grid.top-30,width:40,height:20}],option:{id:"yAxis.name",desc:"Name of axis, whose location can be changed by <code>nameLocation</code>."}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:11,top:grid.top+grid.height/5*i-9,width:42,height:18});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-9,width:42,height:18});return t}(),option:{id:"yAxis.axisLabel",desc:"Settings related to axis label."}},{group:function(){for(var t=[],i=0;i<5;++i)t.push({left:grid.left,top:grid.top+grid.height/5*i-3,width:width-grid.left-grid.right,height:6});return t}(),option:{id:"yAxis.splitLine",desc:"SplitLine of axis in grid area. Besides, there is also <code>splitArea</code> to set separate colors for grid backgrounds."}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:50,top:grid.top+grid.height/5*i-5,width:10,height:10});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-5,width:10,height:10});return t}(),option:{id:"yAxis.axisTick",desc:"Settings related to axis tick."}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis",desc:"The x axis in cartesian (rectangular) coordinate."}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis.axisLine",desc:"Settings related to axis line."}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width*(i+.5)/12-20*xScale,bottom:grid.bottom-25,width:40*xScale,height:20});return t}(),option:{id:"xAxis.axisLabel",desc:"Settings related to axis label."}},{group:function(){for(var t=[],i=0;i<13;++i)t.push({left:grid.left+grid.width*(i/12)-5,bottom:grid.bottom-5,width:10,height:10});return t}(),option:{id:"xAxis.axisTick",desc:"The x axis in cartesian (rectangular) coordinate. The second axis lies on the right side of the grid."}},{left:.65*width-5,top:.45*height-5,width:145,height:80,option:{id:"tooltip",desc:"Tooltip component."}},{left:grid.width/12*7.5+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"tooltip.axisPointer.lineStyle",desc:"Tooltip axisPointer line style."}},{left:grid.left,bottom:grid.height/250*162.2+grid.bottom-4,width:grid.width,height:6,option:{id:"tooltip.axisPointer.crossStyle",desc:"Tooltip axisPointer cross style."}},{group:[{left:5,bottom:grid.height/250*162.2+grid.bottom-10,width:50,height:20},{left:width-grid.right+3,bottom:grid.height/250*162.2+grid.bottom-10,width:43,height:20},{left:grid.width/12*7.5+grid.left-16,bottom:grid.bottom-24,width:32,height:20}],option:{id:"tooltip.axisPointer.label",desc:"Label of axisPointer."}},{left:baseOption.visualMap.left,top:baseOption.visualMap.top,width:60,height:110,option:{id:"visualMap",desc:'Visual mapping. It can maps data value to item shape, size, colors and so on. Besides this example of continuous visual mapping, you can also use <a href="option.html#series-line.data.itemStyle" target="_blank">piecewise visual mapping</a>。'}},{group:[{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top,width:40,height:20},{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top+90,width:40,height:20}],option:{id:"visualMap.calculable",desc:'Whether show handles, which can be dragged to adjust "selected range".'}},{right:5,top:grid.top-5,height:grid.height+12,width:34,option:{id:"dataZoom",desc:"dataZoom component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points."}},{left:160,top:105,width:200,height:90,option:{id:"graphic",desc:"Graphic component enables creating graphic elements in echarts, e.g., image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group and so on."}},{left:150,top:grid.top+grid.height+20,width:grid.width-120,height:45,option:{id:"timeline",desc:"Timeline component provides functions like switching and playing between multiple ECharts options."}},{left:grid.left+grid.width/12*3,width:grid.width/12,bottom:grid.bottom+grid.height/5,height:50,option:{id:"series.markPoint",desc:"Marking point.\nBesides that, you can also use <code>markLine</code> to set mark line, <code>markArea</code> to set mark area."}}];function setSheet(t,i,d){getBaseChart(width,height,t,i,function(t){chart=echarts.init($chart[0]),option={graphic:{}};function i(i,e,o){return{type:"rect",left:i.left,top:i.top,right:i.right,bottom:i.bottom,shape:{width:i.width,height:i.height},style:{fill:"transparent",stroke:"transparent"},onmouseover:function(){highlight(chart,a,e,option,o||i)},onmouseout:function(){unhighlightAll(chart,a,option),selectedRegion&&setDetailHtml(selectedRegion.option)},onclick:function(t){selectedRegion&&_doUnhighlight(a,!0),highlight(chart,a,e,option,selectedRegion=o||i,!0),t.event.stopPropagation()}}}for(var a=[],e=0;e<d.length;++e){var o;if(d[e].group){var r=d[e].group;o={type:"group",children:[],width:"100%",height:"100%"};for(var h=0;h<r.length;++h){var n=i(r[h],e,d[e]);o.children.push(n)}}else o=i(d[e],e);a.push(o)}a.push({type:"image",style:{image:t,width:width,height:height},silent:!0,z:-1}),option.graphic.elements=a,chart.setOption(option)})}function getBaseChart(t,i,e,o,a){var r=document.createElement("canvas");r.width=t,r.height=i;var h=echarts.init(r,null,{devicePixelRatio:2});e.animation=!1,e={baseOption:e},h.setOption(e);for(var n=0;o&&n<o.length;++n)h.dispatchAction(o[n]);"function"==typeof a&&setTimeout(function(){a(r.toDataURL())},10)}function highlight(t,i,e,o,a,r){if(setDetailHtml(a.option),r||_doUnhighlight(i),"group"===i[e].type)for(var h=i[e].children,n=0;n<h.length;++n)r?h[n].style.stroke="#24c":h[n].style.fill=highlightFill;else r?i[e].style.stroke="#24c":i[e].style.fill=highlightFill;t.setOption(o)}function unhighlightAll(t,i,e){$detail.text(""),_doUnhighlight(i),t.setOption(e)}function _doUnhighlight(t,i){for(var e=0;e<t.length;++e)if("rect"===t[e].type)t[e].style.fill="transparent",i&&(t[e].style.stroke="transparent");else if("group"===t[e].type)for(var o=t[e].children,a=0;a<o.length;++a)o[a].style.fill="transparent",i&&(o[a].style.stroke="transparent")}function setDetailHtml(t){var i=t.id;switch(i){case"series.itemStyle":i="series-line.itemStyle";break;case"dataZoom.handleStyle":i="dataZoom-slider.handleStyle";break;case"series.markPoint":i="series-line.markPoint"}var e=["<h3>",t.id,"</h3>",'<p class="desc">Click to select this component.</p>',"<p>",t.desc.split("\n").join("</p><p>"),"</p>","<p>",'<a href="./option.html#'+i+'" target="_blank">',"View Configuration Document","</a>","</p>"].join("");$detail.html(e)}setSheet(baseOption,baseActions,regions);
\ No newline at end of file
+var $chart=$("#cheat-chart"),width=$chart.width(),heightRatio=400<width?.5:1.5,height=width*heightRatio,maxWidth=848;$chart.height(height);var highlightFill="rgba(132, 181, 228, 0.5)",grid={left:60,top:100,bottom:70,right:100};grid.width=width-grid.left-grid.right,grid.height=height-grid.top-grid.bottom;var chart,option,xScale=grid.width/(maxWidth-grid.left-grid.right),yScale=grid.height/(maxWidth*heightRatio-grid.top-grid.bottom),$detail=$("#cheat-detail"),selectedRegion=null;$(window).click(function(t){t.target!==$("#cheat-chart canvas")[0]&&$(t.target).closest($("#cheat-detail")).length<1&&(selectedRegion=null,_doUnhighlight(option.graphic.elements,!0),chart.setOption(option))});var baseOption={title:{text:"Chart Title",left:5,top:5},tooltip:{trigger:"axis",axisPointer:{type:"cross"},silent:!0,renderMode:"richText"},toolbox:{right:15,top:5,feature:{dataView:{show:!0,readOnly:!1},magicType:{show:!0,type:["line","bar"]},restore:{show:!0},saveAsImage:{show:!0}}},visualMap:{inRange:{symbolSize:[5,20],color:["#2F4554","#C23431"]},min:0,max:25,seriesIndex:2,left:80,top:80,itemWidth:20,itemHeight:80,calculable:!0},dataZoom:{type:"slider",show:!0,yAxisIndex:1},legend:{data:["Evaporation","Precipitation","Temperature"],top:35,left:5},grid:grid,xAxis:[{type:"category",data:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}],yAxis:[{type:"value",name:"Water",min:0,max:250,interval:50,axisLabel:{formatter:"{value} ml"}},{type:"value",name:"Temperature",min:0,max:25,interval:5,axisLabel:{formatter:"{value} °C"}}],series:[{name:"Evaporation",type:"bar",data:[2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3],silent:!0},{name:"Precipitation",type:"bar",data:[2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3],silent:!0},{name:"Temperature",type:"line",yAxisIndex:1,data:[2,2.2,3.3,5,6.3,10.2,20.3,23.4,23,16.5,12,6.2],silent:!0,symbol:"circle",markPoint:{data:[{coord:["Apr",5],value:"5℃"}]}}],graphic:{elements:[{type:"sector",position:[220,140],shape:{r:50,r0:20,cx:0,cy:0,startAngle:0,endAngle:1.2*Math.PI},style:{fill:"#C23431"}},{type:"text",position:[210,120],style:{text:"Draw Shapes and Text",fill:"#2F4554",font:"14px Arial"}}]},timeline:{data:["2010","2011","2012","2013","2014","2015","2016"],axisType:"category",show:!0,autoPlay:!1}},baseActions=[{type:"showTip",seriesIndex:0,dataIndex:7,position:[.65*width,.45*height]}],regions=[{left:grid.left,top:grid.top,width:grid.width,height:grid.height,option:{id:"grid",desc:"Drawing grid in rectangular coordinate."}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width/12*(i+.05),bottom:grid.bottom,width:grid.width/12*.9,height:grid.height/25*baseOption.series[2].data[i]+10});return t}(),option:{id:"series.itemStyle",desc:'Series data item style. For different series type, this has different meanings.\n For example, for line series, this is the style of data points. As for bar series, this is the style of bars. It works for the whole series. To give a specific data point a different style, it should be set in <a href="option.html#series-line.data.itemStyle" target="_blank"><code>series.data.itemStyle</code></a>.'}},{left:10,top:5,width:100,height:24,option:{id:"title",desc:"Chart title."}},{left:10,top:35,width:350,height:24,option:{id:"legend",desc:"Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart."}},{right:15,top:5,width:133,height:29,option:{id:"toolbox",desc:"A group of utility tools, which includes export, data view, dynamic type switching, data area zooming, and reset."}},{left:5,top:grid.top-35,width:70,height:grid.height+40,option:{id:"yAxis",desc:"The y axis in cartesian (rectangular) coordinate."}},{left:grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"Settings related to axis line."}},{left:grid.left+grid.width-15,top:grid.top-35,width:60,height:grid.height+40,option:{id:"yAxis",desc:"The y axis in cartesian (rectangular) coordinate. The second axis lies on the right side of the grid."}},{left:grid.width+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"Settings related to axis line."}},{group:[{left:grid.left+grid.width-40,top:grid.top-30,width:80,height:20},{left:38,top:grid.top-30,width:40,height:20}],option:{id:"yAxis.name",desc:"Name of axis, whose location can be changed by <code>nameLocation</code>."}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:11,top:grid.top+grid.height/5*i-9,width:42,height:18});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-9,width:42,height:18});return t}(),option:{id:"yAxis.axisLabel",desc:"Settings related to axis label."}},{group:function(){for(var t=[],i=0;i<5;++i)t.push({left:grid.left,top:grid.top+grid.height/5*i-3,width:width-grid.left-grid.right,height:6});return t}(),option:{id:"yAxis.splitLine",desc:"SplitLine of axis in grid area. Besides, there is also <code>splitArea</code> to set separate colors for grid backgrounds."}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:50,top:grid.top+grid.height/5*i-5,width:10,height:10});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-5,width:10,height:10});return t}(),option:{id:"yAxis.axisTick",desc:"Settings related to axis tick."}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis",desc:"The x axis in cartesian (rectangular) coordinate."}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis.axisLine",desc:"Settings related to axis line."}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width*(i+.5)/12-20*xScale,bottom:grid.bottom-25,width:40*xScale,height:20});return t}(),option:{id:"xAxis.axisLabel",desc:"Settings related to axis label."}},{group:function(){for(var t=[],i=0;i<13;++i)t.push({left:grid.left+grid.width*(i/12)-5,bottom:grid.bottom-5,width:10,height:10});return t}(),option:{id:"xAxis.axisTick",desc:"The x axis in cartesian (rectangular) coordinate. The second axis lies on the right side of the grid."}},{left:.65*width-5,top:.45*height-5,width:145,height:80,option:{id:"tooltip",desc:"Tooltip component."}},{left:grid.width/12*7.5+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"tooltip.axisPointer.lineStyle",desc:"Tooltip axisPointer line style."}},{left:grid.left,bottom:grid.height/250*162.2+grid.bottom-4,width:grid.width,height:6,option:{id:"tooltip.axisPointer.crossStyle",desc:"Tooltip axisPointer cross style."}},{group:[{left:5,bottom:grid.height/250*162.2+grid.bottom-10,width:50,height:20},{left:width-grid.right+3,bottom:grid.height/250*162.2+grid.bottom-10,width:43,height:20},{left:grid.width/12*7.5+grid.left-16,bottom:grid.bottom-24,width:32,height:20}],option:{id:"tooltip.axisPointer.label",desc:"Label of axisPointer."}},{left:baseOption.visualMap.left,top:baseOption.visualMap.top,width:60,height:110,option:{id:"visualMap",desc:'Visual mapping. It can maps data value to item shape, size, colors and so on. Besides this example of continuous visual mapping, you can also use <a href="option.html#series-line.data.itemStyle" target="_blank">piecewise visual mapping</a>。'}},{group:[{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top,width:40,height:20},{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top+90,width:40,height:20}],option:{id:"visualMap.calculable",desc:'Whether show handles, which can be dragged to adjust "selected range".'}},{right:5,top:grid.top-5,height:grid.height+12,width:34,option:{id:"dataZoom",desc:"dataZoom component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points."}},{left:160,top:105,width:200,height:90,option:{id:"graphic",desc:"Graphic component enables creating graphic elements in echarts, e.g., image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group and so on."}},{left:150,top:grid.top+grid.height+20,width:grid.width-120,height:45,option:{id:"timeline",desc:"Timeline component provides functions like switching and playing between multiple ECharts options."}},{left:grid.left+grid.width/12*3,width:grid.width/12,bottom:grid.bottom+grid.height/5,height:50,option:{id:"series.markPoint",desc:"Marking point.\nBesides that, you can also use <code>markLine</code> to set mark line, <code>markArea</code> to set mark area."}}];function setSheet(t,i,d){getBaseChart(width,height,t,i,function(t){chart=echarts.init($chart[0]),option={graphic:{}};function i(i,e,o){return{type:"rect",left:i.left,top:i.top,right:i.right,bottom:i.bottom,shape:{width:i.width,height:i.height},style:{fill:"transparent",stroke:"transparent"},onmouseover:function(){highlight(chart,a,e,option,o||i)},onmouseout:function(){unhighlightAll(chart,a,option),selectedRegion&&setDetailHtml(selectedRegion.option)},onclick:function(t){selectedRegion&&_doUnhighlight(a,!0),highlight(chart,a,e,option,selectedRegion=o||i,!0),t.event.stopPropagation()}}}for(var a=[],e=0;e<d.length;++e){if(d[e].group)for(var o=d[e].group,r={type:"group",children:[],width:"100%",height:"100%"},h=0;h<o.length;++h){var n=i(o[h],e,d[e]);r.children.push(n)}else r=i(d[e],e);a.push(r)}a.push({type:"image",style:{image:t,width:width,height:height},silent:!0,z:-1}),option.graphic.elements=a,chart.setOption(option)})}function getBaseChart(t,i,e,o,a){var r=document.createElement("canvas");r.width=t,r.height=i;var h=echarts.init(r,null,{devicePixelRatio:2});e.animation=!1,h.setOption(e={baseOption:e});for(var n=0;o&&n<o.length;++n)h.dispatchAction(o[n]);"function"==typeof a&&setTimeout(function(){a(r.toDataURL())},10)}function highlight(t,i,e,o,a,r){if(setDetailHtml(a.option),r||_doUnhighlight(i),"group"===i[e].type)for(var h=i[e].children,n=0;n<h.length;++n)r?h[n].style.stroke="#24c":h[n].style.fill=highlightFill;else r?i[e].style.stroke="#24c":i[e].style.fill=highlightFill;t.setOption(o)}function unhighlightAll(t,i,e){$detail.text(""),_doUnhighlight(i),t.setOption(e)}function _doUnhighlight(t,i){for(var e=0;e<t.length;++e)if("rect"===t[e].type)t[e].style.fill="transparent",i&&(t[e].style.stroke="transparent");else if("group"===t[e].type)for(var o=t[e].children,a=0;a<o.length;++a)o[a].style.fill="transparent",i&&(o[a].style.stroke="transparent")}function setDetailHtml(t){var i=t.id;switch(i){case"series.itemStyle":i="series-line.itemStyle";break;case"dataZoom.handleStyle":i="dataZoom-slider.handleStyle";break;case"series.markPoint":i="series-line.markPoint"}t=["<h3>",t.id,"</h3>",'<p class="desc">Click to select this component.</p>',"<p>",t.desc.split("\n").join("</p><p>"),"</p>","<p>",'<a href="./option.html#'+i+'" target="_blank">',"View Configuration Document","</a>","</p>"].join("");$detail.html(t)}setSheet(baseOption,baseActions,regions);
\ No newline at end of file
diff --git a/zh/js/cheat-sheet.js b/zh/js/cheat-sheet.js
index 2554cf6..ef32c2f 100644
--- a/zh/js/cheat-sheet.js
+++ b/zh/js/cheat-sheet.js
@@ -1 +1 @@
-var $chart=$("#cheat-chart"),width=$chart.width(),heightRatio=400<width?.5:1.5,height=width*heightRatio,maxWidth=848;$chart.height(height);var highlightFill="rgba(132, 181, 228, 0.5)",grid={left:60,top:100,bottom:70,right:100};grid.width=width-grid.left-grid.right,grid.height=height-grid.top-grid.bottom;var chart,option,xScale=grid.width/(maxWidth-grid.left-grid.right),yScale=grid.height/(maxWidth*heightRatio-grid.top-grid.bottom),$detail=$("#cheat-detail"),selectedRegion=null;$(window).click(function(t){t.target!==$("#cheat-chart canvas")[0]&&$(t.target).closest($("#cheat-detail")).length<1&&(selectedRegion=null,_doUnhighlight(option.graphic.elements,!0),chart.setOption(option))});var baseOption={title:{text:"图表的标题",left:5,top:5},tooltip:{trigger:"axis",axisPointer:{type:"cross"},silent:!0,renderMode:"richText"},toolbox:{right:15,top:5,feature:{dataView:{show:!0,readOnly:!1},magicType:{show:!0,type:["line","bar"]},restore:{show:!0},saveAsImage:{show:!0}}},visualMap:{inRange:{symbolSize:[5,20],color:["#2F4554","#C23431"]},min:0,max:25,seriesIndex:2,left:80,top:80,itemWidth:20,itemHeight:80,calculable:!0},dataZoom:{type:"slider",show:!0,yAxisIndex:1},legend:{data:["蒸发量","降水量","平均温度"],top:35,left:5},grid:grid,xAxis:[{type:"category",data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]}],yAxis:[{type:"value",name:"水量",min:0,max:250,interval:50,axisLabel:{formatter:"{value} ml"}},{type:"value",name:"温度",min:0,max:25,interval:5,axisLabel:{formatter:"{value} °C"}}],series:[{name:"蒸发量",type:"bar",data:[2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3],silent:!0},{name:"降水量",type:"bar",data:[2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3],silent:!0},{name:"平均温度",type:"line",yAxisIndex:1,data:[2,2.2,3.3,5,6.3,10.2,20.3,23.4,23,16.5,12,6.2],silent:!0,symbol:"circle",markPoint:{data:[{coord:["4月",5],value:"5℃"}]}}],graphic:{elements:[{type:"sector",position:[220,140],shape:{r:50,r0:20,cx:0,cy:0,startAngle:0,endAngle:1.2*Math.PI},style:{fill:"#C23431"}},{type:"text",position:[210,120],style:{text:"绘制图形和文字",fill:"#2F4554",font:"14px Arial"}}]},timeline:{data:["2010","2011","2012","2013","2014","2015","2016"],axisType:"category",show:!0,autoPlay:!1}},baseActions=[{type:"showTip",seriesIndex:0,dataIndex:7,position:[.65*width,.45*height]}],regions=[{left:grid.left,top:grid.top,width:grid.width,height:grid.height,option:{id:"grid",desc:"直角坐标系内绘图区域"}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width/12*(i+.05),bottom:grid.bottom,width:grid.width/12*.9,height:grid.height/25*baseOption.series[2].data[i]+10});return t}(),option:{id:"series.itemStyle",desc:'系列的图形样式,对不同类型的图表有不同的意义。\n对折线图而言,这个配置项用于设置拐点处图形的样式;对柱状图而言,用于设置柱子的样式。该配置项是对整个系列的图形做设置,如果要对其中的某一个特定数据点做设置,应使用 <a href="option.html#series-line.data.itemStyle" target="_blank"><code>series.data.itemStyle</code></a>。'}},{left:10,top:5,width:100,height:24,option:{id:"title",desc:"图表的标题"}},{left:10,top:35,width:238,height:24,option:{id:"legend",desc:"图例,展现了不同系列的标记、颜色和名字"}},{right:15,top:5,width:133,height:29,option:{id:"toolbox",desc:"工具栏,提供操作图表的工具,可自定义"}},{left:5,top:grid.top-35,width:70,height:grid.height+40,option:{id:"yAxis",desc:"直角坐标系 grid 中的 y 轴"}},{left:grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"y 轴轴线"}},{left:grid.left+grid.width-15,top:grid.top-35,width:60,height:grid.height+40,option:{id:"yAxis",desc:"直角坐标系 grid 中的 y 轴;第二个 y 轴默认显示在右边"}},{left:grid.width+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"y 轴轴线"}},{group:[{left:grid.left+grid.width-20,top:grid.top-30,width:40,height:20},{left:38,top:grid.top-30,width:40,height:20}],option:{id:"yAxis.name",desc:"y 轴名称,可以通过<code>nameLocation</code>改变位置"}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:11,top:grid.top+grid.height/5*i-9,width:42,height:18});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-9,width:42,height:18});return t}(),option:{id:"yAxis.axisLabel",desc:"坐标轴刻度标签"}},{group:function(){for(var t=[],i=0;i<5;++i)t.push({left:grid.left,top:grid.top+grid.height/5*i-3,width:width-grid.left-grid.right,height:6});return t}(),option:{id:"yAxis.splitLine",desc:"坐标轴分割线,除此之外,还有 <code>splitArea</code> 设置背景色分割"}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:50,top:grid.top+grid.height/5*i-5,width:10,height:10});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-5,width:10,height:10});return t}(),option:{id:"yAxis.axisTick",desc:"坐标轴刻度"}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis",desc:"直角坐标系 grid 中的 x 轴"}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis.axisLine",desc:"x 轴轴线"}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width*(i+.5)/12-20*xScale,bottom:grid.bottom-25,width:40*xScale,height:20});return t}(),option:{id:"xAxis.axisLabel",desc:"坐标轴刻度标签"}},{group:function(){for(var t=[],i=0;i<13;++i)t.push({left:grid.left+grid.width*(i/12)-5,bottom:grid.bottom-5,width:10,height:10});return t}(),option:{id:"xAxis.axisTick",desc:"坐标轴刻度"}},{left:.65*width-5,top:.45*height-5,width:118,height:80,option:{id:"tooltip",desc:"提示框"}},{left:grid.width/12*7.5+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"tooltip.axisPointer.lineStyle",desc:"提示框坐标轴指示器的线条样式"}},{left:grid.left,bottom:grid.height/250*162.2+grid.bottom-4,width:grid.width,height:6,option:{id:"tooltip.axisPointer.crossStyle",desc:"提示框坐标轴指示器的十字线样式"}},{group:[{left:5,bottom:grid.height/250*162.2+grid.bottom-10,width:50,height:20},{left:width-grid.right+3,bottom:grid.height/250*162.2+grid.bottom-10,width:43,height:20},{left:grid.width/12*7.5+grid.left-16,bottom:grid.bottom-24,width:32,height:20}],option:{id:"tooltip.axisPointer.label",desc:"提示框坐标轴指示器的文字"}},{left:baseOption.visualMap.left,top:baseOption.visualMap.top,width:60,height:110,option:{id:"visualMap",desc:'视觉映射,可以将数据值映射到图形的形状、大小、颜色等。\n除了这个例子中连续型的视觉映射之外,还有<a href="option.html#series-line.data.itemStyle" target="_blank">离散型的视觉映射</a>。'}},{group:[{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top,width:40,height:20},{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top+90,width:40,height:20}],option:{id:"visualMap.calculable",desc:"是否显示拖拽用的手柄(手柄能拖拽调整选中范围)"}},{right:5,top:grid.top-5,height:grid.height+12,width:34,option:{id:"dataZoom",desc:"区域缩放,用来放大一部分的数据,以看清细节"}},{left:160,top:105,width:150,height:90,option:{id:"graphic",desc:"绘制图形元素,包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group 等"}},{left:150,top:grid.top+grid.height+20,width:grid.width-120,height:45,option:{id:"timeline",desc:"多个 option 切换,展现不同时间段的数据"}},{left:grid.left+grid.width/12*3,width:grid.width/12,bottom:grid.bottom+grid.height/5,height:50,option:{id:"series.markPoint",desc:"标记点。\n除此之外,还可以用 <code>markLine</code> 设置标记线,<code>markArea</code> 设置标记区域"}}];function setSheet(t,i,a){getBaseChart(width,height,t,i,function(t){chart=echarts.init($chart[0]),option={graphic:{}};function i(i,e,o){return{type:"rect",left:i.left,top:i.top,right:i.right,bottom:i.bottom,shape:{width:i.width,height:i.height},style:{fill:"transparent",stroke:"transparent"},onmouseover:function(){highlight(chart,h,e,option,o||i)},onmouseout:function(){unhighlightAll(chart,h,option),selectedRegion&&setDetailHtml(selectedRegion.option)},onclick:function(t){selectedRegion&&_doUnhighlight(h,!0),highlight(chart,h,e,option,selectedRegion=o||i,!0),t.event.stopPropagation()}}}for(var h=[],e=0;e<a.length;++e){var o;if(a[e].group){var r=a[e].group;o={type:"group",children:[],width:"100%",height:"100%"};for(var d=0;d<r.length;++d){var g=i(r[d],e,a[e]);o.children.push(g)}}else o=i(a[e],e);h.push(o)}h.push({type:"image",style:{image:t,width:width,height:height},silent:!0,z:-1}),option.graphic.elements=h,chart.setOption(option)})}function getBaseChart(t,i,e,o,h){var r=document.createElement("canvas");r.width=t,r.height=i;var d=echarts.init(r,null,{devicePixelRatio:2});e.animation=!1,e={baseOption:e},d.setOption(e);for(var g=0;o&&g<o.length;++g)d.dispatchAction(o[g]);"function"==typeof h&&setTimeout(function(){h(r.toDataURL())},10)}function highlight(t,i,e,o,h,r){if(setDetailHtml(h.option),r||_doUnhighlight(i),"group"===i[e].type)for(var d=i[e].children,g=0;g<d.length;++g)r?d[g].style.stroke="#24c":d[g].style.fill=highlightFill;else r?i[e].style.stroke="#24c":i[e].style.fill=highlightFill;t.setOption(o)}function unhighlightAll(t,i,e){$detail.text(""),_doUnhighlight(i),t.setOption(e)}function _doUnhighlight(t,i){for(var e=0;e<t.length;++e)if("rect"===t[e].type)t[e].style.fill="transparent",i&&(t[e].style.stroke="transparent");else if("group"===t[e].type)for(var o=t[e].children,h=0;h<o.length;++h)o[h].style.fill="transparent",i&&(o[h].style.stroke="transparent")}function setDetailHtml(t){var i=t.id;switch(i){case"series.itemStyle":i="series-line.itemStyle";break;case"dataZoom.handleStyle":i="dataZoom-slider.handleStyle";break;case"series.markPoint":i="series-line.markPoint"}var e=["<h3>",t.id,"</h3>",'<p class="desc">点击图形固定说明文字</p>',"<p>",t.desc.split("\n").join("</p><p>"),"</p>","<p>",'<a href="./option.html#'+i+'" target="_blank">',"查看配置项手册","</a>","</p>"].join("");$detail.html(e)}setSheet(baseOption,baseActions,regions);
\ No newline at end of file
+var $chart=$("#cheat-chart"),width=$chart.width(),heightRatio=400<width?.5:1.5,height=width*heightRatio,maxWidth=848;$chart.height(height);var highlightFill="rgba(132, 181, 228, 0.5)",grid={left:60,top:100,bottom:70,right:100};grid.width=width-grid.left-grid.right,grid.height=height-grid.top-grid.bottom;var chart,option,xScale=grid.width/(maxWidth-grid.left-grid.right),yScale=grid.height/(maxWidth*heightRatio-grid.top-grid.bottom),$detail=$("#cheat-detail"),selectedRegion=null;$(window).click(function(t){t.target!==$("#cheat-chart canvas")[0]&&$(t.target).closest($("#cheat-detail")).length<1&&(selectedRegion=null,_doUnhighlight(option.graphic.elements,!0),chart.setOption(option))});var baseOption={title:{text:"图表的标题",left:5,top:5},tooltip:{trigger:"axis",axisPointer:{type:"cross"},silent:!0,renderMode:"richText"},toolbox:{right:15,top:5,feature:{dataView:{show:!0,readOnly:!1},magicType:{show:!0,type:["line","bar"]},restore:{show:!0},saveAsImage:{show:!0}}},visualMap:{inRange:{symbolSize:[5,20],color:["#2F4554","#C23431"]},min:0,max:25,seriesIndex:2,left:80,top:80,itemWidth:20,itemHeight:80,calculable:!0},dataZoom:{type:"slider",show:!0,yAxisIndex:1},legend:{data:["蒸发量","降水量","平均温度"],top:35,left:5},grid:grid,xAxis:[{type:"category",data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]}],yAxis:[{type:"value",name:"水量",min:0,max:250,interval:50,axisLabel:{formatter:"{value} ml"}},{type:"value",name:"温度",min:0,max:25,interval:5,axisLabel:{formatter:"{value} °C"}}],series:[{name:"蒸发量",type:"bar",data:[2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3],silent:!0},{name:"降水量",type:"bar",data:[2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3],silent:!0},{name:"平均温度",type:"line",yAxisIndex:1,data:[2,2.2,3.3,5,6.3,10.2,20.3,23.4,23,16.5,12,6.2],silent:!0,symbol:"circle",markPoint:{data:[{coord:["4月",5],value:"5℃"}]}}],graphic:{elements:[{type:"sector",position:[220,140],shape:{r:50,r0:20,cx:0,cy:0,startAngle:0,endAngle:1.2*Math.PI},style:{fill:"#C23431"}},{type:"text",position:[210,120],style:{text:"绘制图形和文字",fill:"#2F4554",font:"14px Arial"}}]},timeline:{data:["2010","2011","2012","2013","2014","2015","2016"],axisType:"category",show:!0,autoPlay:!1}},baseActions=[{type:"showTip",seriesIndex:0,dataIndex:7,position:[.65*width,.45*height]}],regions=[{left:grid.left,top:grid.top,width:grid.width,height:grid.height,option:{id:"grid",desc:"直角坐标系内绘图区域"}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width/12*(i+.05),bottom:grid.bottom,width:grid.width/12*.9,height:grid.height/25*baseOption.series[2].data[i]+10});return t}(),option:{id:"series.itemStyle",desc:'系列的图形样式,对不同类型的图表有不同的意义。\n对折线图而言,这个配置项用于设置拐点处图形的样式;对柱状图而言,用于设置柱子的样式。该配置项是对整个系列的图形做设置,如果要对其中的某一个特定数据点做设置,应使用 <a href="option.html#series-line.data.itemStyle" target="_blank"><code>series.data.itemStyle</code></a>。'}},{left:10,top:5,width:100,height:24,option:{id:"title",desc:"图表的标题"}},{left:10,top:35,width:238,height:24,option:{id:"legend",desc:"图例,展现了不同系列的标记、颜色和名字"}},{right:15,top:5,width:133,height:29,option:{id:"toolbox",desc:"工具栏,提供操作图表的工具,可自定义"}},{left:5,top:grid.top-35,width:70,height:grid.height+40,option:{id:"yAxis",desc:"直角坐标系 grid 中的 y 轴"}},{left:grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"y 轴轴线"}},{left:grid.left+grid.width-15,top:grid.top-35,width:60,height:grid.height+40,option:{id:"yAxis",desc:"直角坐标系 grid 中的 y 轴;第二个 y 轴默认显示在右边"}},{left:grid.width+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"yAxis.axisLine",desc:"y 轴轴线"}},{group:[{left:grid.left+grid.width-20,top:grid.top-30,width:40,height:20},{left:38,top:grid.top-30,width:40,height:20}],option:{id:"yAxis.name",desc:"y 轴名称,可以通过<code>nameLocation</code>改变位置"}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:11,top:grid.top+grid.height/5*i-9,width:42,height:18});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-9,width:42,height:18});return t}(),option:{id:"yAxis.axisLabel",desc:"坐标轴刻度标签"}},{group:function(){for(var t=[],i=0;i<5;++i)t.push({left:grid.left,top:grid.top+grid.height/5*i-3,width:width-grid.left-grid.right,height:6});return t}(),option:{id:"yAxis.splitLine",desc:"坐标轴分割线,除此之外,还有 <code>splitArea</code> 设置背景色分割"}},{group:function(){for(var t=[],i=0;i<6;++i)t.push({left:50,top:grid.top+grid.height/5*i-5,width:10,height:10});for(i=0;i<6;++i)t.push({left:grid.left+grid.width,top:grid.top+grid.height/5*i-5,width:10,height:10});return t}(),option:{id:"yAxis.axisTick",desc:"坐标轴刻度"}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis",desc:"直角坐标系 grid 中的 x 轴"}},{left:grid.left,bottom:grid.bottom-3,width:grid.width,height:6,option:{id:"xAxis.axisLine",desc:"x 轴轴线"}},{group:function(){for(var t=[],i=0;i<12;++i)t.push({left:grid.left+grid.width*(i+.5)/12-20*xScale,bottom:grid.bottom-25,width:40*xScale,height:20});return t}(),option:{id:"xAxis.axisLabel",desc:"坐标轴刻度标签"}},{group:function(){for(var t=[],i=0;i<13;++i)t.push({left:grid.left+grid.width*(i/12)-5,bottom:grid.bottom-5,width:10,height:10});return t}(),option:{id:"xAxis.axisTick",desc:"坐标轴刻度"}},{left:.65*width-5,top:.45*height-5,width:118,height:80,option:{id:"tooltip",desc:"提示框"}},{left:grid.width/12*7.5+grid.left-3,top:grid.top,width:6,height:grid.height,option:{id:"tooltip.axisPointer.lineStyle",desc:"提示框坐标轴指示器的线条样式"}},{left:grid.left,bottom:grid.height/250*162.2+grid.bottom-4,width:grid.width,height:6,option:{id:"tooltip.axisPointer.crossStyle",desc:"提示框坐标轴指示器的十字线样式"}},{group:[{left:5,bottom:grid.height/250*162.2+grid.bottom-10,width:50,height:20},{left:width-grid.right+3,bottom:grid.height/250*162.2+grid.bottom-10,width:43,height:20},{left:grid.width/12*7.5+grid.left-16,bottom:grid.bottom-24,width:32,height:20}],option:{id:"tooltip.axisPointer.label",desc:"提示框坐标轴指示器的文字"}},{left:baseOption.visualMap.left,top:baseOption.visualMap.top,width:60,height:110,option:{id:"visualMap",desc:'视觉映射,可以将数据值映射到图形的形状、大小、颜色等。\n除了这个例子中连续型的视觉映射之外,还有<a href="option.html#series-line.data.itemStyle" target="_blank">离散型的视觉映射</a>。'}},{group:[{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top,width:40,height:20},{left:baseOption.visualMap.left+20,top:baseOption.visualMap.top+90,width:40,height:20}],option:{id:"visualMap.calculable",desc:"是否显示拖拽用的手柄(手柄能拖拽调整选中范围)"}},{right:5,top:grid.top-5,height:grid.height+12,width:34,option:{id:"dataZoom",desc:"区域缩放,用来放大一部分的数据,以看清细节"}},{left:160,top:105,width:150,height:90,option:{id:"graphic",desc:"绘制图形元素,包括:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group 等"}},{left:150,top:grid.top+grid.height+20,width:grid.width-120,height:45,option:{id:"timeline",desc:"多个 option 切换,展现不同时间段的数据"}},{left:grid.left+grid.width/12*3,width:grid.width/12,bottom:grid.bottom+grid.height/5,height:50,option:{id:"series.markPoint",desc:"标记点。\n除此之外,还可以用 <code>markLine</code> 设置标记线,<code>markArea</code> 设置标记区域"}}];function setSheet(t,i,a){getBaseChart(width,height,t,i,function(t){chart=echarts.init($chart[0]),option={graphic:{}};function i(i,e,o){return{type:"rect",left:i.left,top:i.top,right:i.right,bottom:i.bottom,shape:{width:i.width,height:i.height},style:{fill:"transparent",stroke:"transparent"},onmouseover:function(){highlight(chart,h,e,option,o||i)},onmouseout:function(){unhighlightAll(chart,h,option),selectedRegion&&setDetailHtml(selectedRegion.option)},onclick:function(t){selectedRegion&&_doUnhighlight(h,!0),highlight(chart,h,e,option,selectedRegion=o||i,!0),t.event.stopPropagation()}}}for(var h=[],e=0;e<a.length;++e){if(a[e].group)for(var o=a[e].group,d={type:"group",children:[],width:"100%",height:"100%"},r=0;r<o.length;++r){var g=i(o[r],e,a[e]);d.children.push(g)}else d=i(a[e],e);h.push(d)}h.push({type:"image",style:{image:t,width:width,height:height},silent:!0,z:-1}),option.graphic.elements=h,chart.setOption(option)})}function getBaseChart(t,i,e,o,h){var d=document.createElement("canvas");d.width=t,d.height=i;var r=echarts.init(d,null,{devicePixelRatio:2});e.animation=!1,r.setOption(e={baseOption:e});for(var g=0;o&&g<o.length;++g)r.dispatchAction(o[g]);"function"==typeof h&&setTimeout(function(){h(d.toDataURL())},10)}function highlight(t,i,e,o,h,d){if(setDetailHtml(h.option),d||_doUnhighlight(i),"group"===i[e].type)for(var r=i[e].children,g=0;g<r.length;++g)d?r[g].style.stroke="#24c":r[g].style.fill=highlightFill;else d?i[e].style.stroke="#24c":i[e].style.fill=highlightFill;t.setOption(o)}function unhighlightAll(t,i,e){$detail.text(""),_doUnhighlight(i),t.setOption(e)}function _doUnhighlight(t,i){for(var e=0;e<t.length;++e)if("rect"===t[e].type)t[e].style.fill="transparent",i&&(t[e].style.stroke="transparent");else if("group"===t[e].type)for(var o=t[e].children,h=0;h<o.length;++h)o[h].style.fill="transparent",i&&(o[h].style.stroke="transparent")}function setDetailHtml(t){var i=t.id;switch(i){case"series.itemStyle":i="series-line.itemStyle";break;case"dataZoom.handleStyle":i="dataZoom-slider.handleStyle";break;case"series.markPoint":i="series-line.markPoint"}t=["<h3>",t.id,"</h3>",'<p class="desc">点击图形固定说明文字</p>',"<p>",t.desc.split("\n").join("</p><p>"),"</p>","<p>",'<a href="./option.html#'+i+'" target="_blank">',"查看配置项手册","</a>","</p>"].join("");$detail.html(t)}setSheet(baseOption,baseActions,regions);
\ No newline at end of file
diff --git a/zh/js/common.js b/zh/js/common.js
index 3dfbc92..dfbb47b 100644
--- a/zh/js/common.js
+++ b/zh/js/common.js
@@ -1 +1 @@
-function changeLang(e){if("en"!==e||"echarts.apache.org"===location.hostname)location.href=location.href.replace(new RegExp("/(zh|en)/","g"),"/"+e+"/");else{var t=new RegExp("/zh/","g"),n="https://echarts.apache.org"+location.pathname.replace(t,"/en/")+location.search+location.hash;location.href=n}}function closeApacheBanner(e){var t=document.getElementById("apache-banner");t&&t.remove(),e&&(_hmt.push(["_trackEvent","apacheBanner","close"]),Cookies.set("apache-banner-closed","true",{expires:7}))}function logApache(){_hmt.push(["_trackEvent","apacheBanner","visit"])}$(document).ready(function(){if("echarts.apache.org"!==location.host){var e=document.getElementById("apache-banner");e&&(e.style.display="block")}"true"===Cookies.get("apache-banner-closed")&&closeApacheBanner(!1);var t=$(".page-detail h2");0<t.length&&t.each(function(e){var t='href="#'+$(this).attr("id")+'"',n=$(this).text();$(this).next(".time")&&(n+=" "+$(this).next(".time").text());var a=$("<a "+t+(0===e?' class="active"':" ")+">"+n+"</a>").click(function(){$(".page-nav a").removeClass("active"),$(this).addClass("active")});$(".page-nav ul").append($("<li></li>").append(a))});var n=$(".page-content").find("iframe");function a(){n.filter(function(){var e=$(this);if(e.attr("src"))return!1;var t=e[0].getClientRects();return 0<t.length&&0<t[0].top&&t[0].top<$(window).height()}).each(function(){$(this).attr("src",$(this).data("src"))})}a(),$(window).scroll(function(){a()}),$(".slide-btn").click(function(){var e=$(this).parent().parent();e.hasClass("slide-up")?($(this).text("收起目录"),e.removeClass("slide-up")):($(this).text("展开目录"),e.addClass("slide-up"))}),$(".page-nav")&&$(window).scroll(function(){var e=Math.max(120-(window.pageYOffset-120),70);$(".page-nav").css("top",e)})}),function(){function c(){for(var e=0,t={};e<arguments.length;e++){var n=arguments[e];for(var a in n)t[a]=n[a]}return t}function p(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}(function e(s){function i(){}function n(e,t,n){if("undefined"!=typeof document){"number"==typeof(n=c({path:"/"},i.defaults,n)).expires&&(n.expires=new Date(1*new Date+864e5*n.expires)),n.expires=n.expires?n.expires.toUTCString():"";try{var a=JSON.stringify(t);/^[\{\[]/.test(a)&&(t=a)}catch(e){}t=s.write?s.write(t,e):encodeURIComponent(String(t)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),e=encodeURIComponent(String(e)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var r="";for(var o in n)n[o]&&(r+="; "+o,!0!==n[o]&&(r+="="+n[o].split(";")[0]));return document.cookie=e+"="+t+r}}function t(e,t){if("undefined"!=typeof document){for(var n={},a=document.cookie?document.cookie.split("; "):[],r=0;r<a.length;r++){var o=a[r].split("="),i=o.slice(1).join("=");t||'"'!==i.charAt(0)||(i=i.slice(1,-1));try{var c=p(o[0]);if(i=(s.read||s)(i,c)||p(i),t)try{i=JSON.parse(i)}catch(e){}if(n[c]=i,e===c)break}catch(e){}}return e?n[e]:n}}return(window.Cookies=i).set=n,i.get=function(e){return t(e,!1)},i.getJSON=function(e){return t(e,!0)},i.remove=function(e,t){n(e,"",c(t,{expires:-1}))},i.defaults={},i.withConverter=e,i})(function(){})}();
\ No newline at end of file
+function changeLang(e){"en"!==e||"echarts.apache.org"===location.hostname?location.href=location.href.replace(new RegExp("/(zh|en)/","g"),"/"+e+"/"):(e=new RegExp("/zh/","g"),e="https://echarts.apache.org"+location.pathname.replace(e,"/en/")+location.search+location.hash,location.href=e)}function closeApacheBanner(e){var t=document.getElementById("apache-banner");t&&t.remove(),e&&(_hmt.push(["_trackEvent","apacheBanner","close"]),Cookies.set("apache-banner-closed","true",{expires:7}))}function logApache(){_hmt.push(["_trackEvent","apacheBanner","visit"])}$(document).ready(function(){"echarts.apache.org"===location.host||(e=document.getElementById("apache-banner"))&&(e.style.display="block"),"true"===Cookies.get("apache-banner-closed")&&closeApacheBanner(!1);var e=$(".page-detail h2");0<e.length&&e.each(function(e){var t='href="#'+$(this).attr("id")+'"',n=$(this).text();$(this).next(".time")&&(n+=" "+$(this).next(".time").text());n=$("<a "+t+(0===e?' class="active"':" ")+">"+n+"</a>").click(function(){$(".page-nav a").removeClass("active"),$(this).addClass("active")});$(".page-nav ul").append($("<li></li>").append(n))});var t=$(".page-content").find("iframe");function n(){t.filter(function(){var e=$(this);if(e.attr("src"))return!1;e=e[0].getClientRects();return 0<e.length&&0<e[0].top&&e[0].top<$(window).height()}).each(function(){$(this).attr("src",$(this).data("src"))})}n(),$(window).scroll(function(){n()}),$(".slide-btn").click(function(){var e=$(this).parent().parent();e.hasClass("slide-up")?($(this).text("收起目录"),e.removeClass("slide-up")):($(this).text("展开目录"),e.addClass("slide-up"))}),$(".page-nav")&&$(window).scroll(function(){var e=Math.max(120-(window.pageYOffset-120),70);$(".page-nav").css("top",e)})}),function(){function r(){for(var e=0,t={};e<arguments.length;e++){var n,a=arguments[e];for(n in a)t[n]=a[n]}return t}function p(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}(function e(s){function c(){}function n(e,t,n){if("undefined"!=typeof document){"number"==typeof(n=r({path:"/"},c.defaults,n)).expires&&(n.expires=new Date(+new Date+864e5*n.expires)),n.expires=n.expires?n.expires.toUTCString():"";try{var a=JSON.stringify(t);/^[\{\[]/.test(a)&&(t=a)}catch(e){}t=s.write?s.write(t,e):encodeURIComponent(String(t)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),e=encodeURIComponent(String(e)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var o,i="";for(o in n)n[o]&&(i+="; "+o,!0!==n[o]&&(i+="="+n[o].split(";")[0]));return document.cookie=e+"="+t+i}}function t(e,t){if("undefined"!=typeof document){for(var n={},a=document.cookie?document.cookie.split("; "):[],o=0;o<a.length;o++){var i=a[o].split("="),c=i.slice(1).join("=");t||'"'!==c.charAt(0)||(c=c.slice(1,-1));try{var r=p(i[0]),c=(s.read||s)(c,r)||p(c);if(t)try{c=JSON.parse(c)}catch(e){}if(n[r]=c,e===r)break}catch(e){}}return e?n[e]:n}}return(window.Cookies=c).set=n,c.get=function(e){return t(e,!1)},c.getJSON=function(e){return t(e,!0)},c.remove=function(e,t){n(e,"",r(t,{expires:-1}))},c.defaults={},c.withConverter=e,c})(function(){})}();
\ No newline at end of file
diff --git a/zh/js/download.js b/zh/js/download.js
index 497eadb..8ef2228 100644
--- a/zh/js/download.js
+++ b/zh/js/download.js
@@ -1 +1 @@
-var param=[{publishedAt:"2021-09-01T00:00:00Z",prerelease:!1,name:"5.2.0"},{publishedAt:"2021-06-09T00:00:00Z",prerelease:!1,name:"5.1.2"},{publishedAt:"2021-04-27T00:00:00Z",prerelease:!1,name:"5.1.1"},{publishedAt:"2021-04-15T00:00:00Z",prerelease:!1,name:"5.1.0"},{publishedAt:"2021-02-06T00:00:00Z",prerelease:!1,name:"5.0.2"},{publishedAt:"2021-01-16T00:00:00Z",prerelease:!1,name:"5.0.1"},{publishedAt:"2020-12-02T00:00:00Z",prerelease:!1,name:"5.0.0"},{publishedAt:"2020-09-01T00:00:00Z",prerelease:!1,name:"4.9.0"},{publishedAt:"2020-05-25T00:00:00Z",prerelease:!1,name:"4.8.0"},{publishedAt:"2020-03-19T00:00:00Z",prerelease:!1,name:"4.7.0"},{publishedAt:"2019-12-30T00:00:00Z",prerelease:!1,name:"4.6.0"},{publishedAt:"2019-11-18T16:00:00Z",prerelease:!1,name:"4.5.0"},{publishedAt:"2019-10-15T01:12:00Z",prerelease:!1,name:"4.4.0"},{publishedAt:"2019-09-16T15:57:00Z",prerelease:!1,name:"4.3.0"},{publishedAt:"2019-03-21T10:27:59Z",prerelease:!1,name:"4.2.1"},{publishedAt:"2018-08-04T12:55:30Z",prerelease:!1,name:"4.1.0"}],table=document.getElementById("download-table");function isIncubatingVersion(e){return e.split(".")[0]<5||"5.0.0"===e}for(var i=0;i<param.length;++i)if(!param[i].prerelease){var time=new Date(param[i].publishedAt);if(time.getTime()>new Date("2018-05-21")){var line=document.createElement("tr"),version=param[i].name,versionEl=document.createElement("td");versionEl.innerHTML=param[i].name,line.appendChild(versionEl);var date=document.createElement("td");date.innerHTML=time.getFullYear()+"/"+(time.getMonth()+1)+"/"+time.getDate(),line.appendChild(date);var isIncubating=isIncubatingVersion(version),main="https://www.apache.org/dist/echarts/"+version+"/apache-echarts-"+version+(isIncubating?"-incubating":""),mirror="https://www.apache.org/dyn/closer.cgi/echarts/"+version+"/apache-echarts-"+version+(isIncubating?"-incubating":""),source=document.createElement("td");source.innerHTML='<a target="_blank" href="'+mirror+'-src.zip">Source</a> (<a target="_blank" href="'+main+'-src.zip.asc">Signature</a> <a target="_blank" href="'+main+'-src.zip.sha512">SHA512</a>)',line.appendChild(source);var bin=document.createElement("td");bin.innerHTML='<a target="_blank" href="https://github.com/apache/echarts/tree/'+version+'/dist">Dist</a>',line.appendChild(bin),table.appendChild(line)}}
\ No newline at end of file
+var param=[{publishedAt:"2021-09-01T00:00:00Z",prerelease:!1,name:"5.2.0"},{publishedAt:"2021-06-09T00:00:00Z",prerelease:!1,name:"5.1.2"},{publishedAt:"2021-04-27T00:00:00Z",prerelease:!1,name:"5.1.1"},{publishedAt:"2021-04-15T00:00:00Z",prerelease:!1,name:"5.1.0"},{publishedAt:"2021-02-06T00:00:00Z",prerelease:!1,name:"5.0.2"},{publishedAt:"2021-01-16T00:00:00Z",prerelease:!1,name:"5.0.1"},{publishedAt:"2020-12-02T00:00:00Z",prerelease:!1,name:"5.0.0"},{publishedAt:"2020-09-01T00:00:00Z",prerelease:!1,name:"4.9.0"},{publishedAt:"2020-05-25T00:00:00Z",prerelease:!1,name:"4.8.0"},{publishedAt:"2020-03-19T00:00:00Z",prerelease:!1,name:"4.7.0"},{publishedAt:"2019-12-30T00:00:00Z",prerelease:!1,name:"4.6.0"},{publishedAt:"2019-11-18T16:00:00Z",prerelease:!1,name:"4.5.0"},{publishedAt:"2019-10-15T01:12:00Z",prerelease:!1,name:"4.4.0"},{publishedAt:"2019-09-16T15:57:00Z",prerelease:!1,name:"4.3.0"},{publishedAt:"2019-03-21T10:27:59Z",prerelease:!1,name:"4.2.1"},{publishedAt:"2018-08-04T12:55:30Z",prerelease:!1,name:"4.1.0"}],table=document.getElementById("download-table");function isIncubatingVersion(e){return e.split(".")[0]<5||"5.0.0"===e}for(var time,line,version,versionEl,date,isIncubating,main,mirror,source,bin,i=0;i<param.length;++i)param[i].prerelease||(time=new Date(param[i].publishedAt)).getTime()>new Date("2018-05-21")&&(line=document.createElement("tr"),version=param[i].name,(versionEl=document.createElement("td")).innerHTML=param[i].name,line.appendChild(versionEl),(date=document.createElement("td")).innerHTML=time.getFullYear()+"/"+(time.getMonth()+1)+"/"+time.getDate(),line.appendChild(date),isIncubating=isIncubatingVersion(version),main="https://www.apache.org/dist/echarts/"+version+"/apache-echarts-"+version+(isIncubating?"-incubating":""),mirror="https://www.apache.org/dyn/closer.cgi/echarts/"+version+"/apache-echarts-"+version+(isIncubating?"-incubating":""),(source=document.createElement("td")).innerHTML='<a target="_blank" href="'+mirror+'-src.zip">Source</a> (<a target="_blank" href="'+main+'-src.zip.asc">Signature</a> <a target="_blank" href="'+main+'-src.zip.sha512">SHA512</a>)',line.appendChild(source),(bin=document.createElement("td")).innerHTML='<a target="_blank" href="https://github.com/apache/echarts/tree/'+version+'/dist">Dist</a>',line.appendChild(bin),table.appendChild(line));
\ No newline at end of file
diff --git a/zh/js/examples-nav.js b/zh/js/examples-nav.js
index 373722e..76d0a76 100644
--- a/zh/js/examples-nav.js
+++ b/zh/js/examples-nav.js
@@ -1 +1 @@
-var charts=[];$(document).ready(function(){var a=$("#left-chart-nav ul"),t=location.pathname.match(/demo.html/);for(var e in CHART_TYPES)a.append($("<li>").append('<a class="left-chart-nav-link" id="left-chart-nav-'+e+'" href="'+(t?"examples.html":"")+"#chart-type-"+e+'"><div class="chart-icon"></div><div class="chart-name">'+CHART_TYPES[e]+"</div></a>"));$(".chart-area").height($(".chart-area").width()/5*4);var h=null,i=null;$(window).scroll(function(){var a=-$(".chart-list-panel")[0].getBoundingClientRect().top,t=parseInt($("#chart-type-scatter h3").css("margin-top"),10);if(!h){var e=$(".chart-list-panel").children(),r=0;h=[];for(var l=0;l<e.length;++l)r+=$($(".chart-list-panel").children()[l]).height()+t,h.push({height:r,id:$($(".chart-list-panel").children()[l]).attr("id").slice("chart-type-".length)})}for(l=0;l<h.length;++l)if(h[l].height>a){i!==h[l].id&&($("#left-chart-nav li").removeClass("active"),$("#left-chart-nav-"+h[l].id).parent().addClass("active"),i=h[l].id);break}})});
\ No newline at end of file
+var charts=[];$(document).ready(function(){var a,t=$("#left-chart-nav ul"),e=location.pathname.match(/demo.html/);for(a in CHART_TYPES)t.append($("<li>").append('<a class="left-chart-nav-link" id="left-chart-nav-'+a+'" href="'+(e?"examples.html":"")+"#chart-type-"+a+'"><div class="chart-icon"></div><div class="chart-name">'+CHART_TYPES[a]+"</div></a>"));$(".chart-area").height($(".chart-area").width()/5*4);var h=null,i=null;$(window).scroll(function(){var a=-$(".chart-list-panel")[0].getBoundingClientRect().top,t=parseInt($("#chart-type-scatter h3").css("margin-top"),10);if(!h){var e=$(".chart-list-panel").children(),r=0;h=[];for(var l=0;l<e.length;++l)r+=$($(".chart-list-panel").children()[l]).height()+t,h.push({height:r,id:$($(".chart-list-panel").children()[l]).attr("id").slice("chart-type-".length)})}for(l=0;l<h.length;++l)if(h[l].height>a){i!==h[l].id&&($("#left-chart-nav li").removeClass("active"),$("#left-chart-nav-"+h[l].id).parent().addClass("active"),i=h[l].id);break}})});
\ No newline at end of file
diff --git a/zh/js/index.js b/zh/js/index.js
index c1ef037..38cd330 100644
--- a/zh/js/index.js
+++ b/zh/js/index.js
@@ -1 +1 @@
-window.lazyLoadOptions={elements_selector:".lazy"},function(){if(!$(".lower-ie").length){document.getElementById("nav-index").className="active";var e=navigator.userAgent,n=e.match(/MSIE\s([\d.]+)/)||e.match(/Trident\/.+?rv:(([\d.]+))/),o=e.match(/Edge\/([\d.]+)/);window.supportTouch="ontouchstart"in window&&!n&&!o,function(){ScrollReveal().reveal(".reveal",{container:"#page-index",delay:300}),ScrollReveal().reveal(".reveal-later",{container:"#page-index",delay:600}),ScrollReveal().reveal(".reveal-latest",{container:"#page-index",delay:1200}),ScrollReveal().reveal(".reveal-about",{container:"#page-index",delay:600});var t={};function o(e,n){var o=e;"string"==typeof e&&(o=document.getElementById(e)),t[e]=lottie.loadAnimation({container:o,renderer:"svg",loop:!1,autoplay:!0,path:n})}o("icon-1","asset/lottie/json/chart.json"),o("icon-2","asset/lottie/json/fly.json"),o("icon-3","asset/lottie/json/analysis.json"),o("icon-4","asset/lottie/json/compatible.json"),o("icon-5","asset/lottie/json/grown.json"),o("icon-6","asset/lottie/json/simple.json");for(var e=0;e<6;e++)o("bg-icon-"+(e+1),"asset/lottie/json/bg_0"+(e+1)+".json"),function(e){$("#index-feature-"+(e+1)).mouseenter(function(){t["icon-"+(e+1)].goToAndPlay(0)})}(e);var a=!1,i=!1;o("paper-icon","asset/lottie/json/paper.json"),$("#page-index").scroll(function(){var e=$("#start-line").offset().top,n=$("#end-line").offset().top;e>=$(window).scrollTop()&&e<$(window).scrollTop()+$(window).height()-200?a||($("#publication").css("opacity",1),t["start-line"]?t["start-line"].goToAndPlay(0):o("start-line","asset/lottie/json/start_line.json"),t["paper-icon"]?t["paper-icon"].goToAndPlay(0):o("paper-icon","asset/lottie/json/paper.json"),a=!0):a=a||!1,n<=400?i||(t["end-line"]?t["end-line"].goToAndPlay(0):o("end-line","asset/lottie/json/end_line.json"),i=!0):i=i||!1})}()}}();
\ No newline at end of file
+window.lazyLoadOptions={elements_selector:".lazy"},function(){var e,n;$(".lower-ie").length||(document.getElementById("nav-index").className="active",e=(n=navigator.userAgent).match(/MSIE\s([\d.]+)/)||n.match(/Trident\/.+?rv:(([\d.]+))/),n=n.match(/Edge\/([\d.]+)/),window.supportTouch="ontouchstart"in window&&!e&&!n,function(){ScrollReveal().reveal(".reveal",{container:"#page-index",delay:300}),ScrollReveal().reveal(".reveal-later",{container:"#page-index",delay:600}),ScrollReveal().reveal(".reveal-latest",{container:"#page-index",delay:1200}),ScrollReveal().reveal(".reveal-about",{container:"#page-index",delay:600});var t={};function o(e,n){var o=e;"string"==typeof e&&(o=document.getElementById(e)),t[e]=lottie.loadAnimation({container:o,renderer:"svg",loop:!1,autoplay:!0,path:n})}o("icon-1","asset/lottie/json/chart.json"),o("icon-2","asset/lottie/json/fly.json"),o("icon-3","asset/lottie/json/analysis.json"),o("icon-4","asset/lottie/json/compatible.json"),o("icon-5","asset/lottie/json/grown.json"),o("icon-6","asset/lottie/json/simple.json");for(var e=0;e<6;e++)o("bg-icon-"+(e+1),"asset/lottie/json/bg_0"+(e+1)+".json"),function(e){$("#index-feature-"+(e+1)).mouseenter(function(){t["icon-"+(e+1)].goToAndPlay(0)})}(e);var a=!1,l=!1;o("paper-icon","asset/lottie/json/paper.json"),$("#page-index").scroll(function(){var e=$("#start-line").offset().top,n=$("#end-line").offset().top;e>=$(window).scrollTop()&&e<$(window).scrollTop()+$(window).height()-200?a||($("#publication").css("opacity",1),t["start-line"]?t["start-line"].goToAndPlay(0):o("start-line","asset/lottie/json/start_line.json"),t["paper-icon"]?t["paper-icon"].goToAndPlay(0):o("paper-icon","asset/lottie/json/paper.json"),a=!0):a=a||!1,n<=400?l||(t["end-line"]?t["end-line"].goToAndPlay(0):o("end-line","asset/lottie/json/end_line.json"),l=!0):l=l||!1})}())}();
\ No newline at end of file
diff --git a/zh/maillist.html b/zh/maillist.html
index 17a5390..e2d290a 100644
--- a/zh/maillist.html
+++ b/zh/maillist.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>邮件列表 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><div class="container"><h1>邮件列表</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><h2>关于邮件列表</h2><p>邮件列表是我们公开讨论并记录的地方。如果你想做以下事情,欢迎订阅邮件列表:</p><ul><li>随时了解 bug 以及新需求的报告;</li><li>参与讨论开发计划或特定的问题;</li><li>帮助通过邮件提问的人;</li><li>等等……</li></ul><p>如果你有一个特定的问题想要问,建议使用 <a href="https://ecomfe.github.io/echarts-issue-helper/?lang=zh-cn">Issue Helper</a> 报 Bug 或提需求,这是一种更有效率的方式。</p><p><a href="mailto:commits@echarts.apache.org">commits@echarts.apache.org</a> 主要是代码提交记录,而 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> 则是其他通用问题的讨论。</p><p>这两个邮件列表是公开的,这意味着你可以在 <a href="https://lists.apache.org/list.html?commits@echarts.apache.org">https://lists.apache.org/list.html?commits@echarts.apache.org</a> 和 <a href="https://lists.apache.org/list.html?dev@echarts.apache.org">https://lists.apache.org/list.html?dev@echarts.apache.org</a> 访问到邮件内容,而无需订阅。</p><h2>如何订阅</h2><p>给 <a href="mailto:commits-subscribe@echarts.apache.org">commits-subscribe@echarts.apache.org</a> 或 <a href="mailto:dev-subscribe@echarts.apache.org">dev-subscribe@echarts.apache.org</a> 发邮件来分别订阅 commits@echarts.apache.org and dev@echarts.apache.org。</p><p>你会收到一封回信,请照着邮件内容操作。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="ECharts FAQ"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><div class="container"><h1>邮件列表</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><h2>关于邮件列表</h2><p>邮件列表是我们公开讨论并记录的地方。如果你想做以下事情,欢迎订阅邮件列表:</p><ul><li>随时了解 bug 以及新需求的报告;</li><li>参与讨论开发计划或特定的问题;</li><li>帮助通过邮件提问的人;</li><li>等等……</li></ul><p>如果你有一个特定的问题想要问,建议使用 <a href="https://ecomfe.github.io/echarts-issue-helper/?lang=zh-cn">Issue Helper</a> 报 Bug 或提需求,这是一种更有效率的方式。</p><p><a href="mailto:commits@echarts.apache.org">commits@echarts.apache.org</a> 主要是代码提交记录,而 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a> 则是其他通用问题的讨论。</p><p>这两个邮件列表是公开的,这意味着你可以在 <a href="https://lists.apache.org/list.html?commits@echarts.apache.org">https://lists.apache.org/list.html?commits@echarts.apache.org</a> 和 <a href="https://lists.apache.org/list.html?dev@echarts.apache.org">https://lists.apache.org/list.html?dev@echarts.apache.org</a> 访问到邮件内容,而无需订阅。</p><h2>如何订阅</h2><p>给 <a href="mailto:commits-subscribe@echarts.apache.org">commits-subscribe@echarts.apache.org</a> 或 <a href="mailto:dev-subscribe@echarts.apache.org">dev-subscribe@echarts.apache.org</a> 发邮件来分别订阅 commits@echarts.apache.org and dev@echarts.apache.org。</p><p>你会收到一封回信,请照着邮件内容操作。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-contribute').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/nav.html b/zh/nav.html
index 5b1a71d..a8489fe 100644
--- a/zh/nav.html
+++ b/zh/nav.html
@@ -1 +1,3 @@
-<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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"/></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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>
\ No newline at end of file
+<template>
+<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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"/></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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>
+</template>
\ No newline at end of file
diff --git a/zh/option-gl.html b/zh/option-gl.html
index 19fd255..62bcc81 100644
--- a/zh/option-gl.html
+++ b/zh/option-gl.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/zh/option.html">旧版本文档</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/zh/option.html">旧版本文档</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/option-gl-parts',
@@ -19,7 +19,7 @@
};
if (window.EC_WWW_CDN_PAY_ROOT) {
window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/zh/' + window.globalArgsExtra.baseUrl
-}</script><script type="text/javascript">window.globalArgsExtra.version = 'f905fb8a74';
+}</script><script type="text/javascript">window.globalArgsExtra.version = '98f3d6f3b5';
echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/option.html b/zh/option.html
index 6bb98db..8ec356f 100644
--- a/zh/option.html
+++ b/zh/option.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/zh/option.html">旧版本文档</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/zh/option.html">旧版本文档</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/option-parts',
@@ -19,7 +19,7 @@
};
if (window.EC_WWW_CDN_PAY_ROOT) {
window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/zh/' + window.globalArgsExtra.baseUrl
-}</script><script type="text/javascript">window.globalArgsExtra.version = 'f905fb8a74';
+}</script><script type="text/javascript">window.globalArgsExtra.version = '98f3d6f3b5';
echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/option3.html b/zh/option3.html
index e513e95..c4d0f27 100644
--- a/zh/option3.html
+++ b/zh/option3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>ECharts Documentation</title><link rel="stylesheet" type="text/css" href="css/ecOption.css"><link rel="stylesheet" type="text/css" href="vendors/prettify/prettify.css"><link rel="stylesheet" type="text/css" href="vendors/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"><link rel="stylesheet" type="text/css" href="vendors/jquery-autocomplete/jquery.auto-complete.css"><link rel="stylesheet" type="text/css" href="vendors/twentytwenty/twentytwenty.css"><script src="vendors/prettify/prettify.js"></script><script src="vendors/prettify/lang-css.js"></script><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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="doc-version-change"><a href="option.html">前往 v4.x 文档</a><a href="https://www.echartsjs.com/echarts2/">前往 v2.x 文档</a></div><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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="doc-version-change"><a href="option.html">前往 v4.x 文档</a><a href="https://www.echartsjs.com/echarts2/">前往 v2.x 文档</a></div><div class="ecdoc-apidoc"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="vendors/twentytwenty/jquery.event.move.js"></script><script src="vendors/twentytwenty/jquery.twentytwenty.js"></script><script type="text/javascript">window.globalArgsExtra = {
pageName: 'option',
schemaName: 'option3',
initHash: 'title',
diff --git a/zh/resources.html b/zh/resources.html
index 2d01281..0501091 100644
--- a/zh/resources.html
+++ b/zh/resources.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>更多资源 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="更多资源"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><div class="container"><h1>更多资源</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="page-nav"></div><div class="container"><p>除了本站官方提供的资源外,社区也提供了非常丰富的资源,比如各种语言的支持,比如在线创建 ECharts 图表的平台 <a target="_blank" href="https://www.makeapie.com">Gallery</a> 等等。</p><p><a target="_blank" href="https://github.com/ecomfe/awesome-echarts">github.com/ecomfe/awesome-echarts</a> 项目提供了完整的资源列表,欢迎了解及补充。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="更多资源"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><div class="container"><h1>更多资源</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div class="page-content"><div class="page-nav"></div><div class="container"><p>除了本站官方提供的资源外,社区也提供了非常丰富的资源,比如各种语言的支持,比如在线创建 ECharts 图表的平台 <a target="_blank" href="https://www.makeapie.com">Gallery</a> 等等。</p><p><a target="_blank" href="https://github.com/ecomfe/awesome-echarts">github.com/ecomfe/awesome-echarts</a> 项目提供了完整的资源列表,欢迎了解及补充。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/security.html b/zh/security.html
index 3b84d0e..663912a 100644
--- a/zh/security.html
+++ b/zh/security.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>安全 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="安全"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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-info"><div class="container"><h1>安全</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><p>Apache ECharts<sup>TM</sup> 在消除其软件项目中的安全问题方面采取了严格的立场。也十分关注与其特性和功能相关的安全问题。</p><p>如果您对 ECharts 的安全性感到担忧,或者您发现了漏洞或潜在的威胁,请不要犹豫与 <a href="http://www.apache.org/security/" target="_blank">Apache 安全团队</a>联系,发送邮件至 <a href="mailto:security@apache.org">security@apache.org</a>。在邮件中请指明项目名称 ECharts 并提供相关问题或潜在威胁的描述。同时推荐重现和复制安全问题的方法。在评估和分析调查结果后,Apache 安全团队和 ECharts 社区将直接与您回复。</p><p>请注意在提交安全邮件之前,请勿在公共领域披露安全电子邮件报告的安全问题。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-others').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+<!--[if (gt IE 8)|!(IE)]><body class="安全"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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-info"><div class="container"><h1>安全</h1><p class="page-info-echarts">Apache ECharts<sup>TM</sup></p></div></div><div id="maillist" class="page-content"><div class="page-nav"></div><div class="container"><p>Apache ECharts<sup>TM</sup> 在消除其软件项目中的安全问题方面采取了严格的立场。也十分关注与其特性和功能相关的安全问题。</p><p>如果您对 ECharts 的安全性感到担忧,或者您发现了漏洞或潜在的威胁,请不要犹豫与 <a href="http://www.apache.org/security/" target="_blank">Apache 安全团队</a>联系,发送邮件至 <a href="mailto:security@apache.org">security@apache.org</a>。在邮件中请指明项目名称 ECharts 并提供相关问题或潜在威胁的描述。同时推荐重现和复制安全问题的方法。在评估和分析调查结果后,Apache 安全团队和 ECharts 社区将直接与您回复。</p><p>请注意在提交安全邮件之前,请勿在公共领域披露安全电子邮件报告的安全问题。</p></div></div><footer><div class="container"><div class="row"><div class="col-md-9"><p>Copyright © 2017-2021, The Apache Software Foundation Apache ECharts, ECharts, Apache, the Apache feather, and the Apache ECharts project logo are either registered trademarks or trademarks of the Apache Software Foundation.</p><div class="icon-panel"><a href="mailto:dev@echarts.apache.org?body=%28Thanks%20for%20using%20ECharts.%20Email%20us%20if%20you%20have%20non-technical%20problems%20using%20ECharts.%20For%20technical%20support%2C%20please%20go%20to%20https%3A//github.com/apache/echarts/issues%20.%29" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-email.png?_v_=20200710_1"></a><a href="https://twitter.com/ApacheECharts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-twitter.png?_v_=20200710_1"></a><a href="https://weibo.com/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-weibo.png?_v_=20200710_1"></a><a href="https://github.com/apache/echarts" class="footer-icon"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/icon-github.png?_v_=20200710_1"></a></div></div><div id="footer-icon-panel" class="col-md-3"><a href="https://www.apache.org"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/asf_logo.svg?_v_=20200710_1" class="footer-apache-logo"></a></div></div></div></footer></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-others').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/spreadsheet.html b/zh/spreadsheet.html
index f633df4..b9d5aaa 100644
--- a/zh/spreadsheet.html
+++ b/zh/spreadsheet.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -6,13 +6,13 @@
+ '@font-face {font-family:"noto-light";src:local("Microsoft Yahei");}';
document.head.insertBefore(el, document.getElementById('font-hack'));
}
-</script><title>Spreadsheet Tool - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/vendors/handsontable/0.26.1/dist/handsontable.full.min.css?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/spreadsheet.css?_v_=1630485133448"><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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="ecdoc-sprsht"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
+</script><title>Spreadsheet Tool - Apache ECharts</title><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/vendors/handsontable/0.26.1/dist/handsontable.full.min.css?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/spreadsheet.css?_v_=1630499963508"><script src="vendors/esl.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav 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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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="ecdoc-sprsht"></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';
var vendorPath = '../vendors';
define('globalArgs', extend({
- version: '1630485133448',
+ version: '1630499963508',
basePath: './'
}, window.globalArgsExtra || {}));
@@ -31,7 +31,7 @@
numeral: vendorPath + '/numeral/1.4.7/numeral.min',
immutable: vendorPath + '/immutable/3.7.4/dist/immutable'
},
- urlArgs: '_v_=1630485133448'
+ urlArgs: '_v_=1630499963508'
});
require(['spreadsheet/spreadsheet'], function (spreadsheet) {
diff --git a/zh/theme-builder.html b/zh/theme-builder.html
index eee9219..2738dfe 100644
--- a/zh/theme-builder.html
+++ b/zh/theme-builder.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -7,7 +7,7 @@
document.head.insertBefore(el, document.getElementById('font-hack'));
}
</script><title>主题编辑器 - Apache ECharts</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap-colorpicker@2.5.3/dist/css/bootstrap-colorpicker.min.css">
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap-colorpicker@2.5.3/dist/css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/default.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/styles/github.css">
<link rel="stylesheet" href="./theme-builder/main.css">
@@ -527,7 +527,7 @@
<script src="//cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
<script src="./theme-builder/app.min.js"></script>
-</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
+</div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script type="text/javascript">document.getElementById('nav-resources').className = 'active';</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
diff --git a/zh/tutorial.html b/zh/tutorial.html
index 790ab1b..82558cd 100644
--- a/zh/tutorial.html
+++ b/zh/tutorial.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=beca5c735d"><script>window.EC_WWW_LANG = 'zh';
+<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"><meta name="description" content="ECharts, a powerful, interactive charting and visualization library for browser"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png?_v_=20200710_1"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries--><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css?_v_=55ebeb2c9d"><script>window.EC_WWW_LANG = 'zh';
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pace-progressbar@1.0.2/pace.min.js"></script><script id="font-hack" type="text/javascript">if (/windows/i.test(navigator.userAgent)) {
var el = document.createElement('style');
el.innerHTML = ''
@@ -10,7 +10,7 @@
/* position: sticky should not have overflow parents.*/
overflow-x: hidden;
}</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/doc-bundle.css?_v_=d2ec90c6e8"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script></head><!--[if lte IE 8]><body class="lower-ie"><div id="lowie-main"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/forie.png?_v_=20200710_1" alt="ie tip"></div></body><![endif]-->
-<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 升级指南<span class="new">new</span></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 id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/zh/option.html">旧版本文档</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=b5b8944fb9"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
+<!--[if (gt IE 8)|!(IE)]><body class="undefined"></body><![endif]--><noscript><div class="no-script"><strong>很抱歉,Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript><div id="apache-banner"><div class="txt"><p>请访问 Apache ECharts 的官网 </p><a id="a1" href="https://echarts.apache.org/zh/index.html">https://echarts.apache.org</a></div><a href="https://echarts.apache.org" target="_blank" onclick="logApache()" class="btn btn-main"><div>访问官网</div></a><a href="javascript:;" onclick="closeApacheBanner(true)" class="close-btn">x</a></div><div id="main"><nav id="ec-doc-nav" class="navbar navbar-default navbar-fixed-top doc-nav"><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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册<span class="new">new</span></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 id="ec-doc-main"></div><div id="v4-link" class="alert alert-info alert-dismissible"><a href="https://echarts.apache.org/v4/zh/option.html">旧版本文档</a><button type="button" data-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button></div></div></div><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/common.js?_v_=9c455b5db4"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script><script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/lib/codemirror.min.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror@5.56.0/mode/javascript/javascript.js"></script><script src="https://cdn.jsdelivr.net/npm/js-beautify@1.11.0/js/lib/beautifier.min.js"></script><script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/js/doc-bundle.js?_v_=d94c722789"></script><script type="text/javascript">document.getElementById('nav-doc').className = 'active';
window.EC_WWW_CDN_PAY_ROOT = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site';
</script><script type="text/javascript">window.globalArgsExtra = {
baseUrl: 'documents/tutorial-parts',
@@ -19,7 +19,7 @@
};
if (window.EC_WWW_CDN_PAY_ROOT) {
window.globalArgsExtra.cdnRoot = window.EC_WWW_CDN_PAY_ROOT + '/zh/' + window.globalArgsExtra.baseUrl
-}</script><script type="text/javascript">window.globalArgsExtra.version = 'f905fb8a74';
+}</script><script type="text/javascript">window.globalArgsExtra.version = '98f3d6f3b5';
echartsDoc.init('#ec-doc-main', window.globalArgsExtra);</script><!-- Baidu Tongji--><script type="text/javascript">var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");