| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css"> |
| <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/b6d3b58.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/f5e7518d240a121a2e4a.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3279306.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/4c789e610fc01b03106d.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/c3bcbe3.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/25eb9ce4c1818917d228.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/11b97ca97d591d9fd371.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5e2cbf163a319fa7cf5b.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/3279306.css"><link rel="stylesheet" href="/handbook/_nuxt/css/c3bcbe3.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css"><link rel="preload" href="/handbook/_nuxt/static/1627882506/en/concepts/dataset/state.js" as="script"><link rel="preload" href="/handbook/_nuxt/static/1627882506/en/concepts/dataset/payload.js" as="script"><link rel="preload" href="/handbook/_nuxt/static/1627882506/manifest.js" as="script"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><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> <!----></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> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></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> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</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> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></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> <!----></li></ul></li></ul></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"><h1 id="dataset"><a href="#dataset" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Dataset</h1> |
| <p><code>dataset</code> is a component dedicated to manage data. Although you can set the data in <code>series.data</code> for every series, we recommend you use the <code>dataset</code> to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p> |
| <h2 id="define-data-under-series"><a href="#define-data-under-series" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Define <code>data</code> under <code>series</code></h2> |
| <p>If data is defined under <code>series</code>, for example:</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <p>Define <code>data</code> under <code>series</code> is suitable for customization for some special data structures such as "tree", "graph" and large data. |
| However, it is not conducive to the data sharing for multiple series as well as mapping arrangement of chart types and series based on the original data. The other disadvantage is that programmers always need to divide the data in separate series (and categories) first.</p> |
| <h2 id="define-data-in-dataset"><a href="#define-data-in-dataset" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Define <code>data</code> in <code>dataset</code></h2> |
| <p>Here are the advantages if you define <code>data</code> in <code>dataset</code>:</p> |
| <ul> |
| <li>Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</li> |
| <li>Divide data from other configurations. The data often change but others not. It is |
| Easy to manage separately.</li> |
| <li>Data can be reused by several series or component, you don't need to create copies of a large amount of data for every series.</li> |
| <li>Support more common data format, such as a 2D array, array of classes, etc., to avoid users from converting for data format to a certain extent.</li> |
| </ul> |
| <p>Here is a simple <code>dataset</code> example:</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <p>Or try to use the "array of classes" format:</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <h2 id="map-from-data-to-chart"><a href="#map-from-data-to-chart" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map from Data to Chart</h2> |
| <p>The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</p> |
| <p>In short, you can set these configs of mapping:</p> |
| <ul> |
| <li>Specify 'column' or 'row' of <code>dataset</code> to map the <code>series</code>. You can use <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">series.seriesLayoutBy</a> to configure it. The default is to map according to the column.</li> |
| <li>Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to <code>axis</code>, <code>tooltip</code>, <code>label</code> and <code>visualMap</code>. To configure the mapping, please use <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> and <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a>. The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in <code>dataset.source</code>; three-column chart mapping with each row in <code>dataset.source</code> one by one.</li> |
| </ul> |
| <p>The details of the configuration are shown below:</p> |
| <h2 id="map-row-or-column-of-dataset-to-series"><a href="#map-row-or-column-of-dataset-to-series" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map Row or Column of <code>dataset</code> to <code>series</code></h2> |
| <p>After having the dataset, you can configure flexibly: how the data map to the axis and graph series.</p> |
| <p>You can use <code>seriesLayoutBy</code> to change the understanding of row and column of the chart. <code>seriesLayoutBy</code> can be:</p> |
| <ul> |
| <li>'column': Default, the series are placed above the column of <code>dataset</code>.</li> |
| <li>'row': The series is placed above the row of <code>dataset</code>.</li> |
| </ul> |
| <p>Check this case:</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <p>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by" rel="nofollow noopener noreferrer" target="_blank">this case</a>.</p> |
| <h2 id="dimension"><a href="#dimension" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Dimension</h2> |
| <p>Most of the data described in commonly used charts is a "two-dimensional table" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a "dimension" and each row was called "item", vice versa.</p> |
| <p>The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, <code>'score'</code>, <code>'amount'</code>, <code>'product'</code> are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in <code>dataset.source</code>. You can also use <code>dataset.sourceHeader: true</code> to declare that the first column (row) represents the dimension name.</p> |
| <p>Try to use single <code>dataset.dimensions</code> or some <code>series.dimensions</code> to define the dimensions, therefore you can specify the name and type together.</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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> |
| <p>In most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.</p> |
| <p>Dimension type can be the following values:</p> |
| <ul> |
| <li><code>'number'</code>: Default, normal data.</li> |
| <li><code>'ordinal'</code>: String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.</li> |
| <li><code>'time'</code>: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as <code>'time'</code>. For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'<code>. If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) =</code>'time'<code>), the dimension type will also be</code>'time'`. See <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">data</a> for more time type support.</li> |
| <li><code>'float'</code>: Use <code>TypedArray</code> to optimize the performance in <code>'float'</code> dimension.</li> |
| <li><code>'int'</code>: Use <code>TypedArray</code> to optimize the performance in <code>'int'</code> dimension.</li> |
| </ul> |
| <h2 id="map-from-data-to-charts-seriesencode"><a href="#map-from-data-to-charts-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map from Data to Charts (series.encode)</h2> |
| <p>After understand the concept of dimension, you can use <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> to make a mapping:</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <p>The basic structure of <code>series.encode</code> declaration:</p> |
| <ul> |
| <li>To the left of the colon: Specific name of axis or label.</li> |
| <li>To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).</li> |
| </ul> |
| <p>Generally, the following info is not necessary to be defined. Fill in as needed.</p> |
| <p>Attribute suggested by <code>series.encode</code></p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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> |
| <p>This is a richer <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1" rel="nofollow noopener noreferrer" target="_blank">example</a> of <code>series.encode</code>.</p> |
| <h2 id="default-seriesencode"><a href="#default-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Default series.encode</h2> |
| <p>It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if <code>series.encode</code> is not specified. The default rule is:</p> |
| <ul> |
| <li>In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.</li> |
| <li>Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).</li> |
| </ul> |
| <p>While the default rule cannot fulfill the requirements, you can configure <code>encode</code> by yourself, which is not complicate. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-default" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p> |
| <h2 id="some-normal-settings-of-seriesencode"><a href="#some-normal-settings-of-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Some Normal Settings of series.encode</h2> |
| <p>Q: How to set the 3rd column as x-axis, 5th column as y-axis?</p> |
| <p>A:</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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> |
| <p>Q: How to set the 3rd row as x-axis, 5th row as y-axis?</p> |
| <p>A:</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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> |
| <p>Q: How to set the 2nd column as a label?</p> |
| <p>A: |
| We now support to trace value from specific dimension for <a href="https://echarts.apache.org/option.html##series.label.formatter" rel="nofollow noopener noreferrer" target="_blank">label.formatter</a>:</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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> |
| <p>Q: How to show the 2nd and 3rd column in the tooltip?</p> |
| <p>A:</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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> |
| <p>Q: How to define the dimension name if is not included in the dataset?</p> |
| <p>A:</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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> |
| <p>Q: How to map the 3rd column to the size of the scatter chart?</p> |
| <p>A:</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <p>Q: I specified a mapping in encode, why it is not worked?</p> |
| <p>A: Check your spelling, such as misspell the dimension name <code>'Life Expectancy'</code> to <code>'Life Expectency'</code> in encode.</p> |
| <h2 id="visual-channel-mapping"><a href="#visual-channel-mapping" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Visual Channel Mapping</h2> |
| <p>We can map visual channel by using <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a>. Check details in the <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> document. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p> |
| <h2 id="formats-of-charts"><a href="#formats-of-charts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Formats of Charts</h2> |
| <p>In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to <code>dataset.source</code> and avoid some steps of data processing.</p> |
| <blockquote> |
| <p>You can switch .csv file to JSON using tools like <a href="https://github.com/d3/d3-dsv" rel="nofollow noopener noreferrer" target="_blank">dsv</a> or <a href="https://github.com/mholt/PapaParse" rel="nofollow noopener noreferrer" target="_blank">PapaParse</a>.</p> |
| </blockquote> |
| <p>As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.</p> |
| <p>Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">seriesLayoutBy</a> in this format right now.</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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> |
| <h2 id="how-to-reference-several-datasets"><a href="#how-to-reference-several-datasets" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How to Reference Several Datasets</h2> |
| <p>ECharts support to define several datasets at the same moment. Series can assign the one to reference by <a href="https://echarts.apache.org/option.html##series.datasetIndex" rel="nofollow noopener noreferrer" target="_blank">series.datasetIndex</a>. For example:</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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> |
| <h2 id="seriesdata-in-echarts-3"><a href="#seriesdata-in-echarts-3" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>series.data in ECharts 3</h2> |
| <p>ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>, then use <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> but not <code>dataset</code>.</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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> |
| <p>In fact, <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> is an important setting method which will always exist. Some special non-table format chart like <a href="https://echarts.apache.org/option.html##series-treemap" rel="nofollow noopener noreferrer" target="_blank">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph" rel="nofollow noopener noreferrer" target="_blank">graph</a> and <a href="https://echarts.apache.org/option.html##series-lines" rel="nofollow noopener noreferrer" target="_blank">lines</a> still cannot be edit in dataset, you still need to use <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>. In another way, for render huge amount of data (over a million), you need to use <a href="https://echarts.apache.org/api.html#echartsInstance.appendData" rel="nofollow noopener noreferrer" target="_blank">appendData</a> which is not supported by <code>dataset</code>.</p> |
| <h2 id="others"><a href="#others" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Others</h2> |
| <p>The following charts now support dataset: |
| <code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>. |
| ECharts will support more charts in the future.</p> |
| <p>In the end, here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-link" rel="nofollow noopener noreferrer" target="_blank">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/concepts/dataset#define-data-under-series">Define data under series</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#define-data-in-dataset">Define data in dataset</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#map-from-data-to-chart">Map from Data to Chart</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#map-row-or-column-of-dataset-to-series">Map Row or Column of dataset to series</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#dimension">Dimension</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#map-from-data-to-charts-seriesencode">Map from Data to Charts (series.encode)</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#default-seriesencode">Default series.encode</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#some-normal-settings-of-seriesencode">Some Normal Settings of series.encode</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#visual-channel-mapping">Visual Channel Mapping</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#formats-of-charts">Formats of Charts</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#how-to-reference-several-datasets">How to Reference Several Datasets</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#seriesdata-in-echarts-3">series.data in ECharts 3</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#others">Others</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/dataset.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script defer src="/handbook/_nuxt/static/1627882506/en/concepts/dataset/state.js"></script><script src="/handbook/_nuxt/b6d3b58.js" defer></script><script src="/handbook/_nuxt/js/11b97ca97d591d9fd371.js" defer></script><script src="/handbook/_nuxt/js/5e2cbf163a319fa7cf5b.js" defer></script><script src="/handbook/_nuxt/js/f5e7518d240a121a2e4a.js" defer></script><script src="/handbook/_nuxt/js/4c789e610fc01b03106d.js" defer></script><script src="/handbook/_nuxt/js/25eb9ce4c1818917d228.js" defer></script> |
| <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| </body> |
| </html> |
