<!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://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
    <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content=""><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://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/5870c6f.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/f74f8c0f406ea2522d04.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8b5c6d8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e96421e0f27cc5a35348.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/35be9a3.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/d6226697ecb43e03cd0d.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/5da5a8e.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/d63042719a059a581645.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/a9c5fa4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/4f3ab71f990e271ccbe4.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8b5c6d8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/35be9a3.css"><link rel="stylesheet" href="/handbook/_nuxt/css/5da5a8e.css"><link rel="stylesheet" href="/handbook/_nuxt/css/a9c5fa4.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<span class="new">new</span></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></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" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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" class="nav-link"><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><!----></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="dataset" tabindex="-1">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" tabindex="-1">Define <code>data</code> under <code>series</code></h2> <p>If data is defined under <code>series</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">option = {
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'2015'</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">89.3</span><span class="token punctuation">,</span> <span class="token number">92.1</span><span class="token punctuation">,</span> <span class="token number">94.4</span><span class="token punctuation">,</span> <span class="token number">85.4</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'2016'</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">95.8</span><span class="token punctuation">,</span> <span class="token number">89.4</span><span class="token punctuation">,</span> <span class="token number">91.2</span><span class="token punctuation">,</span> <span class="token number">76.9</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'2017'</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">97.7</span><span class="token punctuation">,</span> <span class="token number">83.1</span><span class="token punctuation">,</span> <span class="token number">92.5</span><span class="token punctuation">,</span> <span class="token number">78.1</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><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>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" tabindex="-1">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="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 = {
  legend: {},
  tooltip: {},
  dataset: {
    // Provide a set of data.
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  // Declare an x-axis (category axis).
  // The category map the first column in the dataset by default.
  xAxis: { type: 'category' },
  // Declare a y-axis (value axis).
  yAxis: {},
  // Declare several 'bar' series,
  // every series will auto-map to each column by default.
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
  legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// Provide a set of data.</span>
    source<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">'2015'</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token punctuation">,</span> <span class="token string">'2017'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token number">43.3</span><span class="token punctuation">,</span> <span class="token number">85.8</span><span class="token punctuation">,</span> <span class="token number">93.7</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token number">83.1</span><span class="token punctuation">,</span> <span class="token number">73.4</span><span class="token punctuation">,</span> <span class="token number">55.1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token number">86.4</span><span class="token punctuation">,</span> <span class="token number">65.2</span><span class="token punctuation">,</span> <span class="token number">82.5</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token string">'Walnut Brownie'</span><span class="token punctuation">,</span> <span class="token number">72.4</span><span class="token punctuation">,</span> <span class="token number">53.9</span><span class="token punctuation">,</span> <span class="token number">39.1</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">// Declare an x-axis (category axis).</span>
  <span class="token comment">// The category map the first column in the dataset by default.</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Declare a y-axis (value axis).</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// Declare several 'bar' series,</span>
  <span class="token comment">// every series will auto-map to each column by default.</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</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>Or try to use the "array of classes" format:</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 = {
  legend: {},
  tooltip: {},
  dataset: {
    // Define the dimension of array. In cartesian coordinate system,
    // if the type of x-axis is category, map the first dimension to
    // x-axis by default, the second dimension to y-axis.
    // You can also specify 'series.encode' to complete the map
    // without specify dimensions. Please see below.

    dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
      { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
      { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
      { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
  legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// Define the dimension of array. In cartesian coordinate system,</span>
    <span class="token comment">// if the type of x-axis is category, map the first dimension to</span>
    <span class="token comment">// x-axis by default, the second dimension to y-axis.</span>
    <span class="token comment">// You can also specify 'series.encode' to complete the map</span>
    <span class="token comment">// without specify dimensions. Please see below.</span>

    dimensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token punctuation">,</span> <span class="token string">'2017'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    source<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token operator">:</span> <span class="token number">43.3</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token operator">:</span> <span class="token number">85.8</span><span class="token punctuation">,</span> <span class="token string">'2017'</span><span class="token operator">:</span> <span class="token number">93.7</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token operator">:</span> <span class="token number">83.1</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token operator">:</span> <span class="token number">73.4</span><span class="token punctuation">,</span> <span class="token string">'2017'</span><span class="token operator">:</span> <span class="token number">55.1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token operator">:</span> <span class="token number">86.4</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token operator">:</span> <span class="token number">65.2</span><span class="token punctuation">,</span> <span class="token string">'2017'</span><span class="token operator">:</span> <span class="token number">82.5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token operator">:</span> <span class="token number">72.4</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token operator">:</span> <span class="token number">53.9</span><span class="token punctuation">,</span> <span class="token string">'2017'</span><span class="token operator">:</span> <span class="token number">39.1</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</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> <h2 id="map-from-data-to-chart" tabindex="-1">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">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">series.encode</a> and <a href="https://echarts.apache.org/option.html##visualMap">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" tabindex="-1">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="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 = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['product', '2012', '2013', '2014', '2015'],
      ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
      ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
      ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
    ]
  },
  xAxis: [
    { type: 'category', gridIndex: 0 },
    { type: 'category', gridIndex: 1 }
  ],
  yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
  grid: [{ bottom: '55%' }, { top: '55%' }],
  series: [
    // These series will show in the first coordinate, each series map a row in dataset.
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    { type: 'bar', seriesLayoutBy: 'row' },
    // These series will show in the second coordinate, each series map a column in dataset.
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
  ]
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
  legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
    source<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">'2012'</span><span class="token punctuation">,</span> <span class="token string">'2013'</span><span class="token punctuation">,</span> <span class="token string">'2014'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token number">41.1</span><span class="token punctuation">,</span> <span class="token number">30.4</span><span class="token punctuation">,</span> <span class="token number">65.1</span><span class="token punctuation">,</span> <span class="token number">53.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token number">86.5</span><span class="token punctuation">,</span> <span class="token number">92.1</span><span class="token punctuation">,</span> <span class="token number">85.7</span><span class="token punctuation">,</span> <span class="token number">83.1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token number">24.1</span><span class="token punctuation">,</span> <span class="token number">67.2</span><span class="token punctuation">,</span> <span class="token number">79.5</span><span class="token punctuation">,</span> <span class="token number">86.4</span><span class="token punctuation">]</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span> gridIndex<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> type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span> gridIndex<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>
  yAxis<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> gridIndex<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> gridIndex<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>
  grid<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> bottom<span class="token operator">:</span> <span class="token string">'55%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> top<span class="token operator">:</span> <span class="token string">'55%'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">// These series will show in the first coordinate, each series map a row in dataset.</span>
    <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> seriesLayoutBy<span class="token operator">:</span> <span class="token string">'row'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> seriesLayoutBy<span class="token operator">:</span> <span class="token string">'row'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> seriesLayoutBy<span class="token operator">:</span> <span class="token string">'row'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// These series will show in the second coordinate, each series map a column in dataset.</span>
    <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> xAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> yAxisIndex<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> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> xAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> yAxisIndex<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> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> xAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> yAxisIndex<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> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> xAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> yAxisIndex<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><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>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by">this case</a>.</p> <h2 id="dimension" tabindex="-1">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="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> option1 <span class="token operator">=</span> <span class="token punctuation">{</span>
  dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
    dimensions<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'score'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// can be abbreviated as 'string', to indicate dimension name 。</span>
      <span class="token string">'amount'</span><span class="token punctuation">,</span>
      <span class="token comment">// Specify dimensions in 'type'.</span>
      <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'product'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'ordinal'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    source<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> option2 <span class="token operator">=</span> <span class="token punctuation">{</span>
  dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
    source<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>
  series<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
    <span class="token comment">// series.dimensions will cover the config in dataset.dimension</span>
    dimensions<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// use null if you do not want dimension name.</span>
      <span class="token string">'amount'</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'product'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'ordinal'</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <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">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-(series.encode)" tabindex="-1">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">series.encode</a> to make a mapping:</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: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Milk Tea'],
      [74.4, 41032, 'Cheese Cocoa'],
      [50.1, 12755, 'Cheese Brownie'],
      [89.7, 20145, 'Matcha Cocoa'],
      [68.1, 79146, 'Tea'],
      [19.6, 91852, 'Orange Juice'],
      [10.6, 101852, 'Lemon Juice'],
      [32.7, 20112, 'Walnut Brownie']
    ]
  },
  xAxis: {},
  yAxis: { type: 'category' },
  series: [
    {
      type: 'bar',
      encode: {
        // Map "amount" column to x-axis.
        x: 'amount',
        // Map "product" row to y-axis.
        y: 'product'
      }
    }
  ]
};</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>
  dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
    source<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">[</span><span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'amount'</span><span class="token punctuation">,</span> <span class="token string">'product'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">89.3</span><span class="token punctuation">,</span> <span class="token number">58212</span><span class="token punctuation">,</span> <span class="token string">'Matcha Latte'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">57.1</span><span class="token punctuation">,</span> <span class="token number">78254</span><span class="token punctuation">,</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">74.4</span><span class="token punctuation">,</span> <span class="token number">41032</span><span class="token punctuation">,</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">50.1</span><span class="token punctuation">,</span> <span class="token number">12755</span><span class="token punctuation">,</span> <span class="token string">'Cheese Brownie'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">89.7</span><span class="token punctuation">,</span> <span class="token number">20145</span><span class="token punctuation">,</span> <span class="token string">'Matcha Cocoa'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">68.1</span><span class="token punctuation">,</span> <span class="token number">79146</span><span class="token punctuation">,</span> <span class="token string">'Tea'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">19.6</span><span class="token punctuation">,</span> <span class="token number">91852</span><span class="token punctuation">,</span> <span class="token string">'Orange Juice'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">10.6</span><span class="token punctuation">,</span> <span class="token number">101852</span><span class="token punctuation">,</span> <span class="token string">'Lemon Juice'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">32.7</span><span class="token punctuation">,</span> <span class="token number">20112</span><span class="token punctuation">,</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">]</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      encode<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// Map "amount" column to x-axis.</span>
        x<span class="token operator">:</span> <span class="token string">'amount'</span><span class="token punctuation">,</span>
        <span class="token comment">// Map "product" row to y-axis.</span>
        y<span class="token operator">:</span> <span class="token string">'product'</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><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>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="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Supported in every coordinate and series:</span>
encode<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token comment">// Display the value of dimension named "product" and "score" in tooltip.</span>
  tooltip<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">]</span>
  <span class="token comment">// Connect dimension name of "Dimension 1" and "Dimension 3" as the series name. (Avoid to repeat longer names in series.name)</span>
  seriesName<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">// Means to use the value in "Dimension 2" as the id. It makes the new and old data correspond by id</span>
	<span class="token comment">// when using setOption to update data, so that it can show animation properly.</span>
  itemId<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token comment">// The itemName will show in the legend of Pie Charts.</span>
  itemName<span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span>

<span class="token comment">// Grid/cartesian coordinate unique configs:</span>
encode<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token comment">// Map "Dimension 1", "Dimension 5" and "dimension named 'score'" to x-axis:</span>
  x<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token comment">// Map "Dimension 0" to y-axis:</span>
  y<span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span>

<span class="token comment">// singleAxis unique configs:</span>
encode<span class="token operator">:</span> <span class="token punctuation">{</span>
  single<span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span>

<span class="token comment">// Polar coordinate unique configs:</span>
encode<span class="token operator">:</span> <span class="token punctuation">{</span>
  radius<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  angle<span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>

<span class="token comment">// Geo-coordinate unique configs:</span>
encode<span class="token operator">:</span> <span class="token punctuation">{</span>
  lng<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  lat<span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>

<span class="token comment">// For some charts without coordinate like pie chart, funnel chart:</span>
encode<span class="token operator">:</span> <span class="token punctuation">{</span>
  value<span class="token operator">:</span> <span class="token number">3</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>This is a richer <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1">example</a> of <code>series.encode</code>.</p> <h2 id="default-series.encode" tabindex="-1">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">example</a>.</p> <h2 id="some-normal-settings-of-series.encode" tabindex="-1">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="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>
  series<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// dimensionIndex count from 0, so the 3rd line is dimensions[2].</span>
    encode<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">4</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></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>Q: How to set the 3rd row as x-axis, 5th row as y-axis?</p> <p>A:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
  series<span class="token operator">:</span> <span class="token punctuation">{</span>
    encode<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
    seriesLayoutBy<span class="token operator">:</span> <span class="token string">'row'</span>
    <span class="token comment">// ...</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>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">label.formatter</a>:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>series<span class="token operator">:</span> <span class="token punctuation">{</span>
  label<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// `'{@score}'` means the value in the dimension named "score".</span>
    <span class="token comment">// `'{@[4]}'` means the value in dimension 4.</span>
    formatter<span class="token operator">:</span> <span class="token string">'aaa{@product}bbb{@score}ccc{@[4]}ddd'</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>Q: How to show the 2nd and 3rd column in the tooltip?</p> <p>A:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
  series<span class="token operator">:</span> <span class="token punctuation">{</span>
    encode<span class="token operator">:</span> <span class="token punctuation">{</span>
      tooltip<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span>
      <span class="token comment">// ...</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></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>Q: How to define the dimension name if is not included in the dataset?</p> <p>A:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
    dimensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'amount'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    source<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">[</span><span class="token number">89.3</span><span class="token punctuation">,</span> <span class="token number">3371</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">92.1</span><span class="token punctuation">,</span> <span class="token number">8123</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">94.4</span><span class="token punctuation">,</span> <span class="token number">1954</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">85.4</span><span class="token punctuation">,</span> <span class="token number">829</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>Q: How to map the 3rd column to the size of the scatter chart?</p> <p>A:</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: {
    source: [
      [12, 323, 11.2],
      [23, 167, 8.3],
      [81, 284, 12],
      [91, 413, 4.1],
      [13, 287, 13.5]
    ]
  },
  visualMap: {
    show: false,
    dimension: 2, // means the 3rd column
    min: 2, // lower bound
    max: 15, // higher bound
    inRange: {
      // Size of the bubble.
      symbolSize: [5, 60]
    }
  },
  xAxis: {},
  yAxis: {},
  series: {
    type: 'scatter'
  }
};</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>
  dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
    source<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">323</span><span class="token punctuation">,</span> <span class="token number">11.2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">167</span><span class="token punctuation">,</span> <span class="token number">8.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">81</span><span class="token punctuation">,</span> <span class="token number">284</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">91</span><span class="token punctuation">,</span> <span class="token number">413</span><span class="token punctuation">,</span> <span class="token number">4.1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">[</span><span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">,</span> <span class="token number">13.5</span><span class="token punctuation">]</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  visualMap<span class="token operator">:</span> <span class="token punctuation">{</span>
    show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    dimension<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// means the 3rd column</span>
    min<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// lower bound</span>
    max<span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token comment">// higher bound</span>
    inRange<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// Size of the bubble.</span>
      symbolSize<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'scatter'</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>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" tabindex="-1">Visual Channel Mapping</h2> <p>We can map visual channel by using <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a>. Check details in the <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> document. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0">example</a>.</p> <h2 id="formats-of-charts" tabindex="-1">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">dsv</a> or <a href="https://github.com/mholt/PapaParse">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">seriesLayoutBy</a> in this format right now.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    <span class="token comment">// column by column key-value array is a normal format</span>
    source<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> count<span class="token operator">:</span> <span class="token number">823</span><span class="token punctuation">,</span> score<span class="token operator">:</span> <span class="token number">95.8</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> count<span class="token operator">:</span> <span class="token number">235</span><span class="token punctuation">,</span> score<span class="token operator">:</span> <span class="token number">81.4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> count<span class="token operator">:</span> <span class="token number">1042</span><span class="token punctuation">,</span> score<span class="token operator">:</span> <span class="token number">91.2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">,</span> count<span class="token operator">:</span> <span class="token number">988</span><span class="token punctuation">,</span> score<span class="token operator">:</span> <span class="token number">76.9</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">// row by row key-value</span>
    source<span class="token operator">:</span> <span class="token punctuation">{</span>
      product<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      count<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">823</span><span class="token punctuation">,</span> <span class="token number">235</span><span class="token punctuation">,</span> <span class="token number">1042</span><span class="token punctuation">,</span> <span class="token number">988</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      score<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">95.8</span><span class="token punctuation">,</span> <span class="token number">81.4</span><span class="token punctuation">,</span> <span class="token number">91.2</span><span class="token punctuation">,</span> <span class="token number">76.9</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="how-to-reference-several-datasets" tabindex="-1">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">series.datasetIndex</a>. For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
  dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token comment">// 1st Dataset</span>
      source<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 comment">// 2nd Dataset</span>
      source<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 comment">// 3rd Dataset。</span>
      source<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>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token comment">// Use 2nd dataset</span>
      datasetIndex<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 comment">// Use 1st dataset</span>
      datasetIndex<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> <h2 id="series.data-in-echarts-3" tabindex="-1">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">series.data</a>, then use <a href="https://echarts.apache.org/option.html##series.data">series.data</a> but not <code>dataset</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>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'2015'</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">89.3</span><span class="token punctuation">,</span> <span class="token number">92.1</span><span class="token punctuation">,</span> <span class="token number">94.4</span><span class="token punctuation">,</span> <span class="token number">85.4</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'2016'</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">95.8</span><span class="token punctuation">,</span> <span class="token number">89.4</span><span class="token punctuation">,</span> <span class="token number">91.2</span><span class="token punctuation">,</span> <span class="token number">76.9</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'2017'</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">97.7</span><span class="token punctuation">,</span> <span class="token number">83.1</span><span class="token punctuation">,</span> <span class="token number">92.5</span><span class="token punctuation">,</span> <span class="token number">78.1</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>In fact, <a href="https://echarts.apache.org/option.html##series.data">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">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph">graph</a> and <a href="https://echarts.apache.org/option.html##series-lines">lines</a> still cannot be edit in dataset, you still need to use <a href="https://echarts.apache.org/option.html##series.data">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">appendData</a> which is not supported by <code>dataset</code>.</p> <h2 id="others" tabindex="-1">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">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</p></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/dataset.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/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><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><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Bruce20190410" target="_blank" class="post-contributor"><img alt="Bruce20190410" src="https://avatars.githubusercontent.com/Bruce20190410?size=60"> <span>Bruce20190410</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,t,i,a,o,d,s,n,g,l,c,r,I,h,C,p,A,m,u,b,y,B,w,f,G,Z,W,v,L,X,H,N,J,Y,M,F,z,S,x,D,V,R,O,j,k,E,T,Q,K,U,P,q,_,$,ee,te,ie,ae,oe){return{layout:"default",data:[{html:'<h1 id="dataset" tabindex="-1">Dataset</h1>\n<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 &quot;data and configs&quot;. After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p>\n<h2 id="define-data-under-series" tabindex="-1">Define <code>data</code> under <code>series</code></h2>\n<p>If data is defined under <code>series</code>, for example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>Define <code>data</code> under <code>series</code> is suitable for customization for some special data structures such as &quot;tree&quot;, &quot;graph&quot; and large data.\nHowever, 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>\n<h2 id="define-data-in-dataset" tabindex="-1">Define <code>data</code> in <code>dataset</code></h2>\n<p>Here are the advantages if you define <code>data</code> in <code>dataset</code>:</p>\n<ul>\n<li>Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</li>\n<li>Divide data from other configurations. The data often change but others not. It is\nEasy to manage separately.</li>\n<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>\n<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>\n</ul>\n<p>Here is a simple <code>dataset</code> example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8gUHJvdmlkZSBhIHNldCBvZiBkYXRhLgogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDE1JywgJzIwMTYnLCAnMjAxNyddLAogICAgICBbJ01hdGNoYSBMYXR0ZScsIDQzLjMsIDg1LjgsIDkzLjddLAogICAgICBbJ01pbGsgVGVhJywgODMuMSwgNzMuNCwgNTUuMV0sCiAgICAgIFsnQ2hlZXNlIENvY29hJywgODYuNCwgNjUuMiwgODIuNV0sCiAgICAgIFsnV2FsbnV0IEJyb3duaWUnLCA3Mi40LCA1My45LCAzOS4xXQogICAgXQogIH0sCiAgLy8gRGVjbGFyZSBhbiB4LWF4aXMgKGNhdGVnb3J5IGF4aXMpLgogIC8vIFRoZSBjYXRlZ29yeSBtYXAgdGhlIGZpcnN0IGNvbHVtbiBpbiB0aGUgZGF0YXNldCBieSBkZWZhdWx0LgogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICAvLyBEZWNsYXJlIGEgeS1heGlzICh2YWx1ZSBheGlzKS4KICB5QXhpczoge30sCiAgLy8gRGVjbGFyZSBzZXZlcmFsICdiYXInIHNlcmllcywKICAvLyBldmVyeSBzZXJpZXMgd2lsbCBhdXRvLW1hcCB0byBlYWNoIGNvbHVtbiBieSBkZWZhdWx0LgogIHNlcmllczogW3sgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9LCB7IHR5cGU6ICdiYXInIH1dCn07\'" v-bind="{}" />\n<p>Or try to use the &quot;array of classes&quot; format:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8gRGVmaW5lIHRoZSBkaW1lbnNpb24gb2YgYXJyYXkuIEluIGNhcnRlc2lhbiBjb29yZGluYXRlIHN5c3RlbSwKICAgIC8vIGlmIHRoZSB0eXBlIG9mIHgtYXhpcyBpcyBjYXRlZ29yeSwgbWFwIHRoZSBmaXJzdCBkaW1lbnNpb24gdG8KICAgIC8vIHgtYXhpcyBieSBkZWZhdWx0LCB0aGUgc2Vjb25kIGRpbWVuc2lvbiB0byB5LWF4aXMuCiAgICAvLyBZb3UgY2FuIGFsc28gc3BlY2lmeSAnc2VyaWVzLmVuY29kZScgdG8gY29tcGxldGUgdGhlIG1hcAogICAgLy8gd2l0aG91dCBzcGVjaWZ5IGRpbWVuc2lvbnMuIFBsZWFzZSBzZWUgYmVsb3cuCgogICAgZGltZW5zaW9uczogWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgJzIwMTUnOiA0My4zLCAnMjAxNic6IDg1LjgsICcyMDE3JzogOTMuNyB9LAogICAgICB7IHByb2R1Y3Q6ICdNaWxrIFRlYScsICcyMDE1JzogODMuMSwgJzIwMTYnOiA3My40LCAnMjAxNyc6IDU1LjEgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgJzIwMTUnOiA4Ni40LCAnMjAxNic6IDY1LjIsICcyMDE3JzogODIuNSB9LAogICAgICB7IHByb2R1Y3Q6ICdXYWxudXQgQnJvd25pZScsICcyMDE1JzogNzIuNCwgJzIwMTYnOiA1My45LCAnMjAxNyc6IDM5LjEgfQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<h2 id="map-from-data-to-chart" tabindex="-1">Map from Data to Chart</h2>\n<p>The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</p>\n<p>In short, you can set these configs of mapping:</p>\n<ul>\n<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">series.seriesLayoutBy</a> to configure it. The default is to map according to the column.</li>\n<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">series.encode</a> and <a href="https://echarts.apache.org/option.html##visualMap">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>\n</ul>\n<p>The details of the configuration are shown below:</p>\n<h2 id="map-row-or-column-of-dataset-to-series" tabindex="-1">Map Row or Column of <code>dataset</code> to <code>series</code></h2>\n<p>After having the dataset, you can configure flexibly: how the data map to the axis and graph series.</p>\n<p>You can use <code>seriesLayoutBy</code> to change the understanding of row and column of the chart. <code>seriesLayoutBy</code> can be:</p>\n<ul>\n<li>\'column\': Default, the series are placed above the column of <code>dataset</code>.</li>\n<li>\'row\': The series is placed above the row of <code>dataset</code>.</li>\n</ul>\n<p>Check this case:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDEyJywgJzIwMTMnLCAnMjAxNCcsICcyMDE1J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDEuMSwgMzAuNCwgNjUuMSwgNTMuM10sCiAgICAgIFsnTWlsayBUZWEnLCA4Ni41LCA5Mi4xLCA4NS43LCA4My4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCAyNC4xLCA2Ny4yLCA3OS41LCA4Ni40XQogICAgXQogIH0sCiAgeEF4aXM6IFsKICAgIHsgdHlwZTogJ2NhdGVnb3J5JywgZ3JpZEluZGV4OiAwIH0sCiAgICB7IHR5cGU6ICdjYXRlZ29yeScsIGdyaWRJbmRleDogMSB9CiAgXSwKICB5QXhpczogW3sgZ3JpZEluZGV4OiAwIH0sIHsgZ3JpZEluZGV4OiAxIH1dLAogIGdyaWQ6IFt7IGJvdHRvbTogJzU1JScgfSwgeyB0b3A6ICc1NSUnIH1dLAogIHNlcmllczogWwogICAgLy8gVGhlc2Ugc2VyaWVzIHdpbGwgc2hvdyBpbiB0aGUgZmlyc3QgY29vcmRpbmF0ZSwgZWFjaCBzZXJpZXMgbWFwIGEgcm93IGluIGRhdGFzZXQuCiAgICB7IHR5cGU6ICdiYXInLCBzZXJpZXNMYXlvdXRCeTogJ3JvdycgfSwKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAncm93JyB9LAogICAgeyB0eXBlOiAnYmFyJywgc2VyaWVzTGF5b3V0Qnk6ICdyb3cnIH0sCiAgICAvLyBUaGVzZSBzZXJpZXMgd2lsbCBzaG93IGluIHRoZSBzZWNvbmQgY29vcmRpbmF0ZSwgZWFjaCBzZXJpZXMgbWFwIGEgY29sdW1uIGluIGRhdGFzZXQuCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0KICBdCn07\'" v-bind="{}" />\n<p>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by">this case</a>.</p>\n<h2 id="dimension" tabindex="-1">Dimension</h2>\n<p>Most of the data described in commonly used charts is a &quot;two-dimensional table&quot; 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 &quot;dimension&quot; and each row was called &quot;item&quot;, vice versa.</p>\n<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>\n<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>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbjEgPSB7CiAgZGF0YXNldDogewogICAgZGltZW5zaW9uczogWwogICAgICB7IG5hbWU6ICdzY29yZScgfSwKICAgICAgLy8gY2FuIGJlIGFiYnJldmlhdGVkIGFzICdzdHJpbmcnLCB0byBpbmRpY2F0ZSBkaW1lbnNpb24gbmFtZSDjgIIKICAgICAgJ2Ftb3VudCcsCiAgICAgIC8vIFNwZWNpZnkgZGltZW5zaW9ucyBpbiAndHlwZScuCiAgICAgIHsgbmFtZTogJ3Byb2R1Y3QnLCB0eXBlOiAnb3JkaW5hbCcgfQogICAgXSwKICAgIHNvdXJjZTogW10KICB9CiAgLy8gLi4uCn07Cgp2YXIgb3B0aW9uMiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFtdCiAgfSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdsaW5lJywKICAgIC8vIHNlcmllcy5kaW1lbnNpb25zIHdpbGwgY292ZXIgdGhlIGNvbmZpZyBpbiBkYXRhc2V0LmRpbWVuc2lvbgogICAgZGltZW5zaW9uczogWwogICAgICBudWxsLCAvLyB1c2UgbnVsbCBpZiB5b3UgZG8gbm90IHdhbnQgZGltZW5zaW9uIG5hbWUuCiAgICAgICdhbW91bnQnLAogICAgICB7IG5hbWU6ICdwcm9kdWN0JywgdHlwZTogJ29yZGluYWwnIH0KICAgIF0KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<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>\n<p>Dimension type can be the following values:</p>\n<ul>\n<li><code>\'number\'</code>: Default, normal data.</li>\n<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>\n<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">data</a> for more time type support.</li>\n<li><code>\'float\'</code>: Use <code>TypedArray</code> to optimize the performance in <code>\'float\'</code> dimension.</li>\n<li><code>\'int\'</code>: Use <code>TypedArray</code> to optimize the performance in <code>\'int\'</code> dimension.</li>\n</ul>\n<h2 id="map-from-data-to-charts-(series.encode)" tabindex="-1">Map from Data to Charts (series.encode)</h2>\n<p>After understand the concept of dimension, you can use <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> to make a mapping:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWydzY29yZScsICdhbW91bnQnLCAncHJvZHVjdCddLAogICAgICBbODkuMywgNTgyMTIsICdNYXRjaGEgTGF0dGUnXSwKICAgICAgWzU3LjEsIDc4MjU0LCAnTWlsayBUZWEnXSwKICAgICAgWzc0LjQsIDQxMDMyLCAnQ2hlZXNlIENvY29hJ10sCiAgICAgIFs1MC4xLCAxMjc1NSwgJ0NoZWVzZSBCcm93bmllJ10sCiAgICAgIFs4OS43LCAyMDE0NSwgJ01hdGNoYSBDb2NvYSddLAogICAgICBbNjguMSwgNzkxNDYsICdUZWEnXSwKICAgICAgWzE5LjYsIDkxODUyLCAnT3JhbmdlIEp1aWNlJ10sCiAgICAgIFsxMC42LCAxMDE4NTIsICdMZW1vbiBKdWljZSddLAogICAgICBbMzIuNywgMjAxMTIsICdXYWxudXQgQnJvd25pZSddCiAgICBdCiAgfSwKICB4QXhpczoge30sCiAgeUF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZW5jb2RlOiB7CiAgICAgICAgLy8gTWFwICJhbW91bnQiIGNvbHVtbiB0byB4LWF4aXMuCiAgICAgICAgeDogJ2Ftb3VudCcsCiAgICAgICAgLy8gTWFwICJwcm9kdWN0IiByb3cgdG8geS1heGlzLgogICAgICAgIHk6ICdwcm9kdWN0JwogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>The basic structure of <code>series.encode</code> declaration:</p>\n<ul>\n<li>To the left of the colon: Specific name of axis or label.</li>\n<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>\n</ul>\n<p>Generally, the following info is not necessary to be defined. Fill in as needed.</p>\n<p>Attribute suggested by <code>series.encode</code></p>\n<md-code-block lang="js" code="\'Ly8gU3VwcG9ydGVkIGluIGV2ZXJ5IGNvb3JkaW5hdGUgYW5kIHNlcmllczoKZW5jb2RlOiB7CiAgLy8gRGlzcGxheSB0aGUgdmFsdWUgb2YgZGltZW5zaW9uIG5hbWVkICJwcm9kdWN0IiBhbmQgInNjb3JlIiBpbiB0b29sdGlwLgogIHRvb2x0aXA6IFsncHJvZHVjdCcsICdzY29yZSddCiAgLy8gQ29ubmVjdCBkaW1lbnNpb24gbmFtZSBvZiAiRGltZW5zaW9uIDEiIGFuZCAiRGltZW5zaW9uIDMiIGFzIHRoZSBzZXJpZXMgbmFtZS4gKEF2b2lkIHRvIHJlcGVhdCBsb25nZXIgbmFtZXMgaW4gc2VyaWVzLm5hbWUpCiAgc2VyaWVzTmFtZTogWzEsIDNdLAogIC8vIE1lYW5zIHRvIHVzZSB0aGUgdmFsdWUgaW4gIkRpbWVuc2lvbiAyIiBhcyB0aGUgaWQuIEl0IG1ha2VzIHRoZSBuZXcgYW5kIG9sZCBkYXRhIGNvcnJlc3BvbmQgYnkgaWQKCS8vIHdoZW4gdXNpbmcgc2V0T3B0aW9uIHRvIHVwZGF0ZSBkYXRhLCBzbyB0aGF0IGl0IGNhbiBzaG93IGFuaW1hdGlvbiBwcm9wZXJseS4KICBpdGVtSWQ6IDIsCiAgLy8gVGhlIGl0ZW1OYW1lIHdpbGwgc2hvdyBpbiB0aGUgbGVnZW5kIG9mIFBpZSBDaGFydHMuCiAgaXRlbU5hbWU6IDMKfQoKLy8gR3JpZC9jYXJ0ZXNpYW4gY29vcmRpbmF0ZSB1bmlxdWUgY29uZmlnczoKZW5jb2RlOiB7CiAgLy8gTWFwICJEaW1lbnNpb24gMSIsICJEaW1lbnNpb24gNSIgYW5kICJkaW1lbnNpb24gbmFtZWQgJ3Njb3JlJyIgdG8geC1heGlzOgogIHg6IFsxLCA1LCAnc2NvcmUnXSwKICAvLyBNYXAgIkRpbWVuc2lvbiAwIiB0byB5LWF4aXM6CiAgeTogMAp9CgovLyBzaW5nbGVBeGlzIHVuaXF1ZSBjb25maWdzOgplbmNvZGU6IHsKICBzaW5nbGU6IDMKfQoKLy8gUG9sYXIgY29vcmRpbmF0ZSB1bmlxdWUgY29uZmlnczoKZW5jb2RlOiB7CiAgcmFkaXVzOiAzLAogIGFuZ2xlOiAyCn0KCi8vIEdlby1jb29yZGluYXRlIHVuaXF1ZSBjb25maWdzOgplbmNvZGU6IHsKICBsbmc6IDMsCiAgbGF0OiAyCn0KCi8vIEZvciBzb21lIGNoYXJ0cyB3aXRob3V0IGNvb3JkaW5hdGUgbGlrZSBwaWUgY2hhcnQsIGZ1bm5lbCBjaGFydDoKZW5jb2RlOiB7CiAgdmFsdWU6IDMKfQ\'" line-highlights="\'\'" />\n<p>This is a richer <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1">example</a> of <code>series.encode</code>.</p>\n<h2 id="default-series.encode" tabindex="-1">Default series.encode</h2>\n<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>\n<ul>\n<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>\n<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>\n</ul>\n<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">example</a>.</p>\n<h2 id="some-normal-settings-of-series.encode" tabindex="-1">Some Normal Settings of series.encode</h2>\n<p>Q: How to set the 3rd column as x-axis, 5th column as y-axis?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgLy8gZGltZW5zaW9uSW5kZXggY291bnQgZnJvbSAwLCBzbyB0aGUgM3JkIGxpbmUgaXMgZGltZW5zaW9uc1syXS4KICAgIGVuY29kZTogeyB4OiAyLCB5OiA0IH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>Q: How to set the 3rd row as x-axis, 5th row as y-axis?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfSwKICAgIHNlcmllc0xheW91dEJ5OiAncm93JwogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Q: How to set the 2nd column as a label?</p>\n<p>A:\nWe now support to trace value from specific dimension for <a href="https://echarts.apache.org/option.html##series.label.formatter">label.formatter</a>:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgbGFiZWw6IHsKICAgIC8vIGAne0BzY29yZX0nYCBtZWFucyB0aGUgdmFsdWUgaW4gdGhlIGRpbWVuc2lvbiBuYW1lZCAic2NvcmUiLgogICAgLy8gYCd7QFs0XX0nYCBtZWFucyB0aGUgdmFsdWUgaW4gZGltZW5zaW9uIDQuCiAgICBmb3JtYXR0ZXI6ICdhYWF7QHByb2R1Y3R9YmJie0BzY29yZX1jY2N7QFs0XX1kZGQnOwogIH0KfQ\'" line-highlights="\'\'" />\n<p>Q: How to show the 2nd and 3rd column in the tooltip?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7CiAgICAgIHRvb2x0aXA6IFsxLCAyXQogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>Q: How to define the dimension name if is not included in the dataset?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBkaW1lbnNpb25zOiBbJ3Njb3JlJywgJ2Ftb3VudCddLAogICAgc291cmNlOiBbCiAgICAgIFs4OS4zLCAzMzcxXSwKICAgICAgWzkyLjEsIDgxMjNdLAogICAgICBbOTQuNCwgMTk1NF0sCiAgICAgIFs4NS40LCA4MjldCiAgICBdCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Q: How to map the 3rd column to the size of the scatter chart?</p>\n<p>A:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWzEyLCAzMjMsIDExLjJdLAogICAgICBbMjMsIDE2NywgOC4zXSwKICAgICAgWzgxLCAyODQsIDEyXSwKICAgICAgWzkxLCA0MTMsIDQuMV0sCiAgICAgIFsxMywgMjg3LCAxMy41XQogICAgXQogIH0sCiAgdmlzdWFsTWFwOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIGRpbWVuc2lvbjogMiwgLy8gbWVhbnMgdGhlIDNyZCBjb2x1bW4KICAgIG1pbjogMiwgLy8gbG93ZXIgYm91bmQKICAgIG1heDogMTUsIC8vIGhpZ2hlciBib3VuZAogICAgaW5SYW5nZTogewogICAgICAvLyBTaXplIG9mIHRoZSBidWJibGUuCiAgICAgIHN5bWJvbFNpemU6IFs1LCA2MF0KICAgIH0KICB9LAogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnc2NhdHRlcicKICB9Cn07\'" v-bind="{}" />\n<p>Q: I specified a mapping in encode, why it is not worked?</p>\n<p>A: Check your spelling, such as misspell the dimension name <code>\'Life Expectancy\'</code> to <code>\'Life Expectency\'</code> in encode.</p>\n<h2 id="visual-channel-mapping" tabindex="-1">Visual Channel Mapping</h2>\n<p>We can map visual channel by using <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a>. Check details in the <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> document. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0">example</a>.</p>\n<h2 id="formats-of-charts" tabindex="-1">Formats of Charts</h2>\n<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>\n<blockquote>\n<p>You can switch .csv file to JSON using tools like <a href="https://github.com/d3/d3-dsv">dsv</a> or <a href="https://github.com/mholt/PapaParse">PapaParse</a>.</p>\n</blockquote>\n<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>\n<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">seriesLayoutBy</a> in this format right now.</p>\n<md-code-block lang="js" code="\'ZGF0YXNldDogWwogIHsKICAgIC8vIGNvbHVtbiBieSBjb2x1bW4ga2V5LXZhbHVlIGFycmF5IGlzIGEgbm9ybWFsIGZvcm1hdAogICAgc291cmNlOiBbCiAgICAgIHsgcHJvZHVjdDogJ01hdGNoYSBMYXR0ZScsIGNvdW50OiA4MjMsIHNjb3JlOiA5NS44IH0sCiAgICAgIHsgcHJvZHVjdDogJ01pbGsgVGVhJywgY291bnQ6IDIzNSwgc2NvcmU6IDgxLjQgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgY291bnQ6IDEwNDIsIHNjb3JlOiA5MS4yIH0sCiAgICAgIHsgcHJvZHVjdDogJ1dhbG51dCBCcm93bmllJywgY291bnQ6IDk4OCwgc2NvcmU6IDc2LjkgfQogICAgXQogIH0sCiAgewogICAgLy8gcm93IGJ5IHJvdyBrZXktdmFsdWUKICAgIHNvdXJjZTogewogICAgICBwcm9kdWN0OiBbJ01hdGNoYSBMYXR0ZScsICdNaWxrIFRlYScsICdDaGVlc2UgQ29jb2EnLCAnV2FsbnV0IEJyb3duaWUnXSwKICAgICAgY291bnQ6IFs4MjMsIDIzNSwgMTA0MiwgOTg4XSwKICAgICAgc2NvcmU6IFs5NS44LCA4MS40LCA5MS4yLCA3Ni45XQogICAgfQogIH0KXTs\'" line-highlights="\'\'" />\n<h2 id="how-to-reference-several-datasets" tabindex="-1">How to Reference Several Datasets</h2>\n<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">series.datasetIndex</a>. For example:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIDFzdCBEYXRhc2V0CiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIDJuZCBEYXRhc2V0CiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIDNyZCBEYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICAvLyBVc2UgMm5kIGRhdGFzZXQKICAgICAgZGF0YXNldEluZGV4OiAyCiAgICB9LAogICAgewogICAgICAvLyBVc2UgMXN0IGRhdGFzZXQKICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<h2 id="series.data-in-echarts-3" tabindex="-1">series.data in ECharts 3</h2>\n<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">series.data</a>, then use <a href="https://echarts.apache.org/option.html##series.data">series.data</a> but not <code>dataset</code>.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>In fact, <a href="https://echarts.apache.org/option.html##series.data">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">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph">graph</a> and <a href="https://echarts.apache.org/option.html##series-lines">lines</a> still cannot be edit in dataset, you still need to use <a href="https://echarts.apache.org/option.html##series.data">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">appendData</a> which is not supported by <code>dataset</code>.</p>\n<h2 id="others" tabindex="-1">Others</h2>\n<p>The following charts now support dataset:\n<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>.\nECharts will support more charts in the future.</p>\n<p>In the end, here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-link">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</p>\n',postPath:"en/concepts/dataset"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:o},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:s},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:g,draft:e},{title:"寻求帮助",dir:l},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"v4 升级 v5 指南",dir:I},{title:5.2,dir:h},{title:5.3,dir:C}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:b},{title:"数据集",dir:y},{title:"数据转换",dir:B},{title:"坐标系",dir:w,draft:e},{title:"坐标轴",dir:f},{title:"视觉映射",dir:i},{title:"图例",dir:G},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:X},{title:"动态排序柱状图",dir:H},{title:"极坐标系柱状图",dir:N,draft:e},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:x}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:D},{title:"圆环图",dir:V},{title:"南丁格尔图（玫瑰图）",dir:R}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:j}]}]},{title:k,dir:t,draft:e},{title:"跨平台方案",dir:E,children:[{title:"服务端渲染",dir:T},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:K},{title:"数据下钻",dir:U,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"动画",dir:q,children:[{title:"数据过渡动画",dir:_}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:ee,draft:e}]}]},{title:"最佳实践",dir:te,children:[{title:k,dir:t,draft:e},{title:ie,dir:ae},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:oe}]}],en:[{title:"Get Started",dir:o},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:s},{title:"Import ECharts",dir:n},{title:"Resources",dir:g,draft:e},{title:"Get Help",dir:l},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:r},{title:"Migration from v4 to v5",dir:I},{title:5.2,dir:h},{title:5.3,dir:C}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:y},{title:"Data Transform",dir:B},{title:"Coordinate",dir:w,draft:e},{title:"Axis",dir:f},{title:"Visual Mapping",dir:i},{title:"Legend",dir:G},{title:"Event and Action",dir:Z}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:X},{title:"Bar Racing",dir:H},{title:"Bar Polar",dir:N,draft:e},{title:"Waterfall",dir:J}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:x}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:D},{title:"Ring Style",dir:V},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:E,children:[{title:"Server Side Rendering",dir:T}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:K},{title:"Drilldown",dir:U,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Animation",dir:q,children:[{title:"Data Transition",dir:_}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:ee,draft:e}]}]},{title:"Best Practices",dir:te,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ie,dir:ae},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:oe}]}]},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/dataset",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-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","server","data","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/5870c6f.js" defer></script><script src="/handbook/_nuxt/js/d63042719a059a581645.js" defer></script><script src="/handbook/_nuxt/js/4f3ab71f990e271ccbe4.js" defer></script><script src="/handbook/_nuxt/js/f74f8c0f406ea2522d04.js" defer></script><script src="/handbook/_nuxt/js/e96421e0f27cc5a35348.js" defer></script><script src="/handbook/_nuxt/js/d6226697ecb43e03cd0d.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");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=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>