| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20240226" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v6-upgrade-guide">v6 升级指南</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://github.com/apache/echarts-custom-series" target="_blank">自定义系列下载<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.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/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><li id="nav-github"><a href="https://github.com/apache/echarts" target="_blank"><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="#333"><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></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="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/echarts-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="/echarts-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="/echarts-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="/echarts-handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/v6-feature" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">ECharts 6 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/v6-upgrade-guide" class="nav-link"><span class="title">v5 升级 v6 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">5.0</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">v4 升级 v5 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/5-5-0" class="nav-link"><span class="title">5.5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/5-6-0" class="nav-link"><span class="title">5.6</span></a> <ul class="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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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="/echarts-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 class="nav-link"><span class="title">地理坐标系（Geo）</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/component-types/geo/svg-base-map" class="nav-link"><span class="title">SVG 底图</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="/echarts-handbook/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-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="/echarts-handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-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="/echarts-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="/echarts-handbook/zh/how-to/animation/transition" class="nav-link"><span class="title">数据过渡动画</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/echarts-handbook/zh/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">智能指针吸附</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/echarts-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="/echarts-handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/best-practices/security" 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="/echarts-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-6-%E6%96%B0%E7%89%B9%E6%80%A7" tabindex="-1">Apache ECharts 6 新特性</h1> <p>12 年前，ECharts 在 GitHub 首次发布，一颗开源的种子从此萌发。</p> <p>从最初的图表工具，到如今成长为支撑百万级开发者的可视化巨擘；从单一的前端图表库，演进为支持移动端、大屏、服务端渲染等全场景的技术体系。这 12 年间，我们见证了 ECharts 在技术方面的持续突破，更欣喜地看到全球开发者用 ECharts 创造出无数惊艳的数据故事。</p> <p>现在，Apache ECharts 6.0 正式发布，我们呈上诚意满满的 12 项升级，只为百尺竿头，更进一步。</p> <h2 id="%E5%8A%9F%E8%83%BD%E6%A6%82%E8%A7%88" tabindex="-1">功能概览</h2> <p>12 年的沉淀，只为更极致的可视化表达。Apache ECharts 的核心力量，始终源于对开发者真实挑战的深刻理解。当我们为 6.0 定义方向时，问题很清晰：<strong>如何让复杂数据的呈现既足够强大，又足够优雅</strong>？</p> <p>这驱使我们围绕三个核心维度进行深度进化：</p> <ul><li><p><strong>更专业的可视化呈现</strong>：从精心打磨的默认主题，到响应系统深色的智能切换，确保图表具备专业质感，无缝融入现代应用体验。</p></li> <li><p><strong>拓展数据表达的边界</strong>：新增更多图表类型与功能，构建完整复杂场景应对体系，实现深度数据的直觉化表达。</p></li> <li><p><strong>释放组合编排的自由</strong>：从革命性的矩阵坐标系，到可复用的自定义系列生态，再到坐标轴标签优化——赋予开发者更自由编排的能力，将创意映射为无拘束的可视化作品。</p></li></ul> <p>我们在这三个核心维度上做了 12 项升级。这些升级并非简单的功能叠加，而是为构建下一代数据驱动应用，铺设的坚实能力基座。它们共同指向一个目标：<strong>让 ECharts 强大、可靠、稳定地服务于后台，把舞台和聚光灯留给你的创造性表达。</strong></p> <p>下文将针对这十二项升级分别展开介绍：</p> <ul><li><strong>更专业的可视化呈现</strong> <ul><li><strong>1. 全新默认主题</strong>：采用更符合现代审美的设计语言，以专业设计赋能数据表达</li> <li><strong>2. 动态主题切换</strong>：支持运行时无缝切换主题，适配多主题场景</li> <li><strong>3. 深色模式响应</strong>：自动适配系统深色/浅色模式，提升用户体验</li></ul></li> <li><strong>拓展数据表达的边界</strong> <ul><li><strong>4. 新增和弦图</strong>：拓展复杂关系与分布数据的呈现方式</li> <li><strong>5. 新增蜂群图</strong>：通过动态分布算法，将重叠数据点智能展开为蜂窝状排列</li> <li><strong>6. 新增抖动散点图</strong>：通过增加散点图分布范围，增强高密度数据的可读性</li> <li><strong>7. 新增断轴</strong>：表达数据断层，轻松呈现量级悬殊的数据对比</li> <li><strong>8. 升级股市交易类图表</strong>：增强标签能力，更多开箱即用的交易类图表</li></ul></li> <li><strong>释放组合编排的自由</strong> <ul><li><strong>9. 新增矩阵坐标系</strong>：各种图表类型和组件像表格一样自由组合，灵活布局</li> <li><strong>10. 升级自定义系列</strong>：支持 npm 发布与动态注册使用，实现自定义系列代码复用</li> <li><strong>11. 新增多款自定义图表</strong>：小提琴图、轮廓图、阶段图、范围柱状图、范围折线图</li> <li><strong>12. 坐标轴标签优化</strong>：新版智能优化坐标标签布局，默认防溢出防重叠</li></ul></li></ul> <p>我们希望通过 Apache ECharts 6.0 的全新升级，帮助用户更灵活方便地创建更多图表，实现真正的“前图无量”！</p> <h2 id="%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D" tabindex="-1">功能介绍</h2> <h3 id="1.-%E5%85%A8%E6%96%B0%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98" tabindex="-1">1. 全新默认主题</h3> <p>在 ECharts 6.0 的开发过程中，我们深入分析了用户的真实使用场景，发现超过七成的开发者直接采用默认主题。这让我们意识到：一个优秀的默认主题不仅要具备美学价值，更要符合各个业务场景的通用需求。</p> <p>新版主题系统内部使用了设计令牌（design token）对颜色、距离等设计元素进行重构，<strong>使得不同图表类型和组件之间更和谐一致</strong>。</p> <img data-src="images/feature-v6/1-default-theme.png" width="600px"> <p>虽然 6.0 的主题在 5.x 版本上有非常大的调整，但是我们提供了一个 <a href="https://github.com/apache/echarts/blob/master/theme/v5.js">v5.js</a> 主题文件，对于希望使用新版本功能但保留原有样式的开发者，可以实现快速迁移。</p> <h3 id="2.-%E5%8A%A8%E6%80%81%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2" tabindex="-1">2. 动态主题切换</h3> <p>在之前的版本中，如果想要改变一个图表的主题，就必须注销图表实例后重新初始化，二次的初始动画可能对用户体验带来负面影响。在新版本中，我们实现了<strong>主题的动态切换能力</strong>（参见），显著地提升用户体验。</p> <img data-src="images/feature-v6/2-switch-themes.gif" width="600px"> <h3 id="3.-%E6%B7%B1%E8%89%B2%E6%A8%A1%E5%BC%8F%E5%93%8D%E5%BA%94" tabindex="-1">3. 深色模式响应</h3> <p>在实现主题的动态注册和切换之后，一个典型场景是<strong>监听系统是否使用深色模式，并动态调整图表的深色与浅色主题</strong>。</p> <img data-src="images/feature-v6/3-responsive-themes.gif" width="600px"> <p>这对于支持深色模式的业务场景至关重要，可以确保应用界面与系统主题风格一致，显著提升用户体验的流畅性和专业性。</p> <p>以下是一个监听系统深色模式并改变图表主题的方式：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> darkModeMediaQuery <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">'(prefers-color-scheme: dark)'</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> <h3 id="4.-%E6%96%B0%E5%A2%9E%E5%92%8C%E5%BC%A6%E5%9B%BE" tabindex="-1">4. 新增和弦图</h3> <p>和弦图直观展现复杂关系网络中的流量与权重，特别适合金融交易、社交网络等场景的多维度关系分析。ECharts 创新性地支持<strong>使用出节点和入节点的渐变色作为边的颜色，呈现独特的视觉美感</strong>。参见 <a href="https://echarts.apache.org/option.html#series-chord">series-chord</a>。</p> <img data-src="images/feature-v6/4-chord.gif" width="600px"> <h3 id="5.-%E6%96%B0%E5%A2%9E%E8%9C%82%E7%BE%A4%E5%9B%BE" tabindex="-1">5. 新增蜂群图</h3> <p>传统的散点图在类目轴下如果数据过于密集，蜂群图（Beeswarm）通过将数据在非数值维度上的偏移，在保持数值轴准确性的前提下，实现<strong>散点图的无重叠分布</strong>。将 <a href="https://echarts.apache.org/option.html#xAxis.jitter">jitter</a> 设置为非 0 值，将 <a href="https://echarts.apache.org/option.html#xAxis.jitterOverlap">jitterOverlap</a> 设置为 <code>false</code> 来实现蜂群图。</p> <img data-src="images/feature-v6/5-beeswarm.png" width="600px"> <h3 id="6.-%E6%96%B0%E5%A2%9E%E6%8A%96%E5%8A%A8%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">6. 新增抖动散点图</h3> <p>抖动散点图（Scatter Jittering）采用随机扰动策略，<strong>在非数据维度上添加固定范围的随机偏移，解决数据过于密集的问题</strong>。</p> <p>从下图我们可以看到，在未使用抖动的情况下，如果数据过于密集，很难看清数据的分布情况。</p> <img data-src="images/feature-v6/6-jittering-off.png" width="600px"> <p>而在开启了数据抖动之后，可以更清楚地看到数据分布最密集的范围是 6-8 之间。并且，相比蜂群图，抖动散点图具有更高的处理性能。</p> <img data-src="images/feature-v6/6-jittering-on.png" width="600px"> <p>将 <a href="https://echarts.apache.org/option.html#xAxis.jitter">jitter</a> 设置为非 0 值，将 <a href="https://echarts.apache.org/option.html#xAxis.jitterOverlap">jitterOverlap</a> 设置为 <code>true</code> 来实现抖动散点图。</p> <h3 id="7.-%E6%96%B0%E5%A2%9E%E6%96%AD%E8%BD%B4" tabindex="-1">7. 新增断轴</h3> <p>断轴（Broken Axis）是一种通过坐标轴断层展现悬殊量级数据的可视化手段。在 ECharts 6.0 中，我们创新性地实现了<strong>模拟撕纸效果的断轴，使得断轴的含义能被更直观地传递</strong>，并且支持点击展开的效果，还原到真实数据比例。</p> <img data-src="images/feature-v6/7-break-axis.gif" width="600px"> <h3 id="8.-%E5%8D%87%E7%BA%A7%E8%82%A1%E5%B8%82%E4%BA%A4%E6%98%93%E7%B1%BB%E5%9B%BE%E8%A1%A8" tabindex="-1">8. 升级股市交易类图表</h3> <p>ECharts 6.0 针对金融交易场景深度优化，增强了标签针对坐标系的相对定位能力，助力开发者快速构建专业级行情分析工具。</p> <p>下图展示了一个使用 ECharts 实现的股市交易图的综合应用场景，结合了<strong>分时图、MACD、成交量、买卖盘口、深度图</strong>：</p> <img data-src="images/feature-v6/8-stock.png" width="600px"> <p>这些实例可以帮助开发者快速实现金融交易场景的需求。其中，在图表的四个角落显示数字可以使用 <a href="https://echarts.apache.org/option.html#series-line.markPoint.data.relativeTo">relativeTo</a> 实现。</p> <h3 id="9.-%E6%96%B0%E5%A2%9E%E7%9F%A9%E9%98%B5%E5%9D%90%E6%A0%87%E7%B3%BB" tabindex="-1">9. 新增矩阵坐标系</h3> <p>上述例子也用到了 ECharts 6.0 新增的矩阵坐标系，它的功能十分强大。不仅可以用来做协方差矩阵图：</p> <iframe width="600" height="700" src=""></iframe> <p>元素周期表：</p> <iframe width="100%" height="600" src=""></iframe> <p>作为一种布局，它还允许开发者将各种图表类型和组件结合，创造出灵活复杂的可视化作品：</p> <iframe width="100%" height="600" src=""></iframe> <h3 id="10.-%E5%8D%87%E7%BA%A7%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97" tabindex="-1">10. 升级自定义系列</h3> <p>过去，使用 ECharts 自定义系列意味着开发者必须从零手写 <code>renderItem</code> 复杂逻辑，即使是<em>复用</em>，也只是复制粘贴代码。现在，ECharts 6.0 带来标准化可复用方案：</p> <ul><li><strong>自定义系列的注册机制</strong>：和主题注册类似，自定义系列也可以动态注册和使用，使用方式和内置图表系列一样简单方便，参见 <a href="https://echarts.apache.org/option.html#series-custom.renderItem">series-custom.renderItem</a></li> <li><strong>官方自定义系列项目</strong>：官方在 <a href="https://github.com/apache/echarts-custom-series">https://github.com/apache/echarts-custom-series</a> 发布了多个自定义系列，在正式版本发布后，开发者可以通过 npm 等方便地获取</li> <li><strong>发布自己的自定义系列</strong>：可以向上述项目提 Pull Request 或发布到自己的仓库，实现自定义系列的复用</li></ul> <h3 id="11.-%E6%96%B0%E5%A2%9E%E5%A4%9A%E6%AC%BE%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E8%A1%A8" tabindex="-1">11. 新增多款自定义图表</h3> <p>本次发布，自定义系列项目提供了 6 款实用的图表，使用方法和完整文档参见 <a href="https://github.com/apache/echarts-custom-series">echarts-custom-series</a> 项目。包括<strong>小提琴图</strong>：</p> <img data-src="images/feature-v6/11-violin.png" width="600px"> <p><strong>轮廓图</strong>：</p> <img data-src="images/feature-v6/11-contour.png" width="600px"> <p><strong>睡眠阶段图</strong>：</p> <img data-src="images/feature-v6/11-stage.png" width="600px"> <p><strong>分段环形图</strong>：</p> <img data-src="images/feature-v6/11-segmentedDoughnut.png" width="600px"> <p><strong>范围柱状图</strong>：</p> <img data-src="images/feature-v6/11-barRange.png" width="600px"> <p><strong>范围折线图</strong>：</p> <img data-src="images/feature-v6/11-lineRange.png" width="600px"> <p>发挥你的创意，快来和我们一起创造更多自定义图表吧！</p> <h3 id="12.-%E5%9D%90%E6%A0%87%E8%BD%B4%E6%A0%87%E7%AD%BE%E4%BC%98%E5%8C%96" tabindex="-1">12. 坐标轴标签优化</h3> <p>在之前的版本中，直角坐标系的 <code>axisLabel</code> 和 <code>axisName</code> 在数据比较长时容易超出屏幕，以及重叠。数据变化时使用者并不总能准确预估空间来完全避免它们。在这个版本中我们优化了防止超出屏幕以及防止重叠的策略，并成为默认。</p> <h2 id="%E5%8D%87%E7%BA%A7%E6%96%B9%E6%B3%95" tabindex="-1">升级方法</h2> <p>请参见完整的<a href="https://echarts.apache.org/changelog.html#v6-0-0">版本更新内容</a>和<a href="zh/basics/release-note/v6-upgrade-guide">升级指南</a>。</p></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/release-note/v6-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/Ovilia" target="_blank" class="post-contributor has-avatar"><img alt="Ovilia" src="https://echarts.apache.org/en/images/people/羡辙.jpg?_v_=20240226" loading="lazy" decoding="async" fetchpriority="low"> <span>Ovilia</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor has-avatar"><img alt="plainheart" src="https://echarts.apache.org/en/images/people/plainheart.jpg" loading="lazy" decoding="async" fetchpriority="low"> <span>plainheart</span></a><a href="https://github.com/xushuosean" target="_blank" class="post-contributor"><!----> <span>xushuosean</span></a></div></div></div></div></div></div></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,n,d,l,s,o,h,p,c,g,E,m,B,u,A,f,b,v,x,C,w,G,D,R,y,S,k,V,Z,P,I,F,N,j,L,T,X,W,Y,z,J,M,O,K,_,U,H,Q,$,q,tt,it,et,rt,at,nt,dt,lt,st){return{layout:"default",data:[{html:'<h1 id="apache-echarts-6-%E6%96%B0%E7%89%B9%E6%80%A7" tabindex="-1">Apache ECharts 6 新特性</h1>\n<p>12 年前，ECharts 在 GitHub 首次发布，一颗开源的种子从此萌发。</p>\n<p>从最初的图表工具，到如今成长为支撑百万级开发者的可视化巨擘；从单一的前端图表库，演进为支持移动端、大屏、服务端渲染等全场景的技术体系。这 12 年间，我们见证了 ECharts 在技术方面的持续突破，更欣喜地看到全球开发者用 ECharts 创造出无数惊艳的数据故事。</p>\n<p>现在，Apache ECharts 6.0 正式发布，我们呈上诚意满满的 12 项升级，只为百尺竿头，更进一步。</p>\n<h2 id="%E5%8A%9F%E8%83%BD%E6%A6%82%E8%A7%88" tabindex="-1">功能概览</h2>\n<p>12 年的沉淀，只为更极致的可视化表达。Apache ECharts 的核心力量，始终源于对开发者真实挑战的深刻理解。当我们为 6.0 定义方向时，问题很清晰：<strong>如何让复杂数据的呈现既足够强大，又足够优雅</strong>？</p>\n<p>这驱使我们围绕三个核心维度进行深度进化：</p>\n<ul>\n<li>\n<p><strong>更专业的可视化呈现</strong>：从精心打磨的默认主题，到响应系统深色的智能切换，确保图表具备专业质感，无缝融入现代应用体验。</p>\n</li>\n<li>\n<p><strong>拓展数据表达的边界</strong>：新增更多图表类型与功能，构建完整复杂场景应对体系，实现深度数据的直觉化表达。</p>\n</li>\n<li>\n<p><strong>释放组合编排的自由</strong>：从革命性的矩阵坐标系，到可复用的自定义系列生态，再到坐标轴标签优化——赋予开发者更自由编排的能力，将创意映射为无拘束的可视化作品。</p>\n</li>\n</ul>\n<p>我们在这三个核心维度上做了 12 项升级。这些升级并非简单的功能叠加，而是为构建下一代数据驱动应用，铺设的坚实能力基座。它们共同指向一个目标：<strong>让 ECharts 强大、可靠、稳定地服务于后台，把舞台和聚光灯留给你的创造性表达。</strong></p>\n<p>下文将针对这十二项升级分别展开介绍：</p>\n<ul>\n<li><strong>更专业的可视化呈现</strong>\n<ul>\n<li><strong>1. 全新默认主题</strong>：采用更符合现代审美的设计语言，以专业设计赋能数据表达</li>\n<li><strong>2. 动态主题切换</strong>：支持运行时无缝切换主题，适配多主题场景</li>\n<li><strong>3. 深色模式响应</strong>：自动适配系统深色/浅色模式，提升用户体验</li>\n</ul>\n</li>\n<li><strong>拓展数据表达的边界</strong>\n<ul>\n<li><strong>4. 新增和弦图</strong>：拓展复杂关系与分布数据的呈现方式</li>\n<li><strong>5. 新增蜂群图</strong>：通过动态分布算法，将重叠数据点智能展开为蜂窝状排列</li>\n<li><strong>6. 新增抖动散点图</strong>：通过增加散点图分布范围，增强高密度数据的可读性</li>\n<li><strong>7. 新增断轴</strong>：表达数据断层，轻松呈现量级悬殊的数据对比</li>\n<li><strong>8. 升级股市交易类图表</strong>：增强标签能力，更多开箱即用的交易类图表</li>\n</ul>\n</li>\n<li><strong>释放组合编排的自由</strong>\n<ul>\n<li><strong>9. 新增矩阵坐标系</strong>：各种图表类型和组件像表格一样自由组合，灵活布局</li>\n<li><strong>10. 升级自定义系列</strong>：支持 npm 发布与动态注册使用，实现自定义系列代码复用</li>\n<li><strong>11. 新增多款自定义图表</strong>：小提琴图、轮廓图、阶段图、范围柱状图、范围折线图</li>\n<li><strong>12. 坐标轴标签优化</strong>：新版智能优化坐标标签布局，默认防溢出防重叠</li>\n</ul>\n</li>\n</ul>\n<p>我们希望通过 Apache ECharts 6.0 的全新升级，帮助用户更灵活方便地创建更多图表，实现真正的“前图无量”！</p>\n<h2 id="%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D" tabindex="-1">功能介绍</h2>\n<h3 id="1.-%E5%85%A8%E6%96%B0%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98" tabindex="-1">1. 全新默认主题</h3>\n<p>在 ECharts 6.0 的开发过程中，我们深入分析了用户的真实使用场景，发现超过七成的开发者直接采用默认主题。这让我们意识到：一个优秀的默认主题不仅要具备美学价值，更要符合各个业务场景的通用需求。</p>\n<p>新版主题系统内部使用了设计令牌（design token）对颜色、距离等设计元素进行重构，<strong>使得不同图表类型和组件之间更和谐一致</strong>。</p>\n<img data-src="images/feature-v6/1-default-theme.png" width="600px" />\n<p>虽然 6.0 的主题在 5.x 版本上有非常大的调整，但是我们提供了一个 <a href="https://github.com/apache/echarts/blob/master/theme/v5.js">v5.js</a> 主题文件，对于希望使用新版本功能但保留原有样式的开发者，可以实现快速迁移。</p>\n<h3 id="2.-%E5%8A%A8%E6%80%81%E4%B8%BB%E9%A2%98%E5%88%87%E6%8D%A2" tabindex="-1">2. 动态主题切换</h3>\n<p>在之前的版本中，如果想要改变一个图表的主题，就必须注销图表实例后重新初始化，二次的初始动画可能对用户体验带来负面影响。在新版本中，我们实现了<strong>主题的动态切换能力</strong>（参见），显著地提升用户体验。</p>\n<img data-src="images/feature-v6/2-switch-themes.gif" width="600px" />\n<h3 id="3.-%E6%B7%B1%E8%89%B2%E6%A8%A1%E5%BC%8F%E5%93%8D%E5%BA%94" tabindex="-1">3. 深色模式响应</h3>\n<p>在实现主题的动态注册和切换之后，一个典型场景是<strong>监听系统是否使用深色模式，并动态调整图表的深色与浅色主题</strong>。</p>\n<img data-src="images/feature-v6/3-responsive-themes.gif" width="600px" />\n<p>这对于支持深色模式的业务场景至关重要，可以确保应用界面与系统主题风格一致，显著提升用户体验的流畅性和专业性。</p>\n<p>以下是一个监听系统深色模式并改变图表主题的方式：</p>\n<md-code-block lang="js" code="\'Y29uc3QgZGFya01vZGVNZWRpYVF1ZXJ5ID0gd2luZG93Lm1hdGNoTWVkaWEoJyhwcmVmZXJzLWNvbG9yLXNjaGVtZTogZGFyayknKTsKZnVuY3Rpb24gdXBkYXRlRGFya01vZGUoKSB7CiAgICBjb25zdCBpc0RhcmtNb2RlID0gZGFya01vZGVNZWRpYVF1ZXJ5Lm1hdGNoZXM7CiAgICBmb3IgKGNvbnN0IGNoYXJ0IG9mIGNoYXJ0cykgewogICAgICAgIGNoYXJ0LnNldFRoZW1lKGlzRGFya01vZGUgPyAnZGFyaycgOiAnZGVmYXVsdCcpOwogICAgfQp9CmRhcmtNb2RlTWVkaWFRdWVyeS5hZGRFdmVudExpc3RlbmVyKCdjaGFuZ2UnLCAoKSA9PiB7CiAgICB1cGRhdGVEYXJrTW9kZSgpOwp9KTs\'" line-highlights="\'\'" />\n<h3 id="4.-%E6%96%B0%E5%A2%9E%E5%92%8C%E5%BC%A6%E5%9B%BE" tabindex="-1">4. 新增和弦图</h3>\n<p>和弦图直观展现复杂关系网络中的流量与权重，特别适合金融交易、社交网络等场景的多维度关系分析。ECharts 创新性地支持<strong>使用出节点和入节点的渐变色作为边的颜色，呈现独特的视觉美感</strong>。参见 <a href="https://echarts.apache.org/option.html#series-chord">series-chord</a>。</p>\n<img data-src="images/feature-v6/4-chord.gif" width="600px" />\n<h3 id="5.-%E6%96%B0%E5%A2%9E%E8%9C%82%E7%BE%A4%E5%9B%BE" tabindex="-1">5. 新增蜂群图</h3>\n<p>传统的散点图在类目轴下如果数据过于密集，蜂群图（Beeswarm）通过将数据在非数值维度上的偏移，在保持数值轴准确性的前提下，实现<strong>散点图的无重叠分布</strong>。将 <a href="https://echarts.apache.org/option.html#xAxis.jitter">jitter</a> 设置为非 0 值，将 <a href="https://echarts.apache.org/option.html#xAxis.jitterOverlap">jitterOverlap</a> 设置为 <code>false</code> 来实现蜂群图。</p>\n<img data-src="images/feature-v6/5-beeswarm.png" width="600px" />\n<h3 id="6.-%E6%96%B0%E5%A2%9E%E6%8A%96%E5%8A%A8%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">6. 新增抖动散点图</h3>\n<p>抖动散点图（Scatter Jittering）采用随机扰动策略，<strong>在非数据维度上添加固定范围的随机偏移，解决数据过于密集的问题</strong>。</p>\n<p>从下图我们可以看到，在未使用抖动的情况下，如果数据过于密集，很难看清数据的分布情况。</p>\n<img data-src="images/feature-v6/6-jittering-off.png" width="600px" />\n<p>而在开启了数据抖动之后，可以更清楚地看到数据分布最密集的范围是 6-8 之间。并且，相比蜂群图，抖动散点图具有更高的处理性能。</p>\n<img data-src="images/feature-v6/6-jittering-on.png" width="600px" />\n<p>将 <a href="https://echarts.apache.org/option.html#xAxis.jitter">jitter</a> 设置为非 0 值，将 <a href="https://echarts.apache.org/option.html#xAxis.jitterOverlap">jitterOverlap</a> 设置为 <code>true</code> 来实现抖动散点图。</p>\n<h3 id="7.-%E6%96%B0%E5%A2%9E%E6%96%AD%E8%BD%B4" tabindex="-1">7. 新增断轴</h3>\n<p>断轴（Broken Axis）是一种通过坐标轴断层展现悬殊量级数据的可视化手段。在 ECharts 6.0 中，我们创新性地实现了<strong>模拟撕纸效果的断轴，使得断轴的含义能被更直观地传递</strong>，并且支持点击展开的效果，还原到真实数据比例。</p>\n<img data-src="images/feature-v6/7-break-axis.gif" width="600px" />\n<h3 id="8.-%E5%8D%87%E7%BA%A7%E8%82%A1%E5%B8%82%E4%BA%A4%E6%98%93%E7%B1%BB%E5%9B%BE%E8%A1%A8" tabindex="-1">8. 升级股市交易类图表</h3>\n<p>ECharts 6.0 针对金融交易场景深度优化，增强了标签针对坐标系的相对定位能力，助力开发者快速构建专业级行情分析工具。</p>\n<p>下图展示了一个使用 ECharts 实现的股市交易图的综合应用场景，结合了<strong>分时图、MACD、成交量、买卖盘口、深度图</strong>：</p>\n<img data-src="images/feature-v6/8-stock.png" width="600px" />\n<p>这些实例可以帮助开发者快速实现金融交易场景的需求。其中，在图表的四个角落显示数字可以使用 <a href="https://echarts.apache.org/option.html#series-line.markPoint.data.relativeTo">relativeTo</a> 实现。</p>\n<h3 id="9.-%E6%96%B0%E5%A2%9E%E7%9F%A9%E9%98%B5%E5%9D%90%E6%A0%87%E7%B3%BB" tabindex="-1">9. 新增矩阵坐标系</h3>\n<p>上述例子也用到了 ECharts 6.0 新增的矩阵坐标系，它的功能十分强大。不仅可以用来做协方差矩阵图：</p>\n<md-example src="matrix-covariance" width="600" height="700" />\n<p>元素周期表：</p>\n<md-example src="matrix-periodic-table" width="100%" height="600" />\n<p>作为一种布局，它还允许开发者将各种图表类型和组件结合，创造出灵活复杂的可视化作品：</p>\n<md-example src="matrix-grid-layout" width="100%" height="600" />\n<h3 id="10.-%E5%8D%87%E7%BA%A7%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97" tabindex="-1">10. 升级自定义系列</h3>\n<p>过去，使用 ECharts 自定义系列意味着开发者必须从零手写 <code>renderItem</code> 复杂逻辑，即使是<em>复用</em>，也只是复制粘贴代码。现在，ECharts 6.0 带来标准化可复用方案：</p>\n<ul>\n<li><strong>自定义系列的注册机制</strong>：和主题注册类似，自定义系列也可以动态注册和使用，使用方式和内置图表系列一样简单方便，参见 <a href="https://echarts.apache.org/option.html#series-custom.renderItem">series-custom.renderItem</a></li>\n<li><strong>官方自定义系列项目</strong>：官方在 <a href="https://github.com/apache/echarts-custom-series">https://github.com/apache/echarts-custom-series</a> 发布了多个自定义系列，在正式版本发布后，开发者可以通过 npm 等方便地获取</li>\n<li><strong>发布自己的自定义系列</strong>：可以向上述项目提 Pull Request 或发布到自己的仓库，实现自定义系列的复用</li>\n</ul>\n<h3 id="11.-%E6%96%B0%E5%A2%9E%E5%A4%9A%E6%AC%BE%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E8%A1%A8" tabindex="-1">11. 新增多款自定义图表</h3>\n<p>本次发布，自定义系列项目提供了 6 款实用的图表，使用方法和完整文档参见 <a href="https://github.com/apache/echarts-custom-series">echarts-custom-series</a> 项目。包括<strong>小提琴图</strong>：</p>\n<img data-src="images/feature-v6/11-violin.png" width="600px" />\n<p><strong>轮廓图</strong>：</p>\n<img data-src="images/feature-v6/11-contour.png" width="600px" />\n<p><strong>睡眠阶段图</strong>：</p>\n<img data-src="images/feature-v6/11-stage.png" width="600px" />\n<p><strong>分段环形图</strong>：</p>\n<img data-src="images/feature-v6/11-segmentedDoughnut.png" width="600px" />\n<p><strong>范围柱状图</strong>：</p>\n<img data-src="images/feature-v6/11-barRange.png" width="600px" />\n<p><strong>范围折线图</strong>：</p>\n<img data-src="images/feature-v6/11-lineRange.png" width="600px" />\n<p>发挥你的创意，快来和我们一起创造更多自定义图表吧！</p>\n<h3 id="12.-%E5%9D%90%E6%A0%87%E8%BD%B4%E6%A0%87%E7%AD%BE%E4%BC%98%E5%8C%96" tabindex="-1">12. 坐标轴标签优化</h3>\n<p>在之前的版本中，直角坐标系的 <code>axisLabel</code> 和 <code>axisName</code> 在数据比较长时容易超出屏幕，以及重叠。数据变化时使用者并不总能准确预估空间来完全避免它们。在这个版本中我们优化了防止超出屏幕以及防止重叠的策略，并成为默认。</p>\n<h2 id="%E5%8D%87%E7%BA%A7%E6%96%B9%E6%B3%95" tabindex="-1">升级方法</h2>\n<p>请参见完整的<a href="https://echarts.apache.org/changelog.html#v6-0-0">版本更新内容</a>和<a href="zh/basics/release-note/v6-upgrade-guide">升级指南</a>。</p>\n',postPath:"zh/basics/release-note/v6-feature",title:"ECharts 6 特性介绍 - 版本特性 - 入门篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:d},{title:"资源列表",dir:l,draft:t},{title:"寻求帮助",dir:s},{title:"版本特性",dir:o,children:[{title:"ECharts 6 特性介绍",dir:h},{title:"v5 升级 v6 指南",dir:p},{title:"5.0",dir:c},{title:"v4 升级 v5 指南",dir:g},{title:5.2,dir:E},{title:5.3,dir:m},{title:5.4,dir:B},{title:5.5,dir:u},{title:5.6,dir:A}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:v,draft:t},{title:"系列",dir:x,draft:t},{title:"样式",dir:C},{title:"数据集",dir:w},{title:"数据转换",dir:G},{title:"坐标系",dir:D,draft:t},{title:"坐标轴",dir:R},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:V,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Z},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:I},{title:"极坐标系柱状图",dir:F,draft:t},{title:"阶梯瀑布图",dir:N},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:j,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:Y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:J},{title:"南丁格尔图（玫瑰图）",dir:"rose"}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:O}]}]},{title:"常用组件",dir:K,children:[{title:"地理坐标系（Geo）",dir:"geo",children:[{title:"SVG 底图",dir:_}]}]},{title:"移动端优化",dir:i,draft:t},{title:"跨平台方案",dir:U,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:H},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:$}]},{title:"动画",dir:q,children:[{title:"数据过渡动画",dir:tt}]},{title:"交互",dir:it,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:et,draft:t},{title:"智能指针吸附",dir:rt}]}]},{title:"最佳实践",dir:at,children:[{title:"移动端优化",dir:i,draft:t},{title:nt,dir:dt},{title:"无障碍访问",dir:"aria"},{title:"安全指南",dir:lt}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:st}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:d},{title:"Resources",dir:l,draft:t},{title:"Get Help",dir:s},{title:"What's New",dir:o,children:[{title:"ECharts 6 Features",dir:h},{title:"Migration from v5 to v6",dir:p},{title:"5.0",dir:c},{title:"Migration from v4 to v5",dir:g},{title:5.2,dir:E},{title:5.3,dir:m},{title:5.4,dir:B},{title:5.5,dir:u},{title:5.6,dir:A}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:v,draft:t},{title:"Series",dir:x,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:w},{title:"Data Transform",dir:G},{title:"Coordinate",dir:D,draft:t},{title:"Axis",dir:R},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:S}]},{title:"How To Guides",dir:k,children:[{title:"Common Charts",dir:V,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Z},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:I},{title:"Bar Polar",dir:F,draft:t},{title:"Waterfall",dir:N}]},{title:"Line",dir:j,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:Y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:J},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Common Components",dir:K,children:[{title:"Geo",dir:"geo",children:[{title:"SVG Base Map",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:H},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:$}]},{title:"Animation",dir:q,children:[{title:"Data Transition",dir:tt}]},{title:"Interaction",dir:it,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:et,draft:t},{title:"Intelligent Pointer Snapping",dir:rt}]}]},{title:"Best Practices",dir:at,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:nt,dir:dt},{title:"Aria",dir:"aria"},{title:"Security Guidelines",dir:lt}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:st}]}]},config:{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#",apiPath:"https://echarts.apache.org/api.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/basics/release-note/v6-feature",config:{_app:{basePath:"/echarts-handbook/",assetsPath:"/echarts-handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v6-feature","v6-upgrade-guide","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","5-5-0","5-6-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","scatter","basic-scatter","component-types","svg-base-map","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","security","edit-guide")</script><script src="/echarts-handbook/_nuxt/73c8e4b.js" defer></script><script src="/echarts-handbook/_nuxt/js/e97de2cdc6b7785ece0f.js" defer></script><script src="/echarts-handbook/_nuxt/js/8cbc28eba39ffdac2c44.js" defer></script><script src="/echarts-handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/echarts-handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/echarts-handbook/_nuxt/js/58025dad1462d49b8398.js" defer></script><noscript data-n-head="ssr" data-body="true"><div class="no-script"><strong>很抱歉，Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript> |
