| <!doctype html> |
| <html data-n-head-ssr lang="zh-CN" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22zh-CN%22%7D%7D"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>数据转换 - 概念篇 - 使用手册 - Apache ECharts</title><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="shortcut icon" type="image/png" href="https://echarts.apache.org/zh/images/favicon.png"><link data-n-head="ssr" rel="stylesheet" href="//echarts.apache.org/zh/js/vendors/bootstrap@3.3.7/css/bootstrap.min.css"><link data-n-head="ssr" rel="stylesheet" href="https://echarts.apache.org/zh/css/main.css"><link data-n-head="ssr" rel="stylesheet" href="//echarts.apache.org/zh/js/vendors/docsearch.js@2.6.3/dist/cdn/docsearch.min.css"><script data-n-head="ssr">window.ECHARTS_WWW_VENDORS_CDN_ROOT="//echarts.apache.org/zh/js/vendors/"</script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/jquery@3.7.1/dist/jquery.min.js"></script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/bootstrap@3.3.7/js/bootstrap.min.js"></script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/docsearch.js@2.6.3/dist/cdn/docsearch.min.js"></script><link rel="preload" href="/echarts-handbook/_nuxt/2daf93c.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/ee8e7fb.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/6b95e13.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/4befe40f6d7019a576a7.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/0c5ed63.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/2903a88c396d921488e8.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/8cbc28eba39ffdac2c44.js" as="script"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/ee8e7fb.css"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/6b95e13.css"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/0c5ed63.css"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20240226" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/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">自定义系列下载</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-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/v6-feature" class="nav-link"><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" 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="/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="%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`。 |
| source: [ |
| ['Product', 'Sales', 'Price', 'Year'], |
| ['Cake', 123, 32, 2011], |
| ['Cereal', 231, 14, 2011], |
| ['Tofu', 235, 5, 2011], |
| ['Dumpling', 341, 25, 2011], |
| ['Biscuit', 122, 29, 2011], |
| ['Cake', 143, 30, 2012], |
| ['Cereal', 201, 19, 2012], |
| ['Tofu', 255, 7, 2012], |
| ['Dumpling', 241, 27, 2012], |
| ['Biscuit', 102, 34, 2012], |
| ['Cake', 153, 28, 2013], |
| ['Cereal', 181, 21, 2013], |
| ['Tofu', 395, 4, 2013], |
| ['Dumpling', 281, 31, 2013], |
| ['Biscuit', 92, 39, 2013], |
| ['Cake', 223, 29, 2014], |
| ['Cereal', 211, 17, 2014], |
| ['Tofu', 345, 3, 2014], |
| ['Dumpling', 211, 35, 2014], |
| ['Biscuit', 72, 24, 2014] |
| ] |
| // id: 'a' |
| }, |
| { |
| // 这个 dataset 的 index 是 `1`。 |
| // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。 |
| transform: { |
| type: 'filter', |
| config: { dimension: 'Year', value: 2011 } |
| } |
| // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。 |
| // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如， |
| // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如， |
| // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。 |
| // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。 |
| }, |
| { |
| // 这个 dataset 的 index 是 `2`。 |
| // 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定， |
| // 那么输入默认来自于 index 为 `0` 的 dataset 。 |
| transform: { |
| // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。 |
| type: 'filter', |
| // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。 |
| // 在这个 "filter" transform 中，`config` 用于指定筛选条件。 |
| // 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有 |
| // 数据项。 |
| config: { dimension: 'Year', value: 2012 } |
| } |
| }, |
| { |
| // 这个 dataset 的 index 是 `3`。 |
| transform: { |
| type: 'filter', |
| config: { dimension: 'Year', value: 2013 } |
| } |
| } |
| ], |
| series: [ |
| { |
| type: 'pie', |
| radius: 50, |
| center: ['25%', '50%'], |
| // 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述 |
| // 2011 年那个 "filter" transform 的结果。 |
| datasetIndex: 1 |
| }, |
| { |
| type: 'pie', |
| radius: 50, |
| center: ['50%', '50%'], |
| datasetIndex: 2 |
| }, |
| { |
| type: 'pie', |
| radius: 50, |
| center: ['75%', '50%'], |
| datasetIndex: 3 |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// 这个 dataset 的 index 是 `0`。</span> |
| <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'Year'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">123</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">231</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">235</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">341</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">122</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">143</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">201</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">241</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">102</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">153</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">181</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">395</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">281</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">92</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">223</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">72</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span> |
| <span class="token punctuation">]</span> |
| <span class="token comment">// id: 'a'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// 这个 dataset 的 index 是 `1`。</span> |
| <span class="token comment">// 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2011</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token comment">// 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。</span> |
| <span class="token comment">// 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，</span> |
| <span class="token comment">// `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，</span> |
| <span class="token comment">// `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。</span> |
| <span class="token comment">// 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// 这个 dataset 的 index 是 `2`。</span> |
| <span class="token comment">// 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，</span> |
| <span class="token comment">// 那么输入默认来自于 index 为 `0` 的 dataset 。</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。</span> |
| <span class="token comment">// 在这个 "filter" transform 中，`config` 用于指定筛选条件。</span> |
| <span class="token comment">// 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有</span> |
| <span class="token comment">// 数据项。</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2012</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 comment">// 这个 dataset 的 index 是 `3`。</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token number">2013</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'25%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token comment">// 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述</span> |
| <span class="token comment">// 2011 年那个 "filter" transform 的结果。</span> |
| <span class="token literal-property property">datasetIndex</span><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 literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">2</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">center</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'75%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">3</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>现在我们简单总结下，使用 transform 时的几个要点：</p> <ul><li>在一个空的 dataset 中声明 <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> 来表示我们要生成新的数据。</li> <li>系列引用这个 dataset 。</li></ul> <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> <h4 id="%E9%93%BE%E5%BC%8F%E5%A3%B0%E6%98%8E-transform" tabindex="-1">链式声明 transform</h4> <p><code>transform</code> 可以被链式声明，这是一个语法糖。</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> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">source</span><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><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// 几个 transform 被声明成 array ，他们构成了一个链，</span> |
| <span class="token comment">// 前一个 transform 的输出是后一个 transform 的输入。</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'Tofu'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> <span class="token literal-property property">order</span><span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 这个系列引用上述 transform 的结果。</span> |
| <span class="token literal-property property">datasetIndex</span><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></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>注意：理论上，任何 transform 都可能有多个输入或多个输出。但是，如果一个 transform 被链式声明，它只能获取前一个 transform 的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）。</p></blockquote> <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> <p>在大多数场景下，transform 只需输出一个 data 。但是也有一些场景，需要输出多个 data ，每个 data 可以被不同的 series 或者 dataset 所使用。</p> <p>例如，在内置的 "boxplot" transform 中，除了 boxplot 系列所需要的 data 外，离群点（ outlier ）也会被生成，并且可以用例如散点图系列显示出来。例如，<a href="https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity">example</a>。</p> <p>我们提供配置 <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> 来满足这种情况，例如：</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> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// 这个 dataset 的 index 为 `0`。</span> |
| <span class="token literal-property property">source</span><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><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// 这个 dataset 的 index 为 `1`。</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'boxplot'</span> |
| <span class="token punctuation">}</span> |
| <span class="token comment">// 这个 "boxplot" transform 生成了两个数据：</span> |
| <span class="token comment">// result[0]: boxplot series 所需的数据。</span> |
| <span class="token comment">// result[1]: 离群点数据。</span> |
| <span class="token comment">// 当其他 series 或者 dataset 引用这个 dataset 时，他们默认只能得到</span> |
| <span class="token comment">// result[0] 。</span> |
| <span class="token comment">// 如果想要他们得到 result[1] ，需要额外声明如下这样一个 dataset ：</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// 这个 dataset 的 index 为 `2`。</span> |
| <span class="token comment">// 这个额外的 dataset 指定了数据来源于 index 为 `1` 的 dataset。</span> |
| <span class="token literal-property property">fromDatasetIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token comment">// 并且指定了获取 transform result[1] 。</span> |
| <span class="token literal-property property">fromTransformResult</span><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 literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span> |
| <span class="token comment">// Reference the data from result[0].</span> |
| <span class="token comment">// 这个 series 引用 index 为 `1` 的 dataset 。</span> |
| <span class="token literal-property property">datasetIndex</span><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 literal-property property">name</span><span class="token operator">:</span> <span class="token string">'outlier'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 这个 series 引用 index 为 `2` 的 dataset 。</span> |
| <span class="token comment">// 从而也就得到了上述的 transform result[1] （即离群点数据）</span> |
| <span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">2</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##dataset.fromTransformResult">dataset.fromTransformResult</a> 和 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 能同时出现在一个 dataset 中，这表示，这个 transform 的输入，是上游的结果中以 <code>fromTransformResult</code> 获取的结果。例如：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token punctuation">{</span> |
| <span class="token literal-property property">fromDatasetIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fromTransformResult</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">order</span><span class="token operator">:</span> <span class="token string">'desc'</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="%E5%9C%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%AD-debug" tabindex="-1">在开发环境中 debug</h4> <p>使用 transform 时，有时候我们会配不对，显示不出来结果，并且不知道哪里错了。所以，这里提供了一个配置项 <code>transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例：</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> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">source</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> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// 配置为 `true` 后， transform 的结果</span> |
| <span class="token comment">// 会被 console.log 打印出来。</span> |
| <span class="token literal-property property">print</span><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 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> <h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-%22filter%22" tabindex="-1">数据转换器 "filter"</h2> <p>echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 <code>transform.type: "filter"</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 = { |
| dataset: [ |
| { |
| source: [ |
| ['Product', 'Sales', 'Price', 'Year'], |
| ['Cake', 123, 32, 2011], |
| ['Latte', 231, 14, 2011], |
| ['Tofu', 235, 5, 2011], |
| ['Milk Tee', 341, 25, 2011], |
| ['Porridge', 122, 29, 2011], |
| ['Cake', 143, 30, 2012], |
| ['Latte', 201, 19, 2012], |
| ['Tofu', 255, 7, 2012], |
| ['Milk Tee', 241, 27, 2012], |
| ['Porridge', 102, 34, 2012], |
| ['Cake', 153, 28, 2013], |
| ['Latte', 181, 21, 2013], |
| ['Tofu', 395, 4, 2013], |
| ['Milk Tee', 281, 31, 2013], |
| ['Porridge', 92, 39, 2013], |
| ['Cake', 223, 29, 2014], |
| ['Latte', 211, 17, 2014], |
| ['Tofu', 345, 3, 2014], |
| ['Milk Tee', 211, 35, 2014], |
| ['Porridge', 72, 24, 2014] |
| ] |
| }, |
| { |
| transform: { |
| type: 'filter', |
| config: { dimension: 'Year', '=': 2011 } |
| // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ） |
| // 'Year' 上值为 2011 的所有数据项。 |
| } |
| } |
| ], |
| series: { |
| type: 'pie', |
| datasetIndex: 1 |
| } |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'Year'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">123</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">231</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">235</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">341</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">122</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">143</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">201</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">241</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">102</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">153</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">181</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">395</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">281</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">92</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">223</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">72</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> <span class="token string-property property">'='</span><span class="token operator">:</span> <span class="token number">2011</span> <span class="token punctuation">}</span> |
| <span class="token comment">// 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）</span> |
| <span class="token comment">// 'Year' 上值为 2011 的所有数据项。</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">datasetIndex</span><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><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>这是 filter 的另一个例子的效果：</p> <p><iframe width="100%" height="350" src=""></iframe></p> <p>在 "filter" transform 中，有这些要素：</p> <p><strong>关于维度（ dimension ）：</strong></p> <p><code>config.dimension</code> 指定了维度，能设成这样的值：</p> <ul><li>设定成声明在 dataset 中的维度名，例如 <code>config: { dimension: 'Year', '=': 2011 }</code>。不过， dataset 中维度名的声明并非强制，所以我们也可以</li> <li>设定成 dataset 中的维度 index （index 值从 0 开始）例如 <code>config: { dimension: 3, '=': 2011 }</code>。</li></ul> <p><strong>关于关系比较操作符：</strong></p> <p>关系操作符，可以设定这些： |
| <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> <ul><li>多个关系操作符能声明在一个 {} 中，例如 <code>{ dimension: 'Price', '>=': 20, '<': 30 }</code>。这表示“与”的关系，即，筛选出价格大于等于 20 小于 30 的数据项。</li> <li>data 里的值，不仅可以是数值（ number ），也可以是“类数值的字符串”（“ numeric string ”）。“类数值的字符串”本身是一个字符串，但是可以被转换为字面所描述的数值，例如 <code>' 123 '</code>。转换过程中，空格（全角半角空格）和换行符都能被消除（ trim ）。</li> <li>如果我们需要对日期对象（JS <code>Date</code>）或者日期字符串（如 '2012-05-12'）进行比较，我们需要手动指定 <code>parser: 'time'</code>，例如 <code>config: { dimension: 3, lt: '2012-05-12', parser: 'time' }</code>。</li> <li>纯字符串比较也被支持，但是只能用在 <code>=</code> 或 <code>!=</code> 上。而 <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> 并不支持纯字符串比较，也就是说，这四个操作符的右值，不能是字符串。</li> <li><code>reg</code> 操作符能提供正则表达式比较。例如， <code>{ dimension: 'Name', reg: /\s+Müller\s*$/ }</code> 能在 <code>'Name'</code> 维度上选出姓 <code>'Müller'</code> 的数据项。</li></ul> <p><strong>关于逻辑比较：</strong></p> <p>我们也支持了逻辑比较操作符 <strong>与或非</strong>（ <code>and</code> | <code>or</code> | <code>not</code> ）：</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> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">source</span><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><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 使用 and 操作符。</span> |
| <span class="token comment">// 类似地，同样的位置也可以使用 “or” 或 “not”。</span> |
| <span class="token comment">// 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。</span> |
| <span class="token literal-property property">and</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> <span class="token string-property property">'='</span><span class="token operator">:</span> <span class="token number">2011</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string-property property">'>='</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string-property property">'<'</span><span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token comment">// 这个表达的是，选出 2011 年价格大于等于 20 但小于 30 的数据项。</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">datasetIndex</span><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></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>and</code>/<code>or</code>/<code>not</code> 自然可以被嵌套，例如：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">or</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">and</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string-property property">'>='</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token string-property property">'<'</span><span class="token operator">:</span> <span class="token number">20</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string-property property">'<'</span><span class="token operator">:</span> <span class="token number">100</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">not</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string-property property">'='</span><span class="token operator">:</span> <span class="token string">'Tofu'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">and</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string-property property">'>='</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token string-property property">'<'</span><span class="token operator">:</span> <span class="token number">20</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string-property property">'<'</span><span class="token operator">:</span> <span class="token number">100</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">not</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string-property property">'='</span><span class="token operator">:</span> <span class="token string">'Cake'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span></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>关于解析器（ parser ）：</strong></p> <p>还可以指定“解析器”（ parser ）来对值进行解析后再做比较。现在支持的解析器有：</p> <ul><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> <li><code>parser: 'trim'</code>：如果原始数据是字符串，则把字符串两端的空格（全角半角）和换行符去掉。如果不是字符串，还保持为原始数据。</li> <li><code>parser: 'number'</code>：强制把原始数据转成数值。如果不能转成有意义的数值，那么转成 <code>NaN</code>。在大多数场景下，我们并不需要这个解析器，因为按默认策略，“像数值的字符串”就会被转成数值。但是默认策略比较严格，这个解析器比较宽松，如果我们遇到含有尾缀的字符串（例如 <code>'33%'</code>, <code>12px</code>），我们需要手动指定 <code>parser: 'number'</code>，从而去掉尾缀转为数值才能比较。</li></ul> <p>这个例子显示了如何使用 <code>parser: 'time'</code>：</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> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'Date'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">311</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token string">'2012-05-12'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token string">'2012-05-22'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">262</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'2012-06-02'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">359</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token string">'2012-06-22'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">121</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token string">'2012-07-02'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">271</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'2012-06-22'</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> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'Date'</span><span class="token punctuation">,</span> |
| <span class="token string-property property">'>='</span><span class="token operator">:</span> <span class="token string">'2012-05'</span><span class="token punctuation">,</span> |
| <span class="token string-property property">'<'</span><span class="token operator">:</span> <span class="token string">'2012-06'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token string">'time'</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></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></p> <p>最后，我们给出，数据转换器 "filter" 的 config 的形式化定义：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">type</span> <span class="token class-name">FilterTransform</span> <span class="token operator">=</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">;</span> |
| config<span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| <span class="token keyword">type</span> <span class="token class-name">ConditionalExpressionOption</span> <span class="token operator">=</span> |
| <span class="token operator">|</span> <span class="token boolean">true</span> |
| <span class="token operator">|</span> <span class="token boolean">false</span> |
| <span class="token operator">|</span> RelationalExpressionOption |
| <span class="token operator">|</span> LogicalExpressionOption<span class="token punctuation">;</span> |
| <span class="token keyword">type</span> <span class="token class-name">RelationalExpressionOption</span> <span class="token operator">=</span> <span class="token punctuation">{</span> |
| dimension<span class="token operator">:</span> DimensionName <span class="token operator">|</span> DimensionIndex<span class="token punctuation">;</span> |
| parser<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'time'</span> <span class="token operator">|</span> <span class="token string">'trim'</span> <span class="token operator">|</span> <span class="token string">'number'</span><span class="token punctuation">;</span> |
| lt<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// less than</span> |
| lte<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// less than or equal</span> |
| gt<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// greater than</span> |
| gte<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// greater than or equal</span> |
| eq<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// equal</span> |
| ne<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// not equal</span> |
| <span class="token string">'<'</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// lt</span> |
| <span class="token string">'<='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// lte</span> |
| <span class="token string">'>'</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// gt</span> |
| <span class="token string">'>='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// gte</span> |
| <span class="token string">'='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// eq</span> |
| <span class="token string">'!='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// ne</span> |
| <span class="token string">'<>'</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// ne (SQL style)</span> |
| reg<span class="token operator">?</span><span class="token operator">:</span> RegExp <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// RegExp</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| <span class="token keyword">type</span> <span class="token class-name">LogicalExpressionOption</span> <span class="token operator">=</span> <span class="token punctuation">{</span> |
| and<span class="token operator">?</span><span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
| or<span class="token operator">?</span><span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
| not<span class="token operator">?</span><span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| <span class="token keyword">type</span> <span class="token class-name">DataValue</span> <span class="token operator">=</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> Date<span class="token punctuation">;</span> |
| <span class="token keyword">type</span> <span class="token class-name">DimensionName</span> <span class="token operator">=</span> <span class="token builtin">string</span><span class="token punctuation">;</span> |
| <span class="token keyword">type</span> <span class="token class-name">DimensionIndex</span> <span class="token operator">=</span> <span class="token builtin">number</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>注意：使用<a href="zh/basics/import#%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">按需引入</a>接口时，如果需要使用该内置转换器，除了 <code>Dataset</code> 组件，还需引入 <code>Transform</code> 组件。</p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> |
| DatasetComponent<span class="token punctuation">,</span> |
| TransformComponent |
| <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span> |
| |
| echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span> |
| DatasetComponent<span class="token punctuation">,</span> |
| TransformComponent |
| <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="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-%22sort%22" tabindex="-1">数据转换器 "sort"</h2> <p>"sort" 是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ <code>axis.type: 'category'</code> ）中显示排过序的数据。例如：</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> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">dimensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token string">'profession'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'date'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token string">' Hannah Krause '</span><span class="token punctuation">,</span> <span class="token number">41</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">,</span> <span class="token string">'2011-02-12'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Zhao Qian '</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">351</span><span class="token punctuation">,</span> <span class="token string">'2011-03-01'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">' Jasmin Krause '</span><span class="token punctuation">,</span> <span class="token number">52</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">,</span> <span class="token string">'2011-02-14'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Li Lei'</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">,</span> <span class="token string">'2011-02-18'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">' Karle Neumann '</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">253</span><span class="token punctuation">,</span> <span class="token string">'2011-04-02'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">' Adrian Groß'</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'2011-01-16'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Mia Neumann'</span><span class="token punctuation">,</span> <span class="token number">71</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">,</span> <span class="token string">'2011-03-19'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">' Böhm Fuchs'</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">318</span><span class="token punctuation">,</span> <span class="token string">'2011-02-24'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Han Meimei '</span><span class="token punctuation">,</span> <span class="token number">67</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">366</span><span class="token punctuation">,</span> <span class="token string">'2011-03-12'</span><span class="token punctuation">]</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 按分数排序</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token literal-property property">order</span><span class="token operator">:</span> <span class="token string">'asc'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">1</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><iframe width="100%" height="350" src=""></iframe></p> <p>数据转换器 "sort" 还有一些额外的功能：</p> <ul><li>可以多重排序，多个维度一起排序。见下面的例子。</li> <li>排序规则是这样的： |
| <ul><li>默认按照数值大小排序。其中，“可转为数值的字符串”也被转换成数值，和其他数值一起按大小排序。</li> <li>对于其他“不能转为数值的字符串”，也能在它们之间按字符串进行排序。这个特性有助于这种场景：把相同标签的数据项排到一起，尤其是当多个维度共同排序时。见下面的例子。</li> <li>当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时，或者它们和“其他类型的值”进行比较时，它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”，并且可以设置 <code>incomparable: 'min' | 'max'</code> 来指定一个“incomparable”在这个比较中是最大还是最小，从而能使它们能产生比较结果。这个设定的用途，比如可以是，决定空值（例如 <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>''</code>, <code>'-'</code>）在排序的头还是尾。</li></ul></li> <li>解析器 <code>parser: 'time' | 'trim' | 'number'</code> 可以被使用，和数据转换器 "filter" 中的情况一样。 |
| <ul><li>如果要对时间进行排序（例如，值为 JS <code>Date</code> 实例或者时间字符串如 <code>'2012-03-12 11:13:54'</code>），我们需要声明 <code>parser: 'time'</code>。</li> <li>如果需要对有后缀的数值进行排序（如 <code>'33%'</code>, <code>'16px'</code>）我们需要声明 <code>parser: 'number'</code>。</li></ul></li></ul> <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> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">dimensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token string">'profession'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'date'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token string">' Hannah Krause '</span><span class="token punctuation">,</span> <span class="token number">41</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">,</span> <span class="token string">'2011-02-12'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Zhao Qian '</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">351</span><span class="token punctuation">,</span> <span class="token string">'2011-03-01'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">' Jasmin Krause '</span><span class="token punctuation">,</span> <span class="token number">52</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">,</span> <span class="token string">'2011-02-14'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Li Lei'</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">,</span> <span class="token string">'2011-02-18'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">' Karle Neumann '</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">253</span><span class="token punctuation">,</span> <span class="token string">'2011-04-02'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">' Adrian Groß'</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'2011-01-16'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Mia Neumann'</span><span class="token punctuation">,</span> <span class="token number">71</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">,</span> <span class="token string">'2011-03-19'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">' Böhm Fuchs'</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">318</span><span class="token punctuation">,</span> <span class="token string">'2011-02-24'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token string">'Han Meimei '</span><span class="token punctuation">,</span> <span class="token number">67</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">366</span><span class="token punctuation">,</span> <span class="token string">'2011-03-12'</span><span class="token punctuation">]</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token comment">// 对两个维度按声明的优先级分别排序。</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'profession'</span><span class="token punctuation">,</span> <span class="token literal-property property">order</span><span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> <span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token literal-property property">order</span><span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">1</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><iframe width="100%" height="350" src=""></iframe></p> <p>最后，我们给出数据转换器 "sort" 的 config 的形式化定义。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">type</span> <span class="token class-name">SortTransform</span> <span class="token operator">=</span> <span class="token punctuation">{</span> |
| type<span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">;</span> |
| config<span class="token operator">:</span> OrderExpression <span class="token operator">|</span> OrderExpression<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 keyword">type</span> <span class="token class-name">OrderExpression</span> <span class="token operator">=</span> <span class="token punctuation">{</span> |
| dimension<span class="token operator">:</span> DimensionName <span class="token operator">|</span> DimensionIndex<span class="token punctuation">;</span> |
| order<span class="token operator">:</span> <span class="token string">'asc'</span> <span class="token operator">|</span> <span class="token string">'desc'</span><span class="token punctuation">;</span> |
| incomparable<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'min'</span> <span class="token operator">|</span> <span class="token string">'max'</span><span class="token punctuation">;</span> |
| parser<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'time'</span> <span class="token operator">|</span> <span class="token string">'trim'</span> <span class="token operator">|</span> <span class="token string">'number'</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| <span class="token keyword">type</span> <span class="token class-name">DimensionName</span> <span class="token operator">=</span> <span class="token builtin">string</span><span class="token punctuation">;</span> |
| <span class="token keyword">type</span> <span class="token class-name">DimensionIndex</span> <span class="token operator">=</span> <span class="token builtin">number</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>注意：使用<a href="zh/basics/import#%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">按需引入</a>接口时，如果需要使用该内置转换器，除了 <code>Dataset</code> 组件，还需引入 <code>Transform</code> 组件。</p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> |
| DatasetComponent<span class="token punctuation">,</span> |
| TransformComponent |
| <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span> |
| |
| echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span> |
| DatasetComponent<span class="token punctuation">,</span> |
| TransformComponent |
| <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="%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> <p>除了上述的内置的数据转换器外，我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中，我们使用第三方库 <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> 提供的数据转换器。</p> <p>生成数据的回归线：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 首先要注册外部数据转换器。</span> |
| echarts<span class="token punctuation">.</span><span class="token function">registerTransform</span><span class="token punctuation">(</span><span class="token function">ecStatTransform</span><span class="token punctuation">(</span>ecStat<span class="token punctuation">)</span><span class="token punctuation">.</span>regression<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> <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> |
| <span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">source</span><span class="token operator">:</span> rawData |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 引用注册的数据转换器。</span> |
| <span class="token comment">// 注意，每个外部的数据转换器，都有名空间（如 'ecStat:xxx'，'ecStat' 是名空间）。</span> |
| <span class="token comment">// 而内置数据转换器（如 'filter', 'sort'）没有名空间。</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'ecStat:regression'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">config</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 这里是此外部数据转换器所需的参数。</span> |
| <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'exponential'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">datasetIndex</span><span class="token operator">:</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 literal-property property">name</span><span class="token operator">:</span> <span class="token string">'regression'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">symbol</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">datasetIndex</span><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/pissang" target="_blank" class="post-contributor has-avatar"><img alt="pissang" src="https://echarts.apache.org/en/images/people/沈毅.jpg?_v_=20240226" loading="lazy" decoding="async" fetchpriority="low"> <span>pissang</span></a><a href="https://github.com/100pah" target="_blank" class="post-contributor has-avatar"><img alt="100pah" src="https://echarts.apache.org/en/images/people/宿爽.jpg?_v_=20240226" loading="lazy" decoding="async" fetchpriority="low"> <span>100pah</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/idaibin" target="_blank" class="post-contributor"><!----> <span>idaibin</span></a><a href="https://github.com/shangchen0531" target="_blank" class="post-contributor"><!----> <span>shangchen0531</span></a><a href="https://github.com/meishijia" target="_blank" class="post-contributor"><!----> <span>meishijia</span></a></div></div></div></div></div></div></div></div></div></div><script>window.__NUXT__=function(g,I,C,i,e,A,t,d,o,l,a,c,n,r,s,m,h,b,y,p,u,W,B,Z,w,L,J,G,M,D,E,S,O,v,X,z,F,R,Y,K,H,N,V,f,j,k,x,T,U,Q,q,P,_,$,gg,Ig,Cg,ig,eg,Ag,tg,dg,og){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<blockquote>\n<p>注意：使用<a href="zh/basics/import#%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">按需引入</a>接口时，如果需要使用该内置转换器，除了 <code>Dataset</code> 组件，还需引入 <code>Transform</code> 组件。</p>\n</blockquote>\n<md-code-block lang="ts" code="\'aW1wb3J0IHsKICBEYXRhc2V0Q29tcG9uZW50LAogIFRyYW5zZm9ybUNvbXBvbmVudAp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CgplY2hhcnRzLnVzZShbCiAgRGF0YXNldENvbXBvbmVudCwKICBUcmFuc2Zvcm1Db21wb25lbnQKXSk7\'" 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>parser: \'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="\'dHlwZSBTb3J0VHJhbnNmb3JtID0gewogIHR5cGU6ICdzb3J0JzsKICBjb25maWc6IE9yZGVyRXhwcmVzc2lvbiB8IE9yZGVyRXhwcmVzc2lvbltdOwp9Owp0eXBlIE9yZGVyRXhwcmVzc2lvbiA9IHsKICBkaW1lbnNpb246IERpbWVuc2lvbk5hbWUgfCBEaW1lbnNpb25JbmRleDsKICBvcmRlcjogJ2FzYycgfCAnZGVzYyc7CiAgaW5jb21wYXJhYmxlPzogJ21pbicgfCAnbWF4JzsKICBwYXJzZXI_OiAndGltZScgfCAndHJpbScgfCAnbnVtYmVyJzsKfTsKdHlwZSBEaW1lbnNpb25OYW1lID0gc3RyaW5nOwp0eXBlIERpbWVuc2lvbkluZGV4ID0gbnVtYmVyOw\'" line-highlights="\'\'" />\n<blockquote>\n<p>注意：使用<a href="zh/basics/import#%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">按需引入</a>接口时，如果需要使用该内置转换器，除了 <code>Dataset</code> 组件，还需引入 <code>Transform</code> 组件。</p>\n</blockquote>\n<md-code-block lang="ts" code="\'aW1wb3J0IHsKICBEYXRhc2V0Q29tcG9uZW50LAogIFRyYW5zZm9ybUNvbXBvbmVudAp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CgplY2hhcnRzLnVzZShbCiAgRGF0YXNldENvbXBvbmVudCwKICBUcmFuc2Zvcm1Db21wb25lbnQKXSk7\'" 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",title:"数据转换 - 概念篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:e,children:[{title:"获取 ECharts",dir:A},{title:"在项目中引入 ECharts",dir:t},{title:"资源列表",dir:d,draft:g},{title:"寻求帮助",dir:o},{title:"版本特性",dir:l,children:[{title:"ECharts 6 特性介绍",dir:a},{title:"v5 升级 v6 指南",dir:c},{title:"5.0",dir:n},{title:"v4 升级 v5 指南",dir:r},{title:5.2,dir:s},{title:5.3,dir:m},{title:5.4,dir:h},{title:5.5,dir:b},{title:5.6,dir:y}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:W,draft:g},{title:"系列",dir:B,draft:g},{title:"样式",dir:Z},{title:"数据集",dir:w},{title:"数据转换",dir:L},{title:"坐标系",dir:J,draft:g},{title:"坐标轴",dir:G},{title:"视觉映射",dir:C},{title:"图例",dir:M},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:E,children:[{title:"常用图表类型",dir:S,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:O},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:z,draft:g},{title:"阶梯瀑布图",dir:F},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:K},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:N},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:f},{title:"圆环图",dir:j},{title:"南丁格尔图（玫瑰图）",dir:"rose"}]},{title:"散点图",dir:k,children:[{title:"基础散点图",dir:x}]}]},{title:"常用组件",dir:T,children:[{title:"地理坐标系（Geo）",dir:"geo",children:[{title:"SVG 底图",dir:U}]}]},{title:"移动端优化",dir:I,draft:g},{title:"跨平台方案",dir:Q,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:P,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"动画",dir:$,children:[{title:"数据过渡动画",dir:gg}]},{title:"交互",dir:Ig,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Cg,draft:g},{title:"智能指针吸附",dir:ig}]}]},{title:"最佳实践",dir:eg,children:[{title:"移动端优化",dir:I,draft:g},{title:Ag,dir:tg},{title:"无障碍访问",dir:"aria"},{title:"安全指南",dir:dg}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:og}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:e,children:[{title:"Download ECharts",dir:A},{title:"Import ECharts",dir:t},{title:"Resources",dir:d,draft:g},{title:"Get Help",dir:o},{title:"What's New",dir:l,children:[{title:"ECharts 6 Features",dir:a},{title:"Migration from v5 to v6",dir:c},{title:"5.0",dir:n},{title:"Migration from v4 to v5",dir:r},{title:5.2,dir:s},{title:5.3,dir:m},{title:5.4,dir:h},{title:5.5,dir:b},{title:5.6,dir:y}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:W,draft:g},{title:"Series",dir:B,draft:g},{title:"Style",dir:Z},{title:"Dataset",dir:w},{title:"Data Transform",dir:L},{title:"Coordinate",dir:J,draft:g},{title:"Axis",dir:G},{title:"Visual Mapping",dir:C},{title:"Legend",dir:M},{title:"Event and Action",dir:D}]},{title:"How To Guides",dir:E,children:[{title:"Common Charts",dir:S,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:O},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:z,draft:g},{title:"Waterfall",dir:F}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:K},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:N},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:f},{title:"Ring Style",dir:j},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:k,children:[{title:"Basic Scatter",dir:x}]}]},{title:"Common Components",dir:T,children:[{title:"Geo",dir:"geo",children:[{title:"SVG Base Map",dir:U}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:Q,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:P,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Animation",dir:$,children:[{title:"Data Transition",dir:gg}]},{title:"Interaction",dir:Ig,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Cg,draft:g},{title:"Intelligent Pointer Snapping",dir:ig}]}]},{title:"Best Practices",dir:eg,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:Ag,dir:tg},{title:"Aria",dir:"aria"},{title:"Security Guidelines",dir:dg}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:og}]}]},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:g,routePath:"/zh/concepts/data-transform",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/2daf93c.js" defer></script><script src="/echarts-handbook/_nuxt/js/2903a88c396d921488e8.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/4befe40f6d7019a576a7.js" defer></script><noscript data-n-head="ssr" data-body="true"><div class="no-script"><strong>很抱歉，Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| </body> |
| </html> |
