| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css"> |
| <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/b6d3b58.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/f5e7518d240a121a2e4a.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3279306.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/4c789e610fc01b03106d.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/c3bcbe3.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/25eb9ce4c1818917d228.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/11b97ca97d591d9fd371.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5e2cbf163a319fa7cf5b.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/3279306.css"><link rel="stylesheet" href="/handbook/_nuxt/css/c3bcbe3.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css"><link rel="preload" href="/handbook/_nuxt/static/1627882506/zh/concepts/dataset/state.js" as="script"><link rel="preload" href="/handbook/_nuxt/static/1627882506/zh/concepts/dataset/payload.js" as="script"><link rel="preload" href="/handbook/_nuxt/static/1627882506/manifest.js" as="script"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="数据集"><a href="#%E6%95%B0%E6%8D%AE%E9%9B%86" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据集</h1> |
| <p><code>数据集</code>（<code>dataset</code>）是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据，但是从 ECharts4 支持 <code>数据集</code> 开始，更推荐使用 <code>数据集</code> 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。</p> |
| <h2 id="在系列中设置数据"><a href="#%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在系列中设置数据</h2> |
| <p>如果数据设置在 <code>系列</code>（<code>series</code>）中，例如：</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <p>这种方式的优点是，适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。 |
| 但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p> |
| <h2 id="在数据集中设置数据"><a href="#%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在数据集中设置数据</h2> |
| <p>而数据设置在 <code>数据集</code>（<code>dataset</code>）中，会有这些好处：</p> |
| <ul> |
| <li>能够贴近数据可视化常见思维方式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。</li> |
| <li>数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。</li> |
| <li>数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。</li> |
| <li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li> |
| </ul> |
| <p>下面是一个最简单的 <code>dataset</code> 的例子：</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <p>或者也可以使用常见的“对象数组”的格式：</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <h2 id="数据到图形的映射"><a href="#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据到图形的映射</h2> |
| <p>如上所述，数据可视化的一个常见思路是：（I）提供数据，（II）指定数据到视觉的映射。</p> |
| <p>简而言之，可以进行这些映射的设定：</p> |
| <ul> |
| <li>指定 <code>数据集</code> 的列（column）还是行（row）映射为 <code>系列</code>（<code>series</code>）。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li> |
| <li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> 属性，以及 <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> 组件来配置（如果有需要映射颜色大小等视觉维度的话）。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 <code>dataset.source</code> 中的第一列；三个柱图系列，一一对应到 <code>dataset.source</code> 中后面每一列。</li> |
| </ul> |
| <p>下面详细解释这些映射的设定。</p> |
| <h2 id="把数据集（-dataset-）的行或列映射为系列（series）"><a href="#%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>把数据集（ dataset ）的行或列映射为系列（series）</h2> |
| <p>有了数据表之后，使用者可以灵活地配置：数据如何对应到轴和图形系列。</p> |
| <p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p> |
| <ul> |
| <li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li> |
| <li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li> |
| </ul> |
| <p>看这个例子：</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <h2 id="维度（-dimension-）"><a href="#%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>维度（ dimension ）</h2> |
| <p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（ series ）对应到“列”的时候，那么每一列就称为一个“维度（ dimension ）”，而每一行称为数据项（ item ）。反之，如果我们把系列（ series ）对应到表行，那么每一行就是“维度（ dimension ）”，每一列就是数据项（ item ）。</p> |
| <p>维度可以有单独的名字，便于在图表中显示。维度名（ dimension name ）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始，才是正式的数据。<code>dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code>dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p> |
| <p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（ dimension type ）：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <p>大多数情况下，我们并不需要去设置维度类型，因为 ECharts 会自动尝试判断。但是如果不足够准确时，可以手动设置维度类型。</p> |
| <p>维度类型（ dimension type ）可以取这些值：</p> |
| <ul> |
| <li><code>'number'</code>: 默认，表示普通数据。</li> |
| <li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确，所以使用者也可以手动强制指定。</li> |
| <li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（<a href="https://echarts.apache.org/option.html##xAxis.type" rel="nofollow noopener noreferrer" target="_blank">axis.type</a> 为 <code>'time'</code>）上，那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">data</a>。</li> |
| <li><code>'float'</code>: 如果设置成 <code>'float'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li> |
| <li><code>'int'</code>: 如果设置成 <code>'int'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li> |
| </ul> |
| <h2 id="数据到图形的映射（-seriesencode-）"><a href="#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-seriesencode-%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据到图形的映射（ series.encode ）</h2> |
| <p>了解了维度的概念后，我们就可以使用 <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> 来做映射。总体是这样的感觉：</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <p><code>series.encode</code> 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称，如 <code>'x'</code>, <code>'y'</code>, <code>'tooltip'</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p> |
| <p>下面是 <code>series.encode</code> 支持的属性：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <p>这是个更丰富的 <code>series.encode</code> 的 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">示例</a> 。</p> |
| <h2 id="默认的-seriesencode"><a href="#%E9%BB%98%E8%AE%A4%E7%9A%84-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>默认的 series.encode</h2> |
| <p>值得一提的是，当 <code>series.encode</code> 并没有指定时，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K 线图等）、饼图、漏斗图，会采用一些默认的映射规则。默认的映射规则比较简单，大体是：</p> |
| <ul> |
| <li>在坐标系中（如直角坐标系、极坐标系等） |
| <ul> |
| <li>如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</li> |
| <li>如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。</li> |
| </ul> |
| </li> |
| <li>如果没有坐标系（如饼图） |
| <ul> |
| <li>取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。</li> |
| </ul> |
| </li> |
| </ul> |
| <p>默认的规则不能满足要求时，就可以自己来配置 <code>encode</code>，也并不复杂。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">例子</a>。</p> |
| <h2 id="几个常见的-seriesencode-设置方式举例"><a href="#%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-seriesencode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>几个常见的 series.encode 设置方式举例</h2> |
| <p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p> |
| <p>答：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <p>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p> |
| <p>答：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <p>问：如何把第二列设置为标签？</p> |
| <p>答： |
| 关于标签的显示 <a href="https://echarts.apache.org/option.html##series.label.formatter" rel="nofollow noopener noreferrer" target="_blank">label.formatter</a>，现在支持引用特定维度的值，例如：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <p>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p> |
| <p>答：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <p>问：数据里没有维度名，那么怎么给出维度名？</p> |
| <p>答：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <p>问：如何把第三列映射为气泡图的点的大小？</p> |
| <p>答：</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <p>问：encode 里指定了映射，但是不管用？</p> |
| <p>答：可以查查有没有拼错，比如，维度名是：<code>'Life Expectancy'</code>，encode 中拼成了 <code>'Life Expectency'</code>。</p> |
| <h2 id="视觉通道（颜色、尺寸等）的映射"><a href="#%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>视觉通道（颜色、尺寸等）的映射</h2> |
| <p>我们可以使用 <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> 组件进行视觉通道的映射。详见 <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> 文档的介绍。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">示例</a>。</p> |
| <h2 id="数据的各种格式"><a href="#%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据的各种格式</h2> |
| <p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p> |
| <blockquote> |
| <p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href="https://github.com/d3/d3-dsv" rel="nofollow noopener noreferrer" target="_blank">dsv</a> 或者 <a href="https://github.com/mholt/PapaParse" rel="nofollow noopener noreferrer" target="_blank">PapaParse</a> 将 csv 转成 JSON。</p> |
| </blockquote> |
| <p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p> |
| <p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">seriesLayoutBy</a> 参数。</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <h2 id="多个-dataset-以及如何引用他们"><a href="#%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>多个 dataset 以及如何引用他们</h2> |
| <p>可以同时定义多个 dataset。系列可以通过 <a href="https://echarts.apache.org/option.html##series.datasetIndex" rel="nofollow noopener noreferrer" target="_blank">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</p> |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div> |
| <h2 id="echarts-3-的数据设置方式（seriesdata）仍正常使用"><a href="#echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88seriesdata%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>ECharts 3 的数据设置方式（series.data）仍正常使用</h2> |
| <p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>， 那么就会使用 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> 而非 <code>dataset</code>。</p> |
| <div class="nuxt-content-highlight"><!----></div> |
| <p>其实，<a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <a href="https://echarts.apache.org/option.html##series-treemap" rel="nofollow noopener noreferrer" target="_blank">treemap</a>、<a href="https://echarts.apache.org/option.html##series-graph" rel="nofollow noopener noreferrer" target="_blank">graph</a>、<a href="https://echarts.apache.org/option.html##series-lines" rel="nofollow noopener noreferrer" target="_blank">lines</a> 等，现在仍不支持在 dataset 中设置，仍然需要使用 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 <a href="api.html#echartsInstance.appendData">appendData</a> 进行增量加载，这种情况不支持使用 <code>dataset</code>。</p> |
| <h2 id="其他"><a href="#%E5%85%B6%E4%BB%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>其他</h2> |
| <p>目前并非所有图表都支持 dataset。支持 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>。 |
| 后续会有更多的图表进行支持。</p> |
| <p>最后，给出这个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">示例</a>，多个图表共享一个 <code>dataset</code>，并带有联动交互。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE">在系列中设置数据</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE">在数据集中设置数据</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84">数据到图形的映射</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89">把数据集（ dataset ）的行或列映射为系列（series）</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89">维度（ dimension ）</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-seriesencode-%EF%BC%89">数据到图形的映射（ series.encode ）</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E9%BB%98%E8%AE%A4%E7%9A%84-seriesencode">默认的 series.encode</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-seriesencode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B">几个常见的 series.encode 设置方式举例</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84">视觉通道（颜色、尺寸等）的映射</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F">数据的各种格式</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC">多个 dataset 以及如何引用他们</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88seriesdata%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8">ECharts 3 的数据设置方式（series.data）仍正常使用</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E5%85%B6%E4%BB%96">其他</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/dataset.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script defer src="/handbook/_nuxt/static/1627882506/zh/concepts/dataset/state.js"></script><script src="/handbook/_nuxt/b6d3b58.js" defer></script><script src="/handbook/_nuxt/js/11b97ca97d591d9fd371.js" defer></script><script src="/handbook/_nuxt/js/5e2cbf163a319fa7cf5b.js" defer></script><script src="/handbook/_nuxt/js/f5e7518d240a121a2e4a.js" defer></script><script src="/handbook/_nuxt/js/4c789e610fc01b03106d.js" defer></script><script src="/handbook/_nuxt/js/25eb9ce4c1818917d228.js" defer></script> |
| <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| </body> |
| </html> |
