| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css"> |
| <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"> |
| <title>数据转换 - 概念篇 - Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/4d2a12b.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1f3ef45.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1f3ef45.css"><link rel="stylesheet" href="/handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide">v5 升级指南</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">v4 升级 v5 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图（玫瑰图）</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">动画</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/animation/transition" class="nav-link"><span class="title">数据过渡动画</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">智能指针吸附</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%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"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60" loading="lazy"> <span>100pah</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a><a href="https://github.com/idaibin" target="_blank" class="post-contributor"><img alt="idaibin" src="https://avatars.githubusercontent.com/idaibin?size=60" loading="lazy"> <span>idaibin</span></a><a href="https://github.com/shangchen0531" target="_blank" class="post-contributor"><img alt="shangchen0531" src="https://avatars.githubusercontent.com/shangchen0531?size=60" loading="lazy"> <span>shangchen0531</span></a><a href="https://github.com/meishijia" target="_blank" class="post-contributor"><img alt="meishijia" src="https://avatars.githubusercontent.com/meishijia?size=60" loading="lazy"> <span>meishijia</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,A,i,e,t,d,o,l,a,c,n,r,s,m,h,b,y,p,u,W,B,Z,w,L,J,G,M,D,E,O,S,X,z,F,v,R,Y,K,H,N,V,f,j,k,x,T,U,Q,q,P,_,$,gg,Ig,Cg,Ag){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:A},{title:"入门篇",dir:i,children:[{title:"获取 ECharts",dir:e},{title:"在项目中引入 ECharts",dir:t},{title:"资源列表",dir:d,draft:g},{title:"寻求帮助",dir:o},{title:"版本特性",dir:l,children:[{title:"ECharts 5 特性介绍",dir:a},{title:"v4 升级 v5 指南",dir:c},{title:5.2,dir:n},{title:5.3,dir:r},{title:5.4,dir:s}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:h},{title:"配置项",dir:b,draft:g},{title:"系列",dir:y,draft:g},{title:"样式",dir:p},{title:"数据集",dir:u},{title:"数据转换",dir:W},{title:"坐标系",dir:B,draft:g},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:C},{title:"图例",dir:w},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:M},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:E},{title:"极坐标系柱状图",dir:O,draft:g},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:X,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:v},{title:"平滑曲线图",dir:R},{title:"阶梯线图",dir:Y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:H},{title:"南丁格尔图（玫瑰图）",dir:N}]},{title:"散点图",dir:V,children:[{title:"基础散点图",dir:f}]}]},{title:j,dir:I,draft:g},{title:"跨平台方案",dir:k,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:x},{title:"数据下钻",dir:T,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"动画",dir:Q,children:[{title:"数据过渡动画",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:gg,children:[{title:j,dir:I,draft:g},{title:Ig,dir:Cg},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Ag}]}],en:[{title:"Get Started",dir:A},{title:"Basics",dir:i,children:[{title:"Download ECharts",dir:e},{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 5 Features",dir:a},{title:"Migration from v4 to v5",dir:c},{title:5.2,dir:n},{title:5.3,dir:r},{title:5.4,dir:s}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:h},{title:"Chart Option",dir:b,draft:g},{title:"Series",dir:y,draft:g},{title:"Style",dir:p},{title:"Dataset",dir:u},{title:"Data Transform",dir:W},{title:"Coordinate",dir:B,draft:g},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:C},{title:"Legend",dir:w},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:J,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:M},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:E},{title:"Bar Polar",dir:O,draft:g},{title:"Waterfall",dir:S}]},{title:"Line",dir:X,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:v},{title:"Smoothed Line",dir:R},{title:"Step Line",dir:Y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:H},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:V,children:[{title:"Basic Scatter",dir:f}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:k,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:x},{title:"Drilldown",dir:T,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Animation",dir:Q,children:[{title:"Data Transition",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:gg,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:Ig,dir:Cg},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Ag}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/concepts/data-transform",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/4d2a12b.js" defer></script><script src="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" defer></script><script src="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" defer></script> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| <script src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> |
| <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395",document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script> |
| </body> |
| </html> |
