| <!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>Data Transform - Concepts - 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="en"><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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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/en/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">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Animation</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/animation/transition" class="nav-link"><span class="title">Data Transition</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">Intelligent Pointer Snapping</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practices/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="data-transform" tabindex="-1">Data Transform</h1> <p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "transformation").</p> <p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ... |
| With the help of those transform methods, users can be implements the features like:</p> <ul><li>Partition data into multiple series.</li> <li>Make some statistics and visualize the result.</li> <li>Adapt some visualization algorithms to data and display the result.</li> <li>Sort data.</li> <li>Remove or choose some kind of empty or special datums.</li> <li>...</li></ul> <h2 id="get-started-to-data-transform" tabindex="-1">Get Started to Data Transform</h2> <p>In echarts, data transform is implemented based on the concept of <a href="~https://echarts.apache.org/option.html##dataset">dataset</a>. A <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can be configured in a dataset instance to indicate that this dataset is to be generated from this <code>transform</code>. For example:</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var option = { |
| dataset: [ |
| { |
| // This dataset is on `datasetIndex: 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' |
| }, |
| { |
| // This dataset is on `datasetIndex: 1`. |
| // A `transform` is configured to indicate that the |
| // final data of this dataset is transformed via this |
| // transform function. |
| transform: { |
| type: 'filter', |
| config: { dimension: 'Year', value: 2011 } |
| } |
| // There can be optional properties `fromDatasetIndex` or `fromDatasetId` |
| // to indicate that where is the input data of the transform from. |
| // For example, `fromDatasetIndex: 0` specify the input data is from |
| // the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the |
| // input data is from the dataset having `id: 'a'`. |
| // [DEFAULT_RULE] |
| // If both `fromDatasetIndex` and `fromDatasetId` are omitted, |
| // `fromDatasetIndex: 0` are used by default. |
| }, |
| { |
| // This dataset is on `datasetIndex: 2`. |
| // Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is |
| // specified, `fromDatasetIndex: 0` is used by default |
| transform: { |
| // The "filter" transform filters and gets data items only match |
| // the given condition in property `config`. |
| type: 'filter', |
| // Transforms has a property `config`. In this "filter" transform, |
| // the `config` specify the condition that each result data item |
| // should be satisfied. In this case, this transform get all of |
| // the data items that the value on dimension "Year" equals to 2012. |
| config: { dimension: 'Year', value: 2012 } |
| } |
| }, |
| { |
| // This dataset is on `datasetIndex: 3` |
| transform: { |
| type: 'filter', |
| config: { dimension: 'Year', value: 2013 } |
| } |
| } |
| ], |
| series: [ |
| { |
| type: 'pie', |
| radius: 50, |
| center: ['25%', '50%'], |
| // In this case, each "pie" series reference to a dataset that has |
| // the result of its "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">// This dataset is on `datasetIndex: 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">// This dataset is on `datasetIndex: 1`.</span> |
| <span class="token comment">// A `transform` is configured to indicate that the</span> |
| <span class="token comment">// final data of this dataset is transformed via this</span> |
| <span class="token comment">// transform function.</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">// There can be optional properties `fromDatasetIndex` or `fromDatasetId`</span> |
| <span class="token comment">// to indicate that where is the input data of the transform from.</span> |
| <span class="token comment">// For example, `fromDatasetIndex: 0` specify the input data is from</span> |
| <span class="token comment">// the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the</span> |
| <span class="token comment">// input data is from the dataset having `id: 'a'`.</span> |
| <span class="token comment">// [DEFAULT_RULE]</span> |
| <span class="token comment">// If both `fromDatasetIndex` and `fromDatasetId` are omitted,</span> |
| <span class="token comment">// `fromDatasetIndex: 0` are used by default.</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// This dataset is on `datasetIndex: 2`.</span> |
| <span class="token comment">// Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is</span> |
| <span class="token comment">// specified, `fromDatasetIndex: 0` is used by default</span> |
| <span class="token literal-property property">transform</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// The "filter" transform filters and gets data items only match</span> |
| <span class="token comment">// the given condition in property `config`.</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">// Transforms has a property `config`. In this "filter" transform,</span> |
| <span class="token comment">// the `config` specify the condition that each result data item</span> |
| <span class="token comment">// should be satisfied. In this case, this transform get all of</span> |
| <span class="token comment">// the data items that the value on dimension "Year" equals to 2012.</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">// This dataset is on `datasetIndex: 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">// In this case, each "pie" series reference to a dataset that has</span> |
| <span class="token comment">// the result of its "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>Let's summarize the key points of using data transform:</p> <ul><li>Generate new data from existing declared data via the declaration of <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> in some blank dataset.</li> <li>Series references these datasets to show the result.</li></ul> <h2 id="advanced-usage" tabindex="-1">Advanced Usage</h2> <h4 id="piped-transform" tabindex="-1">Piped Transform</h4> <p>There is a syntactic sugar that pipe transforms like:</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 comment">// The original data</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// Declare transforms in an array to pipe multiple transforms,</span> |
| <span class="token comment">// which makes them execute one by one and take the output of</span> |
| <span class="token comment">// the previous transform as the input of the next 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">// Display the result of the piped 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>Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).</p></blockquote> <h4 id="output-multiple-data" tabindex="-1">Output Multiple Data</h4> <p>In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.</p> <p>For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity">example</a>.</p> <p>We use prop <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> to satisfy this requirement. For example:</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">// Original source data.</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">'boxplot'</span> |
| <span class="token punctuation">}</span> |
| <span class="token comment">// After this "boxplot transform" two result data generated:</span> |
| <span class="token comment">// result[0]: The boxplot data</span> |
| <span class="token comment">// result[1]: The outlier data</span> |
| <span class="token comment">// By default, when series or other dataset reference this dataset,</span> |
| <span class="token comment">// only result[0] can be visited.</span> |
| <span class="token comment">// If we need to visit result[1], we have to use another dataset</span> |
| <span class="token comment">// as follows:</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token comment">// This extra dataset references the dataset above, and retrieves</span> |
| <span class="token comment">// the result[1] as its own data. Thus series or other dataset can</span> |
| <span class="token comment">// reference this dataset to get the data from result[1].</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 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 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">// Reference the data from 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>What more, <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> and <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by <code>fromTransformResult</code>. For example:</p> <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="debug-in-develop-environment" tabindex="-1">Debug in Develop Environment</h4> <p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code>transform.print</code> might help in such case. (<code>transform.print</code> is only available in dev environment).</p> <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">// The result of this transform will be printed</span> |
| <span class="token comment">// in dev tool via `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 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="filter-transform" tabindex="-1">Filter Transform</h2> <p>Transform type "filter" is a built-in transform that provide data filter according to specified conditions. The basic option is like:</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 } |
| // The config is the "condition" of this filter. |
| // This transform traverse the source data and |
| // and retrieve all the items that the "Year" |
| // is `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">// The config is the "condition" of this filter.</span> |
| <span class="token comment">// This transform traverse the source data and</span> |
| <span class="token comment">// and retrieve all the items that the "Year"</span> |
| <span class="token comment">// is `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>This is another example of filter transform:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <p><strong>About dimension:</strong></p> <p>The <code>config.dimension</code> can be:</p> <ul><li>Dimension name declared in dataset, like <code>config: { dimension: 'Year', '=': 2011 }</code>. Dimension name declaration is not mandatory.</li> <li>Dimension index (start from 0), like <code>config: { dimension: 3, '=': 2011 }</code>.</li></ul> <p><strong>About relational operator:</strong></p> <p>The relational operator can be: |
| <code>></code>(<code>gt</code>), <code>>=</code>(<code>gte</code>), <code><</code>(<code>lt</code>), <code><=</code>(<code>lte</code>), <code>=</code>(<code>eq</code>), <code>!=</code>(<code>ne</code>, <code><></code>), <code>reg</code>. (The name in the parentheses are aliases). They follows the common semantics. |
| Besides the common number comparison, there is some extra features:</p> <ul><li>Multiple operators are able to appear in one {} item like <code>{ dimension: 'Price', '>=': 20, '<': 30 }</code>, which means logical "and" (Price >= 20 and Price < 30).</li> <li>The data value can be "numeric string". Numeric string is a string that can be converted to number. Like ' 123 '. White spaces and line breaks will be auto trimmed in the conversion.</li> <li>If we need to compare "JS <code>Date</code> instance" or date string (like '2012-05-12'), we need to specify <code>parser: 'time'</code> manually, like <code>config: { dimension: 3, lt: '2012-05-12', parser: 'time' }</code>.</li> <li>Pure string comparison is supported but can only be used in <code>=</code>, <code>!=</code>. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> do not support pure string comparison (the "right value" of the four operators can not be a "string").</li> <li>The operator <code>reg</code> can be used to make regular expression test. Like using <code>{ dimension: 'Name', reg: /\s+Müller\s*$/ }</code> to select all data items that the "Name" dimension contains family name Müller.</li></ul> <p><strong>About logical relationship:</strong></p> <p>Sometimes we also need to express logical relationship ( <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">// Use operator "and".</span> |
| <span class="token comment">// Similarly, we can also use "or", "not" in the same place.</span> |
| <span class="token comment">// But "not" should be followed with a {...} rather than `[...]`.</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">// The condition is "Year" is 2011 and "Price" is greater</span> |
| <span class="token comment">// or equal to 20 but less than 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> can be nested like:</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>About parser:</strong></p> <p>Some "parser" can be specified when make value comparison. At present only supported:</p> <ul><li><code>parser: 'time'</code>: Parse the value to date time before comparing. The parser rule is the same as <code>echarts.time.parse</code>, where JS <code>Date</code> instance, timestamp number (in millisecond) and time string (like <code>'2012-05-12 03:11:22'</code>) are supported to be parse to timestamp number, while other value will be parsed to <code>NaN</code>.</li> <li><code>parser: 'trim'</code>: Trim the string before making comparison. For non-string, return the original value.</li> <li><code>parser: 'number'</code>: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to <code>NaN</code>. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like <code>'33%'</code>, <code>12px</code>), we should use <code>parser: 'number'</code> to convert them to number before making comparison.</li></ul> <p>This is an example to show the <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>Formally definition:</strong></p> <p>Finally, we give the formally definition of the filter transform config here:</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>Note that when using <a href="en/basics/import#shrinking-bundle-size">Minimal Bundle</a>, if you need to use this built-in transform, besides the <code>Dataset</code> component, it's required to import the <code>Transform</code> component.</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="sort-transform" tabindex="-1">Sort Transform</h2> <p>Another built-in transform is "sort".</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">// Sort by score.</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>Some extra features about "sort transform":</p> <ul><li>Order by multiple dimensions is supported. See examples below.</li> <li>The sort rule: |
| <ul><li>By default "numeric" (that is, number and numeric-string like <code>' 123 '</code>) are able to sorted by numeric order.</li> <li>Otherwise "non-numeric-string" are also able to be ordered among themselves. This might help to the case like grouping data items with the same tag, especially when multiple dimensions participated in the sort (See example below).</li> <li>When "numeric" is compared with "non-numeric-string", or either of them is compared with other types of value, they are not comparable. So we call the latter one as "incomparable" and treat it as "min value" or "max value" according to the prop <code>incomparable: 'min' | 'max'</code>. This feature usually helps to decide whether to put the empty values (like <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>''</code>, <code>'-'</code>) or other illegal values to the head or tail.</li></ul></li> <li><code>parser: 'time' | 'trim' | 'number'</code> can be used, the same as "filter transform". |
| <ul><li>If intending to sort time values (JS <code>Date</code> instance or time string like <code>'2012-03-12 11:13:54'</code>), <code>parser: 'time'</code> should be specified. Like <code>config: { dimension: 'date', order: 'desc', parser: 'time' }</code></li> <li>If intending to sort values with unit suffix (like <code>'33%'</code>, <code>'16px'</code>), need to use <code>parser: 'number'</code>.</li></ul></li></ul> <p>See an example of multiple order:</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">// Sort by the two dimensions.</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>Finally, we give the formally definition of the sort transform config here:</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>Note that when using <a href="en/basics/import#shrinking-bundle-size">Minimal Bundle</a>, if you need to use this built-in transform, besides the <code>Dataset</code> component, it's required to import the <code>Transform</code> component.</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="use-external-transforms" tabindex="-1">Use External Transforms</h2> <p>Besides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> as an example:</p> <p>This case show how to make a regression line via ecStat:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Register the external transform at first.</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">// Reference the registered external transform.</span> |
| <span class="token comment">// Note that external transform has a namespace (like 'ecStat:xxx'</span> |
| <span class="token comment">// has namespace 'ecStat').</span> |
| <span class="token comment">// built-in transform (like 'filter', 'sort') does not have a namespace.</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">// Parameters needed by the external transform.</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>Examples with echarts-stat:</p> <ul><li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1">Aggregate</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1">Bar histogram</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1">Scatter clustering</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1">Scatter linear regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1">Scatter exponential regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">Scatter logarithmic regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">Scatter polynomial regression</a></li></ul></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">Contributors</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/data-transform.md" title="Edit this Document" 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">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a><a href="https://github.com/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/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/shangchen0531" target="_blank" class="post-contributor"><img alt="shangchen0531" src="https://avatars.githubusercontent.com/shangchen0531?size=60" loading="lazy"> <span>shangchen0531</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(e,g,t,i,I,o,l,a,d,C,n,A,c,s,r,m,h,b,p,y,u,G,Z,B,w,W,J,M,X,R,f,F,L,z,Y,V,v,H,S,N,x,D,K,k,E,T,U,j,Q,O,q,P,_,$,ee,ge,te,ie){return{layout:"default",data:[{html:'<h1 id="data-transform" tabindex="-1">Data Transform</h1>\n<p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "transformation").</p>\n<p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ...\nWith the help of those transform methods, users can be implements the features like:</p>\n<ul>\n<li>Partition data into multiple series.</li>\n<li>Make some statistics and visualize the result.</li>\n<li>Adapt some visualization algorithms to data and display the result.</li>\n<li>Sort data.</li>\n<li>Remove or choose some kind of empty or special datums.</li>\n<li>...</li>\n</ul>\n<h2 id="get-started-to-data-transform" tabindex="-1">Get Started to Data Transform</h2>\n<p>In echarts, data transform is implemented based on the concept of <a href="~https://echarts.apache.org/option.html##dataset">dataset</a>. A <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can be configured in a dataset instance to indicate that this dataset is to be generated from this <code>transform</code>. For example:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAwYC4KICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0NlcmVhbCcsIDIzMSwgMTQsIDIwMTFdLAogICAgICAgIFsnVG9mdScsIDIzNSwgNSwgMjAxMV0sCiAgICAgICAgWydEdW1wbGluZycsIDM0MSwgMjUsIDIwMTFdLAogICAgICAgIFsnQmlzY3VpdCcsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnQ2VyZWFsJywgMjAxLCAxOSwgMjAxMl0sCiAgICAgICAgWydUb2Z1JywgMjU1LCA3LCAyMDEyXSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjQxLCAyNywgMjAxMl0sCiAgICAgICAgWydCaXNjdWl0JywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydDZXJlYWwnLCAxODEsIDIxLCAyMDEzXSwKICAgICAgICBbJ1RvZnUnLCAzOTUsIDQsIDIwMTNdLAogICAgICAgIFsnRHVtcGxpbmcnLCAyODEsIDMxLCAyMDEzXSwKICAgICAgICBbJ0Jpc2N1aXQnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnQ2VyZWFsJywgMjExLCAxNywgMjAxNF0sCiAgICAgICAgWydUb2Z1JywgMzQ1LCAzLCAyMDE0XSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjExLCAzNSwgMjAxNF0sCiAgICAgICAgWydCaXNjdWl0JywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICAgIC8vIGlkOiAnYScKICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAxYC4KICAgICAgLy8gQSBgdHJhbnNmb3JtYCBpcyBjb25maWd1cmVkIHRvIGluZGljYXRlIHRoYXQgdGhlCiAgICAgIC8vIGZpbmFsIGRhdGEgb2YgdGhpcyBkYXRhc2V0IGlzIHRyYW5zZm9ybWVkIHZpYSB0aGlzCiAgICAgIC8vIHRyYW5zZm9ybSBmdW5jdGlvbi4KICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1llYXInLCB2YWx1ZTogMjAxMSB9CiAgICAgIH0KICAgICAgLy8gVGhlcmUgY2FuIGJlIG9wdGlvbmFsIHByb3BlcnRpZXMgYGZyb21EYXRhc2V0SW5kZXhgIG9yIGBmcm9tRGF0YXNldElkYAogICAgICAvLyB0byBpbmRpY2F0ZSB0aGF0IHdoZXJlIGlzIHRoZSBpbnB1dCBkYXRhIG9mIHRoZSB0cmFuc2Zvcm0gZnJvbS4KICAgICAgLy8gRm9yIGV4YW1wbGUsIGBmcm9tRGF0YXNldEluZGV4OiAwYCBzcGVjaWZ5IHRoZSBpbnB1dCBkYXRhIGlzIGZyb20KICAgICAgLy8gdGhlIGRhdGFzZXQgb24gYGRhdGFzZXRJbmRleDogMGAsIG9yIGBmcm9tRGF0YXNldElkOiAnYSdgIHNwZWNpZnkgdGhlCiAgICAgIC8vIGlucHV0IGRhdGEgaXMgZnJvbSB0aGUgZGF0YXNldCBoYXZpbmcgYGlkOiAnYSdgLgogICAgICAvLyBbREVGQVVMVF9SVUxFXQogICAgICAvLyBJZiBib3RoIGBmcm9tRGF0YXNldEluZGV4YCBhbmQgYGZyb21EYXRhc2V0SWRgIGFyZSBvbWl0dGVkLAogICAgICAvLyBgZnJvbURhdGFzZXRJbmRleDogMGAgYXJlIHVzZWQgYnkgZGVmYXVsdC4KICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAyYC4KICAgICAgLy8gU2ltaWxhcmx5LCBpZiBuZWl0aGVyIGBmcm9tRGF0YXNldEluZGV4YCBub3IgYGZyb21EYXRhc2V0SWRgIGlzCiAgICAgIC8vIHNwZWNpZmllZCwgYGZyb21EYXRhc2V0SW5kZXg6IDBgIGlzIHVzZWQgYnkgZGVmYXVsdAogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyBUaGUgImZpbHRlciIgdHJhbnNmb3JtIGZpbHRlcnMgYW5kIGdldHMgZGF0YSBpdGVtcyBvbmx5IG1hdGNoCiAgICAgICAgLy8gdGhlIGdpdmVuIGNvbmRpdGlvbiBpbiBwcm9wZXJ0eSBgY29uZmlnYC4KICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICAvLyBUcmFuc2Zvcm1zIGhhcyBhIHByb3BlcnR5IGBjb25maWdgLiBJbiB0aGlzICJmaWx0ZXIiIHRyYW5zZm9ybSwKICAgICAgICAvLyB0aGUgYGNvbmZpZ2Agc3BlY2lmeSB0aGUgY29uZGl0aW9uIHRoYXQgZWFjaCByZXN1bHQgZGF0YSBpdGVtCiAgICAgICAgLy8gc2hvdWxkIGJlIHNhdGlzZmllZC4gSW4gdGhpcyBjYXNlLCB0aGlzIHRyYW5zZm9ybSBnZXQgYWxsIG9mCiAgICAgICAgLy8gdGhlIGRhdGEgaXRlbXMgdGhhdCB0aGUgdmFsdWUgb24gZGltZW5zaW9uICJZZWFyIiBlcXVhbHMgdG8gMjAxMi4KICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsIHZhbHVlOiAyMDEyIH0KICAgICAgfQogICAgfSwKICAgIHsKICAgICAgLy8gVGhpcyBkYXRhc2V0IGlzIG9uIGBkYXRhc2V0SW5kZXg6IDNgCiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgdmFsdWU6IDIwMTMgfQogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWycyNSUnLCAnNTAlJ10sCiAgICAgIC8vIEluIHRoaXMgY2FzZSwgZWFjaCAicGllIiBzZXJpZXMgcmVmZXJlbmNlIHRvIGEgZGF0YXNldCB0aGF0IGhhcwogICAgICAvLyB0aGUgcmVzdWx0IG9mIGl0cyAiZmlsdGVyIiB0cmFuc2Zvcm0uCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWyc1MCUnLCAnNTAlJ10sCiAgICAgIGRhdGFzZXRJbmRleDogMgogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWyc3NSUnLCAnNTAlJ10sCiAgICAgIGRhdGFzZXRJbmRleDogMwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>Let\'s summarize the key points of using data transform:</p>\n<ul>\n<li>Generate new data from existing declared data via the declaration of <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> in some blank dataset.</li>\n<li>Series references these datasets to show the result.</li>\n</ul>\n<h2 id="advanced-usage" tabindex="-1">Advanced Usage</h2>\n<h4 id="piped-transform" tabindex="-1">Piped Transform</h4>\n<p>There is a syntactic sugar that pipe transforms like:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXSAvLyBUaGUgb3JpZ2luYWwgZGF0YQogICAgfSwKICAgIHsKICAgICAgLy8gRGVjbGFyZSB0cmFuc2Zvcm1zIGluIGFuIGFycmF5IHRvIHBpcGUgbXVsdGlwbGUgdHJhbnNmb3JtcywKICAgICAgLy8gd2hpY2ggbWFrZXMgdGhlbSBleGVjdXRlIG9uZSBieSBvbmUgYW5kIHRha2UgdGhlIG91dHB1dCBvZgogICAgICAvLyB0aGUgcHJldmlvdXMgdHJhbnNmb3JtIGFzIHRoZSBpbnB1dCBvZiB0aGUgbmV4dCB0cmFuc2Zvcm0uCiAgICAgIHRyYW5zZm9ybTogWwogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCB2YWx1ZTogJ1RvZnUnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgb3JkZXI6ICdkZXNjJyB9CiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgLy8gRGlzcGxheSB0aGUgcmVzdWx0IG9mIHRoZSBwaXBlZCB0cmFuc2Zvcm0uCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).</p>\n</blockquote>\n<h4 id="output-multiple-data" tabindex="-1">Output Multiple Data</h4>\n<p>In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.</p>\n<p>For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity">example</a>.</p>\n<p>We use prop <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> to satisfy this requirement. For example:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgLy8gT3JpZ2luYWwgc291cmNlIGRhdGEuCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdib3hwbG90JwogICAgICB9CiAgICAgIC8vIEFmdGVyIHRoaXMgImJveHBsb3QgdHJhbnNmb3JtIiB0d28gcmVzdWx0IGRhdGEgZ2VuZXJhdGVkOgogICAgICAvLyByZXN1bHRbMF06IFRoZSBib3hwbG90IGRhdGEKICAgICAgLy8gcmVzdWx0WzFdOiBUaGUgb3V0bGllciBkYXRhCiAgICAgIC8vIEJ5IGRlZmF1bHQsIHdoZW4gc2VyaWVzIG9yIG90aGVyIGRhdGFzZXQgcmVmZXJlbmNlIHRoaXMgZGF0YXNldCwKICAgICAgLy8gb25seSByZXN1bHRbMF0gY2FuIGJlIHZpc2l0ZWQuCiAgICAgIC8vIElmIHdlIG5lZWQgdG8gdmlzaXQgcmVzdWx0WzFdLCB3ZSBoYXZlIHRvIHVzZSBhbm90aGVyIGRhdGFzZXQKICAgICAgLy8gYXMgZm9sbG93czoKICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZXh0cmEgZGF0YXNldCByZWZlcmVuY2VzIHRoZSBkYXRhc2V0IGFib3ZlLCBhbmQgcmV0cmlldmVzCiAgICAgIC8vIHRoZSByZXN1bHRbMV0gYXMgaXRzIG93biBkYXRhLiBUaHVzIHNlcmllcyBvciBvdGhlciBkYXRhc2V0IGNhbgogICAgICAvLyByZWZlcmVuY2UgdGhpcyBkYXRhc2V0IHRvIGdldCB0aGUgZGF0YSBmcm9tIHJlc3VsdFsxXS4KICAgICAgZnJvbURhdGFzZXRJbmRleDogMSwKICAgICAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ2JveHBsb3QnLAogICAgICB0eXBlOiAnYm94cGxvdCcsCiAgICAgIC8vIFJlZmVyZW5jZSB0aGUgZGF0YSBmcm9tIHJlc3VsdFswXS4KICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9LAogICAgewogICAgICBuYW1lOiAnb3V0bGllcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgLy8gUmVmZXJlbmNlIHRoZSBkYXRhIGZyb20gcmVzdWx0WzFdLgogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p>What more, <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> and <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by <code>fromTransformResult</code>. For example:</p>\n<md-code-block lang="js" code="\'ewogIGZyb21EYXRhc2V0SW5kZXg6IDEsCiAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMSwKICB0cmFuc2Zvcm06IHsKICAgIHR5cGU6ICdzb3J0JywKICAgIGNvbmZpZzogeyBkaW1lbnNpb246IDIsIG9yZGVyOiAnZGVzYycgfQogIH0KfQ\'" line-highlights="\'\'" />\n<h4 id="debug-in-develop-environment" tabindex="-1">Debug in Develop Environment</h4>\n<p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code>transform.print</code> might help in such case. (<code>transform.print</code> is only available in dev environment).</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7fSwKICAgICAgICAvLyBUaGUgcmVzdWx0IG9mIHRoaXMgdHJhbnNmb3JtIHdpbGwgYmUgcHJpbnRlZAogICAgICAgIC8vIGluIGRldiB0b29sIHZpYSBgY29uc29sZS5sb2dgLgogICAgICAgIHByaW50OiB0cnVlCiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h2 id="filter-transform" tabindex="-1">Filter Transform</h2>\n<p>Transform type "filter" is a built-in transform that provide data filter according to specified conditions. The basic option is like:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0xhdHRlJywgMjMxLCAxNCwgMjAxMV0sCiAgICAgICAgWydUb2Z1JywgMjM1LCA1LCAyMDExXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzQxLCAyNSwgMjAxMV0sCiAgICAgICAgWydQb3JyaWRnZScsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnTGF0dGUnLCAyMDEsIDE5LCAyMDEyXSwKICAgICAgICBbJ1RvZnUnLCAyNTUsIDcsIDIwMTJdLAogICAgICAgIFsnTWlsayBUZWUnLCAyNDEsIDI3LCAyMDEyXSwKICAgICAgICBbJ1BvcnJpZGdlJywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydMYXR0ZScsIDE4MSwgMjEsIDIwMTNdLAogICAgICAgIFsnVG9mdScsIDM5NSwgNCwgMjAxM10sCiAgICAgICAgWydNaWxrIFRlZScsIDI4MSwgMzEsIDIwMTNdLAogICAgICAgIFsnUG9ycmlkZ2UnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnTGF0dGUnLCAyMTEsIDE3LCAyMDE0XSwKICAgICAgICBbJ1RvZnUnLCAzNDUsIDMsIDIwMTRdLAogICAgICAgIFsnTWlsayBUZWUnLCAyMTEsIDM1LCAyMDE0XSwKICAgICAgICBbJ1BvcnJpZGdlJywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9CiAgICAgICAgLy8gVGhlIGNvbmZpZyBpcyB0aGUgImNvbmRpdGlvbiIgb2YgdGhpcyBmaWx0ZXIuCiAgICAgICAgLy8gVGhpcyB0cmFuc2Zvcm0gdHJhdmVyc2UgdGhlIHNvdXJjZSBkYXRhIGFuZAogICAgICAgIC8vIGFuZCByZXRyaWV2ZSBhbGwgdGhlIGl0ZW1zIHRoYXQgdGhlICJZZWFyIgogICAgICAgIC8vIGlzIGAyMDExYC4KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAncGllJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KfTs\'" v-bind="{}" />\n<p>This is another example of filter transform:</p>\n<p><md-example src="data-transform-filter"></md-example></p>\n<p><strong>About dimension:</strong></p>\n<p>The <code>config.dimension</code> can be:</p>\n<ul>\n<li>Dimension name declared in dataset, like <code>config: { dimension: \'Year\', \'=\': 2011 }</code>. Dimension name declaration is not mandatory.</li>\n<li>Dimension index (start from 0), like <code>config: { dimension: 3, \'=\': 2011 }</code>.</li>\n</ul>\n<p><strong>About relational operator:</strong></p>\n<p>The relational operator can be:\n<code>></code>(<code>gt</code>), <code>>=</code>(<code>gte</code>), <code><</code>(<code>lt</code>), <code><=</code>(<code>lte</code>), <code>=</code>(<code>eq</code>), <code>!=</code>(<code>ne</code>, <code><></code>), <code>reg</code>. (The name in the parentheses are aliases). They follows the common semantics.\nBesides the common number comparison, there is some extra features:</p>\n<ul>\n<li>Multiple operators are able to appear in one {} item like <code>{ dimension: \'Price\', \'>=\': 20, \'<\': 30 }</code>, which means logical "and" (Price >= 20 and Price < 30).</li>\n<li>The data value can be "numeric string". Numeric string is a string that can be converted to number. Like \' 123 \'. White spaces and line breaks will be auto trimmed in the conversion.</li>\n<li>If we need to compare "JS <code>Date</code> instance" or date string (like \'2012-05-12\'), we need to specify <code>parser: \'time\'</code> manually, like <code>config: { dimension: 3, lt: \'2012-05-12\', parser: \'time\' }</code>.</li>\n<li>Pure string comparison is supported but can only be used in <code>=</code>, <code>!=</code>. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> do not support pure string comparison (the "right value" of the four operators can not be a "string").</li>\n<li>The operator <code>reg</code> can be used to make regular expression test. Like using <code>{ dimension: \'Name\', reg: /\\s+Müller\\s*$/ }</code> to select all data items that the "Name" dimension contains family name Müller.</li>\n</ul>\n<p><strong>About logical relationship:</strong></p>\n<p>Sometimes we also need to express logical relationship ( <code>and</code> / <code>or</code> / <code>not</code> ):</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8gLi4uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogewogICAgICAgICAgLy8gVXNlIG9wZXJhdG9yICJhbmQiLgogICAgICAgICAgLy8gU2ltaWxhcmx5LCB3ZSBjYW4gYWxzbyB1c2UgIm9yIiwgIm5vdCIgaW4gdGhlIHNhbWUgcGxhY2UuCiAgICAgICAgICAvLyBCdXQgIm5vdCIgc2hvdWxkIGJlIGZvbGxvd2VkIHdpdGggYSB7Li4ufSByYXRoZXIgdGhhbiBgWy4uLl1gLgogICAgICAgICAgYW5kOiBbCiAgICAgICAgICAgIHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9LAogICAgICAgICAgICB7IGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMjAsICc8JzogMzAgfQogICAgICAgICAgXQogICAgICAgIH0KICAgICAgICAvLyBUaGUgY29uZGl0aW9uIGlzICJZZWFyIiBpcyAyMDExIGFuZCAiUHJpY2UiIGlzIGdyZWF0ZXIKICAgICAgICAvLyBvciBlcXVhbCB0byAyMCBidXQgbGVzcyB0aGFuIDMwLgogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgZGF0YXNldEluZGV4OiAxCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p><code>and</code>/<code>or</code>/<code>not</code> can be nested like:</p>\n<md-code-block lang="js" code="\'dHJhbnNmb3JtOiB7CiAgdHlwZTogJ2ZpbHRlcicsCiAgY29uZmlnOiB7CiAgICBvcjogW3sKICAgICAgYW5kOiBbewogICAgICAgIGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMTAsICc8JzogMjAKICAgICAgfSwgewogICAgICAgIGRpbWVuc2lvbjogJ1NhbGVzJywgJzwnOiAxMDAKICAgICAgfSwgewogICAgICAgIG5vdDogeyBkaW1lbnNpb246ICdQcm9kdWN0JywgJz0nOiAnVG9mdScgfQogICAgICB9XQogICAgfSwgewogICAgICBhbmQ6IFt7CiAgICAgICAgZGltZW5zaW9uOiAnUHJpY2UnLCAnPj0nOiAxMCwgJzwnOiAyMAogICAgICB9LCB7CiAgICAgICAgZGltZW5zaW9uOiAnU2FsZXMnLCAnPCc6IDEwMAogICAgICB9LCB7CiAgICAgICAgbm90OiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCAnPSc6ICdDYWtlJyB9CiAgICAgIH1dCiAgICB9XQogIH0KfQ\'" line-highlights="\'\'" />\n<p><strong>About parser:</strong></p>\n<p>Some "parser" can be specified when make value comparison. At present only supported:</p>\n<ul>\n<li><code>parser: \'time\'</code>: Parse the value to date time before comparing. The parser rule is the same as <code>echarts.time.parse</code>, where JS <code>Date</code> instance, timestamp number (in millisecond) and time string (like <code>\'2012-05-12 03:11:22\'</code>) are supported to be parse to timestamp number, while other value will be parsed to <code>NaN</code>.</li>\n<li><code>parser: \'trim\'</code>: Trim the string before making comparison. For non-string, return the original value.</li>\n<li><code>parser: \'number\'</code>: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to <code>NaN</code>. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like <code>\'33%\'</code>, <code>12px</code>), we should use <code>parser: \'number\'</code> to convert them to number before making comparison.</li>\n</ul>\n<p>This is an example to show the <code>parser: \'time\'</code>:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ0RhdGUnXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzExLCAyMSwgJzIwMTItMDUtMTInXSwKICAgICAgICBbJ0Nha2UnLCAxMzUsIDI4LCAnMjAxMi0wNS0yMiddLAogICAgICAgIFsnTGF0dGUnLCAyNjIsIDM2LCAnMjAxMi0wNi0wMiddLAogICAgICAgIFsnTWlsayBUZWUnLCAzNTksIDIxLCAnMjAxMi0wNi0yMiddLAogICAgICAgIFsnQ2FrZScsIDEyMSwgMjgsICcyMDEyLTA3LTAyJ10sCiAgICAgICAgWydMYXR0ZScsIDI3MSwgMzYsICcyMDEyLTA2LTIyJ10KICAgICAgICAvLyAuLi4KICAgICAgXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICBkaW1lbnNpb246ICdEYXRlJywKICAgICAgICAgICc-PSc6ICcyMDEyLTA1JywKICAgICAgICAgICc8JzogJzIwMTItMDYnLAogICAgICAgICAgcGFyc2VyOiAndGltZScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><strong>Formally definition:</strong></p>\n<p>Finally, we give the formally definition of the filter transform config here:</p>\n<md-code-block lang="ts" code="\'dHlwZSBGaWx0ZXJUcmFuc2Zvcm0gPSB7CiAgdHlwZTogJ2ZpbHRlcic7CiAgY29uZmlnOiBDb25kaXRpb25hbEV4cHJlc3Npb25PcHRpb247Cn07CnR5cGUgQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uID0KICB8IHRydWUKICB8IGZhbHNlCiAgfCBSZWxhdGlvbmFsRXhwcmVzc2lvbk9wdGlvbgogIHwgTG9naWNhbEV4cHJlc3Npb25PcHRpb247CnR5cGUgUmVsYXRpb25hbEV4cHJlc3Npb25PcHRpb24gPSB7CiAgZGltZW5zaW9uOiBEaW1lbnNpb25OYW1lIHwgRGltZW5zaW9uSW5kZXg7CiAgcGFyc2VyPzogJ3RpbWUnIHwgJ3RyaW0nIHwgJ251bWJlcic7CiAgbHQ_OiBEYXRhVmFsdWU7IC8vIGxlc3MgdGhhbgogIGx0ZT86IERhdGFWYWx1ZTsgLy8gbGVzcyB0aGFuIG9yIGVxdWFsCiAgZ3Q_OiBEYXRhVmFsdWU7IC8vIGdyZWF0ZXIgdGhhbgogIGd0ZT86IERhdGFWYWx1ZTsgLy8gZ3JlYXRlciB0aGFuIG9yIGVxdWFsCiAgZXE_OiBEYXRhVmFsdWU7IC8vIGVxdWFsCiAgbmU_OiBEYXRhVmFsdWU7IC8vIG5vdCBlcXVhbAogICc8Jz86IERhdGFWYWx1ZTsgLy8gbHQKICAnPD0nPzogRGF0YVZhbHVlOyAvLyBsdGUKICAnPic_OiBEYXRhVmFsdWU7IC8vIGd0CiAgJz49Jz86IERhdGFWYWx1ZTsgLy8gZ3RlCiAgJz0nPzogRGF0YVZhbHVlOyAvLyBlcQogICchPSc_OiBEYXRhVmFsdWU7IC8vIG5lCiAgJzw-Jz86IERhdGFWYWx1ZTsgLy8gbmUgKFNRTCBzdHlsZSkKICByZWc_OiBSZWdFeHAgfCBzdHJpbmc7IC8vIFJlZ0V4cAp9Owp0eXBlIExvZ2ljYWxFeHByZXNzaW9uT3B0aW9uID0gewogIGFuZD86IENvbmRpdGlvbmFsRXhwcmVzc2lvbk9wdGlvbltdOwogIG9yPzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uW107CiAgbm90PzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uOwp9Owp0eXBlIERhdGFWYWx1ZSA9IHN0cmluZyB8IG51bWJlciB8IERhdGU7CnR5cGUgRGltZW5zaW9uTmFtZSA9IHN0cmluZzsKdHlwZSBEaW1lbnNpb25JbmRleCA9IG51bWJlcjs\'" line-highlights="\'\'" />\n<blockquote>\n<p>Note that when using <a href="en/basics/import#shrinking-bundle-size">Minimal Bundle</a>, if you need to use this built-in transform, besides the <code>Dataset</code> component, it\'s required to import the <code>Transform</code> component.</p>\n</blockquote>\n<md-code-block lang="ts" code="\'aW1wb3J0IHsKICBEYXRhc2V0Q29tcG9uZW50LAogIFRyYW5zZm9ybUNvbXBvbmVudAp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CgplY2hhcnRzLnVzZShbCiAgRGF0YXNldENvbXBvbmVudCwKICBUcmFuc2Zvcm1Db21wb25lbnQKXSk7\'" line-highlights="\'\'" />\n<h2 id="sort-transform" tabindex="-1">Sort Transform</h2>\n<p>Another built-in transform is "sort".</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAvLyBTb3J0IGJ5IHNjb3JlLgogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnYXNjJyB9CiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p><md-example src="data-transform-sort-bar"></md-example></p>\n<p>Some extra features about "sort transform":</p>\n<ul>\n<li>Order by multiple dimensions is supported. See examples below.</li>\n<li>The sort rule:\n<ul>\n<li>By default "numeric" (that is, number and numeric-string like <code>\' 123 \'</code>) are able to sorted by numeric order.</li>\n<li>Otherwise "non-numeric-string" are also able to be ordered among themselves. This might help to the case like grouping data items with the same tag, especially when multiple dimensions participated in the sort (See example below).</li>\n<li>When "numeric" is compared with "non-numeric-string", or either of them is compared with other types of value, they are not comparable. So we call the latter one as "incomparable" and treat it as "min value" or "max value" according to the prop <code>incomparable: \'min\' | \'max\'</code>. This feature usually helps to decide whether to put the empty values (like <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>\'\'</code>, <code>\'-\'</code>) or other illegal values to the head or tail.</li>\n</ul>\n</li>\n<li><code>parser: \'time\' | \'trim\' | \'number\'</code> can be used, the same as "filter transform".\n<ul>\n<li>If intending to sort time values (JS <code>Date</code> instance or time string like <code>\'2012-03-12 11:13:54\'</code>), <code>parser: \'time\'</code> should be specified. Like <code>config: { dimension: \'date\', order: \'desc\', parser: \'time\' }</code></li>\n<li>If intending to sort values with unit suffix (like <code>\'33%\'</code>, <code>\'16px\'</code>), need to use <code>parser: \'number\'</code>.</li>\n</ul>\n</li>\n</ul>\n<p>See an example of multiple order:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICBjb25maWc6IFsKICAgICAgICAgIC8vIFNvcnQgYnkgdGhlIHR3byBkaW1lbnNpb25zLgogICAgICAgICAgeyBkaW1lbnNpb246ICdwcm9mZXNzaW9uJywgb3JkZXI6ICdkZXNjJyB9LAogICAgICAgICAgeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnZGVzYycgfQogICAgICAgIF0KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnYmFyJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/data-transform-multiple-sort-bar"></md-example></p>\n<p>Finally, we give the formally definition of the sort transform config here:</p>\n<md-code-block lang="ts" code="\'dHlwZSBTb3J0VHJhbnNmb3JtID0gewogIHR5cGU6ICdzb3J0JzsKICBjb25maWc6IE9yZGVyRXhwcmVzc2lvbiB8IE9yZGVyRXhwcmVzc2lvbltdOwp9Owp0eXBlIE9yZGVyRXhwcmVzc2lvbiA9IHsKICBkaW1lbnNpb246IERpbWVuc2lvbk5hbWUgfCBEaW1lbnNpb25JbmRleDsKICBvcmRlcjogJ2FzYycgfCAnZGVzYyc7CiAgaW5jb21wYXJhYmxlPzogJ21pbicgfCAnbWF4JzsKICBwYXJzZXI_OiAndGltZScgfCAndHJpbScgfCAnbnVtYmVyJzsKfTsKdHlwZSBEaW1lbnNpb25OYW1lID0gc3RyaW5nOwp0eXBlIERpbWVuc2lvbkluZGV4ID0gbnVtYmVyOw\'" line-highlights="\'\'" />\n<blockquote>\n<p>Note that when using <a href="en/basics/import#shrinking-bundle-size">Minimal Bundle</a>, if you need to use this built-in transform, besides the <code>Dataset</code> component, it\'s required to import the <code>Transform</code> component.</p>\n</blockquote>\n<md-code-block lang="ts" code="\'aW1wb3J0IHsKICBEYXRhc2V0Q29tcG9uZW50LAogIFRyYW5zZm9ybUNvbXBvbmVudAp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CgplY2hhcnRzLnVzZShbCiAgRGF0YXNldENvbXBvbmVudCwKICBUcmFuc2Zvcm1Db21wb25lbnQKXSk7\'" line-highlights="\'\'" />\n<h2 id="use-external-transforms" tabindex="-1">Use External Transforms</h2>\n<p>Besides built-in transforms (like \'filter\', \'sort\'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> as an example:</p>\n<p>This case show how to make a regression line via ecStat:</p>\n<md-code-block lang="js" code="\'Ly8gUmVnaXN0ZXIgdGhlIGV4dGVybmFsIHRyYW5zZm9ybSBhdCBmaXJzdC4KZWNoYXJ0cy5yZWdpc3RlclRyYW5zZm9ybShlY1N0YXRUcmFuc2Zvcm0oZWNTdGF0KS5yZWdyZXNzaW9uKTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiByYXdEYXRhCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyBSZWZlcmVuY2UgdGhlIHJlZ2lzdGVyZWQgZXh0ZXJuYWwgdHJhbnNmb3JtLgogICAgICAgIC8vIE5vdGUgdGhhdCBleHRlcm5hbCB0cmFuc2Zvcm0gaGFzIGEgbmFtZXNwYWNlIChsaWtlICdlY1N0YXQ6eHh4JwogICAgICAgIC8vIGhhcyBuYW1lc3BhY2UgJ2VjU3RhdCcpLgogICAgICAgIC8vIGJ1aWx0LWluIHRyYW5zZm9ybSAobGlrZSAnZmlsdGVyJywgJ3NvcnQnKSBkb2VzIG5vdCBoYXZlIGEgbmFtZXNwYWNlLgogICAgICAgIHR5cGU6ICdlY1N0YXQ6cmVncmVzc2lvbicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICAvLyBQYXJhbWV0ZXJzIG5lZWRlZCBieSB0aGUgZXh0ZXJuYWwgdHJhbnNmb3JtLgogICAgICAgICAgbWV0aG9kOiAnZXhwb25lbnRpYWwnCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogeyB0eXBlOiAnY2F0ZWdvcnknIH0sCiAgeUF4aXM6IHt9LAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnc2NhdHRlcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YXNldEluZGV4OiAwCiAgICB9LAogICAgewogICAgICBuYW1lOiAncmVncmVzc2lvbicsCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3ltYm9sOiAnbm9uZScsCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>Examples with echarts-stat:</p>\n<ul>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1">Aggregate</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1">Bar histogram</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1">Scatter clustering</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1">Scatter linear regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1">Scatter exponential regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">Scatter logarithmic regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">Scatter polynomial regression</a></li>\n</ul>\n',postPath:"en/concepts/data-transform",title:"Data Transform - Concepts"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:I,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:a,draft:e},{title:"寻求帮助",dir:d},{title:"版本特性",dir:C,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"v4 升级 v5 指南",dir:A},{title:5.2,dir:c},{title:5.3,dir:s},{title:5.4,dir:r}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:h},{title:"配置项",dir:b,draft:e},{title:"系列",dir:p,draft:e},{title:"样式",dir:y},{title:"数据集",dir:u},{title:"数据转换",dir:G},{title:"坐标系",dir:Z,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:t},{title:"图例",dir:w},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:M,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:f},{title:"极坐标系柱状图",dir:F,draft:e},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:V},{title:"区域面积图",dir:v},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:S}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:x},{title:"南丁格尔图（玫瑰图）",dir:D}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:k}]}]},{title:E,dir:g,draft:e},{title:"跨平台方案",dir:T,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:j,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"动画",dir:O,children:[{title:"数据过渡动画",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ee,children:[{title:E,dir:g,draft:e},{title:ge,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:I,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:l},{title:"Resources",dir:a,draft:e},{title:"Get Help",dir:d},{title:"What's New",dir:C,children:[{title:"ECharts 5 Features",dir:n},{title:"Migration from v4 to v5",dir:A},{title:5.2,dir:c},{title:5.3,dir:s},{title:5.4,dir:r}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:h},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:p,draft:e},{title:"Style",dir:y},{title:"Dataset",dir:u},{title:"Data Transform",dir:G},{title:"Coordinate",dir:Z,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:t},{title:"Legend",dir:w},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:J,children:[{title:"Common Charts",dir:M,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:f},{title:"Bar Polar",dir:F,draft:e},{title:"Waterfall",dir:L}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:V},{title:"Area Chart",dir:v},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:S}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:x},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:k}]}]},{title:"Mobile",dir:g,draft:e},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:j,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Animation",dir:O,children:[{title:"Data Transition",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:ee,children:[{title:"Mobile Optimization",dir:g,draft:e},{title:ge,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/concepts/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> |
